6 consejos de optimización de imágenes de Google

En un nuevo video de Google, el Developer Advocate Alan Kent comparte seis consejos para optimizar imágenes para sitios web de comercio electrónico.

Si bien el video está dirigido específicamente a sitios de comercio electrónico, el consejo es aplicable a cualquier sitio web que sirva una gran cantidad de imágenes.

Con una duración de más de 14 minutos, el video de Google es mucho para digerir si está ocupado trabajando en sitios web.

Aquí hay un resumen más sabroso que puede consumir en menos de cinco minutos.

Estos son los consejos de Google para hacer que las imágenes se carguen de manera más rápida y eficiente.

1. Eliminar el cambio de diseño acumulativo de imagen (CLS)

CLS se refiere a instancias en las que el contenido de la página se mueve o cambia visualmente de un lugar a otro mientras se carga.

Si bien este problema no es causado exclusivamente por imágenes, pueden contribuir al problema si se usan incorrectamente.

En la mayoría de los casos, CLS es fácil de detectar al buscar movimiento en una página durante la carga, pero existen varias herramientas para medirlo.

Para obtener más información sobre CLS, cómo medirlo y cómo solucionarlo, consulte nuestra guía completa:

2. Tamaño correcto de sus imágenes

Elija el ancho y el alto correctos para sus imágenes, ya que los archivos más grandes tardan más en descargarse.

Cambiar el tamaño de las imágenes correctamente puede ser complicado debido a los rangos de tamaños de pantalla y resoluciones que visitan su sitio.

Si el navegador recorta la imagen por sí solo, el tamaño de la descarga termina siendo más largo de lo necesario, lo que solo reduce las cosas.

Una manera fácil de detectar imágenes de tamaño incorrecto es usando el imágenes de tamaño adecuado sección bajo (*6*) en el Informe de estadísticas de PageSpeed.

Una vez que haya identificado las imágenes que son más grandes de lo necesario, puede solucionar el problema con soluciones como las imágenes receptivas.

3. Utilice el mejor formato de archivo de imagen

Piense en el formato de archivo de sus imágenes, por ejemplo, si desea utilizar archivos PNG, JPEG o webP.

El formato de archivo afecta el tamaño del archivo, por lo que elegir el correcto requiere una cuidadosa consideración.

Hay ventajas y desventajas para sopesar cada formato. Por ejemplo, JPEG y webP tienden a tener tamaños de archivo más bajos, aunque el tamaño más pequeño se logra a expensas de la calidad de la imagen.

Sin embargo, es posible que los compradores no noten una degradación de la calidad de la imagen, y el beneficio de la velocidad podría ser sustancial.

Para detectar si su sitio puede beneficiarse del uso de un formato de imagen diferente, busque en el servir imágenes en formatos de próxima generación del informe de PageSpeed ​​Insights. Este informe enumera las imágenes que se pueden convertir a un formato de archivo más eficiente.

4. Comprime las imágenes apropiadamente

Use el factor de calidad correcto para sus imágenes para codificarlas de manera eficiente mientras conserva la calidad de imagen deseada.

Él Codificar imágenes de manera eficiente La sección del informe PageSpeed ​​Insights se puede utilizar para identificar imágenes que son buenas candidatas para la optimización de la compresión. El informe también muestra posibles ahorros en el tamaño de los archivos.

Para encontrar un factor de calidad con el que esté satisfecho, use la herramienta de conversión de imágenes que elija en varias imágenes con diferentes valores de calidad y compare el antes y el después.

Google recomienda el sitio Squoosh.app como una forma fácil de comparar imágenes con y sin compresión.

5. Imágenes de caché en el navegador

Dígale al navegador cuánto tiempo puede almacenar imágenes en caché de forma segura.

Cuando devuelve una imagen, puede devolver un encabezado de respuesta HTTP con orientación de almacenamiento en caché, como por cuánto tiempo se recomienda que un navegador almacene en caché una imagen.

Nuevamente, puede usar el informe de PageSpeed ​​Insights para detectar si los encabezados de caché de respuesta HTTP se configuraron correctamente en su sitio.

Él servir activos estáticos con una política de caché eficiente La sección identifica las imágenes que pueden beneficiarse de las mejoras de almacenamiento en caché.

Para solucionar problemas en su sitio, vea si tiene configuraciones de plataforma o servidor web que pueda cambiar para ajustar la vida útil del caché para las imágenes en su sitio.

Si no cambia las imágenes con frecuencia, puede configurar una vida útil de caché larga.

6. Secuenciar correctamente las descargas de imágenes

Como consejo más avanzado, Google recomienda secuenciar correctamente el orden en que se descargan los recursos de la página web.

Se recomienda el siguiente orden de descarga:

• Imágenes destacadas en la parte superior de la página
• Otras imágenes arriba del pliegue
• Imágenes justo debajo del pliegue

El resto de las imágenes en una página web se pueden cargar de forma diferida.

Para detectar si su sitio está cargando imágenes de manera eficiente, puede consultar el informe de PageSpeed ​​Insights. En el Imágenes de diferir fuera de pantalla del informe, verá una lista de imágenes que podrían cargarse después de otras imágenes.

Para obtener más detalles sobre cualquiera de los consejos anteriores, vea el video completo de Google a continuación:

Imagen destacada: Tada Images/Shutterstock