Imágenes Shopify WebP y AVIF: ¿Shopify convierte? ¿Automáticamente? (2026)

Optimice la carga de imágenes de Shopify en 60 segundos

Realiza una prueba de velocidad gratuita en tu tienda : si las imágenes reducen tu puntuación, verás advertencias como "Imágenes con el tamaño adecuado" o "Servicio de imágenes en formatos de próxima generación" en los diagnósticos. Mientras Shopify maneja la conversión de formato, Thunder Page Speed Optimizer aborda la otra mitad del rendimiento de la imagen:

• Lazy carga imágenes fuera de la pantalla para que no bloqueen la representación de la página inicial
• Precarga tu imagen principal/LCP para una renderización más rápida en la mitad superior de la página
• Pospone imágenes y scripts de aplicaciones de terceros que ralentizan la carga de imágenes
• Optimiza el orden de carga de recursos para que las imágenes aparezcan más rápido

Conversión de formato + optimización de carga = velocidad máxima de imagen. Thunder maneja el lado de carga con un solo clic.

Cómo funciona la conversión automática WebP y AVIF de Shopify

Cuando alguien visita tu tienda Shopify, su navegador envía una solicitud HTTP con un Aceptar Encabezado que enumera los formatos de imagen que admite. Un navegador Chrome moderno envía algo como: imagen/avif,imagen/webp,imagen/apng,imagen/*. El CDN de Shopify lee este encabezado y ofrece el mejor formato disponible.

El orden de prioridad es: AVIF → WebP → formato original. Si el navegador soporta AVIF y la versión AVIF es más pequeña que la versión WebP para esa imagen específica, Shopify sirve AVIF. De lo contrario, recurre a WebP. Si el navegador no admite ninguno de los dos (algo extremadamente raro en 2026), mostrará el JPEG o PNG original.

Esto sucede a nivel de CDN: no se necesitan cambios en el código del tema. Shopify anunciado soporte AVIF automático en agosto de 2022, basándose en la compatibilidad con WebP que ha estado disponible desde 2020. La conversión se realiza en el lado del servidor, por lo que funciona para cualquier imagen servida a través del canal de imágenes de Shopify.

Qué se convierte automáticamente

• Imágenes del producto — subido a través del administrador de Shopify
• Imágenes de colección — imágenes destacadas en páginas de colección
• Recursos del tema : imágenes en la carpeta de activos/carpeta de tu tema, servidas a través de URL_activo
• Imágenes de contenido : subido a través del editor de texto enriquecido en páginas/publicaciones de blog
• Imágenes de sección : presentación de diapositivas, banner principal, logotipo y otras imágenes de la sección temática

El requisito clave: la imagen debe entregarse a través de CDN de Shopify (URL que comienzan con cdn.shopify.com). Cualquier imagen que pase por el proceso de imágenes de Shopify obtiene una conversión de formato automática.

Cuando la conversión de imágenes de Shopify no funciona

La conversión automática cubre la mayoría de las imágenes, pero varios escenarios comunes omiten por completo la CDN de Shopify. si tu resultados de la prueba de velocidad todavía muestra "Servir imágenes en formatos de próxima generación", una de estas probablemente sea la causa:

WebP, AVIF, JPEG y PNG: comparación de formatos de imagen de Shopify

Comprender las diferencias lo ayuda a tomar mejores decisiones sobre las cargas de fuentes y solucionar problemas de formato. Así es como funciona cada formato para la fotografía de producto típica de Shopify:

Para la mayoría de las tiendas Shopify, no es necesario elegir. Suba archivos fuente JPEG o PNG de alta calidad y la CDN de Shopify elegirá el formato óptimo para cada visitante. Las mejoras reales de rendimiento provienen de usar el tamaño adecuado (no suba imágenes de 4000px para mostrarlas a 400px) y de optimizar cómo se cargan las imágenes: carga diferida, precarga y conjuntos srcset responsivos.

Cómo comprobar si tu tienda Shopify ofrece WebP y AVIF

¿Quiere verificar que sus imágenes se estén convirtiendo? Aquí hay una verificación rápida usando Chrome DevTools:

1. Abre tu tienda en Chrome y presiona F12 (o Cmd+Opción+I en Mac) para abrir DevTools
2. Haga clic en Pestaña Red
3. Recargar la página (Ctrl+R / Cmd+R)
4. Haga clic en Pestaña Imagen filtro para mostrar solo imágenes
5. Mira el Columna Tipo : deberías ver webp o avif en lugar de jpeg o png
6. Haga clic en cualquier imagen y verifique el Encabezados de respuesta - buscar tipo de contenido: imagen/webp o tipo de contenido: imagen/avif

Si ves jpeg o png para imágenes en el CDN de Shopify (cdn.shopify.com), algo impide la conversión. Comprueba si la etiqueta de imagen en el código de tu tema utiliza los filtros de imagen Liquid de Shopify.

Para obtener una imagen de rendimiento más amplia más allá de los formatos de imagen, nuestro Guía de auditoría de velocidad de Shopify recorre todo el proceso de diagnóstico.

Mejores prácticas de carga de imágenes para Shopify WebP y AVIF

La conversión automática de Shopify funciona mejor cuando cargas archivos fuente preparados adecuadamente. Estas son las reglas que garantizan la máxima calidad con un tamaño de archivo mínimo:

Control manual de WebP con Shopify Liquid

Aunque Shopify gestiona automáticamente la conversión de formato en la mayoría de los casos, los desarrolladores de temas a veces necesitan control manual. Liquid de Shopify ofrece el filtro image_url con un parámetro format:

<!-- Force WebP format -->
{{ product.featured_image | image_url: width: 800, format: 'webp' }}

<!-- Let Shopify auto-negotiate (recommended) -->
{{ product.featured_image | image_url: width: 800 }}

<!-- Responsive with srcset (auto-format per browser) -->
<img
  src="{{ product.featured_image | image_url: width: 800 }}"
  srcset="
    {{ product.featured_image | image_url: width: 400 }} 400w,
    {{ product.featured_image | image_url: width: 800 }} 800w,
    {{ product.featured_image | image_url: width: 1200 }} 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="{{ product.featured_image.alt | escape }}"
  loading="lazy"
  width="800"
  height="800"
/>

En la mayoría de los casos, omitir el parámetro de formato es mejor. Esto permite a Shopify ofrecer AVIF a los navegadores que lo admiten (más pequeños que WebP) y WebP al resto. forzando Formato : 'webp' impide la entrega de AVIF, lo que significa archivos más grandes para los usuarios de Chrome y Firefox que podrían recibir AVIF.

Para obtener más información sobre cómo interactúa la carga de imágenes con la optimización de CSS y JavaScript, consulte nuestro Guía de optimización de LCP — la imagen principal (a menudo su imagen más grande) es típicamente el elemento LCP y es la que más se beneficia de la combinación de formato + optimización de carga.

Cómo WebP y AVIF afectan a Shopify Core Web Vitals

El formato de imagen impacta directamente dos métricas de Core Web Vitals que afectan su Clasificaciones SEO:

Para obtener una imagen completa de Core Web Vitals, nuestro Guía de Shopify Core Web Vitals cubre las tres métricas y cómo interactúan.

Preguntas frecuentes

Haz que tus imágenes de Shopify se carguen a máxima velocidad

La conversión automática de WebP y AVIF de Shopify es una base sólida: maneja la optimización del formato para la mayoría de las imágenes sin ningún trabajo de tu parte. Las lagunas (HTML personalizado, fondos CSS, imágenes de aplicaciones) se pueden solucionar con el uso adecuado de Liquid y el desarrollo inteligente de temas.

Pero el formato es solo la mitad de la ecuación de velocidad de la imagen. Cómo imágenes carga importa tanto como cómo son codificado. La carga diferida, la precarga de la imagen LCP y el aplazamiento de los recursos de bloqueo de renderizado contribuyen a una renderización de imágenes más rápida. Thunder Page Speed Optimizer maneja el lado de carga automáticamente.

Pruebe el rendimiento de la imagen de su tienda ahora : y verifique los diagnósticos para detectar oportunidades de optimización de imágenes restantes. Para obtener el manual de optimización completo, consulte nuestro guía completa de optimización de velocidad de Shopify.