Cómo optimizar imágenes en Shopify: tamaños, formatos y compresión

Ejemplo: preparar la foto principal de un producto

Imagina una foto nítida de 3600 × 2400 píxeles y una tienda con imágenes principales cuadradas. Los pasos ilustran un proceso, no resultados medidos de compresión ni una promesa de tamaño de descarga.

1. Elige el recorte. Prueba un cuadrado de 2400 × 2400 que muestre el producto completo. Si no cabe, cambia la composición en vez de cortar una parte importante.
2. Revisa la coherencia. Compara con dos tarjetas existentes y ajusta el espacio alrededor para que el producto tenga una escala similar.
3. Prepara un original adecuado. Compara una copia de 2048 × 2048 con el recorte completo. Conserva suficiente detalle para la vista del tema y el zoom. No amplíes un original pequeño solo para llegar a esa cifra.
4. Elige el formato. Usa un JPG nítido para una foto con fondo uniforme o PNG si necesitas transparencia. Crea las pruebas de compresión desde el original de calidad.
5. Sube y revisa. Comprueba producto, colección y vista móvil. No deben faltar bordes importantes y el zoom debe revelar detalles útiles.
6. Comprueba la versión enviada. Si la imagen sale borrosa o la página va lenta, revisa primero la versión que carga el tema antes de exportar de nuevo.

Cuando funcione en una muestra pequeña, aplica el mismo proceso a productos similares. Revisa las excepciones por separado. Una joya brillante y una caja de cartón sencilla pueden exigir distintas decisiones de calidad aun con las mismas dimensiones y composición.

Qué hace Shopify automáticamente

Distingue el archivo que subes de la versión que descarga el navegador del cliente. Reducir el primero de 4 MB a 1 MB no implica que la descarga del cliente disminuya en la misma proporción.

Shopify crea distintos tamaños y puede servir WebP o AVIF si el navegador los admite. Su guía de imágenes del tema indica que no hace falta comprimirlas manualmente antes de subirlas. El original conserva su calidad en el administrador, mientras que la tienda puede mostrar una versión optimizada.

Por eso, un original nítido y bien compuesto vale más que un archivo reducido a cualquier precio. Shopify no recupera los detalles eliminados por una compresión excesiva. Si el tema estira una versión diminuta de una foto nítida, el problema no está en el original.

Empieza por el problema visible. Si el producto queda mal recortado, ajusta la composición o el recorte del tema. Si el original está borroso, usa una foto mejor. Si una imagen nítida carga despacio, revisa la versión enviada al cliente. Volver a comprimir no es el primer paso adecuado en todos los casos.

Elegir dimensiones según el uso

Prepara la imagen para su vista útil más grande, no solo para una pequeña tarjeta. Una miniatura nítida puede ser insuficiente para la galería o el zoom. Los píxeles indican ancho y alto; el tamaño en KB o MB indica la cantidad de datos del archivo.

Shopify admite imágenes de productos y colecciones de hasta 5000 × 5000 píxeles, o 25 millones de píxeles, con archivos inferiores a 20 MB. Sugiere 2048 × 2048 para fotos cuadradas, pero no lo exige en todas las tiendas. Consulta los requisitos de los archivos multimedia de productos antes de preparar un lote grande.

Los límites pueden cambiar según dónde subas la imagen. La documentación de la sección Archivos indica 20 MB y 25 millones de píxeles; la guía de imágenes del tema menciona 20 millones para otras subidas. Sigue las indicaciones y el mensaje de error del campo concreto, en lugar de asumir el mismo límite en todo el administrador.

Una foto mostrada a 700 píxeles de ancho puede beneficiarse de una versión de 1400 en una pantalla que usa dos píxeles de imagen por cada píxel de visualización. Es un ejemplo de planificación, no una regla para duplicar todas las subidas. El zoom puede necesitar más detalle; una tarjeta pequeña debe seguir recibiendo una versión adecuada.

No conviertas todas las fotos en cuadrados porque las tarjetas cuadradas sean habituales. Una botella alta, una prenda y un paisaje pueden necesitar composiciones distintas. Mantén la forma uniforme donde facilite comparar productos.

Un banner de 1200 × 600 tiene una proporción de 2:1. Un archivo de 2400 × 1200 mantiene esa forma y aporta más detalle en pantallas de alta resolución. Son ejemplos, no requisitos de Shopify. Una zona móvil alta y estrecha puede recortar gran parte de los lados. Una imagen móvil independiente ayuda si el tema la admite.

