29 Marzo, 2017

Por qué es importante optimizar imágenes para web?

optimizar imágenes para web

Optimizar imágenes para web

Uno de los aspectos más importantes que influyen en el buen rendimiento de una página web, son las imágenes. Optimizar imágenes para web es uno de los primeros pasos.

Como ya bien sabrás, con el paso del tiempo puedes ir acumulando gran cantidad de ellas. Ya que son fundamentales para captar la atención de los usuarios. Y que estén optimizadas te ayudará a reducir los tiempos de carga de tu web y por tanto que ésta cargue rápido. Como te contamos en el anterior artículo sobre la velocidad de carga hay tres cosas que se ven afectadas positivamente por una buena velocidad de carga: La indexación, la tasa de rebote y la conversión. Y esto a su vez mejora el posicionamiento web. Todo está relacionado.


optimizar imágenes para web > reduce velocidad de carga web > mejora posicionamiento web


Qué formatos existen y cuál debo utilizar

Podemos resumir los formatos de imagen principalmente en cuatro, aunque hay más. Pero con conocer estos formatos te vale y te sobra para integrar tus imágenes a tu web o a tu blog.

  • gif

Es un formato desarrollado por Compuserve. No tiene pérdidas y soporta hasta 256 colores. Lo cuál reduce considerablemente el tamaño de las imágenes, por eso no es recomendable para imágenes fotográficas de alta resolución. Admite transparencias y normalmente es utilizado para web. Está prácticamente obsoleto en cuanto al estricto uso de imagen. Actualmente ha resurgido con el uso masivo de los “memes” ya que es un formato que admite animaciones (transición entre varias imágenes).

  • jpg

Es el formato más conocido y utilizado en el mundo de la imagen digital. Pero por su sistema de compresión tiene pérdidas. Si abres y editas un jpg, al descomprimirse y volver a comprimirse, el archivo pierde un poco de calidad. Por lo cuál, es recomendable trabajar siempre con formatos nativos como .raw o .psd o formatos que no tengan pérdidas (.tiff ) y generar los .jpg para la imagen final. Ideal para imágenes fotográficas en alta resolución ya que soporta 16 millones de colores. Aunque no admite transparencias.

  • png

Es un formato que no tiene pérdidas. Nació como sustituto del .gif ya que admite transparencias de mejor calidad. Muy utilizado en web. Sobretodo para los iconos, logotipos e imágenes geométricas con grandes espacios en color plano.

  • tiff

Es un formato desarrollado por Aldus que tampoco tiene pérdidas. Soporta hasta 16 millones de colores y admite transparencias y capas. Ofrece muy buena calidad en fotografías de alta resolución. Es compatible con la mayoría de los dispositivos y está optimizado para escanear e imprimir. Lo único que sus archivos suelen ser bastante pesados. Y obviamente no es recomendable para web.


Herramientas para optimizar mis imágenes

Para la comprimir y optimizar imágenes para web se utilizan dos métodos muchas veces de manera simultánea. Por un lado y el principal, es trabajar de manera correcta las imágenes en Photoshop y después con alguna herramienta online de optimización intentar reducir el tamaño. Normalmente son gratuitas y reducen el peso sin una gran pérdida de calidad. Pero si no utilizas Phostoshop puedes utilizar directamente las siguientes herramientas.

JPEGmini

Es una herramienta muy sencilla que te permite subir fotografías .jpg seleccionando o arrastrando un archivo desde tu ordenador a la interface de la web. Comprime bastante bien las imágenes aunque en ocasiones si ya tienes optimizada la imagen desde Photoshop, no te la reduce más. Sólo puedes cargar y descargar las imágenes de una en una por lo que a veces se queda corto.

Optimizar imágenes para web JPEGmini

TinyPNG

Esta otra plataforma es una de mis preferidas. Tiene una interface bastante sencilla y agradable y al igual que en la anterior subes las imágenes seleccionando o arrastrando desde tu computadora. La ventaja es que sirve para ambas extensiones (.jpeg y .png). funciona perfectamente y tiene una mejor compresión de JPEGmini. Además puedes subir varias imágenes a la vez y posteriormente descargarlas todas ellas en un .zip. Otro punto a favor es que tiene un plugin que puedes instalar en WordPress para integrar la optimización en tu CMS.

Optimizar imágenes para web TinyPNG

COMPRESSOR.io

Esta plataforma es otra buena herramienta de optimización. Consigue comprimir hasta un 90% el tamaño de las imágenes y soporta hasta cuatro formatos diferentes (gif, jpeg, png y svg). Además tiene dos tipos de compresión dependiendo de lo que necesites específicamente.

Optimizar imágenes para web Compressorio


PHOTOSHOP

Cuando trabajas en Photoshop, debes tener en cuenta algunas reglas básicas de trabajo. Es decir, como vas a crear imágenes para web, debes trabajar siempre a una resolución de 72ppp con el modelo de color RGB (de los Espacios y Perfiles de Color ya hablaremos en otro post). Partiendo de esta base y una vez finalizada la imagen llega el momento de exportar. En este punto te recomiendo que siempre utilices archivo > guardar para web

optimizar imágenes para web Photoshop

En la ventana emergente podrás seleccionar el formato en el que deseas exportar la imagen. Si seleccionas .jpeg puedes elegir la calidad (70-90 recomendado) y si quieres la carga progresiva u optimizada. La primera te carga la imagen de una sóla vez pero no con la calidad real. Es decir, visualizas la imagen de manera inmediata pero la calidad se ve progresivamente en 1-2 segundos.

Y si selecicionas .png pues puedes elegir entre png8 o png24. Este último abarca una paleta de colores mucho mayor y es más recomendable. También puedes editar si quieres la imagen con transparencia o si quieres que la carga sea entrelazada (similiar a la progresiva de jpeg).


Conclusiones

Tras comprobar por qué es fundamental optimizar imágenes para web, conocer los diferentes formatos y sus características y descubrir algunas herramientas que ayudan a su optimización, sólo te falta convertir estos conocimientos en tu hábito de trabajo y así mejorar tu web, tu posicionamiento y la experiencia del usuario. No hay excusas para trabajar mal y lo sabes 😉

Así que como resumen podemos decir que:

  • Jerarquiza y adecua las proporciones de las imágenes de tu web con las utilizadas en las redes sociales donde suelas compartir habitualmente.
  • Trabaja en RGB a 72ppp siempre que edites para web.
  • Utiliza imágenes de 1000px como máximo y que sus tamaños no superen los 200KB, que ya es demasiado.
  • Exporta en el formato adecuado. PNG para transparencias e imágenes iconográficas o colores planos y JPEG para fotografía.
  • Comprueba los pesos y tamaños (en diferentes formatos con diferentes imágenes) para sacar también tus propias conclusiones.