Esta regla se activa cuando PageSpeed Insights detecta que las imágenes de la página analizada pueden optimizarse para reducir su tamaño de archivo sin afectar significativamente la calidad visual.
Descripción
A menudo, las imágenes representan la mayor parte de los bytes que se descargan en una página. Por tanto, optimizar imágenes suele ser uno de los mejores métodos para ahorrar bytes y mejorar el rendimiento, puesto que cuantos menos bytes tengan que descargar los navegadores, menos competencia habrá por el ancho de banda del cliente y más rápido podrán descargar y renderizar los navegadores el contenido.
Recomendaciones
Para determinar el formato y la estrategia de optimización ideales que aplicar a tus recursos de imagen, tienes que analizar minuciosamente varios aspectos: el tipo de datos que se codifican, las capacidades del formato de imagen, la configuración de calidad y la resolución, entre otros. También te interesa considerar si sería mejor publicar algunas imágenes en formato vectorial, si puedes conseguir los efectos que quieres con CSS y cómo entregar los recursos para que se adapten a los diferentes tipos de dispositivos.
Optimizaciones aplicables a todos los tipos de imágenes
- Prácticas recomendadas para publicar imágenes adaptables
- Lista de comprobación para la optimización de imágenes individuales
Optimizaciones aplicables a las imágenes GIF, PNG y JPEG
Las imágenes en formato GIF, PNG y JPEG suponen el 96 % del total de imágenes de Internet. Debido a su popularidad, PageSpeed Insights ofrece recomendaciones específicas para optimizar imágenes de cada uno de estos formatos. Para tu comodidad, puedes descargar las imágenes optimizadas directamente de PageSpeed Insights, que usa la biblioteca de optimización de imágenes de modpagespeed.com.
Si lo prefieres, también puedes utilizar herramientas como el binario convert, creado por ImageMagick, que puede aplicar optimizaciones similares. Consulta las instrucciones de ejemplo que se indican más adelante.
Si tus imágenes ya están bien optimizadas, es posible que al usar herramientas de terceros las imágenes aumenten de tamaño. En tal caso, usa las originales.
Los formatos GIF y PNG son formatos de compresión sin pérdida, ya que no se produce ningún cambio visual en las imágenes al comprimirlas. En el caso de imágenes fijas, con el formato PNG se consigue una tasa de compresión y una calidad visual mejores. En el caso de imágenes animadas, en cambio, te recomendamos que, para lograr una mejor compresión, uses un elemento video en lugar del formato GIF.
- Convierte siempre imágenes GIF a PNG salvo que la original sea animada o minúscula (con un tamaño inferior a unos cientos de bytes).
- Si todos los píxeles son opacos, elimina el canal alfa tanto de las imágenes GIF como de las PNG.
Por ejemplo, en el binario convert puedes optimizar tus imágenes GIF y PNG con el siguiente comando (los parámetros entre corchetes son opcionales):
convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
convert cuppa.png -strip cuppa_converted.png
El formato JPEG es un formato con pérdida de datos; es decir, el proceso de compresión elimina información visual de las imágenes. No obstante, la tasa de compresión puede ser 10 veces mayor que la de los formatos GIF y PNG.
- Si la calidad es superior a 85, redúcela hasta este número. Con una calidad superior a 85, las imágenes aumentan de tamaño rápidamente a cambio de muy pocas mejoras visuales.
- Reduce el muestreo de crominancia a 4:2:0, ya que el ojo humano es más sensible a la luminancia que a los colores.
- Usa el formato progresivo en las imágenes de más de 10 kB. El formato JPEG progresivo suele tener una tasa de compresión más alta que el JPEG estándar en el caso de imágenes grandes y, además, ofrece las ventajas de un renderizado progresivo.
- Utiliza una escala de grises en las imágenes en blanco y negro.
Por ejemplo, en el binario convert puedes optimizar tus imágenes JPEG con el siguiente comando (los parámetros entre corchetes son opcionales):
convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg
