29 de septiembre de 2026 · 8 min de lectura

Cómo preparar las imágenes de tu web o tienda para que cargue rápido

Tamaño en píxeles, JPEG, PNG, WebP o AVIF y pesos objetivo por tipo de imagen: guía práctica para acelerar tu web o tienda online con fotos más ligeras.

Cuando una web va lenta, lo primero que hay que mirar son las imágenes. Una página de texto y CSS pesa unos cientos de kilobytes; una sola foto de producto directa de la cámara puede pesar más que eso por sí sola. La buena noticia es que es el problema de rendimiento más fácil de arreglar y, a diferencia de casi toda la optimización, ves el resultado en un minuto.

Casi siempre es el mismo error

La causa más común no es el formato ni el ajuste de compresión. Es subir una foto de 4.000 píxeles de ancho a un hueco que la muestra a 600. El navegador descarga todos esos píxeles y luego tira la mayoría. Arreglar las dimensiones suele quitar más peso a la página que cualquier codificación ingeniosa.

Por qué ×2 en algunos casos: las pantallas de alta densidad dibujan dos píxeles del dispositivo por cada píxel CSS, así que una imagen mostrada a 300 px se ve más nítida a 600 px. Eso justifica más o menos el doble, no diez veces, que es lo que da un archivo en bruto de cámara.

Formatos, y cuándo compensa de verdad WebP

• JPEG: fotografías. Universal, bien conocido y perfectamente válido cuando tiene el tamaño correcto.
• PNG: gráficos planos, logos, capturas con texto y todo lo que necesite transparencia. Pésimo para fotografías.
• WebP: hace las dos cosas. A calidad visual comparable, suele ser bastante más pequeño que JPEG y admite transparencia, así que también puede sustituir a los logos en PNG. Lo admiten todos los navegadores principales actuales.
• AVIF: más pequeño todavía, sobre todo en fotografías, con codificación más lenta y compatibilidad menos uniforme en software y herramientas antiguos. Conviene usarlo con un JPEG o WebP de respaldo en vez de solo.
• SVG: logos, iconos, diagramas, todo lo dibujado en vez de fotografiado. Se escala a cualquier tamaño con un peso casi nulo.

El resumen honesto sobre WebP: cambiar de formato es una mejora real pero secundaria. Si tus imágenes tienen las dimensiones adecuadas y una compresión razonable, WebP quita otra tajada. Si miden 4.000 píxeles de ancho, WebP solo te da un archivo enorme más pequeño. Primero las dimensiones.

Deja que la plataforma haga el trabajo que ya hace

Antes de montar un proceso manual, comprueba qué gestiona ya tu plataforma. La mayoría de las plataformas modernas generan variantes de distinto tamaño y sirven formatos modernos de forma automática, y pelear contra eso es esfuerzo perdido.

• Shopify, Squarespace y Wix generan varios tamaños y sirven WebP donde se admite. Sube un original de buena calidad con dimensiones razonables y deja que ellos deriven el resto.
• WordPress crea varios tamaños al subir; un plugin como ShortPixel o Imagify añade la conversión a WebP.
• Next.js, Nuxt y frameworks similares traen componentes de imagen que redimensionan, convierten y cargan en diferido por ti.
• Si escribes el HTML a mano, usa srcset y sizes para que el navegador elija el archivo adecuado, y define los atributos width y height para que el diseño no salte mientras cargan las imágenes.
• Añade loading="lazy" a todo lo que quede bajo el pliegue, y quítalo de la imagen principal para que no se retrase.

Un flujo de trabajo que se mantiene

• Guarda los masters a resolución completa fuera de la web. Los querrás cuando cambie el diseño.
• Estandariza una proporción por colección. Una cuadrícula de productos con recortes distintos parece amateur, sea cual sea la velocidad.
• Exporta a las dimensiones objetivo y comprime una sola vez. No comprimas una exportación ya comprimida.
• Pon nombres descriptivos a los archivos: bolso-cuero-marron-frontal.jpg, no IMG_4021.jpg. Te ayuda a ti y lo lee la búsqueda de imágenes.
• Escribe un texto alternativo de verdad. Es lo que usan los lectores de pantalla y lo que se muestra si una imagen no carga.

Mide, no supongas

Pasa tu página por PageSpeed Insights o WebPageTest antes y después. Ambos señalan las imágenes concretas demasiado grandes y cuánto te cuestan. En las herramientas de desarrollo del navegador, la pestaña Red ordenada por tamaño te dice lo mismo en diez segundos. La métrica que más afectan las imágenes es el Largest Contentful Paint (normalmente la imagen principal o la primera foto de producto), así que es la que hay que vigilar y la que te dice si el trabajo mereció la pena.

• Prueba con una conexión móvil limitada, no con el wifi de tu oficina.
• Comprueba el archivo realmente entregado en la pestaña Red: las plataformas a veces sirven el original si un ajuste está desactivado.
• Mira el peso total de la página además de los archivos sueltos. Veinte imágenes bien optimizadas pueden sumar bastante.

La presentación importa más que los bytes

Una página rápida con fotos mal iluminadas no vende nada. Un encuadre coherente, un fondo limpio y un color fiel hacen más por una tienda que los últimos 20 KB, y los recortes limpios sobre fondo liso son lo que hace que una cuadrícula de productos parezca una tienda de verdad y no una carpeta de fotos del móvil.