Qué formato de imagen usar en tu ecommerce

Cuando hablamos de “qué formato de imagen usar en un ecommerce”, en realidad estamos hablando de dinero y oportunidades. No es solo una decisión técnica: es la diferencia entre que alguien vea tu producto o se marche antes de que la foto cargue. Si estás trabajando el SEO para ecommerce, esto impacta directamente en rendimiento (Core Web Vitals) y en conversión.

En nuestra experiencia, subir imágenes pesadas o mal optimizadas es uno de los errores más habituales. Y se nota en tres cosas muy concretas:

• la página tarda en cargar
• la gente se desespera
• las conversiones caen

Cuanto más pesa una foto, más tiempo se pasa el usuario mirando una pantalla en blanco. Esa sensación de “esto no va” es mortal para cualquier web, pero especialmente para un ecommerce.

El formato de imagen que elijas (JPEG, PNG, WebP, AVIF, etc.) influye directamente en el peso final del archivo. Dos imágenes que se ven igual de bien pueden ocupar 80 KB o 400 KB según el formato y la compresión. A nivel negocio, eso significa que con las imágenes correctas puedes:

• mejorar la tasa de conversión,
• aumentar el tiempo en página,
• reducir el porcentaje de rebote,
• y, en general, mejorar la experiencia percibida de tu marca.

A lo largo de los años hemos revisado webs, y hemos visto auténticas barbaridades: portadas con fotos de 1–3 MB, galerías con PNG donde debería ir un JPEG o un WebP, o fichas de producto donde cada imagen pesa más que toda la ficha de texto. Y luego la pregunta siempre es la misma: “¿por qué mi web va tan lenta?”.

Por eso, antes de hablar de formatos uno por uno, nos gustaría dejar una idea clara: elegir bien el formato de imagen es una de las decisiones de rendimiento más baratas y rentables que puedes tomar en tu ecommerce.

1.Cómo afectan las imágenes a Core Web Vitals y al SEO

Google mide la calidad de tu web con indicadores como Core Web Vitals. Y las imágenes están en el centro de la película.

Sin ponernos demasiado técnicos, piensa en tres conceptos clave:

• LCP (Largest Contentful Paint): cuánto tarda en cargar el “elemento gordo” de tu página (muchas veces, una imagen de héroe o una foto grande).
• CLS (Cumulative Layout Shift): cuánto “salta” el diseño mientras carga (muy típico cuando las imágenes no tienen dimensiones definidas).
• INP (latencia de interacción): cómo de fluida es la interacción, que también se ve afectada si el navegador va ahogado cargando recursos pesados.

Y si quieres entender el “primer pintado” (cuándo aparece el primer contenido visible), mira qué es FCP (First Contentful Paint).

Si tus imágenes son enormes, están en un formato poco eficiente o no se adaptan bien a móvil, estos indicadores se resienten. ¿La consecuencia? Peor experiencia de usuario y, con el tiempo, peor posicionamiento.

Además, Google sigue teniendo una relación especial con las imágenes:

• Necesita texto alrededor y contexto (por eso hablaremos de alt, nombres de archivo y sitemaps).
• Valora que una página cargue rápido.
• Y cada vez muestra más resultados en Google Imágenes que pueden ser una fuente brutal de tráfico, sobre todo en ecommerce.

Muddle resume:

No se trata solo de “qué formato de imagen usar para web”, sino de cómo ese formato encaja en tu estrategia de velocidad, UX y SEO.

2. Conceptos básicos que necesitas antes de elegir formato

2.1. Compresión con pérdida vs sin pérdida (explicado sin tecnicismos)

Antes de entrar a comparar JPEG, PNG, WebP o AVIF, hay una idea que necesitas entender: no toda compresión es igual.

• Compresión con pérdida (lossy):
  La imagen pierde cierta información, pero gana mucho en reducción de peso. Si está bien ajustada, el ojo humano casi no nota la diferencia.
  Formatos típicos: JPEG, WebP, AVIF (pueden trabajar con pérdida).
