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:

For most Shopify stores, you don't need to choose. Upload high-quality JPEG or PNG source files, and Shopify's CDN picks the optimal format per visitor. The real performance gains come from proper sizing (don't upload 4000px images for 400px displays) and optimizando cómo se cargan las imágenes : carga diferida, precarga y srcsets 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

Si bien Shopify maneja la conversión de formato automáticamente en la mayoría de los casos, los desarrolladores de temas a veces necesitan control manual. Shopify's Liquid proporciona la imagen_url filtro con un Formato Parámetro :

<!-- 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 — the hero image (often your largest image) is typically the LCP element and benefits most from format + loading optimization combined.

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.