optimizarimagenes

Optimizar imágenes para Web

optimizar imágenes

Optimizar imágenes para una página Web se puede convertir en un proceso rápido y sencillo, y nos trae unos beneficios increíbles por el tiempo que le vamos a dedicar.

Entre otras cosas os voy a explicar por qué es tan importante optimizar las imágenes.

Vamos a ver los diferentes tipos de imágenes, para que podamos entender por que motivo elegimos un formato y otro, además de aprender tanto en texto como vídeo todo el proceso para optimizar dichas imágenes en distintos programa de edición de imagen.

 

La importancia de optimizar tus imágenes

Hay varios motivos por los que es muy importante subir las imágenes optimizadas a tu página Web.

El más importante es el peso de la página que influye directamente en la velocidad de carga. Si tu página Web es lenta va a aumentar el porcentaje de rebote y vas a perder a muchos usuarios cansados de esperar a que tu página cargue.

Otro problema, y muy grande, si tú página es lenta, es el SEO. A los motores de búsqueda no les gustan las páginas lentas y por lo tanto será un gran problema la hora de posicionarte en los buscadores como Google o Bing. En otro post veremos algunos trucos más para ayudar a posicionar mejor tú página en los buscadores.

Para la navegación móvil también supone un gran problema tener imágenes pesadas o no optimizadas. “En abril de este año 2016 el móvil superó por primera vez al ordenador como medio para acceder a Internet, y la tendencia parece ser que está subiendo“. La velocidad de las redes 3G o 4G no es tan rápida como la fibra óptica que ponen hoy en día en tu casa y con la que navegas con tu ordenador. Esto va a hacer que les consuma mucho ancho de banda a los usuarios y que se cansen de esperar a que les cargue la página.


Características de una imagen

Vamos a ver 2 características importantes para optimizar una imagen, ya que no solo depende del formato y la exportación.

Resolución

La resolución se mide en ppp (píxeles por pulgada) o en inglés ppi (pixels per inch). Una pulgada mide 2,54 cm.

El número de ppp es directamente proporcional a la calidad de la imagen. Es decir, cuantos más ppp mayor calidad. Pero lo que nosotros buscamos es la optimización de la imagen para una página Web, es decir, el equilibrio entre calidad y peso.

Se utilizan principalmente 2 medidas, que son 72 ppp y 300 ppp. Para nuestro objetivo 72 ppp será más que suficiente, la calidad de la imagen será buena y reduciremos su peso. Las imágenes con 300 ppp se suelen utilizar únicamente para impresiones (revistas, periódicos, murales, exposiciones, etc.).

Tamaño

Utilizaremos el tamaño que necesitemos. Antes de editar la imagen necesitamos conocer el tamaño del ancho de su contenedor (donde irá ubicada la imagen). Muchas veces la altura de la imagen no nos condiciona pero otras veces si, en estos casos deberemos también averiguarlo.

Existen varias medidas para trabajar con las imágenes, pero nosotros utilizaremos como unidad el pixel, que es el tamaño con el que trabajan los códigos de una página Web.


Diferentes formatos de imágen

Debemos saber elegir el formato al que exportaremos la imagen dependiendo de sus necesidades. Hay multitud de formatos diferentes de imagen, pero nos centraremos en los 3 que se utilizan para las páginas Web.

Formato .gif

Este formato aunque es muy popular no lo utilizaremos casi nunca, a no ser que queramos una imagen animada. Probablemente eso es lo que hizo a este formato tan popular, la posibilidad de soportar animaciones. Otra las características que lo convertía en un gran formato es que fue el primero en soportar transparencias (actualmente PNG también las soporta). Es un formato limitado a 8 bits, esto quiere decir que como máximo puede tener 256 colores.

ejemplo gif animado
Ejemplo de gif animado

Formato .jpg

Es un formato de imagen con perdidas. Esto quiere decir que no se guarda toda la información de la imagen original descartándose algunos datos, y perdemos calidad al reducir el tamaño. Este es el formato ideal para fotografías y imágenes con muchos detalles, colores, y texturas.

A la hora de exportarlo establecemos el nivel de calidad expresado en un porcentaje, siendo también directamente proporcional a la calidad de la imagen. Un 100 sería la máxima calidad. Nosotros nos deberíamos mover entre un 60 y un 80, dependiendo de la calidad que necesitemos y de la imagen (colores, texturas, etc.).

Ejemplos calidad jpg

Formato .png

Es un formato de imagen sin perdidas. “No reduce tanto el tamaño como el jpg pero la calidad es mayor”. Que no reduce tanto el tamaño no es del todo cierto si sabemos que imágenes exportar a png y cuales a jpg. Vamos a verlo.

Utilizaremos este formato para imágenes que tengan grandes superficies lisas del mismo color. Como por ejemplo capturas de pantalla, logotipos, diseños de banners, etc. También deberemos utilizar esta opción si queremos un fondo transparente (lo podemos considerar una gran superficie lisa).

