Optimizar imágenes para la web (incluye infografía)

Cuando diseñamos una web debemos tener muchos aspectos en cuenta, pero optimizar imágenes es un tema fundamental que no deberemos pasar por alto.

Las nuevas tendencias de diseño hacen que cada vez tengamos más imágenes y más grandes y si dejamos de lado la optimización tendremos dos problemas importantes:

La página tardará en cargar y corremos el riesgo de aumentar el porcentaje de rebote y pérdida de usuarios.
Perderemos posicionamiento, ya que Google mira con malos ojos las páginas que tardan en cargar.

En este post vamos a explicar cómo optimizar las imágenes sea cual sea el diseño o la plataforma CMS que hayas elegido para tu web, ya que esta optimización la realizaremos antes de subir las imágenes a la página.

FORMATOS DE IMAGEN

Elegir el formato adecuado para cada imagen es importante porque de ello dependerá cómo se verá la imagen en la web.

GIF: Este formato soporta transparencias pero solo admite 256 colores, con lo que es un formato en desuso y últimamente solo es utilizado para imágenes animadas.
PNG: También permite transparencias y apareció para sustituir al formato GIF. Dentro de este formato existen dos posibilidades para guardar la imagen, que son PNG-8 (256 colores) y PNG-24 (16.777.216 colores). Como es evidente, PNG-24 ocupa mucho más que PNG-8. Este formato se utiliza para imágenes con transparencias o amplias zonas con un mismo color, logotipos, capturas de pantalla, infografías, etc.
JPG: Es un formato con pérdidas en la compresión, aunque puedes determinar qué nivel de compresión quieres. Se utiliza para las fotografías, sobre todo para las grandes o con mucha resolución.

PROGRAMAS PARA OPTIMIZAR IMÁGENES

Existen muchos programas para optimizar las imágenes, incluso plataformas online que te hacen este trabajo. Nosotros utilizamos estos tres, entre otros:

Inkscape: Editor de gráficos similar a Adobe Illustrator o Corel Draw pero de código abierto y disponible para Linux, Windows y Mac. Con él podemos realizar logotipos, infografías, iconos, botones para nuestra web y podemos guardar en formato vectorial o PNG, que es el que nos interesa para la web.

Gimp: Editor de imágenes de software libre en el que podrás hacer retoques fotográficos, dibujos, infografías o cualquier cosa que se te ocurra para adornar tu web. Es una alternativa a Photoshop y está disponible para casi todos los sistemas operativos.

TinyPNG: Herramienta en línea con la cual podrás optimizar las imágenes PNG sin perder calidad y sin tener que instalar nada en tu ordenador.

CONSEJOS PARA OPTIMIZAR IMÁGENES

Debemos reducir el tamaño de la imagen todo lo que podamos para ahorrar espacio, observa bien el lugar donde colocarás la imagen para dejarla al tamaño adecuado.
Al exportar a PNG desde Inkscape, inténtalo primero con PNG-8; si no te gusta la calidad, cambia a PNG-24, pero reduce la resolución a 72 ppp ya que para la web no hace falta más.
Cuando exportes a JPG desde Gimp escoge siempre que puedas la opción “Guardar para web” y desplaza el cursor de la barra de calidad hacia la izquierda todo lo que puedas para bajar la calidad de la imagen. En Imagen > Escalar la imagen, reduce todo lo que puedas para que quede bien en el sitio donde vas a subir la imagen.
Aunque creas que las has reducido lo suficiente, sube a TinyPNG las imágenes en PNG que tengas para comprobarlo, seguro que te sorprendes.

Si utilizas algún CMS como WordPress en el diseño de tu web, existen infinidad de plugins para optimizar y comprimir las imágenes, puedes revisar este post Mejorar la velocidad de WordPress en el que se habla de uno en concreto.