Optimización de Imágenes en PrestaShop: Alt Tags, Lazy Loading y Velocidad de Carga

Las imágenes son la carga más pesada en casi todas las tiendas PrestaShop con las que he trabajado. Fotografía de producto, banners de categoría, gráficos promocionales — en una página típica de listado de productos, las imágenes representan entre el 50 y el 70% del peso total de la página. Según datos de HTTP Archive, la mediana de bytes de imagen en páginas móviles se ha multiplicado por más de diez entre 2011 y 2025 (fuente: NitroPack). Eso no es una tendencia — es una carrera armamentística contra la velocidad de carga.

Y la velocidad de carga ya no es solo cuestión de experiencia de usuario. Las imágenes son responsables del elemento Largest Contentful Paint (LCP) en el 85% de las páginas de escritorio y el 76% de las páginas móviles (fuente: MDN). Tu imagen hero de producto es casi seguro tu elemento LCP, lo que significa que tu estrategia de optimización de imágenes determina directamente si Google considera tus Core Web Vitals como "buenos", "necesitan mejora" o "deficientes".

Esta guía cubre todo lo que he aprendido optimizando imágenes en decenas de tiendas PrestaShop: selección de formato con datos reales de tamaño de archivo, ajustes de calidad de compresión, implementación nativa de lazy loading, el atributo fetchpriority que la mayoría de tiendas todavía no utilizan, impacto en Core Web Vitals, regeneración de imágenes en PrestaShop y cifras reales de antes y después en tiendas en producción.

Formatos de imagen: JPEG vs. WebP vs. AVIF — Con números reales

Voy a acabar con el debate de formatos con datos reales. Pasé la misma foto de producto de 800x800 (una cartera de piel sobre fondo blanco — toma típica de e-commerce) por cada formato con calidad visual comparable:

Los números hablan por sí solos. Pero la selección de formato no es solo cuestión de ratios de compresión — se trata de saber qué formato usar en cada caso.

JPEG: La base

JPEG sigue siendo la opción segura por defecto. Soporte universal en navegadores, renderizado predecible y comportamiento de compresión bien conocido. Para tiendas que no pueden implementar negociación de formato (servir diferentes formatos a diferentes navegadores), JPEG con calidad 80-85 es perfectamente aceptable. Por encima de 85, el tamaño del archivo aumenta drásticamente con ganancias de calidad casi imperceptibles — la mayoría de personas no pueden distinguir un JPEG 85 de un JPEG 100 en una foto de producto.

WebP: El ganador práctico

WebP ofrece una reducción del 25-35% en tamaño de archivo respecto a JPEG con calidad visual equivalente. Con un 97% de soporte en navegadores en 2026 — todos los navegadores modernos incluido Safari — ya no hay una razón significativa para evitar WebP como formato principal. El ajuste óptimo de calidad para WebP es 75-85, donde se obtiene el mejor equilibrio entre compresión y fidelidad visual.

Para tiendas PrestaShop, WebP es el formato que recomiendo como estándar de producción hoy en día. La diferencia en soporte de navegadores es insignificante y el ahorro es sustancial.

AVIF: El líder en rendimiento

AVIF ofrece archivos hasta un 50% más pequeños que JPEG — aproximadamente el doble del ahorro de WebP. A tasas de bits bajas (imágenes muy comprimidas), AVIF mantiene una calidad significativamente mejor que tanto JPEG como WebP, produciendo menos artefactos de compresión. El ajuste de calidad recomendado es 60-70, que normalmente se ve equivalente a JPEG 85 (fuente: Two Row Studio).

La contrapartida: el soporte de navegadores se sitúa en aproximadamente un 92% en 2026. Esto significa que roughly 1 de cada 12 visitantes podría no soportar AVIF. La solución es el elemento <picture> con formatos alternativos:

<picture>
  <source srcset="product-image.avif" type="image/avif">
  <source srcset="product-image.webp" type="image/webp">
  <img src="product-image.jpg" alt="Cartera de piel azul - vista frontal con ranuras para tarjetas"
       width="800" height="800" loading="lazy">
</picture>

