≡En resumen
- Optimizar una imagen es elegir bien formato, dimensiones, compresión y momento de carga, y describirla para buscadores.
- WebP y AVIF comprimen mejor que JPEG y PNG y ya los admiten los navegadores principales.
- Con srcset y sizes cada dispositivo descarga solo la resolución que necesita.
- Usa lazy loading en las imágenes fuera de pantalla, pero nunca en la imagen principal (LCP).
- Para Google, el texto alternativo, el nombre del archivo y el texto que rodea la imagen explican qué muestra.
01 ¿Qué es la optimización de imágenes?
Las imágenes suelen ser los archivos más pesados de una página y, en muchas webs, el elemento más grande que se pinta en pantalla al cargar, el que mide el LCP. Por eso optimizarlas es casi siempre el primer paso de cualquier trabajo de optimización de velocidad, y también una parte del SEO: Google Imágenes es otra puerta de entrada de tráfico, sobre todo en sectores muy visuales como moda, decoración, recetas o viajes.
02 Formatos de imagen: JPEG, PNG, WebP, AVIF, SVG y GIF
| Formato | Úsalo para | A tener en cuenta |
|---|---|---|
| JPEG | Fotografías cuando necesitas máxima compatibilidad | Compresión con pérdida; sin transparencia |
| PNG | Gráficos con detalle fino, capturas, transparencias | Sin pérdida: archivos grandes en fotos |
| WebP | Fotos y gráficos en general | Con y sin pérdida, transparencia y animación; soporte universal en navegadores actuales |
| AVIF | Fotos donde quieres el menor peso posible | Basado en el códec AV1; soportado por Chrome, Firefox, Safari y Edge desde 2024 |
| SVG | Logotipos, iconos e ilustraciones planas | Vectorial: nítido a cualquier tamaño y muy ligero |
| GIF | Evítalo | Máximo 256 colores; para animaciones pesa mucho más que un vídeo |
25-34 %
Menos peso de WebP con pérdida frente a JPEG de calidad equivalente
Fuente: Google for Developers, WebP
26 %
Menos peso de WebP sin pérdida frente a PNG
Fuente: Google for Developers, WebP
256
Colores máximos de un GIF, por eso web.dev desaconseja usarlo
Fuente: web.dev, Choose the right image format
03 Compresión y dimensiones: el peso justo
Redimensionar
Nunca subas una imagen más grande de lo que se va a mostrar. Si el hueco mide 800 píxeles, basta con 800 y una versión de 1.600 para pantallas de alta densidad.
Compresión con pérdida
Descarta información que el ojo apenas percibe. Una calidad media-alta suele ser indistinguible del original en pantalla.
Compresión sin pérdida
Reduce el archivo sin cambiar ni un píxel. Útil en gráficos, capturas y logotipos en PNG o WebP.
Eliminar metadatos
Los datos EXIF de la cámara (modelo, ubicación GPS) añaden peso y pueden revelar información privada.
La calidad «correcta» se decide mirando, no con un número fijo: exporta a varias calidades, compáralas al tamaño real en pantalla y quédate con la más ligera que no muestre defectos. En catálogos grandes, como la fotografía de producto de una tienda online, conviene automatizarlo con un perfil de exportación común.
04 Imágenes responsive: srcset, sizes y picture
Un móvil no necesita la misma imagen que un monitor de 27 pulgadas. Con el atributo srcset das al navegador varias versiones de la misma imagen con su ancho, y con sizes le dices qué espacio ocupará; él elige la más pequeña que se vea bien. Es la pieza que completa un diseño responsive: el diseño se adapta y las imágenes también.
<img src="sofa-800.webp" srcset="sofa-400.webp 400w, sofa-800.webp 800w, sofa-1600.webp 1600w" sizes="(max-width: 600px) 100vw, 50vw" width="800" height="600" alt="Sofá de tres plazas tapizado en lino verde">
Un móvil de 400 píxeles descarga la versión de 400w; un portátil, la de 800w o 1600w según su densidad de píxeles. Google recomienda mantener siempre un src de reserva para navegadores que no entiendan srcset.
05 Lazy loading y dimensiones: cuándo cargar cada imagen
- ✓Añade loading="lazy" a las imágenes que quedan fuera de la primera pantalla: se descargan solo cuando el usuario se acerca a ellas.
- ✓No uses lazy loading en la imagen principal ni en las visibles al abrir la página: retrasa el LCP.
- ✓Indica width y height en todas las etiquetas img para que el navegador reserve el hueco y no haya saltos de diseño (CLS).
- ✓Da prioridad alta a la imagen principal con fetchpriority="high" si el navegador tarda en descubrirla.
- ✓Sustituye los GIF animados por vídeo en bucle, mucho más ligero.
06 SEO de imágenes: lo que recomienda Google
- ✓Usa etiquetas img o picture: Google no indexa las imágenes de fondo definidas en CSS.
- ✓Escribe un texto alternativo descriptivo y útil, con la palabra clave solo si encaja; nada de listas de keywords.
- ✓Pon nombres de archivo descriptivos: sofa-lino-verde.jpg dice más que IMG_0045.jpg.
- ✓Coloca la imagen cerca del texto que habla de ella, en una página relacionada con su tema.
- ✓Envía un sitemap de imágenes si Google no las descubre, por ejemplo cuando se sirven desde un CDN.
- ✓Usa imágenes de calidad y propias: una foto de stock repetida en mil webs aporta poco.
El texto alternativo cumple dos funciones: describe la imagen a quien usa un lector de pantalla y le explica a Google qué muestra. Forma parte del SEO on page y es uno de los puntos que se revisan en cualquier estrategia de posicionamiento web en Google.
07 Cómo optimizar las imágenes de tu web paso a paso
-
1
Mide
Analiza una página con PageSpeed Insights y revisa los avisos sobre imágenes: tamaño, formato, carga diferida y dimensiones.
-
2
Localiza las más pesadas
Empieza por la imagen del LCP y por las plantillas que se repiten en muchas páginas (fichas, cabeceras de categoría).
-
3
Redimensiona y convierte
Ajusta al tamaño máximo en pantalla y exporta a WebP o AVIF con un JPEG o PNG de reserva.
-
4
Implementa srcset y lazy loading
Varias resoluciones por imagen, carga diferida fuera de la primera pantalla y width y height siempre.
-
5
Describe
Texto alternativo, nombre de archivo y contexto cercano en cada imagen importante.
-
6
Automatiza
Configura tu CMS, un plugin o un CDN de imágenes para que las nuevas subidas ya salgan optimizadas.
Para interpretar el informe de PageSpeed Insights tienes su ficha en el diccionario, y si tu web usa WordPress, aquí verás qué plugins para acelerar WordPress convierten y comprimen imágenes. Si prefieres delegarlo, un servicio para mejorar la velocidad web incluye esta parte junto al resto de ajustes.
Preguntas frecuentes sobre Optimización de imágenes
Es reducir su peso y servirla con el formato, tamaño y momento de carga adecuados sin pérdida de calidad visible, y añadirle texto alternativo y un nombre descriptivo.
WebP o AVIF para fotos y gráficos, SVG para logotipos e iconos. JPEG y PNG quedan como formatos de reserva para compatibilidad.
No hay una cifra oficial: debe pesar lo mínimo que permita verla bien al tamaño en que se muestra. Por eso lo primero es redimensionarla y después comprimirla.
Es la carga diferida: el navegador descarga una imagen solo cuando el usuario se acerca a ella. Se activa con loading="lazy" y no debe usarse en la imagen principal.
Sí, de dos formas: mejora la velocidad y las Core Web Vitals, y ayuda a Google a entender y mostrar tus imágenes gracias al texto alternativo, el nombre y el contexto.
Sí. Google Search indexa imágenes BMP, GIF, JPEG, PNG, WebP, SVG y AVIF, siempre que estén en etiquetas img o picture.
Puedes usar la exportación de editores como Photoshop o GIMP, herramientas web como Squoosh, de Google, plugins de tu CMS o un CDN de imágenes que convierte y redimensiona cada archivo automáticamente.
Sube imágenes ya redimensionadas y usa un plugin o un CDN que las convierta a WebP o AVIF y genere las distintas resoluciones; WordPress ya añade srcset y lazy loading por defecto.
Fuentes consultadas
Sobre el autor
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil y artículos → Ver perfil en LinkedIn ↗