• Compresión sin pérdida (lossless):
  La imagen mantiene toda la información original. Es ideal cuando necesitas calidad máxima o precisión (por ejemplo, gráficos o logos), pero el archivo suele pesar más.
  Formatos típicos: PNG, algunos modos de WebP y AVIF.

En la práctica, cuando optimizas una web, hazte esta pregunta:

“¿Es más importante que la imagen se vea perfecta al 100%, o que la página cargue rapidísimo?”.

Para fotos normales de blog o portadas, la compresión con pérdida (bien ajustada) es más que suficiente. Puedo bajar una imagen de 800 KB a 90–120 KB con un JPEG o WebP bien configurado y nadie se queja de la calidad. En cambio, si estamos hablando de logotipos, iconos o capturas de interfaz, prefiero tirar de formatos sin pérdida o vectoriales.

2.2. Imágenes raster vs vector: en qué se nota en tu web

Otro concepto importante es la diferencia entre imágenes raster y vectoriales:

• Raster: están hechas de píxeles (cuadraditos de color).
  • Ejemplos: fotos, screenshots, ilustraciones detalladas.
  • Formatos típicos: JPEG, PNG, WebP, AVIF, GIF.
  • Problema: si amplías demasiado, se pixelan.
• Vector: están hechas a partir de formas y líneas matemáticas.
  • Ejemplos: logos, iconos, algunos gráficos simples.
  • Formato rey para web: SVG.
  • Ventaja: se adaptan a cualquier tamaño sin perder nitidez.

¿Por qué te interesa esto? Porque si usas un PNG gigante para un logo que podrías tener en SVG, estás tirando performance y nitidez a la basura. En muchas auditorías veo logos en PNG o, peor, en JPEG, con fondo blanco incrustado y 400–500 KB de peso. Lo mismo se podría resolver con un SVG de 10–20 KB que se ve perfecto en cualquier pantalla.

En resumen:

• Para fotos y banners: formatos raster con pérdida (JPEG, WebP, AVIF).
• Para logos, iconos y UI: vector (SVG) o raster sin pérdida (PNG) cuando haga falta.

3. Formatos “de toda la vida”: JPEG, PNG y GIF

3.1. JPEG: cuándo es tu mejor aliado (y cuándo no)

El JPEG (o JPG) lleva décadas salvándonos la vida en la web. Es el formato estándar para fotografías y sigue siendo una apuesta segura, sobre todo cuando te importa la compatibilidad con todos los navegadores, apps y dispositivos.

Cuándo usar JPEG en tu web:

• Fotos de productos (cuando aún no tienes un sistema montado con WebP/AVIF).
• Imágenes de blog, portadas e imágenes destacadas.
• Banners con fotografías y degradados complejos.

Ventajas:

• Soporte universal.
• Peso bastante bajo con compresión con pérdida bien ajustada.
• Fácil de trabajar con cualquier editor (Photoshop, Figma, Canva, etc.).

Cuándo evitarlo:

• Logos y gráficos con texto muy nítido.
• Capturas de pantalla de interfaz (se ven “sucias” con la compresión).
• Necesitas transparencia.

En mi caso, cuando una web viene “destrozada” a nivel de imágenes, el primer paso suele ser convertir PNGs innecesarios en JPEGs y ajustar la compresión. Solo con eso muchas veces se gana más de un segundo de carga.

3.2. PNG: logos, capturas y gráficos que deben verse perfectos

El PNG es el formato de referencia cuando necesitas calidad máxima y/o transparencia.

Cuándo usar PNG:

• Logos con fondo transparente.
• Iconos simples (aunque aquí SVG suele ganar).
• Capturas de pantalla donde quieres que el texto se vea ultra nítido.
• Gráficos con colores planos y bordes definidos.

Ventajas:

• Calidad muy alta.
• Transparencia nativa.
• Ideal para elementos de interfaz.

Problema:

• El peso. Un PNG mal dimensionado puede ser una auténtica losa para la velocidad.

Por eso, cuando decidas qué formato de imagen usar para la web, mi recomendación es clara:

Usa PNG solo donde de verdad lo necesites. Para todo lo demás, JPEG/WebP/AVIF.

3.3. GIF: por qué casi nunca es buena idea usarlo en tu web