El navegador selecciona el primer formato que soporta. Los navegadores compatibles con AVIF obtienen el archivo más pequeño. Los compatibles con WebP obtienen la siguiente mejor opción. Los demás recurren a JPEG. Cero problemas de compatibilidad, máxima compresión para cada visitante.

PNG: Solo para gráficos

PNG usa compresión sin pérdida y produce archivos dramáticamente más grandes para fotografías. Nunca uses PNG para fotos de producto — es 3-5 veces más grande que JPEG sin beneficio visible de calidad. PNG es correcto para logotipos, iconos y gráficos con texto, bordes nítidos o fondos transparentes. Para todo lo demás, usa WebP o AVIF.

Compresión en la práctica: Antes y después

Así es como se ve la optimización de imágenes en una página real de categoría PrestaShop mostrando 20 productos:

Antes de la optimización

• 20 imágenes de producto como PNG (subidas originales): 11,6 MB en total
• Banner de categoría: 1,8 MB (PNG de 4000x1000)
• Carga total de imágenes: 13,4 MB
• Tiempo de carga de página: 6,2 segundos (móvil 4G)
• LCP: 4,8 segundos

Después de la optimización

• 20 imágenes de producto como WebP (calidad 80, redimensionadas a 600x600): 1,4 MB en total
• Banner de categoría como WebP (redimensionado a 1920x480): 95 KB
• Carga total de imágenes: 1,5 MB
• Tiempo de carga de página: 1,8 segundos (móvil 4G)
• LCP: 1,6 segundos

Eso es una reducción del 89% en carga de imágenes y una mejora del 67% en LCP — de "deficiente" a "bueno" en la escala de Core Web Vitals de Google, solo con las imágenes.

Las dos mayores ganancias no fueron exóticas: redimensionar a las dimensiones reales de visualización (nadie necesita una imagen de 4000px mostrada a 600px), y convertir de PNG a WebP. La compresión reduce los tamaños de archivo entre un 50-80% mediante optimización con pérdida (fuente: NitroPack).

Etiquetas Alt: Más que una casilla de SEO

Cada imagen de tu tienda necesita un atributo alt descriptivo. Esto no es opcional — cumple tres funciones distintas:

1. Accesibilidad: Los lectores de pantalla usan el texto alt para describir imágenes a usuarios con discapacidad visual. En muchas jurisdicciones (UE, EE.UU., Reino Unido), la accesibilidad web es un requisito legal. Una tienda online con etiquetas alt vacías es potencialmente no conforme.
2. SEO: Los motores de búsqueda no pueden ver imágenes. El texto alt es cómo Google entiende lo que representa una imagen, lo que determina si aparece en los resultados de Google Imágenes. Para imágenes de producto, la búsqueda de imágenes puede generar entre el 10-15% del tráfico orgánico total.
3. Respaldo: Cuando una imagen no carga (conexión lenta, caída del CDN, ruta rota), el texto alt se muestra en su lugar, manteniendo el contexto para el usuario.

Escribir etiquetas Alt que realmente funcionen

He auditado cientos de tiendas PrestaShop, y los mismos errores en etiquetas alt aparecen en todas partes:

Mal:

alt=""                          — Vacío, no proporciona información
alt="image1"                    — Nombre de archivo sin sentido
alt="product"                   — Demasiado genérico
alt="comprar cartera cuero azul barata mejor precio envío gratis" — Relleno de palabras clave

Bien:

alt="Cartera de piel azul tipo billetera, vista frontal mostrando ranuras para tarjetas"
alt="Cartera de piel cosida a mano en azul marino, abierta mostrando 6 compartimentos"
alt="Embalaje de la cartera — caja regalo con cierre magnético"

La fórmula: nombre del producto + característica distintiva + contexto. Mantenlo por debajo de 125 caracteres. Describe lo que la imagen realmente muestra — no lo que quieres posicionar.

Para un producto con 5 imágenes, cada etiqueta alt debe ser única, describiendo ese ángulo o vista específicos. No cinco copias del nombre del producto.

Automatizar etiquetas Alt en PrestaShop

