AVIF · WebP · responsive
La optimización de imágenes consiste en servir el formato correcto, en el tamaño correcto, para cada dispositivo. Con AVIF y WebP responsive es habitual reducir el peso entre un 70 y un 95 por ciento sin diferencia visible. Es la intervención con mejor relación esfuerzo y resultado de todo el rendimiento web.
Caso documentado
No es un ejemplo prestado. Es el banco de imágenes de la web que estás viendo, con los números exactos.
| Imagen | Original | Optimizada | Reducción |
|---|---|---|---|
| Propuestas y cotizaciones | 12.767 KB | 27 KB | 99,8% |
| Cotizador online | 12.178 KB | 35 KB | 99,7% |
| Agendamiento de citas | 7.107 KB | 44 KB | 99,4% |
| Sistema de reservas | 7.011 KB | 45 KB | 99,4% |
| Banco completo · 28 imágenes | 66,9 MB | 0,83 MB | 98,8% |
Verificado visualmente comparando el AVIF contra el original a 1200 píxeles: indistinguibles, incluso en el texto pequeño dentro de las maquetas. La calidad no se sacrificó; se dejó de desperdiciar.
Los formatos
Con la etiqueta picture, cada navegador toma el mejor formato que entiende. Nadie se queda sin ver la imagen.
| Formato | Peso relativo | Cuándo se usa |
|---|---|---|
| AVIF | El más liviano | Primera opción en navegadores modernos |
| WebP | Intermedio | Reserva, y obligatorio con transparencia real |
| JPG / PNG | El más pesado | Última reserva y para redes sociales |
| SVG | Mínimo | Logos, iconos y todo lo vectorial |
El proceso
Los originales nunca se tocan: todo el trabajo se hace sobre copias.
De «IMG_2847.png» a un slug con la palabra clave de destino. Las imágenes también posicionan, y el nombre del archivo es una señal gratuita.
Cuatro anchos por imagen: 480, 768, 1200 y 1920. El móvil deja de descargar una imagen pensada para escritorio.
Muchos PNG declaran canal de transparencia totalmente opaco: es peso muerto puro. Si se miden los píxeles en vez de creer al formato, esas imágenes pueden ir a AVIF.
Foto e ilustración opaca a AVIF más WebP. Solo lo que tiene transparencia real se queda en WebP con reserva PNG.
El codificador redondea alturas a número par, así que un valor calculado a mano casi siempre queda desfasado un píxel. Ese desfase es CLS, y hay que verificarlo contra el archivo real.
Precio
Con los originales intactos y el markup listo para pegar en tu sitio.
$800.000 COP proyecto
Precio final, antes de IVA. Sin sorpresas al firmar.
Preguntas frecuentes
Tomadas literalmente de la SERP colombiana.
AVIF ofrece el mejor peso con calidad equivalente, seguido de WebP. Lo correcto no es elegir uno sino servirlos en cascada con la etiqueta picture: cada navegador toma el mejor que entiende y siempre hay una reserva.
En todos los modernos. Y al servirlo dentro de una etiqueta picture con WebP y JPG de reserva, ningún visitante se queda sin ver la imagen aunque use un navegador antiguo.
No de forma perceptible si se hace bien. En el caso documentado de este sitio, una ilustración pasó de 12,7 MB a 27 KB y a tamaño de pantalla es indistinguible del original, incluso en el texto pequeño que aparece dentro de la imagen.
En sitios sin optimizar, entre un 70 y un 95 por ciento es habitual. Las ilustraciones planas y las capturas comprimen extraordinariamente bien; las fotografías con mucho detalle, algo menos, pero también bajan de forma notable.
Los buenos ayudan bastante. Lo que no suelen hacer es revisar si el canal de transparencia se usa de verdad, ni verificar que las dimensiones declaradas coincidan con el archivo generado, que es donde se cuela el CLS.
Porque suelen ser el 70% del peso total de una página y casi siempre son el elemento que mide el LCP, una de las tres métricas con las que Google evalúa la experiencia. Optimizarlas es la intervención de mejor relación esfuerzo y resultado que existe.
Te digo cuánto pesa hoy tu banco de imágenes y cuánto podría pesar. Sin costo.