El GIF animado fue gracioso durante años, pero a nivel rendimiento es un drama.

Problemas típicos del GIF:

• Pesan muchísimo para la calidad que ofrecen.
• No tienen buena compresión moderna.
• Su paleta de colores es limitada, así que se ven “pobres”.

Si quieres animaciones ligeras y modernas, hay alternativas mucho mejores:

• Vídeo (MP4/WebM) para secuencias largas.
• WebP o AVIF animado.
• SVG animado o Lottie para iconos e ilustraciones.

En la práctica, cuando audito un sitio y veo GIFs pesados, casi siempre es una oportunidad de oro: convierto esas animaciones a otro formato y la página vuela.

4. Formatos modernos para web: WebP y AVIF

4.1. Qué es WebP y por qué suele ser el formato por defecto hoy

WebP es el formato moderno que, a día de hoy, uso como primera opción en la mayoría de proyectos.

Ventajas clave de WebP:

• A igual calidad visual, suele ocupar bastante menos que un JPEG.
• Permite compresión con pérdida y sin pérdida.
• Soporta transparencia y animación.
• Lo soportan prácticamente todos los navegadores modernos.

En la práctica, cuando convierto un JPEG optimizado a WebP, suelo ver reducciones de peso adicionales del 20–30% sin pérdida de calidad visible. Eso, multiplicado por decenas o cientos de imágenes, es un impacto brutal.

Dónde uso WebP:

• Fotos de portada.
• Imágenes de producto.
• Imágenes de blog.
• Banners y creatividades.

4.2. Qué es AVIF y en qué mejora (y complica) la película

AVIF es otro formato moderno, más reciente que WebP, con una compresión todavía más agresiva.

Ventajas:

• Puede ofrecer una calidad muy alta con pesos ridículos.
• Soporte para características modernas (HDR, etc.).

Inconvenientes:

• La compatibilidad, aunque muy avanzada, sigue siendo más limitada que WebP.
• El procesamiento (codificar/decodificar) puede requerir algo más de recursos.

Mi enfoque realista es:

AVIF es una pasada para quienes tienen recursos técnicos y control total sobre la infraestructura, pero para muchos proyectos “normales” WebP + JPEG/PNG sigue siendo el combo más equilibrado.

4.3. Cómo combinar WebP/AVIF con JPEG/PNG sin romper nada

La pregunta típica:

“Vale, quiero usar WebP o AVIF, pero ¿y si algún navegador no lo soporta?”.

La respuesta está en dos ideas:

1. Fallbacks: servir WebP/AVIF cuando el navegador lo soporta y JPEG/PNG cuando no.
2. Plugins/plataformas: si usas WordPress o un CDN moderno, muchos ya lo gestionan automáticamente.

En WordPress, por ejemplo, hay plugins que:

• Cogen tus JPEG/PNG originales.
• Generan versiones WebP (y a veces AVIF).
• Sirven automáticamente el mejor formato según el navegador del usuario.

Así no tienes que re-subir todas tus imágenes a mano ni romper nada. En mis proyectos, suelo activar esta opción y luego revisar las páginas clave (home, fichas, landings) para comprobar que las imágenes se ven bien y que el peso realmente ha bajado.

5. SVG para logos, iconos y elementos de interfaz

5.1. Ventajas de SVG frente a PNG (nitidez, peso y escalado)

SVG es el formato rey para logos e iconos en web. Es vectorial, lo que significa que:

• se escala a cualquier tamaño sin pixelarse,
• suele pesar muy poco,
• y se ve perfecto en todas las resoluciones (incluyendo pantallas retina).

Comparado con PNG:

• Un logo en PNG puede pesar 100–300 KB fácilmente.
• El mismo logo en SVG puede quedar en 5–30 KB.

La diferencia en carga, si tienes muchos iconos y elementos de interfaz, es abismal.

En webs que he optimizado, solo con pasar logos y ciertos iconos clave a SVG he conseguido rebajar bastante el peso total de la página, sobre todo en cabeceras y menús.

5.2. Ejemplos típicos donde SVG es la mejor opción

Casos donde elegir SVG es casi siempre un acierto:

