Las imágenes son más que decoración: influyen en la accesibilidad, el SEO y la velocidad de carga, tres factores que afectan la visibilidad y la conversión de una tienda Shopify. Esta guía práctica explica cómo redactar ALT eficaces, elegir formatos y compresión adecuados, y montar un flujo de trabajo automatizado que mantenga la tienda rápida y accesible sin perder calidad visual. ⏱️ 6-min read
A continuación encontrarás recomendaciones aplicables, ejemplos concretos y un flujo paso a paso para integrar estas prácticas en Shopify (y WordPress), con herramientas y métricas para medir el impacto.
ALT y accesibilidad para SEO en Shopify
El atributo alt describe una imagen para lectores de pantalla y motores de búsqueda. En una ficha de producto, un ALT bien escrito comunica qué se ve, la variante y el uso, mejora la experiencia de usuarios con discapacidad y aporta contexto semántico a Google.
Buenas prácticas: - Describe con precisión lo que muestra la imagen: nombre del producto + atributo relevante (color, talla, variante, función). Ejemplo: "zapatillas Nike Air ZoomX, gris, talla 9". - Mantén el ALT único para cada imagen de la misma ficha: no repitas textos ni uses nombres genéricos como "imagen1". - Longitud recomendada: entre ~50 y 125 caracteres cuando sea posible; sé conciso y útil. - Integra palabras clave solo si encajan de forma natural; evita el keyword stuffing. - Para imágenes puramente decorativas, usa alt="" (cadena vacía) para que los lectores de pantalla las ignoren. - Nombra los archivos descriptivamente (ej.: camiseta-azul-lifestyle.webp) y evita espacios.
Ejemplos prácticos por contexto: - Foto de producto (vista frontal): "camiseta azul de algodón orgánico, talla M, vista frontal". - Foto lifestyle: "mochila gris con compartimento para portátil, uso urbano". - Accesorio con función: "funda impermeable para smartwatch, compatible con Series 6".
Transición: además del texto ALT, el formato y la compresión determinan el rendimiento; veamos qué usar según el caso.
Compresión y formatos: qué usar y cuándo
Elegir el formato correcto y ajustar la compresión reduce el peso de la página sin sacrificar la claridad necesaria para vender.
Formatos recomendados: - WebP y AVIF: mejor relación calidad/peso en navegadores modernos; úsalos como formato principal cuando tu tema o CDN los soporten. - JPEG: ideal para fotografías de producto con gradientes complejos; buena compresión a nivel perceptual. - PNG: reservado para gráficos con texto, iconos o transparencia (más pesado).
Parámetros y objetivos prácticos: - Calidad JPEG: 70–80 suele equilibrar detalle y tamaño. - Ancho de referencia para fotos de producto: 1.500–2.048 px (suficiente para zoom y retina sin exceder peso). - Tamaño objetivo por imagen de producto: entre 80–200 KB; un rango práctico suele ser 100–200 KB para mantener detalle y velocidad (puede bajar a 60–120 KB en imágenes sin zoom excesivo). - WebP/AVIF permiten reducir esos tamaños manteniendo la nitidez perceptible. - Habilita lazy loading para imágenes no críticas (galería por debajo del fold, listas de colección) y reserva carga prioritaria para la imagen principal del producto.
Compatibilidad y respaldo: - Convierte a WebP/AVIF y conserva versiones JPEG/PNG como fallback para navegadores antiguos si tu tema no gestiona automáticamente los fallback. - Usa un CDN que sirva el formato óptimo por navegador o una app que entregue WebP cuando sea compatible.
Herramientas prácticas: - Compresión local: TinyPNG, ImageOptim. - Apps y automatizadores en Shopify: TinyIMG, Crush, Image Optimizer, o el optimizador nativo/servicios del CDN. - Nombres de archivo descriptivos y consistentes facilitan el SEO y la gestión.
Transición: estas optimizaciones deben incorporarse a un flujo repetible; la automatización evita errores y acelerará la publicación.
Flujo de trabajo en Shopify y automatización
Para que la optimización sea sostenible en tiendas con muchas referencias, conviene implantar un proceso automatizado y revisiones periódicas.
Flujo recomendado (pasos): 1. Auditar imágenes existentes: - Inventario de imágenes en productos, colecciones y blog. - Detecta imágenes sin ALT, con ALTs duplicados o archivos muy pesados. 2. Preparar y convertir: - Redimensiona a ancho objetivo (1.500–2.048 px). - Comprímelas (JPEG 70–80) y genera WebP/AVIF. - Nombra archivos de forma descriptiva. 3. Asignar ALT y metadatos: - Escribe ALT únicos por imagen; añade etiquetas Open Graph y títulos si aplica. 4. Automatizar en subida: - Configura reglas en apps para que cada imagen subida se comprima, convierta a WebP/AVIF y reciba un ALT por defecto editable. 5. Publicar y medir: - Mide LCP, CLS y TBT con Lighthouse / PageSpeed Insights; monitoriza antes y después. 6. Revisión periódica: - Escanea la tienda cada X meses para detectar degradación, imágenes sin ALT o cambios en el tema que afecten a la entrega de formatos modernos.
Automatización y herramientas avanzadas: - Trafficontent: puede generar imágenes y prompts optimizados, crear textos ALT coherentes, programar publicaciones y añadir tags Open Graph y UTM para tracking en redes. Es útil cuando gestionas catálogos amplios y necesitas coherencia entre producto, blog y redes sociales. - Apps de optimización: activan conversión automática a WebP/AVIF, compresión en subida y reescalado por plantillas de tema. - Integración con analytics: añade parámetros UTM a las URL de campañas y verifica rendimiento por origen.
Medición y casos de éxito: - Mide impacto con Lighthouse/PageSpeed Insights sobre LCP, CLS y TBT; los resultados reales suelen mostrar reducciones importantes en LCP (por ejemplo, 3.8s → 1.6s) y mejoras en CLS y TBT tras optimizar imágenes y formatos. - Expectativa: mejoras de velocidad móvil que se traduzcan en mejor experiencia y potencial aumento de conversión.
Checklist rápida antes de publicar una ficha
- [ ] Archivo con nombre descriptivo y guiones (ej.: mochila-gris-portatil.webp). - [ ] Tamaño de imagen optimizado (objetivo 80–200 KB según necesidad). - [ ] Ancho adecuado (1.500–2.048 px para producto). - [ ] Versión WebP/AVIF generada y fallback JPEG/PNG si hace falta. - [ ] ALT único y descriptivo (50–125 caracteres aprox.). - [ ] Lazy loading configurado para imágenes no críticas. - [ ] Open Graph + UTM configurados para compartir en redes.Conclusión Optimizar imágenes en Shopify combina redacción (ALT precisos), técnica (compresión y formatos modernos) y procesos (automatización y medición). Implantando las prácticas descritas y apoyándote en herramientas como Trafficontent y apps de optimización, reducirás tiempos de carga, mejorarás accesibilidad y favorecerás el posicionamiento y la conversión de tu tienda. Comienza con una auditoría rápida y aplica las reglas de forma sistemática: los beneficios suelen ser perceptibles en pocas semanas.
