Optimizar JPEGs: ¿Baseline o Progressive?

Nueva forma de optimizar las imágenes Web: JPEG Progresivos

En este segundo artículo queremos hablar de nuevo de las imágenes, aunque ya cubrimos como optimizar las imágenes para web, mencionamos este formato y nos vemos obligados a desarrollar un poco más porque es tan importante este formato de cara a optimizar el web performance de una página web.

Las imágenes pueden estar en formato progresivo desde mucho antes, pero es ahora cuando más navegadores aceptan su descarga

Los que usáis webpagetest.org para comprobar la velocidad de vuestra página web, habréis podido ver que han incluido recientemente esta nueva característica para ver si las imágenes de la web cargan en formato progresivo o baseline.

Las imágenes son uno de los puntos más importantes en la optimización web, pues son junto al javascript los archivos que suman más tamaño, ganando las imágenes por mucho.

Que diferencia una imagen Baseline de una imagen progressive?

velocidad WebTodo el que navegue con frecuencia por internet ha sentido esto pero quizás no percibas la diferencia ya que si no sabes el concepto es fácil que no veas ninguna diferencia.

Pondré un ejemplo; estás navegando una web, entras en su página y ves un hueco vacío hasta que pasados unos segundos, voilá! Aparece una imagen que antes no estaba. Esto es el formato baseline; la imagen no se muestra hasta que no se descarga por completo, el navegador la interpreta y después, una vez termina este proceso la muestra.

Sin embargo, en la misma situación si el jpeg fuera progresivo, verías que la imagen se carga por capas, la primera de ellas, sería evidentemente de menor calidad que cuando se cargue la imagen completa; pero ya ves la imagen. Y aquí es donde está la gran diferencia, ya que la velocidad que percibe el visitante es incluso más importante que la velocidad real.

 

comparativa-navegadores-jpeg-progressive

 

Bueno, una vez claro que los jpeg en formato progressive son más rápidas que las imágenes en formato baseline pasemos a comentar algunas herramientas para comprobar el estado de los JPEG

Herramientas para comprobar o cambiar estado de JPEGS de baseline a progressive

Evidentemente, no es algo que vayas a dominar ni mucho menos con un simple artículo, pero si sigues las siguientes prácticas, seguro que vas a mejorar muchísimo la carga de tu sitio:

  1. Photoshop. Abrir archivo, click en guardar para web. Si el JPEG es progressive, tendrá activada la casilla “progressive”
  2. Image Optim: Si el archivo resultante tiene menor tamaño, image optimm lo convierte a progressive de forma automática
  3. Smush.it. El maravilloso servicio de la plataforma developer de Yahoo, convierte automáticamente los JPEG de baseline a progresive, ya sea en medio de un proceso de optimización de imágenes vía comandos, o subiendo dichas fotos al servidor de yahoo para descargarlas después manualmente
  4. Google mod_pagespeed: Esta extensión de servidor tiene un filtro que traduce automáticamente cualquier imagen con más de 10kb, automáticamente a formato progressive

¿Como optimizar imágenes para usar en tu web?

La optimización de las imágenes es uno de los puntos más críticos a la hora de optimizar cualquier sitio web: un poco de trabajo y buenas prácticas pueden hacer tu sitio increíblemente más rápido.

¿Qué es optimizar imágenes para web?

Las imágenes creadas con Photoshop e Illustrator son muy buenas, pero por lo general siempre son archivos muy grandes con información extra. El motivo; para poder editar de diferentes maneras, estos programas añaden mucha información no necesaria.

Si cada imagen que tienes en tu web, se puede optimizar un 30 o 40% estás perdiendo ancho de banda y sobre todo, carga instantánea, haciendo que el usuario tenga que esperar para descargar una información en las imágenes que no le aporta nada.

Guardar imágenes para la web consiste en reducir el tamaño del archivo eliminando la información extra, en formatos reproducibles por un navegador web, pero sin perder calidad.

Optimizar las imágenes, aparte de servirlas desde un dominio sin cookies, con gzip y en formato progresivo (si no sabes lo que es, estate atento a nuestro blog, pues lo cubriremos en nuestro siguiente post).

¿En que consiste optimizar imágenes para web?

Como hemos dicho, consiste en convertir la imagen a un formato amigable para los navegadores y eliminar información extra innecesaria, pudiendo ganar hasta un 80% de carga total

Por algo, la optimización de las imágenes está en el top 5 de acciones a revisar ante problemas de web performance.

Hay dos formas de compresión que tenemos que entender, con pérdida y sin pérdida. Las imágenes guardadas en un formato con pérdida se verá un poco diferente de la imagen original sin comprimir. Ten en cuenta que la diferencia es mínima, y que ocupa menor tamaño y usa menos memoria del servidor, por lo que generalmente es la opción recomendada.

Las imágenes guardadas en formato sin pérdida retienen toda la información para producir la imagen original pero son de mayor tamaño, como es de imaginar.

Puntos a revisar para tener imágenes perfectas en tu web

Evidentemente, no es algo que vayas a dominar ni mucho menos con un simple artículo, pero si sigues las siguientes prácticas, seguro que vas a mejorar muchísimo la carga de tu sitio:

  1. Reducir el espacio en blanco alrededor de imágenes
  2. Utiliza formatos de archivo adecuados: jpg, png o gif.Por ejemplo, una imagen png, si el que no tenga fondo no es importante, suele pesar mucho más que jpg el 90% de las veces
  3. Haz las imágenes en el tamaño final: si haces una imagen más grande, el navegador tiene que descargarla al tamaño completo y después redimensionarla, por lo que tarda un tiempo totalmente inútil en descargar más información y después adaptarla
  4. Al añadir las imágenes, añade el tamaño final de la misma, aunque etenga ese tamaño, así ahorras al navegador el tener que identificar el tamaño
  5. Usa sprites con CSS. Mediante CSS, incluyes una imagen conjunta, por ejemplo varios iconos, y ocultas el resto, reduciendo el número de llamadas http, cosa muy importante ya que el navegador descarga los elementos por paquetes y le facilitas la tarea
  6. Usa imágenes progresivas siempre que sea posible. Cada vez es más aceptado por los navegadores modernos y su descarga es mucho más rápida que los jpg normales