Cómo optimizar imágenes para tu web paso a paso
- Redimensiona la imagen al ancho real al que se va a mostrar.
- Convierte a WebP o AVIF y compara el peso en la pestaña Analizar.
- Ajusta la calidad a 82 o fija un peso objetivo en KB.
- Genera las variantes responsive y copia el srcset desde la pestaña Exportar.
Impacto de cada optimización
| Optimización | Ahorro típico | Esfuerzo | Riesgo de perder calidad |
|---|---|---|---|
| Ajustar las dimensiones al tamaño real de uso | 70-95 % | Bajo | Ninguno si no se amplía |
| Cambiar JPG/PNG por WebP | 25-75 % | Bajo | Imperceptible |
| Cambiar a AVIF | 40-60 % | Medio | Imperceptible |
| Bajar la calidad de 95 a 82 | 40-60 % | Bajo | Muy bajo |
| Eliminar metadatos EXIF | 1-15 % | Nulo | Ninguno |
| Servir variantes con srcset | 30-70 % | Medio | Ninguno |
Los porcentajes son órdenes de magnitud habituales en fotografía; en gráficos planos las cifras cambian bastante.
1. Las dimensiones antes que nada
Es el error más caro y el más común: subir la foto tal como sale de la cámara, de 4000 píxeles de ancho, a un blog que la muestra a 800. Se está descargando dieciséis veces más información de la que se ve. Antes de tocar la calidad, ajusta el ancho al tamaño máximo al que la imagen se va a mostrar, multiplicado como mucho por dos si quieres cubrir pantallas de alta densidad.
2. El formato correcto
Cambiar el contenedor suele ahorrar más que bajar la calidad, y sin degradar nada. WebP recorta entre un 25 % y un 35 % frente a JPG, y bastante más frente a PNG. AVIF va aún más lejos. Antes de decidir a ciegas, codifica la imagen en los cuatro formatos y compara el peso real: la pestaña Analizar de esta herramienta lo hace en un clic.
3. La calidad justa, no la máxima
La escala de calidad no es lineal. De 100 a 90 el peso se desploma sin que se note nada; de 90 a 80 se sigue ahorrando mucho con una pérdida mínima; por debajo de 70 aparecen bloques visibles en las zonas planas. Para fotografía en web, 82 es un valor seguro. Y si necesitas ajustarte a un peso concreto, fija los KB y deja que la herramienta busque la calidad máxima que quepa.
4. Servir el tamaño adecuado a cada pantalla
Un móvil no necesita la misma imagen que un monitor de 27 pulgadas. Con el atributo srcset se declaran varias anchuras y el navegador descarga solo la que le conviene. Añade loading="lazy" en las imágenes que quedan por debajo del pliegue para que no compitan con el contenido visible, pero nunca en la imagen principal: esa debe cargar cuanto antes porque suele ser el Largest Contentful Paint.
Un detalle que además protege tu privacidad
Las fotos hechas con móvil llevan metadatos EXIF con el modelo del dispositivo, la fecha y, muy a menudo, las coordenadas GPS exactas de dónde se tomaron. Eliminarlos ahorra algo de peso y evita publicar sin querer dónde vives. Esta herramienta los elimina siempre al exportar, y te deja verlos antes en la pestaña Analizar.
Preguntas frecuentes
¿Cuánto debe pesar una imagen en una web?
Como referencia, por debajo de 200 KB para una imagen de contenido y por debajo de 500 KB para una cabecera a pantalla completa. Cuanto menos, mejor, siempre que no se aprecie degradación.
¿Las imágenes afectan al posicionamiento en Google?
Sí, de forma indirecta pero clara: son el principal responsable del Largest Contentful Paint, una de las Core Web Vitals que Google usa como señal de clasificación. Una página que carga rápido también retiene mejor al visitante.
¿Qué es srcset y por qué debería usarlo?
Es un atributo de la etiqueta img que declara varias versiones de la misma imagen con anchuras distintas, para que cada navegador descargue únicamente la que necesita. En móvil puede suponer descargar la cuarta parte de bytes.
¿Conviene usar loading="lazy" en todas las imágenes?
No. Úsalo en las que quedan por debajo del pliegue, pero nunca en la imagen principal de la página: retrasarla empeora el Largest Contentful Paint en lugar de mejorarlo.
Herramientas relacionadas
Contenido revisado el por PixelForge Studio.