Escribir manualmente etiquetas alt para 5.000 productos con 3-5 imágenes cada uno no es realista. Son entre 15.000 y 25.000 etiquetas alt individuales. Usa un módulo como Automatic SEO Images Alt Tags para generar etiquetas alt a partir de los datos del producto — nombre, categoría, atributos clave — y luego revisa y mejora manualmente los productos de mayor tráfico.

Las etiquetas alt automatizadas no son perfectas, pero son infinitamente mejores que atributos alt vacíos en todo tu catálogo.

Lazy Loading: La mayor ganancia rápida para la velocidad de página

El lazy loading pospone la descarga de imágenes hasta que están a punto de entrar en el viewport (el área visible de la pantalla). En una página de categoría que muestra 40 productos, solo los primeros 4-8 son visibles sin hacer scroll — el lazy loading significa que las otras 32-36 imágenes no consumen ancho de banda hasta que el usuario se desplaza hasta ellas.

Lazy Loading nativo: El enfoque moderno

Dado que HTML ahora soporta lazy loading de forma nativa, la implementación es un solo atributo:

<img src="product.webp" alt="Cartera de piel azul"
     width="600" height="600" loading="lazy">

Eso es todo. Sin biblioteca JavaScript, sin configuración, sin polyfill. El atributo loading="lazy" está soportado por el 95% de los navegadores en 2026. Los navegadores que no lo soportan simplemente cargan la imagen normalmente — degradación gradual sin ningún inconveniente.

El error crítico: Aplicar Lazy Loading a tu imagen LCP

Este es el error de rendimiento más común que veo, y el equipo de MDN Web Docs lo señala específicamente: el 16% de las páginas aplican lazy loading a su imagen LCP, lo que constituye uno de los patrones de rendimiento más dañinos en la web (fuente: MDN).

Tu imagen LCP — normalmente la imagen hero del producto en una página de producto, o la primera imagen visible en una página de categoría — debe cargar lo más rápido posible. Aplicarle lazy loading añade un retraso artificial: el navegador tiene que primero renderizar el diseño de la página, luego calcular que la imagen está en el viewport, y después empezar a descargarla. Esto añade 200-500ms a tu tiempo de LCP.

El enfoque correcto para tu imagen LCP:

<img src="hero-product.webp" alt="Cartera de piel azul - imagen principal del producto"
     width="800" height="800"
     loading="eager"
     fetchpriority="high">

El atributo loading="eager" (el valor por defecto del navegador) asegura la carga inmediata. El atributo fetchpriority="high" indica al navegador que priorice esta imagen sobre otros recursos como hojas de estilo y scripts. En 2026, fetchpriority está soportado en todos los navegadores modernos, pero solo el 17% de las páginas lo usan en su imagen LCP (fuente: Two Row Studio). Esta es una optimización enormemente desaprovechada.

La regla: Eager por encima del pliegue, Lazy por debajo

• Imagen hero de página de producto: loading="eager" fetchpriority="high"
• Primera fila de productos en página de categoría (normalmente 3-4 imágenes): loading="eager"
• Todo lo demás: loading="lazy"
• Logotipo e imágenes de navegación: loading="eager" (siempre visibles)

Implementar este patrón en una tienda PrestaShop normalmente requiere modificar la plantilla de producto y la plantilla de listado de categoría. Un módulo como Automatic SEO Images Lazy Tags lo gestiona automáticamente, aplicando lazy loading a las imágenes por debajo del pliegue mientras mantiene las imágenes críticas con carga eager.

Lazy Loading basado en JavaScript: Cuando necesitas más control

El lazy loading nativo cubre el 95% de los casos de uso. El 5% restante — casos en los que necesitas animaciones de fundido, carga progresiva con marcadores borrosos, o control específico del umbral — requieren un enfoque JavaScript. Bibliotecas como lazysizes o lozad.js proporcionan estas funcionalidades manteniendo un buen rendimiento.

Sin embargo, el lazy loading basado en JavaScript añade su propia sobrecarga (descarga del script, análisis y tiempo de ejecución). Para la mayoría de tiendas PrestaShop, el lazy loading nativo es suficiente y preferible.

