Blog personal de IT, viajes y otros hobbies

jpg formato progresivo

¿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

Anterior

WPESCamp 2017 Plencia – El resumen

Siguiente

De nómade digital por: Mérida (España)

  1. Estudio Zoko

    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!

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

    • 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. Recien empiezo y este tipo de tips son muy buenos. Gracias.

  4. 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 *

Funciona con WordPress & Tema de Anders Norén