• Logos de la marca.
• Iconos de redes sociales, carrito, buscador, etc.
• Ilustraciones simples con pocos colores.
• Elementos decorativos de la interfaz (flechas, líneas, formas).

Eso sí, hay que tener cuidado con:

• No incrustar imágenes raster dentro del SVG (perderías parte de las ventajas).
• Y revisar que el código del SVG esté limpio (al exportar desde herramientas como Figma o Illustrator, a veces añaden basura que inflará el archivo).

En resumen: cuando pienses “qué formato de imagen usar en mi web” para iconos y logos, la respuesta casi siempre será: SVG antes que PNG.

6. Qué formato usar según el tipo de imagen (guía de casos)

Esta es la parte práctica: qué formato usar para cada tipo de imagen de tu web.

6.1. Fotos grandes de portada

• Opción moderna: WebP (o AVIF con fallback).
• Opción clásica: JPEG bien comprimido.

Consejos:

• No subas la imagen en 4000 px de ancho si tu diseño solo la muestra a 1400–1600 px.
• Ajusta la compresión: mejor una pequeña pérdida de calidad que añadir 200 KB extra.

En mis proyectos, suelo buscar un equilibrio: imagen grande pero no gigante, y un peso entre 90 y 200 KB como máximo para el héroe principal.

6.2. Imágenes de producto para ecommerce

En ecommerce, las imágenes de producto son el corazón de la venta. Pero también pueden ser las culpables de que la ficha tarde una eternidad en cargar.

Mi enfoque:

• WebP o AVIF como primera opción para las fotos principales.
• Fallback en JPEG para compatibilidad.
• Evitar PNG salvo que haya transparencias muy necesarias.

Regla personal: intento que las imágenes individuales de producto no se vayan más allá de 150–200 KB, salvo casos muy especiales. Y prefiero generar varias versiones adaptadas a distintos anchos (responsive images) para no servir la misma imagen gigante en móvil y escritorio.

6.3. Capturas de pantalla, gráficos y tablas

Aquí el ganador suele ser:

• PNG (si quieres máxima nitidez).
• O WebP sin pérdida si quieres ahorrar peso manteniendo detalle.

Evita JPEG para capturas de interfaz con texto pequeño: la compresión introduce artefactos que hacen que todo se vea borroso.

6.4. Iconos, logos y elementos de interfaz

• Primera opción: SVG.
• Segunda opción: PNG (para casos en los que SVG no cuadre o por límites de plataforma).

Si tienes un menú con 10–15 iconos, pasarlos todos a SVG puede cambiar bastante el peso total del header.

6.5. Banners, creatividades y anuncios

• Si el banner tiene foto + texto, suelo tirar de WebP o JPEG.
• Si el banner es muy plano, con dibujos vectoriales, valoro usar SVG o una mezcla (SVG + texto real en HTML).

En campañas, también es importante revisar las plataformas donde se mostrarán esos banners. A veces, tendrás que ceñirte a formatos específicos.

7. Peso, tamaño y nombres de archivo

7.1. Tamaño recomendado en píxeles y en KB (reglas prácticas)

No existe una regla universal, pero sí rangos razonables que uso a menudo:

• Imágenes de héroe o grandes:
  • ancho: 1400–1920 px (según diseño),
  • peso orientativo: 90–200 KB.
• Imágenes de contenido de blog:
  • ancho: 800–1200 px,
  • peso orientativo: 60–120 KB.
• Miniaturas / thumbnails:
  • ancho: 300–600 px,
  • peso orientativo: 20–60 KB.

En general, intento que la mayoría de imágenes no superen los 100 KB, y solo en ecommerce con productos muy visuales me permito acercarme a 200 KB para las fotos más críticas.

7.2. Cómo nombrar tus imágenes para SEO sin hacer keyword stuffing

Aquí es donde muchos caen. Google lee el nombre del archivo, pero eso no significa que tengas que llamarlo palabra-clave-1.jpg, palabra-clave-2.jpg, palabra-clave-3.jpg…

Buenas prácticas que aplico:

