Imágenes adaptables
Silktide carga tus páginas en un navegador real y compara las dimensiones reales de cada imagen con el tamaño al que se muestra. Se señalan las imágenes que son mucho más grandes de lo que aparentan en pantalla, junto con los datos desperdiciados por la resolución adicional.
Por qué es importante
Un patrón habitual: se sube una foto de 4000 píxeles y la página la muestra a 400 píxeles de ancho. Los visitantes descargan el archivo a resolución completa —potencialmente de megabytes— para ver algo que un archivo mucho más pequeño representaría de forma idéntica. El despilfarro es peor en los móviles, que tienen las pantallas más pequeñas y, a menudo, las conexiones más lentas y caras. Las páginas más rápidas retienen a más visitantes y contribuyen al posicionamiento en buscadores a través de .
Cómo solucionarlo
- Proporciona cada imagen en varios tamaños y deja que el navegador elija el adecuado para el dispositivo:
<!-- El navegador solo descarga el tamaño que necesita -->
<img src="flower-800.jpg"
srcset="flower-400.jpg 400w, flower-800.jpg 800w, flower-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Puesto de flores en el mercado">
- Automatiza el redimensionado. La mayoría de los generan varios tamaños al subir la imagen y las pueden redimensionar al servirlas; cualquiera de las dos opciones evita que el problema se repita.
- Como mínimo, redimensiona las imágenes puntuales aproximadamente al tamaño al que se mostrarán antes de subirlas.
Cómo lo comprueba Silktide
- Carga la página en un navegador real y registra el tamaño al que se muestra cada imagen, teniendo en cuenta las pantallas más nítidas de los dispositivos modernos.
- Compáralo con las dimensiones del archivo de imagen realmente descargado.
- Señala las imágenes en las que el exceso es significativo, indicando los bytes que se ahorrarían con una imagen del tamaño adecuado, de mayor a menor.
Solución de problemas
¿En qué se diferencia de las otras comprobaciones de imágenes?
Esta comprobación trata sobre las dimensiones: servir una imagen físicamente más grande de lo que la página muestra. La compresión de imágenes y la optimización de imágenes tratan de hacer el archivo más pequeño manteniendo las mismas dimensiones, y formatos de imagen modernos trata de convertir a WebP o AVIF. La misma imagen puede aparecer en varias; las soluciones son complementarias.
La imagen se ve nítida por las pantallas de alta resolución
Las pantallas modernas sí necesitan más píxeles de los que sugiere el tamaño mostrado, y la medición contempla eso. Solo se señalan imágenes que superan lo que incluso una pantalla de alta resolución puede aprovechar.