Optimización de Imágenes para Shopify, WordPress y Next.js (2026)

Cada plataforma es diferente

Shopify, WordPress y Next.js manejan imágenes de manera diferente. Algunos hacen la mayoría del trabajo por ti; otros te dan control completo pero requieren configuración manual. Esta guía cubre lo que cada plataforma hace fuera de la caja, qué huecos quedan y cómo llenarlos.

Shopify

Qué hace Shopify automáticamente

El CDN de Shopify maneja bastante:

• Convierte imágenes a WebP cuando el navegador lo soporta
• Genera múltiples tamaños para entrega responsiva
• Sirve desde un CDN global (propio de Shopify)
• Lazy carga de imágenes usando lazy loading nativo del navegador

Para una tienda básica de Shopify, esto es a menudo suficiente. Tus imágenes están optimizadas y se sirven eficientemente sin tocar ningún código.

Qué no hace Shopify

No comprime antes de almacenar. Cuando subes una foto de producto de 5MB, Shopify almacena el original. Crea versiones optimizadas al vuelo, pero la configuración de calidad de conversión está fija — no puedes ajustar los niveles de compresión.

Las imágenes del tema no siempre están optimizadas. Los banners hero, imágenes promocionales y gráficos decorativos de tu tema se sirven tal como están. Si subes una imagen hero PNG no comprimida, eso es lo que se sirve.

Qué deberías hacer

Optimiza imágenes antes de subirlas. Comprime y redimensiona tus fotos de producto e imágenes del tema antes de subirlas a Shopify. Objetivo: WebP o JPEG a calidad 80, dimensionado al máximo de visualización (usualmente 2048px para imágenes de producto).

{%- comment -%} Usa image_tag de Shopify para imágenes responsivas {%- endcomment -%}
{{ product.featured_image | image_url: width: 800 | image_tag:
  loading: 'lazy',
  widths: '200,400,600,800'
}}

WordPress

Qué hace WordPress automáticamente

Muy poco, comparado con Shopify:

• Genera múltiples tamaños de miniatura (150, 300, 768, 1024px)
• Lazy carga de imágenes desde WordPress 5.5
• Atributos srcset responsivos básicos en etiquetas <img>

Qué no hace WordPress

Sin conversión de formato. WordPress sirve imágenes en el formato que subes. Subes JPEG, obtienes JPEG. No convertirá a WebP automáticamente.

Sin compresión significativa. WordPress aplica compresión mínima al generar miniaturas, pero la configuración de calidad es laxa. La mayoría de las imágenes son más grandes de lo que necesitan ser.

Plugins recomendados

Necesitas un plugin para optimización de imágenes seria en WordPress:

ShortPixel es la elección más fuerte para la mayoría de sitios de WordPress. Ofrece modos con pérdida, glossy y sin pérdida, convierte automáticamente a WebP/AVIF y procesa masivamente las imágenes existentes.

Qué deberías hacer

1. Instala ShortPixel (o Imagify)
2. Ejecuta optimización masiva en los medios existentes
3. Habilita conversión automática a WebP
4. Agrega width y height explícitos a las plantillas de imagen de tu tema
5. Pre-optimiza imágenes antes de subir — no confíes solo en la compresión del plugin

Next.js

Qué hace Next.js automáticamente

Next.js tiene la mejor optimización de imágenes incorporada de los tres:

• Conversión automática de formato a WebP o AVIF (basado en el encabezado Accept del navegador)
• Redimensionamiento y optimización bajo demanda
• Lazy loading por defecto
• Placeholders con blur
• Generación automática de srcset

Para información detallada sobre el componente Image de Next.js, consulta la documentación oficial de Next.js.

Todo esto sucede a través del componente next/image:

import Image from "next/image";

<Image
  src="/product.jpg"
  alt="Product photo"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, 800px"
/>

Qué no hace Next.js

La optimización sucede en tiempo de solicitud (o tiempo de construcción), no en tiempo de subida. La primera solicitud para cada combinación de imagen/tamaño/formato es más lenta porque el servidor tiene que generarla. Las solicitudes subsiguientes se cachean.

Necesitas usar el componente <Image>. Las etiquetas <img> regulares saltan toda la optimización. Si estás usando dangerouslySetInnerHTML o renderizando markdown, las imágenes dentro no se optimizarán.

Qué deberías hacer

// Para imagen LCP above-the-fold — carga inmediatamente con prioridad alta
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority
  sizes="100vw"
/>

// Para imágenes below-the-fold — el lazy loading por defecto está bien
<Image
  src="/feature.jpg"
  alt="Feature"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, 50vw"
/>

Configura tus ajustes de optimización en next.config.js:

// next.config.js
module.exports = {
  images: {
    formats: ["image/avif", "image/webp"],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920],
    minimumCacheTTL: 60 * 60 * 24 * 365, // 1 año
  },
};

La regla universal: optimiza antes de subir

Independientemente de la plataforma, una práctica aplica en todas partes: comprime y redimensiona las imágenes antes de subirlas. La optimización automática de ninguna plataforma es tan efectiva como comenzar con una fuente ya optimizada.

Una foto DSLR de 6000×4000 a 12MB es desperdiciosa incluso si tu plataforma la redimensiona. Estás pagando por almacenamiento, ralentizando tu panel de administración y confiando en el procesamiento del lado del servidor que añade latencia.

El flujo de trabajo: redimensiona a tu dimensión máxima de visualización, convierte a WebP a calidad 80, luego sube. La capa de optimización de tu plataforma trabaja encima de un archivo ya eficiente.

Pre-optimiza para cualquier plataforma

Comprime, redimensiona y convierte imágenes antes de subir a Shopify, WordPress o cualquier lugar. Gratis, en tu navegador.

Get Started