¿Cómo optimizar las imágenes JPG con el formato progresivo?

A veces aprendo pequeños tips informáticos que te sorprenden por su simplicidad pero que tienen un gran impacto en la usabilidad u optimización de la web. En este caso os hablaré de la importancia de utilizar ficheros de imágenes JPG con formato progresivo.

¿Qué formatos de JPG’s existen?

Existe el fichero JPG con formato progresivo que graba varias capas con distintas calidades. De esta manera, cuando un visitante accede a una web se cargarán las imágenes progresivamente, de menor a mayor calidad mejorando así la experiencia de usuario de nuestra página. Es preferible que el usuario vea algo, aunque sea con poca calidad, a tener espacios vacíos en la estructura de la web. Y para nuestra sorpresa este tipo de formato es más ligero, mejorando así el tiempo de carga (y nuestro SEO finalmente). Con lo cual, a la hora de utilizar imágenes JPG en nuestra web debemos seleccionar este formato.

El otro formato se llama baseline y guarda la imagen con una sola capa con la calidad final. A diferencia del formato anterior su carga en los navegadores es línea a línea.

La siguiente imagen grafica cómo se comporta cada tipo de formato durante la carga de una web en los navegadores.

jpeg progresivo y baseline

Demostración

En estas URL encontraréis dos ficheros con la misma imagen. Uno con formato baseline y otro con el formato progresivo:

El siguiente video muestra cómo se renderizan los archivos en un navegador con una velocidad de carga de 50Kbs/seg (utilizando la funcionalidad de Throttling de Chrome)

 


Herramientas y plugins

Para guardar una imagen en format progresivo podemos utilizar las siguientes herramientas y plugins:

Photoshop

  1. Ir a Archivo » Exportar » Guardar para web
  2. Activar la casilla “Progresivo”

jpg progresivo opción de photoshop

GIMP

  1. Ir a Archivo » Exportar
  2. Exportar el fichero con la extensión jpg
  3. Activar la casilla “Progresivo” dentro de las opciones avanzadas

jpg progresivo opción con gimp

TinyPNG

Esta página web comprime imágenes de varios formatos. En caso que el fichero sea un JPG lo convierte automáticamente a progresivo.

tiny png home

Optimizilla

(Actualización 05/07/2017, gracias Luis)
Esta web brinda los mismos servicios que TinyPNG pero también permite modificar el porcentaje de compresión con un previsualizador bastante chulo.

Logo de Optimizilla

Previsualizador de imágenes de Optimizilla
Previsualizador de imágenes de Optimizilla

EWWW Image Optimizer

EWWW es uno de los mejores plugins de WordPress para optimizar imágenes. Comprime varias extensiones e incluye el formato progresivo para los ficheros del tipo jpg.

EWWW plugin de WordPress para optimizar imágenes

 


¿Qué te pareció el artículo?
No molaPobreMolaMuy bueno¡Excelente! (4 votos, promedio: 5,00 de 5)
Cargando…
Mauricio Gelves
Mauricio Gelves es Lic. en Informática, trabaja como Consultor Web Freelance, es Brand Evangelist de GoDaddy Pro, ponente internacional de WordPress y organizador del Meetup y WordCamp de Madrid. Desde el 2015 es Nómade Digital, actividad que combina sus dos principales pasiones: la informática y los viajes.

5 thoughts on “¿Cómo optimizar las imágenes JPG con el formato progresivo?”

  1. Buenas, gracias por estos consejos ¿Puede que se modifique el tipo de imagen (baseline o progresiva) a la hora de optimizar la fotos? Por ejemplo con optimizilla. Saludos.

    1. Buenas tardes Luis. Acabo de subir una foto “no progresiva” a Optimizilla (que por cierto no lo conocía) y convierte la imagen a progresiva. Puedes usar este servicio sin problemas para optimizar tus imágenes.
      Un saludo,
      Mauricio

  2. El problema que me he encontrado con el plugin EWWW Image Optimizer es que requiere de la activación de la función de PHP exec(), y algunos hostings no quieren activarla porque dicen les crea un problema de vulnerabilidad enn el servidor.
    ¿Sabes de algun otro plugin parecido?
    Gracias y enhorabuena por el post. ¡Muy buenas aportaciones!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *