Las imágenes suponen un alto porcentaje del total de recursos descargados en una página web. Actualmente existen multitud de formatos de imagen, los más importantes y reconocibles son JPEG, PNG, SVG o GIF. Optimizar imágenes, supone de facto, mejorar de forma considerable el rendimiento de una página web. Herramientas como Google Page Speed Insight (PSI), Lighthouse o Gtmetrix entre otros, ponen especial atención en la optimización de imágenes. Una página bien optimizada y rápida, tendrá un mejor trato en los motores de búsqueda e indexación.
Normalmente cuando se quiere optimizar las imágenes de un sitio web, se realizan una serie de pasos con tal que conseguir un nivel óptimo de optimización. Estos pasos serían los siguientes:
- Escoger el formato adecuado de acuerdo a nuestras necesidades.
- Escoger las dimensiones exactas. Igual o inferior a lo deseado.
- Adaptar las imágenes de forma inteligente y proporcionada.
- Compresión de imágenes (métodos).
- Prioridad de imágenes que se encuentren en zonas críticas.
- Utilización de LazyLoad o IntersectionObserver para zonas no críticas.
En este artículo se abordará el paso 4, correspondiente a la compresión de imágenes, poniendo especial énfasis en el formato JPEG. Si deseas obtener una información más detallada y minuciosa sobre la optimización de imágenes, os recomiendo la lectura del artículo Essential Image Optimization de Addy Osmani.
Antes de empezar, hay que tener claros dos conceptos: loss y lossless.
- Loss u optimización con pérdida, es un método de optimización que descarta información de la propia imagen afectando a la calidad.
- Lossless u optimización sin pérdida, es un método de optimización que descarta la información adicional sin afectar a la calidad de la imagen.
Optimizar imágenes de forma automatizada
El proceso de optimización de imágenes de forma automatizada se puede conseguir utilizando:
- herramientas como imagemin o libvps en la parte de desarrollo.
- CDNs como Akamai, Cloudinary, imgix, etc.
- alguna API como la de ImageOptim API.
Optimizar imágenes JPEG
Actualmente MozJPEG basado en (libjpeg-turbo) es uno de compresores más prometedores para el formato JPEG. Aunque actualmente Guetzli obtiene mejores resultados, los tiempos de compresión son altísimos y poco productivos por el momento (20 minutos/1MB).
Existen diferentes métodos de compresión para el formato JPEG. Los dos modos más populares son baseline y progressive.
- Baseline: es el modo por defecto en la mayoría de los editores de imágenes, su codificación se realiza de arriba abajo. En conexiones lentas, las imágenes ser irán formando por tramos horizontales hasta completar la imagen.
- Progressive: divide la imagen en tres escaneados completos. El primero de ellos, con una calidad muy baja, el segundo con una calidad intermedia y el tercero mostrará la imagen con total nitidez.
Actualmente la mayoría de imágenes JPEG son progressive (PJPEG). Este formato permiten ahorrar entre un 2-10% en comparación con el tipo baseline, para aquellas imágenes que superen los 10KB. Por lo tanto, para imágenes menores a 10KB debemos optar por utilizar el método de compresión baseline.
Optimizar imágenes PNG
Para optimizar imágenes PNG utilizar pngquant.
Optimizar imágenes SVG
Para optimizar imágenes SVG utilizar SVGO.
Optimizar imágenes GIF
Para optimizar imágenes GIF utilizar gifsicle.
No recomiendo el uso de imágenes GIF, sobretodo si estas superan los 100KB. Como alternativa a este formato puedes optar servir la imagen GIF en formato H.264 (MP4) o utilizar el formato WebM de Google (actualmente compatible con Chrome, Firefox y Opera).
Para convertir imágenes GIF a MP4 utilizar ffmpeg.
Consideraciones finales
- Evita la re-compresión de imágenes JPEG (comprimir desde el origen).
- La calidad de compresión para JPEG entre q=50 y q=80.
- Utiliza siempre PJPEG (Progressive JPEG) para todas las imágenes superiores a 10KB. Para tamaños inferiores utilizar baseline.
- Si tienes posibilidad de servir imágenes de forma condicional (srcset), sería recomendado utilizar WebP y JPEG/PNG como formatos alternativos para navegadores que no soporten dicho formato.
Próximamente explicaré cómo optimizar imágenes en la fase de desarrollo utilizando imagemin con NodeJS.