Elegir JPG o PNG según el contenido

Prueba JPG para fotografías normales sin transparencia. Prueba PNG para fondos transparentes o gráficos con texto nítido y líneas finas que empeoran en JPG. Compara los archivos en vez de imponer un formato a todo el catálogo.

Una foto PNG puede pesar mucho más que una JPG, pero convertirla solo ayuda si el producto sigue representado con fidelidad. Revisa telas, joyas, vetas de madera y pequeñas etiquetas. Un archivo ligero que oculta esos detalles no es una buena imagen de producto.

Subir WebP es una opción, no un requisito para la entrega moderna. Shopify puede elegir el formato enviado al cliente independientemente del original. Ver AVIF en el navegador tampoco significa que debas subir archivos AVIF. Comprueba los formatos aceptados por cada campo.

Un fondo blanco no es transparente: guardar en PNG no elimina el rectángulo blanco que ya aparece detrás del producto. Revisa las imágenes transparentes sobre el fondo real de la página, especialmente bordes claros y sombras. Nuestra guía de formatos de imagen explica cuándo conviene cada formato.

Unificar las fotos sin recortar detalles importantes

La relación de aspecto es la proporción entre ancho y alto. Las fotos de 2000 × 2000 y 1000 × 1000 son cuadradas, aunque contienen distinta cantidad de detalle. La forma no basta: el producto debe ocupar una proporción similar en cada foto principal.

Compara una fila de tarjetas. Si un zapato llena el encuadre y otro tiene mucho espacio blanco alrededor, la fila parece irregular pese a las mismas dimensiones. Ajusta la composición para facilitar la comparación y deja espacio suficiente para mostrar todos los bordes del producto.

Recortar elimina parte de la imagen; redimensionar cambia sus dimensiones; estirar altera sus proporciones. Usa el recortador de imágenes para la composición y la herramienta de cambio de tamaño para reducir las dimensiones proporcionalmente. Estirar una botella para llenar un cuadrado transmite una idea incorrecta de su forma.

Para preparar una serie, usa el optimizador de imágenes de producto: elige un lienzo y unos márgenes comunes, recorta o coloca cada foto y compara el conjunto en Todas las imágenes. Comprueba que los productos similares ocupen una parte parecida del encuadre. Un lienzo común no corrige automáticamente las diferencias de composición. Exporta un JPG nítido, o PNG si necesitas transparencia, y compruébalo en tu tema. La herramienta prepara archivos; Shopify sigue gestionando su entrega y el tema su presentación.

Según el tema, Shopify permite definir un punto focal para mantener visible una zona importante al recortar. Ayuda con una cara o un producto en un banner, pero no garantiza que toda una composición ancha quepa en una pantalla estrecha. Revisa ambas vistas.

Añade títulos promocionales y botones en los campos de texto del tema cuando sea posible. El texto incrustado en un banner puede quedar diminuto o cortado en el móvil. El texto real se adapta a las líneas y puede seleccionarse; un botón real funciona como enlace, no como una simple ilustración.

Cuándo conviene comprimir antes de subir

Comprimir ayuda si el original es innecesariamente grande, tarda en subirse o supera un límite. Aporta menos si ya es nítido y manejable y Shopify sirve una versión adecuada. No reduzcas la calidad solo para forzar todas las fotos por debajo de un objetivo arbitrario, como 100 KB.

Guarda una copia intacta. Si las dimensiones sobran para ese uso, reduce primero una copia y después prueba su compresión. Para un bloque pequeño, esto puede ahorrar más que comprimir reiteradamente un original enorme. El zoom del producto puede justificar conservar más detalle.

Para comparar una copia comprimida, usa el compresor de imágenes de Pixilo. Admite hasta 20 JPG, PNG o WebP a la vez, de 25 MB como máximo cada uno, y conserva formato y dimensiones. Sus límites son distintos de los de Shopify. Empieza con unas pocas imágenes representativas y revísalas antes de procesar el resto.

La compresión PNG de esta herramienta no tiene pérdidas: los píxeles no cambian. Un PNG ya bien comprimido puede reducirse poco. JPG y WebP pueden alterar detalles finos; comprueba la copia descargada. Si no produce un archivo más pequeño, Pixilo conserva el original.