Prevenir el cambio de diseño (CLS) con dimensiones de imagen adecuadas

El Cumulative Layout Shift (CLS) mide cuánto se mueve inesperadamente el contenido de la página durante la carga. Las imágenes sin atributos explícitos de width y height son la causa principal de CLS en sitios de e-commerce — a medida que cada imagen carga, el navegador recalcula el diseño, desplazando el contenido.

La solución es sencilla: incluye siempre atributos width y height en cada etiqueta <img>:

<img src="product.webp" alt="Cartera de piel azul"
     width="600" height="600" loading="lazy">

Con CSS, puedes hacer que las imágenes sean responsive mientras evitas el cambio de diseño:

img {
  max-width: 100%;
  height: auto;
}

El navegador usa los atributos width y height para calcular la relación de aspecto antes de que la imagen cargue, reservando el espacio correcto en el diseño. Añadir atributos de ancho y alto elimina la mayoría de problemas de CLS por completo (fuente: NitroPack).

Imágenes responsive: Servir el tamaño adecuado a cada dispositivo

Una imagen de producto de 1200px mostrada a 300px en un teléfono móvil desperdicia el 75% de los bytes descargados. Las imágenes responsive solucionan esto proporcionando múltiples tamaños y dejando que el navegador elija el más apropiado:

<img srcset="product-300w.webp 300w,
             product-600w.webp 600w,
             product-900w.webp 900w,
             product-1200w.webp 1200w"
     sizes="(max-width: 576px) 300px,
            (max-width: 768px) 600px,
            900px"
     src="product-900w.webp"
     alt="Cartera de piel azul"
     width="900" height="900"
     loading="lazy">

El atributo srcset lista los archivos de imagen disponibles con sus anchos. El atributo sizes indica al navegador qué tamaño de visualización esperar a diferentes anchos de viewport. El navegador combina esta información con la ratio de píxeles del dispositivo para seleccionar el archivo óptimo.

PrestaShop genera múltiples tamaños de imagen a través de su configuración de tipos de imagen (Back Office → Diseño → Ajustes de imagen). Asegúrate de tener configurados tipos de imagen para los tamaños que tu tema realmente utiliza. Tamaños comunes para imágenes de producto:

• Miniatura pequeña: 125x125 (carrito, mini-carrito)
• Mediana: 300x300 (listados de categoría en móvil)
• Grande: 600x600 (listados de categoría en escritorio)
• Extra grande: 1200x1200 (imagen hero de producto, zoom)

Regeneración de imágenes en PrestaShop

Después de cambiar las dimensiones de los tipos de imagen o añadir nuevos tipos, necesitas regenerar todas las imágenes de producto. PrestaShop necesita crear nuevas miniaturas con los tamaños actualizados.

Desde el Back Office

Navega a Diseño → Ajustes de imagen y haz clic en "Regenerar miniaturas" en la parte inferior de la página. Selecciona qué tipos de imagen regenerar (productos, categorías, marcas) y si deseas eliminar las miniaturas antiguas no utilizadas.

Para catálogos grandes, este proceso puede agotarse en el navegador. El enfoque desde el back office funciona para tiendas con menos de 2.000 productos.

Desde la línea de comandos (catálogos grandes)

Para tiendas con miles de productos, usa el comando CLI que no tiene las limitaciones de tiempo del navegador:

php bin/console prestashop:image:regenerate --type=products

Opciones disponibles:

• --type=products — regenerar solo imágenes de productos
• --type=categories — regenerar imágenes de categorías
• --type=manufacturers — regenerar imágenes de marcas/fabricantes
• Omitir --type para regenerar todos los tipos de imagen

Para catálogos muy grandes (más de 10.000 productos con múltiples imágenes cada uno), este proceso puede tardar horas. Ejecútalo en horas de bajo tráfico y monitoriza los recursos del servidor — el procesamiento de imágenes consume mucha CPU.

Conversión a WebP

PrestaShop 1.7.8+ y 8.x soportan la generación de imágenes WebP de forma nativa. Actívalo en Diseño → Ajustes de imagen → Opciones de generación de imágenes. Cuando está activado, PrestaShop genera versiones WebP junto con los originales JPEG/PNG durante la regeneración.