• Nada de IMG_1234.jpg o asd.jpg.
• Usa nombres descriptivos: zapatillas-running-mujer-azules-ligeras.jpg.
• Evita repetir exactamente la misma keyword en todas las imágenes de la página. Eso puede parecer spam.

En mi caso, nunca repito la misma keyword exacta en 20 archivos de imagen. Prefiero describir de verdad lo que se ve, variando: color, modelo, ángulo, contexto. Google cada vez valora más el lenguaje natural y detecta patrones sospechosos.

7.3. Herramientas para comprimir imágenes

Herramientas gratuitas y muy útiles:

• TinyPNG / TinyJPG: arrastras, suelta y listo. Muy cómodas para JPG/PNG.
• Squoosh: de Google, te permite jugar con formatos y niveles de compresión.
• Image Optimizer y similares: según sistema operativo.

Mi forma de trabajar suele ser:

1. Exporto desde Figma/Photoshop en una resolución razonable.
2. Paso las imágenes por TinyPNG/TinyJPG o Squoosh.
3. Reviso que la calidad siga siendo buena.
4. Subo a la web.

8. SEO de imágenes: cómo ayudar a Google a entender tus fotos

8.1. Etiqueta alt bien hecha (con ejemplos buenos y malos)

La etiqueta alt es el texto alternativo que describe una imagen. Sirve para:

• ayudar a usuarios con lectores de pantalla,
• dar contexto a Google,
• mostrar texto cuando la imagen no carga.

Errores típicos:

• dejar el alt vacío en imágenes importantes,
• usar la misma keyword genérica en todas,
• meter una lista de keywords sin sentido.

Ejemplos:

• ❌ Malo:
  • alt="zapatillas, zapatillas baratas, zapatillas mujer, zapatillas online"
• ✅ Mejor:
  • alt="zapatillas de running azules para mujer con suela ligera"

En webs con muchas imágenes, puede ser pesado rellenar todos los alt. Si usas WordPress, un plugin tipo Bulk Auto Image te puede ahorrar tiempo generando alt a partir de nombres de archivo, pero a las imágenes principales yo siempre las reviso a mano.

8.2. Image sitemaps, robots.txt y cómo aparecer en Google Imágenes

Mucha gente trabaja sitemaps solo para páginas y se olvida de las imágenes. Pero un sitemap de imágenes puede ser una señal adicional para que Google descubra y entienda mejor tus recursos visuales.

¿Para qué sirve?

• Ayuda a Google a localizar imágenes que están “escondidas”.
• Refuerza la relación entre URLs y recursos gráficos.

Si quieres ir un paso más allá, puedes incluir este sitemap de imágenes en tu robots.txt, dándole una pista extra a los rastreadores.

En proyectos donde el tráfico de Google Imágenes es relevante (por ejemplo, catálogos de productos, moda, decoración), tener un buen image sitemap marca la diferencia.

8.3. Relación entre texto, contexto y posicionamiento de las imágenes

No basta con elegir el mejor formato de imagen para web o rellenar el alt. Google también mira:

• el texto que rodea a la imagen,
• el titular de la página,
• el contenido del artículo,
• los enlaces internos que apuntan a esa URL.

Cuando una tienda online no tiene mucha autoridad, suelo insistir mucho en la estrategia de contenidos: blog, guías, comparativas, etc. Eso te permite generar texto de calidad donde las imágenes encajan de forma natural y refuerzan el tema de la página. Las imágenes dejan de ser “adorno” para convertirse en parte de la estrategia SEO.

9. Implementación práctica en WordPress (y otras plataformas)

9.1. Plugins para servir WebP/AVIF y optimizar imágenes

Si usas WordPress, no hace falta que seas un experto técnico para servir WebP o AVIF con fallback.

Existen plugins (de optimización y caché) que se encargan de:

• generar versiones WebP/AVIF de tus JPEG/PNG,
• servir automáticamente el formato más eficiente según el navegador,
• limpiar imágenes no usadas y reducir el peso global de la biblioteca.

Mi recomendación suele ser:

1. Haz una copia de seguridad.
2. Instala un plugin serio y con soporte activo.
3. Empieza aplicando optimización solo a una parte del sitio o a un subconjunto de imágenes.
4. Revisa la web después para asegurarte de que todo se ve bien.