Compara las fotos al tamaño que verá el cliente y en el zoom disponible. Revisa texturas, etiquetas pequeñas, fondos uniformes y bordes transparentes. Vuelve al original si se pierden detalles útiles. Nuestra guía de optimización de imágenes de producto explica estas comprobaciones con más detalle.

Escribir texto alternativo útil y nombres claros

El SEO de imágenes empieza con una foto que ayuda a entender el producto. Dale un nombre descriptivo antes de subirla, como mochila-lona-verde-oliva-vista-frontal.jpg. Evita listas largas de palabras clave. El nombre debe distinguirla de una vista lateral o una foto de detalle.

El texto alternativo describe la imagen por escrito. En una foto relevante, explica la vista: «Mochila de lona verde oliva, vista frontal con dos bolsillos exteriores». En un detalle, describe ese detalle en vez de repetir el texto principal. No añadas precios, descuentos o palabras clave que la imagen no ayude a explicar.

La guía de Google sobre SEO de imágenes recomienda nombres descriptivos y texto alternativo útil sin acumular palabras clave. El texto cercano también aporta contexto. El nombre es una pista pequeña, no sustituye una página de producto útil.

Añadir texto alternativo a una imagen de producto en Shopify

1. En el administrador de Shopify, abre Productos y selecciona el producto.
2. Haz clic en la imagen de la sección multimedia para abrir la vista previa.
3. Selecciona Agregar texto alternativo, escribe una descripción breve y selecciona Guardar texto alternativo.
4. Repite con las demás vistas útiles y describe qué muestra cada una.

Estos pasos siguen las instrucciones de Shopify para el texto alternativo de productos. Los banners del tema tienen sus propios controles. Revisa cualquier descripción sugerida antes de aceptarla: color, material y detalles deben corresponder a la foto.

No supongas que una descripción en las propiedades del archivo se convierte automáticamente en texto alternativo. El tema puede usar la misma imagen de formas distintas. Una imagen decorativa puede necesitar una alternativa vacía; una imagen enlazada debe comunicar el destino del enlace.

Nuestra guía de texto alternativo y nombres de archivo explica estos casos con ejemplos. Las descripciones ayudan a la accesibilidad y comprensión, pero no garantizan posiciones ni reemplazan información de producto ausente.

Revisar la tienda publicada en móvil y ordenador

La vista previa del administrador no basta. Empieza con estas comprobaciones en la tienda publicada, sin herramientas de desarrollo.

• Abre un producto en el móvil. ¿Se ve completo? ¿Se leen las etiquetas importantes y se distingue el material?
• Revisa una fila de colección. ¿Las imágenes principales tienen formas y márgenes coherentes?
• Prueba la galería y el zoom. ¿Las fotos extra aportan detalles útiles? ¿El color o variante elegido muestra el producto correcto?
• Recarga la página. ¿Aparece pronto la foto principal? ¿Los textos y botones se mantienen en su sitio durante la carga?
• Repite en una pantalla grande. Revisa banners anchos y vistas amplias del producto, no solo la vista previa estrecha.

Investigar una imagen borrosa o lenta

Si sigue borrosa, comprueba si el tema estira una versión pequeña. Si una tarjeta pequeña descarga un archivo enorme, revisa las versiones que ofrece el tema. Las imágenes adaptables permiten al navegador elegir tamaños según la pantalla y el diseño.

La documentación de image_tag de Shopify explica las opciones de tamaño en el código del tema. Si requiere una corrección, pide al desarrollador que revise las dimensiones solicitadas y los atributos srcset y sizes. Subir cada tamaño de miniatura por separado no resuelve un problema del código.

Si conoces las herramientas de desarrollo, el panel Red muestra las descargas reales. También puedes enviar la página y la imagen afectadas al desarrollador del tema.

1. Abre la página de producto y las herramientas de desarrollo y selecciona Red (Network).
2. Con el panel abierto, desactiva la caché del navegador para la prueba y recarga. Así inspeccionas una descarga nueva en vez de una copia guardada.
3. Filtra por imágenes y localiza la foto principal. Comprueba la vista previa de la solicitud para no confundirla con una miniatura de la galería.
4. Revisa el tamaño transferido, las dimensiones y la cabecera de respuesta Content-Type. Una URL que parece JPG puede entregar WebP o AVIF.
5. Repite tras recargar con el ancho del diseño móvil. Comprueba que la vista pequeña no descargue innecesariamente la versión más grande.

