Por qué es importante la optimización de la imagen
Las imágenes grandes o cargadas tarde pueden retrasar el contenido principal y empeorar LCP. Empiece por los archivos que la página solicita realmente y mida su contribución. Reducir la transferencia puede mejorar la carga, pero no garantiza posiciones en buscadores ni un aumento concreto de conversiones.
Elegir un formato de imagen
Compare JPEG, PNG, WebP y AVIF con imágenes representativas y calidad aceptable. El menor tamaño depende de la imagen, el codificador y los ajustes. Compruebe los navegadores compatibles y ofrezca un formato alternativo si es necesario. SVG sirve para gráficos vectoriales adecuados.
| Formato | Ventajas | Límites | Uso habitual |
|---|---|---|---|
| JPEG | Suele ser eficiente para fotografías | Compresión con pérdidas, sin transparencia alfa | Fotos |
| PNG | Codificación sin pérdidas y transparencia | Las fotos pueden ocupar mucho | Gráficos con detalles sin pérdidas |
| WebP | Compresión con o sin pérdidas, transparencia | Compruebe navegadores antiguos y tamaño final | Fotos, gráficos y animación |
| AVIF | Puede comprimir bien con calidad útil | Compruebe coste de codificación y compatibilidad | Fotos y gráficos |
| SVG | Gráficos vectoriales escalables | No sustituye a las fotos rasterizadas | Iconos, logotipos e ilustraciones |
Imágenes adaptables: srcset y sizes
Enumere los archivos candidatos en srcset y describa su anchura en el diseño mediante sizes. El navegador elige según esa información y las condiciones del dispositivo. Las anchuras siguientes son ejemplos: ajústelas al CSS real. El ejemplo es para una imagen fuera de la vista inicial; sustituya el texto alternativo ilustrativo y use la proporción real.
<img
src="example-400w.jpg"
srcset="example-400w.jpg 400w, example-800w.jpg 800w, example-1200w.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
alt="Lago de montaña"
width="1200"
height="800"
loading="lazy"
/>
Carga diferida de imágenes fuera de pantalla
loading="lazy" permite aplazar una imagen hasta que se acerque a la zona visible. La descarga puede empezar antes de que aparezca; el momento depende del navegador y las condiciones.
- Aplazar imágenes no críticas puede reducir la transferencia inicial y las solicitudes competidoras.
- No difiera la imagen principal visible al inicio, especialmente si es la imagen LCP: podría empeorar LCP.
- Reserve espacio con dimensiones o proporciones correctas para reducir los desplazamientos del diseño.
Ejemplo de una imagen situada más abajo de la vista inicial. Las dimensiones son ilustrativas; use las del archivo real:
<img src="example.webp" alt="Lago de montaña" width="1200" height="800" loading="lazy" />
Herramientas y servicios para la optimización.
| Herramienta | Descripción | Enlace |
|---|---|---|
| TinyPNG | Servicio en línea para comprimir PNG y JPEG | TinyPNG |
| ImageOptim | Optimización de imagen en macOS | ImageOptim |
| Squoosh | Una poderosa herramienta de Google | Squoosh |
Consejos prácticos y ejemplos.
- Compare formatos con una calidad aceptable y añada una alternativa cuando haga falta.
- Ajuste
srcsetysizesal diseño real y a los dispositivos. - Use
loading="lazy"para imágenes fuera de pantalla, sin diferir la posible imagen LCP. La carga diferida nativa suele funcionar sin Intersection Observer; la lógica propia debe responder a un requisito concreto. - Automatice tamaños y compresión en la compilación o entrega, y revise la salida.
- Compare PageSpeed Insights y los Web Vitals pertinentes, incluidos LCP y CLS, antes y después en condiciones comparables.
Verifique el resultado publicado
Compruebe el archivo elegido, los bytes transferidos, la calidad y la prioridad de carga. Repita con diseños móviles y de escritorio representativos. Confirme que la imagen principal aparece pronto y que el diseño permanece estable.
Reduzca los bytes innecesarios sin perder contenido ni calidad visual útil.
Use nuestra prueba de velocidad para investigar la página y verifique los cambios de imágenes en el navegador. Distinga las mejoras medidas de las suposiciones no comprobadas.