Si tu versión de PrestaShop no soporta la generación nativa de WebP, soluciones a nivel de servidor como mod_pagespeed (Apache) o CDN de imágenes como la función Polish de Cloudflare pueden convertir imágenes al vuelo. Un módulo dedicado de optimización de imágenes como Performance Revolution puede gestionar la conversión de formato, la compresión y el lazy loading en un solo paquete.

Eliminar metadatos EXIF

Las fotos de producto tomadas con cámaras o smartphones contienen metadatos EXIF — modelo de cámara, coordenadas GPS, marcas de tiempo, perfiles de color. Estos datos añaden entre 50-200 KB por imagen y no aportan ningún valor a los visitantes de tu tienda. Eliminar los datos EXIF es una reducción gratuita del tamaño de archivo que no requiere ningún cambio visible de calidad.

La mayoría de herramientas de compresión de imágenes eliminan los datos EXIF automáticamente. Si estás procesando imágenes manualmente antes de subirlas, herramientas como ImageOptim (Mac), FileOptimizer (Windows) o el comando exiftool pueden eliminar metadatos por lotes de toda tu biblioteca de imágenes.

Nota: PrestaShop no elimina los datos EXIF en la subida por defecto. Los metadatos que contengan tus imágenes originales se conservarán en todas las miniaturas generadas.

Core Web Vitals: Entender los números

Los Core Web Vitals de Google son las métricas de rendimiento que impactan directamente en tu posicionamiento en buscadores. La optimización de imágenes afecta a dos de las tres métricas:

Largest Contentful Paint (LCP)

LCP mide cuánto tarda en renderizarse el elemento visible más grande — casi siempre una imagen en páginas de e-commerce. Los umbrales de Google:

• Bueno: Menos de 2,5 segundos
• Necesita mejora: 2,5 a 4,0 segundos
• Deficiente: Más de 4,0 segundos

Optimizar tu imagen LCP — formato correcto, tamaño apropiado, fetchpriority="high", sin lazy loading, precarga si es necesario — es la acción individual más impactante que puedes hacer para los Core Web Vitals de tu tienda. Los casos de estudio muestran resultados dramáticos: NDTV mejoró el LCP en un 55%, lo que llevó a una disminución del 50% en la tasa de rebote (fuente: NitroPack).

Cumulative Layout Shift (CLS)

CLS mide la estabilidad visual. Los umbrales de Google:

• Bueno: Menos de 0,1
• Necesita mejora: 0,1 a 0,25
• Deficiente: Más de 0,25

Para imágenes, la solución es siempre la misma: incluir atributos width y height. Con estos en su lugar, las imágenes contribuyen esencialmente cero al CLS.

El impacto en el negocio

Si las métricas técnicas te parecen abstractas, considera los datos de negocio:

• Walmart: 1 segundo de mejora en tiempo de carga = 2% de aumento en conversiones
• Zitmaxx Wonen: Puntuación perfecta en PageSpeed + tiempo de carga inferior a 4 segundos = 50,2% de aumento en conversiones móviles
• Google: Las páginas que cumplen todos los umbrales de Core Web Vitals tienen un 24% menos de abandonos

La optimización de imágenes no es solo una tarea SEO — es una tarea de optimización de tasa de conversión que impacta directamente en los ingresos.

Medir tu progreso con PageSpeed Insights

Antes y después de cualquier trabajo de optimización, pasa tus páginas clave por Google PageSpeed Insights. Céntrate en:

1. Puntuación LCP — ¿Tu imagen hero carga suficientemente rápido?
2. Puntuación CLS — ¿Las imágenes causan cambios de diseño?
3. Auditoría "Dimensionar correctamente las imágenes" — ¿Estás sirviendo imágenes sobredimensionadas?
4. Auditoría "Servir imágenes en formatos de última generación" — ¿Estás usando WebP/AVIF?
5. Auditoría "Codificar eficientemente las imágenes" — ¿Los niveles de compresión son óptimos?
6. Auditoría "Aplazar imágenes fuera de pantalla" — ¿El lazy loading funciona correctamente?