No juzgues la entrega solo por el peso. Una versión grande puede tener sentido para pantallas de alta resolución o zoom. Busca desajustes claros: una miniatura estirada en toda la galería o un original a máxima resolución para cada tarjeta pequeña.

La foto principal de la parte superior debe estar disponible pronto. Las imágenes inferiores suelen poder esperar hasta que el visitante se acerque. Shopify desaconseja la carga diferida de imágenes visibles sin desplazarse. Si la primera foto aparece tarde, pide revisar la carga del tema; cargar toda la galería inmediatamente puede crear otro problema.

Separar velocidad de carga y movimientos de la página

Si la foto principal es el elemento visible más grande, puede influir en Largest Contentful Paint (LCP), que mide cuándo aparece la imagen o bloque de texto visible más grande. Una descarga menor ayuda si descargar la imagen forma parte del retraso. Una solicitud tardía puede seguir siendo lenta tras comprimir. La guía de LCP de Google explica la diferencia.

Si al aparecer una foto desplaza el precio o botón de compra hacia abajo, el tema quizá no reservó suficiente espacio. Esto contribuye a Cumulative Layout Shift (CLS), que mide movimientos inesperados de la página. Reserva el espacio de la imagen en el diseño en vez de comprimir más. Consulta la guía de Google sobre cambios de diseño y nuestra guía de imágenes y Core Web Vitals.

Compara la misma página antes y después en condiciones similares, cambiando una cosa cada vez. Distingue la prueba simulada de PageSpeed de los posibles datos de visitantes reales. Los resultados varían y esos datos no se actualizan inmediatamente. Anota el problema corregido en lugar de confiar en una sola puntuación mejor.

Encontrar la causa antes de cambiar todas las imágenes

La guía de rendimiento de Shopify también señala temas, aplicaciones y código añadido. Los informes usan datos de visitantes reales. Si la entrega de imágenes ya es eficiente, busca el cuello de botella restante en vez de añadir otra aplicación o comprimir más el catálogo.

¿Qué imágenes conviene mejorar primero?

Empieza por la foto principal y la tarjeta de un producto muy visitado, después por un banner destacado del inicio. Prioriza un problema visible: etiqueta ilegible, producto cortado o foto tardía. La quinta imagen de una galería poco visitada suele importar menos que la foto principal que ayuda al cliente a decidir si sigue navegando.

Anota página, dimensiones originales, recorte, formato y mejora observada. Guarda el original para deshacer un mal resultado. Aplica el proceso validado a productos similares y revisa las excepciones por separado, en vez de sustituir todo el catálogo de golpe.

Preguntas frecuentes

¿Cuál es el mejor tamaño para fotos de productos en Shopify?

No hay un tamaño ideal para todo. 2048 × 2048 píxeles es un buen inicio para fotos cuadradas, pero tema, composición y zoom determinan la necesidad. Usa un original nítido dentro de los límites y revisa la página publicada. No amplíes una foto pequeña solo para alcanzar 2048 píxeles.

¿Shopify comprime las imágenes automáticamente?

Shopify optimiza la entrega y puede enviar distintos tamaños y formatos. No significa que sustituya el original del administrador por una copia muy comprimida. Puedes mejorar el recorte y las dimensiones antes de subir, sin tener que comprimir cada imagen.

¿Todas las fotos deben pesar menos de 200 KB?

No. Un límite arbitrario puede eliminar detalles útiles, especialmente en fotos con zoom. Comprueba tamaño y calidad de la versión que descarga el cliente. Una tarjeta pequeña y una vista detallada grande tienen necesidades distintas.

¿Es mejor PNG o JPG para Shopify?

Prueba JPG para fotos sin transparencia y PNG para gráficos transparentes o texto que pierde nitidez en JPG. Revisa los detalles finos del producto. Shopify puede entregar un formato distinto al que subes.

¿Necesito una aplicación de optimización de imágenes?

No solo para obtener la entrega automática de Shopify. Puede servir para gestionar una biblioteca grande u otra tarea concreta. Identifica primero qué no resuelven las herramientas existentes y el tema. Prueba su efecto real en una página antes de usarla en toda la tienda.

¿Hace falta una imagen distinta para cada pantalla?

Normalmente no para fotos de producto: un tema bien hecho solicita varios tamaños del mismo original. Una composición móvil distinta ayuda si el banner de escritorio corta el sujeto en el teléfono. Es una decisión de diseño, no un motivo para duplicar todas las fotos.