Elige según la función que debe cumplir la imagen
Comienza por el activo, no por la extensión. Una fotografía es contenido de tono continuo, por lo que cierta pérdida puede ser aceptable a su tamaño mostrado. Una captura de pantalla, gráfico, logotipo o dibujo lineal tiene bordes nítidos y texto, donde los artefactos resultan conspicuos. Presérvalos con salida sin pérdida o con una aprobación cuidadosa. Usa SVG para un logotipo o diagrama vectorial cuando esté disponible.
Luego identifica las capacidades. 'Canal alfa' significa transparencia por píxel. La animación es una secuencia de fotogramas. La cobertura requerida por navegadores, el volumen de publicación y el tiempo de compilación son restricciones de entrega que pueden primar sobre elegir el formato más compacto.
Prueba primero AVIF y WebP con pérdida. Mantén JPEG disponible cuando se necesite un fallback opaco ampliamente compatible.
Conserva una fuente sin pérdida. Compara PNG con WebP o AVIF sin pérdida a la escala real de visualización antes de elegir.
Usa AVIF, WebP o PNG; no elijas JPEG porque no incorpora un canal alfa.
Entiende lo que aporta cada formato
AVIF almacena imágenes codificadas con AV1 en un formato basado en HEIF. Su especificación incluye imágenes estáticas, secuencias de imágenes y elementos de imagen con canal alfa. Soporta codificación con pérdida y sin pérdida, transparencia y animación. Los ahorros no son fijos: el contenido fuente, el codificador, la velocidad, la calidad objetivo y los metadatos cambian el resultado.
WebP soporta modos con pérdida y sin pérdida, transparencia y animación. JPEG es un formato con pérdida para imágenes estáticas con compatibilidad histórica muy amplia; es útil como fallback para fotografías opacas. PNG es sin pérdida con soporte alfa, lo que lo convierte en un fallback sólido para gráficos exactos, aunque los PNG fotográficos suelen ser ineficientes. PNG ordinario es estático; prueba un formato de animación separado cuando se necesite movimiento.
Vale la pena explorarlo para imágenes raster de alto valor donde una menor transferencia puede justificar el trabajo de codificación y los fallbacks.
Útil como opción raster moderna de propósito general, incluyendo transparencia y secuencias animadas.
Úsalo como fallback fotográfico opaco; no para un logotipo o recorte con transparencia.
Úsalo para fallback raster sin pérdida y con transparencia, y para activos donde la fidelidad de píxel importa más que minimizar bytes.
Construye una ruta de fallback en lugar de apostar por un solo formato
El elemento picture permite que un navegador evalúe alternativas. Pon AVIF primero, luego WebP, y finalmente un img de fallback en JPEG o PNG, con el tipo MIME correcto. El navegador omite una fuente no soportada y usa el fallback cuando ninguna fuente es usable. Mantén el mismo texto alternativo significativo a menos que cambies intencionalmente el recorte.
El fallback de formato no reemplaza el dimensionado responsive. Proporciona candidatos basados en ancho y un valor sizes veraz cuando el espacio varíe. Incluye width y height para que el navegador pueda reservar espacio. Un archivo de formato pequeño con una dimensión de píxel sobredimensionada sigue desperdiciando bytes.
AVIF primero, WebP segundo, luego JPEG para fotos opacas o PNG cuando el fallback necesite transparencia o bordes sin pérdida.
Si un servidor selecciona formatos según las capacidades de la petición en lugar del marcado picture, configura correctamente la variación de caché y prueba que cada cliente reciba una representación decodificable.
Usa un cliente sin el decodificador preferido o desactiva deliberadamente una fuente en staging; confirma que la imagen, dimensiones y texto alternativo siguen siendo correctos.
Presupuesta el tiempo de codificación y protege la calidad visual
La compresión moderna traslada trabajo a la codificación. El codificador de referencia de AVIF ofrece un rango de velocidad de 0, el más lento, a 10, el más rápido; WebP también intercambia más trabajo del codificador por tiempo, tamaño de salida y calidad. Trata una recodificación por lotes o una transformación bajo demanda como una decisión operativa, no como un ajuste gratuito.
Establece una política repetible por clase de activo y revisa los originales a tamaños comunes de visualización. Inspecciona rostros, degradados, texto, bordes y límites transparentes. Conserva el master y registra la versión del codificador y la configuración para que un defecto pueda reproducirse y revertirse.
Codificar más rápido puede reducir la presión de compilación pero producir un archivo mayor o una compresión menos eficiente; evalúa tu propio conjunto de fuentes.
Una puntuación o un preset no puede sustituir la revisión visual de las regiones de la imagen que importan para los visitantes.
Convierte los cambios de formato en una práctica proactiva de fiabilidad
Para Status Is UP, la optimización de imágenes es trabajo proactivo de uptime cuando evita que un lanzamiento degrade una página crítica. Haz un inventario de las URLs de imagen críticas, prepara una conversión representativa en staging y verifica el tipo de contenido, el comportamiento del CDN y la invalidación de caché antes de una migración del sitio.
Despliega en un lote reversible. Compara el renderizado y el comportamiento de transferencia en el candidato de lanzamiento, y mantén la representación antigua hasta que la nueva ruta esté probada. Si una transformación o una regla de caché falla, restaura la fuente conocida como buena. Esta es una dirección de entrega resiliente, no un mandato universal para AVIF o múltiples formatos.
Prioriza la imagen principal y las imágenes de contenido que influyen en la primera vista útil, no todo el archivo histórico a la vez.
Mantén nombres de activos deterministas o un mapeo versionado para que la ruta previa en JPEG, PNG o WebP pueda restaurarse rápidamente.