Ejecuta pruebas tanto en móvil como en escritorio. Móvil es lo que importa para el posicionamiento (Google usa indexación mobile-first), pero los resultados de escritorio son importantes para la experiencia de usuario en tu tráfico real.

También comprueba tu informe de Core Web Vitals en Google Search Console (Experiencia → Core Web Vitals). Esto muestra datos de campo de usuarios reales — más precisos que las pruebas de laboratorio, pero con una media móvil de 28 días que significa que las mejoras tardan en reflejarse en el informe.

Integración de sitemap de imágenes

La optimización de imágenes no termina con la compresión y la estrategia de carga. Conseguir que tus imágenes aparezcan en Google Imágenes requiere un descubrimiento adecuado. Incluye tus imágenes de producto en un sitemap de imágenes (o usa extensiones de imagen en tu sitemap de productos). El Advanced SEO Sitemap Builder puede generar sitemaps de imágenes automáticamente desde tu catálogo de productos PrestaShop.

Para detalles sobre la sintaxis y estructura del sitemap de imágenes, consulta nuestra guía completa de sitemaps XML.

La lista de verificación completa de optimización de imágenes para PrestaShop

Esta es la lista de verificación ordenada por prioridad que sigo para cada tienda PrestaShop que optimizo:

1. Redimensiona las imágenes fuente al tamaño máximo de visualización — Ninguna imagen debe ser mayor de 1200px en su lado más largo para imágenes de producto (2x el tamaño de visualización de 600px para pantallas retina).
2. Convierte a WebP — Activa la generación de WebP en los ajustes de imagen de PrestaShop y regenera todas las miniaturas.
3. Establece la calidad de compresión en 80 — Tanto para JPEG como para WebP. Una calidad por encima de 85 añade tamaño de archivo con un beneficio visual imperceptible.
4. Añade width y height a todas las etiquetas img — Previene CLS. Las plantillas de tu tema deben incluir estos atributos.
5. Implementa lazy loading — loading="lazy" en todas las imágenes excepto la primera fila visible y las imágenes de navegación.
6. Añade fetchpriority="high" a la imagen LCP — Tu imagen hero de producto y la primera imagen de la página de categoría.
7. Escribe etiquetas alt descriptivas — Automatiza con un módulo, luego mejora manualmente los 100 productos principales por tráfico.
8. Elimina metadatos EXIF — Usa una herramienta de compresión que elimine los metadatos automáticamente.
9. Implementa imágenes responsive (srcset) — Sirve tamaños apropiados a móvil, tablet y escritorio.
10. Considera AVIF con alternativas — Para tiendas donde la compresión máxima importa y la implementación del elemento <picture> es viable.
11. Incluye imágenes en el sitemap — Genera un sitemap de imágenes para el descubrimiento en Google Imágenes.
12. Prueba con PageSpeed Insights — Verifica que todas las auditorías relacionadas con imágenes pasan tanto en móvil como en escritorio.

Conclusión

La optimización de imágenes es esa rara tarea SEO que beneficia a todas las partes. Los usuarios obtienen páginas más rápidas y mejor accesibilidad. Google obtiene señales claras para la búsqueda de imágenes y la evaluación de Core Web Vitals. Tu servidor maneja menos ancho de banda. Tu tasa de conversión mejora porque las páginas cargan más rápido. Y tu factura de hosting podría incluso disminuir.

Empieza por las ganancias más grandes: redimensiona las imágenes sobredimensionadas, convierte a WebP e implementa lazy loading con la división correcta entre eager y lazy. Esos tres cambios por sí solos pueden reducir el peso de tu página en un 70% o más. Después añade los refinamientos — fetchpriority, imágenes responsive, AVIF con alternativas, etiquetas alt estructuradas, sitemaps de imágenes.

Las tiendas que veo rindiendo mejor en PageSpeed no están haciendo nada exótico. Están haciendo los fundamentos correctamente y de manera consistente en todas las páginas del catálogo. Ese es todo el secreto.