Esta regla se activa cuando PageSpeed Insights detecta que las imágenes de la página se pueden optimizar para reducir el tamaño de archivo sin afectar significativamente su calidad visual.
Descripción general
A menudo, las imágenes representan la mayor parte de los bytes descargados en una página. Como resultado, la optimización de imágenes a menudo puede generar algunos de los mayores ahorros de bytes y mejoras de rendimiento: cuantos menos bytes deba descargar el navegador, menor será la competencia por el ancho de banda del cliente y más rápido podrá descargar y renderizar contenido en la pantalla.
Recomendaciones
Encontrar el formato óptimo y la estrategia de optimización para los recursos de imagen requiere un análisis cuidadoso de muchas dimensiones: tipo de datos que se codifican, capacidades de formato de imagen, configuración de calidad, resolución y mucho más. Además, debes considerar si algunas imágenes se entregan mejor en un formato vectorial, si se pueden lograr los efectos deseados mediante CSS y cómo entregar recursos con las escalas adecuadas para cada tipo de dispositivo.
Optimizaciones para todo tipo de imágenes
- Sigue las prácticas recomendadas para publicar imágenes responsivas.
- Sigue la lista de tareas de optimización de imágenes para imágenes individuales
Optimizaciones para imágenes GIF, PNG y JPEG
Los formatos GIF, PNG y JPEG constituyen el 96% de todo el tráfico de imágenes de Internet. Debido a su popularidad, PageSpeed Insights proporciona recomendaciones de optimización específicas. 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).
También puedes usar herramientas como el objeto binario convert de ImageMagick, que puede aplicar optimizaciones similares. Consulta las instrucciones de ejemplo a continuación.
Si usas herramientas de terceros, ten en cuenta que la transformación podría hacer que tus imágenes se vean más grandes, si las tuyas ya estaban muy bien optimizadas. En ese caso, usa tus originales.
GIF y PNG son formatos sin pérdida, ya que el proceso de compresión no realiza ninguna modificación visual en las imágenes. Para las imágenes fijas, PNG logra una mejor relación de compresión con mejor calidad visual. En el caso de las imágenes animadas, te recomendamos usar el elemento video en lugar de un GIF para lograr una mejor compresión.
- Siempre convierte GIF a PNG, a menos que el original sea animado o pequeño (menos de cientos de bytes).
- En el caso de GIF y PNG, quita el canal alfa si todos los píxeles son opacos.
Por ejemplo, puedes usar convert binario para 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
JPEG es un formato con pérdidas. El proceso de compresión quita los detalles visuales de la imagen, pero la proporción de compresión puede ser 10 veces mayor que GIF o PNG.
- Reduce la calidad a 85 si es superior. Con una calidad superior a 85, la imagen se agranda rápidamente, mientras que la mejora visual es pequeña.
- Se reduce el muestreo de croma a 4:2:0, ya que el sistema visual humano es menos sensible a los colores en comparación con la luminancia.
- Usa el formato progresivo para imágenes que superen los 10,000 bytes. El JPEG progresivo suele tener una proporción de compresión más alta que el JPEG de referencia para las imágenes grandes y ofrece los beneficios de la renderización progresiva.
- Usa el espacio de color en escala de grises si la imagen es en blanco y negro.
Por ejemplo, puedes usar convert binary (convertir objeto binario) para 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
Comentarios
¿Te sirvió esta página?