La imagen de vehículos es una clase de imagen incómoda para la compresión: gradientes fotográficos en pintura curva, bordes de recorte afilados y un canal alfa que debe sobrevivir intacto donde el coche se componga sobre un fondo personalizado. La mayoría de los consejos sobre imágenes web se transfieren, pero los casos límite son exactamente donde viven las imágenes de coches. Aquí está la decisión de formato, tomada correctamente una vez.
Los tres formatos en la práctica
| PNG | WebP | AVIF | |
|---|---|---|---|
| Transparencia | Alfa sin pérdida | Alpha, con pérdida o sin pérdida | Alpha soportado |
| Tamaño del archivo (recorte típico) | La más grande por lejos | Pequeño | Más pequeño |
| Fidelidad en el borde | Perfecto | Muy buena en calidad sensata | Muy buena, más lenta para codificar |
| Soporte | Universal | Universal en la práctica | Navegadores modernos |
| Ideal para | Impresión, tuberías de composición | Todo en la web | Crítico de ancho de banda, si se sirve |
Donde cada uno gana
PNG: el formato de archivo y composición
PNG gana sus bytes exactamente dos veces: cuando la imagen entra en una tubería de impresión o diseño que la volverá a comprimir de todos modos, y cuando la composición descendente necesita un canal alfa matemáticamente limpio. Como formato de entrega para páginas web, es un hábito, no una decisión. A menudo es cinco veces el tamaño de transferencia sin diferencia visible.
WebP: el predeterminado
WebP con canal alfa a una calidad razonable es el caballo de batalla: recortes transparentes con una fracción del peso de PNG, soporte universal en navegadores y calidad controlable por solicitud. Para una cuadrícula de anuncios o una galería de VDP, format=webp con un width explícito es toda la política.
AVIF: lápiz más afilado, mismo dibujo
AVIF comprime más que WebP a una calidad equivalente y su historia de soporte ahora es buena. La pregunta honesta es la ganancia marginal: en recortes de vehículos correctamente dimensionados, el paso de PNG a WebP es dramático, el paso de WebP a AVIF es un ajuste. Revisa /api/options para los formatos actualmente servidos antes de construir una tubería alrededor de uno.
Los errores que superan la elección de formato.
- Servir imágenes de resolución completa en espacios pequeños. Existen parámetros de ancho, úsalos
- Enviar transparencia PNG a una página que de todos modos pone el coche sobre un fondo blanco
- Recomprimir una imagen ya con pérdida en su propia tubería, apilando artefactos en los bordes cortados
- Ignorando los parámetros de calidad: las representaciones de vehículos soportan bien la compresión, y la calidad predeterminada de todo deja bytes fáciles sobre la mesa.
La elección de formato vale una reunión. La disciplina de tamaño vale una reunión cada trimestre, para siempre.
Un ejemplo trabajado
Toma una cuadrícula de listados que renderiza 48 tarjetas de vehículos. Como PNG de tamaño completo, la página envía decenas de megabytes de imágenes, que los usuarios móviles en conexiones celulares simplemente no terminan de cargar. La misma cuadrícula a un ancho de 600 píxeles en WebP generalmente resulta dos órdenes de magnitud más pequeña por imagen. Nada del diseño cambió, y la cuadrícula pasó de inutilizable a instantánea en la conexión que la mayoría de los compradores realmente tienen.
Asocie la elección de formato con srcset y el navegador hace el resto del trabajo: las pantallas pequeñas obtienen la variante pequeña, las pantallas retina obtienen la nítida, y nadie descarga píxeles que no puede ver. Dado que las dimensiones son parámetros de solicitud, toda la configuración receptiva son tres URLs que difieren por un número.
Qué son las variantes de transparencia y sombra y cómo se combinan, se cubre en sombras, reflejos y transparencia; los parámetros de entrega están en la documentación de la API.
