Muchos visitantes abren tu web con datos móviles limitados o con poca cobertura, en un centro comercial, en el metro o en la carretera. Una página con varias fotos enormes les parece rota y se van antes de que termine de cargar.
La buena noticia es que los problemas de imágenes son los más fáciles de resolver en cuanto a velocidad, y puedes arreglarlos por chat.
Las imágenes suelen ser lo que más pesa en una página. Redimensiónalas al tamaño con que se muestran, usa WebP u otro formato moderno y carga de forma diferida las que están por debajo de la primera pantalla.
Redimensiona antes de subir
Una foto directa de la cámara del móvil puede pesar varios megas y medir miles de píxeles de ancho, y sin embargo se muestra en un cuadro de unos cientos de píxeles. Una buena regla es que el archivo mida aproximadamente el doble del ancho con que se muestra, para pantallas nítidas, y no más.
- Imagen de cabecera a todo el ancho: entre 1600 y 2000 píxeles de ancho es más que suficiente.
- Tarjetas y miniaturas de producto: de 600 a 800 píxeles de ancho.
- Logotipos e iconos: usa SVG, que se ve nítido y pesa muy poco.
Elige el formato adecuado
WebP (y AVIF donde se admite) suele dar archivos mucho más pequeños que JPEG o PNG con calidad similar. Conserva JPEG para las fotos como alternativa y evita PNG para fotografías porque pesa mucho. Una calidad de entre el 75 y el 80 por ciento normalmente es invisible a simple vista.
Carga con inteligencia
Las imágenes que quedan por debajo de la primera pantalla deben cargarse solo cuando el visitante se acerca a ellas al desplazarse (carga diferida). La imagen principal de arriba debe cargar de inmediato, no de forma diferida, porque es lo primero que se ve.
Define además un ancho y un alto, o una proporción fija, en cada imagen para que la página no salte mientras llegan.
Un prompt que puedes copiar
«Optimiza todas las imágenes de esta web para datos móviles. Convierte las fotos a WebP, redimensiona cada una a no más del doble del tamaño con que se muestra, aplica carga diferida a todo lo que quede por debajo de la primera pantalla pero no a la imagen de cabecera, fija proporciones para que nada salte y añade un texto alternativo breve y descriptivo.»
Después de aplicar el cambio, abre la web en tu móvil con el wifi apagado y compara lo rápido que aparece la primera pantalla.