Optimizar imágenes para la web: el tamaño correcto para fotógrafos, sin que la página vaya lenta
Los fotógrafos tienen un problema particular con su web: las imágenes son el producto, así que deben verse nítidas, y a la vez son lo más pesado de la página. Si buscas cómo optimizar imágenes para la web, encontrarás cifras rotundas: 1200 píxeles, 2000 píxeles, «menos de 200 KB». Ninguna es falsa en todos los casos ni correcta en todos.
Esta guía muestra cómo calcular el tamaño adecuado para tu web, qué formato exportar, qué hacen WordPress, Squarespace, Wix y Shopify con lo que subes y por qué la imagen más grande de tu portada decide lo rápida que Google considera tu web.
Parte del diseño, no de un número mágico
La pregunta correcta no es «¿2000 o 2500 píxeles?», sino: ¿a qué ancho se muestra la imagen y en qué pantallas?
Las webs miden el diseño en píxeles CSS. Los móviles y portátiles actuales tienen dos o tres píxeles físicos por cada píxel CSS (la densidad de píxeles). El cálculo es:
ancho de imagen necesario = ancho mostrado en píxeles CSS × densidad de píxeles
| Dónde va la imagen | Ancho mostrado | Necesario a 2× | Necesario a 3× (móviles) |
|---|---|---|---|
| Imagen principal a ancho completo en portátil | 1440 px | 2880 px | — |
| Columna de contenido / imagen de blog | 800 px | 1600 px | — |
| Mosaico de galería a dos columnas | 600 px | 1200 px | — |
| Ancho completo en móvil | 390 px | 780 px | 1170 px |
Eso no significa que haya que servir todas las imágenes a 2880 píxeles. Una web puede ofrecer varios tamaños y dejar que el navegador elija, y la mayoría de creadores de webs lo hacen por ti.
Deja que elija el navegador: imágenes responsive
El mecanismo se llama imágenes responsive. La página enumera varias versiones de una imagen con srcset, describe con sizes el ancho mostrado y el navegador descarga el archivo más pequeño que aún se ve nítido en esa pantalla. La guía de MDN lo explica en detalle; en la práctica es así:
<img
src="retrato-1200.jpg"
srcset="retrato-640.jpg 640w, retrato-1200.jpg 1200w, retrato-2400.jpg 2400w"
sizes="(max-width: 800px) 100vw, 1200px"
width="1200" height="800"
alt="Retrato de una pareja al atardecer">Un móvil carga entonces el archivo de 640 píxeles y un portátil retina el de 2400. El ancho y el alto reservan el espacio para que el diseño no salte al cargar.
Qué hace tu creador de webs con lo que subes
En la mayoría de plataformas, el archivo que subes no es el que reciben los visitantes. El sistema genera varios tamaños y a menudo formatos modernos.
| Plataforma | Qué ocurre | Qué implica para tu exportación |
|---|---|---|
| WordPress | genera varios tamaños y añade srcset automáticamente; desde la 5.3 reduce las subidas muy grandes (históricamente a 2560 px, aunque temas y plugins pueden cambiarlo) | sube un archivo de calidad lo bastante grande para tu diseño más amplio; no exportes cada tamaño a mano |
| Squarespace | sirve versiones responsive mediante su propio sistema de imágenes | sube un archivo limpio y de alta resolución, no uno ya exprimido por un optimizador |
| Wix | redimensiona y optimiza las imágenes en sus servidores | no añadas tu propia cadena de compresión antes de subir |
| Shopify | su CDN de imágenes sirve variantes redimensionadas; el tema decide cómo | sube un original grande y revisa la salida responsive del tema |
WordPress lo documenta en su referencia de imágenes responsive y admite AVIF desde la versión 6.5 si la biblioteca de imágenes del servidor lo permite. En las plataformas alojadas conviene revisar la ayuda actual: sus ajustes internos de compresión cambian y no se publican de forma fiable.
La consecuencia práctica: en un CMS, exporta un archivo de calidad por imagen —unos 2500–3000 píxeles en el lado largo para ancho completo, calidad JPEG 80–90, sRGB— y deja el resto a la plataforma. Exportar «a 1580 píxeles y calidad 73» antes de subir es falsa precisión si el sistema vuelve a codificarlo igualmente.
¿Qué formato: JPG, WebP o AVIF?
Si controlas el HTML, sirve AVIF o WebP con un JPG de respaldo. En 2026, alrededor del 95 % de los navegadores admite AVIF y el 97 % WebP, y ambos suelen dar archivos más pequeños con una calidad visual similar. Si usas un CMS, a menudo convierte por ti. Nuestra comparativa de formatos de imagen los analiza en detalle.
Por qué la imagen más grande decide tu velocidad
Las Core Web Vitals de Google miden, entre otras cosas, el Largest Contentful Paint (LCP): cuánto tarda en cargar el elemento visible más grande. En la portada de un fotógrafo casi siempre es la imagen principal. Según web.dev, un LCP de 2,5 segundos o menos se considera bueno, medido en el percentil 75 de las visitas.
Tres reglas pesan más que cualquier ajuste de compresión:
- No cargues nunca la imagen principal en diferido (lazy loading). El lazy loading es ideal para imágenes más abajo; en la primera imagen visible retrasa el LCP.
- Coloca la imagen principal pronto en el HTML, no como fondo que añade más tarde un JavaScript o un slider.
- Márcala como importante con
fetchpriority="high"si tu tema o creador de webs lo permite. Es una indicación al navegador, no una garantía.
Todo lo que queda por debajo puede usar loading="lazy". Y da siempre ancho y alto a las imágenes para que la página no salte al cargar.
Perfil de color y metadatos
- Color: convierte a sRGB y mantén incrustado el perfil sRGB. Los navegadores modernos pueden mostrar espacios más amplios, pero sRGB es el terreno común seguro; consulta sRGB o Adobe RGB.
- Metadatos: conserva el copyright y los créditos; quita el GPS. Los datos de ubicación de una foto publicada pueden revelar la casa de un cliente. La exportación de Lightroom puede eliminarlos, y nuestra herramienta gratuita para quitar datos EXIF lo hace con archivos exportados en otro sitio.
El preset de exportación para web
| Ajuste | Valor |
|---|---|
| Formato | JPEG (tu CMS genera WebP/AVIF) |
| Calidad | 80–90 |
| Espacio de color | sRGB, perfil incrustado |
| Tamaño | lado largo ~2500–3000 px para ancho completo, ~1600–2000 px para imágenes de contenido |
| Nitidez de salida | Pantalla, Estándar |
| Metadatos | copyright y contacto; sin ubicación |
Es uno de los cuatro presets de nuestra guía de los mejores ajustes de exportación de Lightroom. ¿Quieres ver cuánto puedes comprimir una foto concreta? Prueba nuestro compresor de imágenes gratuito. La visión general —perfil de empresa de Google, estructura de la web, textos alternativos— está en SEO para fotógrafos.
Preguntas frecuentes: imágenes para la web
¿Cuál es el tamaño de imagen ideal para una web?
Depende del ancho mostrado: multiplícalo por 2 para pantallas de alta densidad. Para imágenes a ancho completo eso son unos 2500–3000 píxeles en el lado largo; para imágenes de contenido, 1600–2000 píxeles. En un CMS sube una versión grande y deja que la plataforma cree las pequeñas.
¿Cuántos KB deberían pesar las imágenes de mi web?
No hay un límite fijo. Lo importante es que la imagen visible más grande cargue lo bastante rápido para un LCP inferior a 2,5 segundos. Las imágenes responsive, los formatos modernos y no cargar en diferido la imagen principal suelen importar más que meter cada archivo por debajo de una cifra fija de KB.
¿Subo JPG o WebP a WordPress?
Sube un JPG de alta calidad, salvo que tu flujo ya genere WebP o AVIF. WordPress crea los tamaños pequeños y, según el servidor, puede generar formatos modernos.
Conclusión
Para optimizar imágenes para la web basta con multiplicar el ancho mostrado por la densidad de la pantalla, y en la mayoría de plataformas solo hay que subir una versión generosa y de calidad. Exporta en sRGB, quita el GPS, deja que tu CMS cree los tamaños pequeños y los formatos modernos, y da prioridad a la imagen principal en lugar de cargarla en diferido. Tu portfolio seguirá nítido y rápido.
La web es tu escaparate; los archivos a resolución completa de tus clientes van en una galería. Exportlab los entrega en calidad original.