Hay varias vertientes dentro de este formato, y también hay que saber cual aplicamos en cada caso. Estas vertientes dependen del número de bits, que se traduce en el número de colores.

PNG-8, es un PNG de 8 bits y un máximo de 256 colores. Lo utilizaremos para logotipos y para pocas cosas más.

PNG-24, es un PNG de 24 bits y 16 millones de colores. Con este formato no tendremos perdida de calidad. Sin embargo cuantos más colores tenga la imagen mas pesada será.

Ejemplos colores png


Como optimizar las imágenes

Vamos a ver como optimizar imágenes para Web en 2 softwares diferentes. Uno de pago (el Fireworks de Adobe), y otro  gratuito (el Riot). No hay necesidad de utilizar el paint, hay softwares gratuitos muy potentes.

Optimizar las imágenes con Fireworks

El primer paso sera abrir la imagen y establecer la resolución (72ppp), y el tamaño que necesites para que se ajuste a tus necesidades o al contenedor.

Fireworks Paso1

Una vez hecho esto, iremos al menu de “Archivo” y seleccionaremos la opción “Presentación preliminar de la imagen”

Fireworks paso 2

Por último, trabajaremos en la siguiente pantalla.

Vemos un menú desplegable con los diferentes formatos donde elegiremos el que se adapte a nuestras necesidades. Recordemos que trabajaremos casi siempre con jpg, png-8 y png-24. Una vez seleccionado el formato, debajo tenemos las opciones de calidad, donde optimizaremos la imagen teniendo en cuenta un equilibrio entre calidad y peso.

La calidad de la imagen la observamos en la previsualización de la imagen, y el peso nos lo pone en las características de la imagen en su parte superior.

Fireworks paso 3

Con estos 3 simples pasos tendremos nuestra imagen optimizada y lista para colgar en la Web. Aquí os dejo un vídeo para que podáis observar y seguir los pasos más fácilmente.

 

Optimizar las imágenes con Riot

El primer paso como en el caso anterior va a ser abrir la imagen. En cuanto la abras, si la imagen no esta ya optimizada te saldrá un mensaje que viene a decir esto: “Tu imagen es pesada y Riot tardara mucho tiempo en procesarla. Quieres redimensionarla primero? La imagen original no será modificada“. Entonces le damos que si, y aprovechamos para establecer la resolución y el tamaño de la imagen.

Optimizar imágenes con Riot

Cuando le damos a si, nos saldrá una ventanita donde elegiremos el ancho de la imagen en pixeles. El alto se modifica automáticamente si tenemos activada la opción “Keep aspect ratio”. Le damos a ok y ya tendremos la imagen redimensionada y la primera parte del trabajo hecho.

Optimizar imágenes con Riot

Se nos abrirá la imagen en el programa, donde estableceremos el resto de opciones para la exportación. En la siguiente imagen podemos ver como funciona esta ventana. En color rojo vemos el tamaño de la imagen inicial y el de la imagen optimizada. Entre las 2 imágenes en negro, vemos un pequeño botón que lo que hace es ajustar la imagen a la ventana para facilitarnos el trabajo. Y abajo en verde, donde vamos a optimizar las imágenes: primero tenemos la selección del tipo de imagen (elegiremos jpeg o png, a no ser que sea una imagen con animación), y un poco más abajo la calidad en porcentaje en el caso de jpeg. El resto de opciones no las tocaremos.

Optimizar imágenes con Riot

En el caso de png, solo tocaremos las opción es que salen en rojo en la siguiente imagen. La primera opción es la importante, estás seleccionando el numero de bits, y en el caso de 8bits también el numero de colores. La opción de reducir los colores es para afinar mucho. Yo nunca la he utilizado.

Optimizar imágenes con Riot

Vamos a ver en un vídeo como optimizar rápidamente una imagen con Riot.


Resumen

Recordemos unas cuantas cosas.

Es muy importante optimizar las imágenes para aumentar la velocidad de carga, reducir el numero de usuarios que abandonan tu página, y para el SEO.

Las características principales de una imagen son la resolución y el tamaño. Para Web deberemos utilizar una resolución de 72 ppp,  y el tamaño que necesitemos para que se ajuste al ancho del contenedor.

Los 2 formatos de imagen que más utilizaremos son PNG (para logos y imágenes muy planas con pocos colores), y JPG (para el resto de imágenes, sobre todo fotos).

Tienes 2 vídeos que te enseñan como optimizar en Fireworks y en Riot tus imágenes y dejarlas listas para subir a tu Web.

 

Espero que os haya sido de ayuda. Ahora que sabéis lo importante y fácil que es, no os olvidéis de optimizar vuestras imágenes para la Web.

 

Si te ha gustado hazme un favor y comparte este post. Saludetes!!

Web Hosting

Deja un comentario

 

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies