AVIF vs WebP, medido
Qué formato es más pequeño en fotos, capturas de pantalla e iconos, con los bytes.
Leer la guíaAyuda de CDN.com.tr
Optimización de imágenes: AVIF y WebP en el edge
Activa la optimización de imágenes para la cuenta o para una regla de entrega y elige WebP o WebP + AVIF: el edge convierte las imágenes JPEG y PNG y envía a cada navegador un formato que acepta, mientras tus páginas conservan las mismas URL de imagen.
Caché, seguridad, WAF y purga
Optimización de imágenes: AVIF y WebP en el edge
Activa la optimización de imágenes para la cuenta o para una regla de entrega y elige WebP o WebP + AVIF: el edge convierte las imágenes JPEG y PNG y envía a cada navegador un formato que acepta, mientras tus páginas conservan las mismas URL de imagen.
Ruta en el panel
- Panel de gestión
- Reglas de entrega
- Optimización de imágenes
- Formato de imagen
Requisitos previos
- Una cuenta CDN cuyo sitio se sirve a través del edge.
- El rol de propietario o editor: los lectores pueden ver la configuración y ejecutar la comprobación de imágenes, pero no cambiarla.
- Saber qué rutas necesitan protección contra hotlink, URL firmadas o un límite de peticiones: una regla con la optimización de imágenes activada no aplica ninguna, y el interruptor de la cuenta se las quita a los archivos JPEG y PNG.
Modelo de decisión
¿Toda la cuenta o una regla?
El interruptor de la cuenta cubre los archivos JPEG y PNG de todas las reglas. El de una regla cubre solo las rutas de esa regla, una buena forma de probarlo primero en una carpeta o en un dominio.
- Para toda la cuenta: un sitio cuyas imágenes son públicas
- Por regla: primero una carpeta o un dominio, mientras las demás reglas conservan sus protecciones
¿WebP o WebP + AVIF?
El formato se elige una vez para la cuenta y se aplica en todos los lugares donde la optimización de imágenes está activada.
- WebP: casi todos los navegadores en uso, menor coste de procesamiento
- WebP + AVIF (automático): AVIF para los navegadores que lo aceptan, normalmente el más pequeño en fotos
Guía paso a paso
Activa la optimización de imágenes
El interruptor de la cuenta es la forma más rápida de empezar; el de una regla la limita a las rutas de esa regla.
- Abre Reglas de entrega y selecciona la cuenta.
- Activa Optimización de imágenes para toda la cuenta, o abre una regla y activa allí la optimización de imágenes.
- Guarda y espera a que el cambio se publique en el edge.
Resultado esperado: Las peticiones JPEG y PNG de esas rutas se convierten en el edge.
cdnctl equivalent
curl -s -X POST -H "Authorization: Bearer $CDN_TOKEN" -H 'Content-Type: application/json' -d '{"type":1}' https://cdn.com.tr/api/accounts/$ACCOUNT_UUID/image_optimization
# solo una regla: pon "image_optimization":"on" en el JSON de la regla
cdnctl cdn advanced-rules create --account "$ACCOUNT_UUID" --file rule-images.jsonElige el formato
El formato se aplica allí donde la optimización de imágenes está activada, en toda la cuenta o en una regla.
- En Formato de imagen, elige WebP o WebP + AVIF (automático).
- Lee la tasa que aparece bajo el formato antes de guardar.
Resultado esperado: Con WebP + AVIF, los navegadores que aceptan AVIF reciben AVIF desde las mismas URL; los demás reciben WebP o la imagen en su formato original.
cdnctl equivalent
curl -s -X POST -H "Authorization: Bearer $CDN_TOKEN" -H 'Content-Type: application/json' -d '{"enabled":true}' https://cdn.com.tr/api/accounts/$ACCOUNT_UUID/image_avifPurga y comprueba
Las imágenes guardadas en caché antes de activar la optimización mantienen su formato anterior hasta que caducan, así que purga las rutas de imágenes después de activarla. Un cambio de formato no requiere purga.
- Purga las carpetas de imágenes, o todo, en Limpieza de Caché.
- Ejecuta la comprobación de formato de imagen bajo el interruptor en uno de los dominios de la cuenta.
Resultado esperado: La comprobación muestra cada imagen con el formato y el tamaño que recibe un navegador moderno; cuando el optimizador mantuvo el original porque la conversión no era más pequeña, la fila lo indica.
cdnctl equivalent
cdnctl purge --account "$ACCOUNT_UUID" --path /wp-content/uploads/ --type prefix
curl -s -H "Authorization: Bearer $CDN_TOKEN" "https://cdn.com.tr/api/accounts/$ACCOUNT_UUID/image_check?host=www.example.com"Verificación
- curl -sLo /dev/null -w '%{content_type} %{size_download}\n' -H 'Accept: image/avif,image/webp,*/*' https://www.example.com/photo.jpg → image/avif o image/webp (con solo WebP, image/webp tras la redirección), salvo que el archivo convertido no fuera más pequeño
- curl -s -D - -o /dev/null -H 'Accept: image/webp,*/*' https://www.example.com/photo.jpg | grep -iE '^(vary|location)' → WebP + AVIF: Vary: Accept; solo WebP: Location: …/photo.jpg.webp
- curl -so /dev/null -w '%{content_type}\n' -H 'Accept: */*' https://www.example.com/photo.jpg → image/jpeg, el formato original
Casos de uso
Una tienda quiere fotos de producto más ligeras sin reexportar su biblioteca de medios, sin instalar un plugin y sin cambiar ni una URL de imagen.
Flujo de trabajo rápido
- Abre Reglas de entrega de la cuenta.
- Activa la optimización de imágenes para toda la cuenta, o actívala en una regla para empezar por las rutas de esa regla.
- En Formato de imagen, elige WebP o WebP + AVIF (automático) para la cuenta.
- Purga las imágenes que ya están en caché y ejecuta la comprobación de formato de imagen que hay bajo el interruptor.
Verificaciones
- Se convierten los archivos JPEG y PNG (.jpg, .jpeg, .png). Los GIF, los SVG y los archivos que ya son .webp salen sin cambios.
- Cómo llega el formato al navegador depende del formato de la cuenta. Con WebP + AVIF, una sola URL responde a todos los navegadores: el edge lee la cabecera
Acceptdel navegador, envía AVIF, WebP o la imagen en su formato original, y responde conVary: Accept. Con solo WebP, los navegadores que aceptan WebP se redirigen (302) a una copia WebP con el mismo nombre más.webp(photo.jpg.webp), y los demás reciben la imagen en su formato original. En ambos casos tu HTML conserva las mismas URL de imagen. - A tamaño completo, una imagen recién convertida solo se envía si es más pequeña que el original: un AVIF que no es más pequeño cede el paso a WebP, y un WebP que no es más pequeño al original. Las imágenes redimensionadas con
?w=o?h=no se comparan. - Si una conversión falla, el edge sirve en su lugar la imagen original.
- Las imágenes convertidas se guardan 365 días, en el edge y en los navegadores. Las copias guardadas en caché antes de activar la optimización mantienen su formato anterior hasta que caducan o las purgas. Cambiar el formato no requiere purga: el edge guarda cada formato por separado, así que los visitantes nuevos reciben el nuevo formato al momento, mientras que un navegador que ya cargó una imagen puede conservar su copia hasta un año.
- Protección contra hotlink, URL firmadas y límite de peticiones: una regla con la optimización de imágenes activada no aplica ninguna de ellas a ningún archivo que sirva. Con el interruptor de la cuenta activado, los archivos JPEG y PNG las omiten en todas las reglas que no tienen interruptor propio. Mantén desactivada la optimización de imágenes en cualquier regla cuyos archivos necesiten estas protecciones, y desactiva también el interruptor de la cuenta si sus JPEG y PNG las necesitan. Una regla de ruta exacta no puede usar la optimización de imágenes.
- El procesamiento cuenta para tu cuota mensual, AVIF con una tasa mayor que WebP. El panel muestra la tasa actual bajo el interruptor.
Preguntas frecuentes
¿Por qué algunas imágenes siguen llegando como JPEG o PNG?
Lo más habitual es que la copia se guardara en caché antes de activar la optimización: purga esas rutas y vuelve a pedirlas. Otras razones: a tamaño completo la conversión no era más pequeña que el original, el navegador no acepta ni WebP ni AVIF, o la petición no pedía ningún formato de imagen concreto (un curl sin más envía Accept: */*). La comprobación de formato de imagen de la página Reglas de entrega muestra, imagen por imagen, lo que reciben un navegador moderno y un cliente básico.
¿Puedo redimensionar imágenes desde la URL?
Sí. Añade ?w= (ancho), ?h= (alto) o ambos a la URL de una imagen. Un solo valor mantiene la proporción, los dos encajan la imagen dentro de ese recuadro, y ninguna imagen se amplía por encima de su tamaño original. Mantén w y h en la clave de caché de esa regla (el valor por defecto, la query completa, ya lo hace): una regla que ignora todos los parámetros de consulta guarda en caché un solo tamaño para todos. Las imágenes redimensionadas también se convierten, pero no se comparan con el original.
¿Cómo se factura?
No hay un paquete aparte. El procesamiento cuenta para la cuota mensual de la cuenta, igual que el tráfico: cada conversión cuenta el original que lee más la imagen que devuelve, y AVIF cuenta con una tasa mayor que WebP porque codificarlo requiere más procesamiento. El panel muestra la tasa actual bajo el interruptor, y Consumo de datos muestra la optimización de imágenes en su propia línea.
¿Necesito WebP + AVIF?
Es una opción, no un requisito. WebP por sí solo llega a casi todos los navegadores en uso. WebP + AVIF añade AVIF para los navegadores que lo aceptan, normalmente el formato más pequeño en fotografías: en nuestra medición, una foto JPEG de 262.025 bytes salió como 86.936 bytes de AVIF. Ejecuta el comprobador de formato de imagen en tus propias páginas para ver la diferencia.