9.2. Uso del elemento <picture> y fallbacks automáticos

A nivel código, el elemento <picture> permite definir varias fuentes de imagen (WebP, AVIF, JPEG…) y que el navegador elija la más apropiada.

Algo como:

• AVIF para navegadores modernos.
• WebP como segunda opción.
• JPEG como fallback universal.

Muchos temas y constructores visuales ya generan esto sin que tú tengas que tocar el HTML directamente, sobre todo cuando se integran con plugins de optimización.

9.3. Errores típicos que veo en webs de clientes

Por resumir, estos son los clásicos:

• Subir imágenes directas del móvil sin comprimir.
• Usar PNG para todo “porque se ve mejor”.
• No rellenar alt o duplicar el mismo en todas las imágenes.
• Nombres de archivo tipo IMG_9876.jpg.
• No usar WebP/AVIF cuando la plataforma ya lo soporta.

Corregir estos puntos, combinado con la elección correcta de formato de imagen para la web, suele dar mejoras claras en velocidad y posicionamiento.

10. Checklist rápida: qué formato usar en cada caso

10.1. Tabla/resumen de decisiones

• Fotos de portada / héroes → WebP (o AVIF) con fallback JPEG.
• Imágenes de producto → WebP/AVIF + JPEG; peso orientativo hasta 150–200 KB.
• Blog y contenido → WebP o JPEG optimizado.
• Capturas de pantalla y gráficos → PNG o WebP sin pérdida.
• Logos e iconos → SVG; si no es posible, PNG.
• Animaciones → vídeo, WebP/AVIF animado, SVG animado o Lottie (evitar GIF).

10.2. Próximos pasos para dejar tus imágenes “niqueladas”

1. Revisa qué formato de imagen estás usando ahora en tu web.
2. Cambia PNG innecesarios por JPEG o WebP.
3. Añade compresión con herramientas como TinyPNG/TinyJPG o Squoosh.
4. Organiza nombres de archivo y alt con criterio SEO, sin repetir la misma keyword.
5. Valora implantar WebP/AVIF con fallbacks en tu CMS o servidor.
6. Crea (o revisa) tu sitemap de imágenes si el tráfico visual es importante.

FAQs

¿Cuál es el mejor formato de imagen para una página web?

No hay uno único. Para la mayoría de casos, WebP es una gran opción, combinado con JPEG como fallback. AVIF puede sumar un extra, pero requiere un pelín más de cuidados.

¿JPEG o PNG, cuál es mejor para web?

Depende:

• JPEG para fotos y fondos.
• PNG para logos, gráficos y capturas donde necesitas máxima nitidez o transparencia.

¿Merece la pena usar AVIF ya?

Si tienes control sobre tu web y cierta flexibilidad técnica, sí, puede reducir aún más el peso. Si quieres algo sencillo y estable, empieza por WebP + JPEG.

¿Qué peso máximo debería tener una imagen?

Como orientación general, intenta que la mayoría estén por debajo de 100 KB y solo superes esa cifra cuando tengas una buena razón (por ejemplo, foto clave de producto).

¿Es malo repetir la misma palabra clave en todos los nombres de imagen?
Sí, puede parecer una estrategia artificial. Es mejor describir cada imagen de forma natural, variando términos y siendo realmente descriptivo.

Conclusión

Elegir el formato adecuado de imagen para tu web no es un capricho técnico: es una de las formas más rápidas y baratas de mejorar velocidad, UX y SEO al mismo tiempo.

Cuando configuras bien:

• formatos (JPEG/PNG/WebP/AVIF/SVG),
• peso,
• nombres de archivo,
• alt,
• y sitemaps de imágenes,

estás ayudando a tus usuarios a ver antes lo que les interesa y a Google a entender mejor tu contenido.

Si ahora mismo te suena todo esto pero no sabes por dónde empezar, nuestro consejo es muy simple: empieza por reducir el peso y elegir el formato correcto, y luego ataca la parte de SEO de imágenes (alt, nombres, sitemaps). El impacto se nota, y rápido.