Cuánto te cuesta una imagen mal exportada
En la página promedio las imágenes son alrededor del 60 por ciento del peso total, y la mayoría se puede reducir entre un 70 y un 90 por ciento sin diferencia visible. Los dos errores que explican casi todo: subir la foto en el tamaño que salió de la cámara, y usar JPEG o PNG donde corresponde un formato moderno.
Los dos errores que explican casi todo
- Subir la imagen en su tamaño original. Una foto de 4000 píxeles de ancho mostrada en un espacio de 800 desperdicia el 96 por ciento de los datos.
- Usar el formato equivocado. Los formatos modernos pesan entre un 25 y un 50 por ciento menos que JPEG con la misma calidad visual.
Qué formato usar
| Contenido | Formato | Por qué |
|---|---|---|
| Fotografías | AVIF, con WebP de respaldo | Mucho menos peso con la misma calidad |
| Ilustraciones planas | WebP o PNG optimizado | Mantiene bordes limpios |
| Logos e íconos | SVG | Escala sin perder nitidez y pesa poco |
| Capturas de pantalla | WebP | Mejor que PNG para texto en imagen |
| Animaciones | Video en MP4 | Un GIF pesa muchísimo más |
La rutina que resuelve el 90 por ciento
- Redimensioná al doble del tamaño en que se muestra, como máximo. Para un espacio de 800 píxeles, exportá a 1600.
- Exportá en formato moderno con calidad entre 75 y 85. Arriba de eso no se nota y pesa el doble.
- Poné ancho y alto en la etiqueta, para que no salte el contenido.
- Cargá diferido todo lo que esté abajo del primer pantallazo.
- La imagen principal, al revés: precargada y sin diferir.
Lo que se paga por no hacerlo
- LCP alto, que es señal de experiencia para el buscador.
- Visitantes que se van antes de que cargue, sobre todo con datos móviles.
- Más consumo de transferencia y de espacio en el plan.
- En una tienda, menos conversión: el catálogo es el que más imágenes tiene.
Preguntas frecuentes
¿Se nota la pérdida de calidad?
Entre calidad 100 y 80 no hay diferencia perceptible en una pantalla, y el peso baja a menos de la mitad. Por debajo de 70 empiezan a aparecer artefactos en zonas de degradado.
¿Conviene un plugin que optimice solo?
Ayuda mucho para lo que ya está cargado y para lo que suban otras personas. No reemplaza exportar bien desde el principio, pero evita que un descuido pese cinco megabytes.
¿Y las imágenes que suben los clientes?
Ahí el procesamiento automático al subir es imprescindible: redimensionar, convertir de formato y generar los tamaños necesarios. Es lo único que escala.
Seguí leyendo
Core Web Vitals: qué mide Google y cómo arreglarlo
Las tres métricas que Google usa para juzgar la experiencia de tu sitio, qué las empeora y qué hacer con cada una.
Cachés: navegador, servidor y CDN sin pisarse
Tres capas de caché que resuelven cosas distintas. Cómo configurarlas para que sumen en lugar de estorbarse.
Cómo leer una prueba de velocidad sin sacar conclusiones falsas
El puntaje no es la métrica. Qué mirar de verdad en un informe de velocidad y qué recomendaciones se pueden ignorar.