¿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 y trabaja como Consultor Web Freelance con su marca personal MauGelves. Se especializó en WordPress para ofrecer soluciones personalizadas y rentables a medianas y largas empresas. Es Nómade Digital desde el año 2015, actividad que combina sus dos principales pasiones: la informática y los viajes, y refleja sus experiencias a través de sus hobbies audiovisuales en Instagram y YouTube.
10 Pasos para ser Freelance - eBook Gratuito

10 pasos para convertirte en Freelance

Descarga en forma totalmente gratuita mi eBook en donde explico los 10 pasos que he dado para convertirme en Freelance.

Ingresa tu email y recibe en tu bandeja de correo el enlace para descargarte el eBook.

(Te doy mi palabra que solo enviaré un email al mes con todas mis novedades)


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

  1. Hola Mauricio, muchas gracias por la info clara! y felicitarte por el diseño limpio de tu sitio.

    PD: en el snippet de author-info tenes un error de autocorrector o algo asi: «Se especializó en WordPress para ofrecer soluciones personalizadas y rentables a medianas y — LARGAS — empresas» y tu pagina de contacto no estaria funcionando.

    Saludos!

    1. Hola y gracias por el Feedback.
      Lamentablemente no puedo replicar el problema que indicas. Veo el snippet correctamente.
      Y con respecto a la página de contacto, en realidad NO HAY página de contacto, es un simple link que abre tu cliente de email.
      Un saludo,
      Mauricio

  2. 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

  3. 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 una respuesta

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