Cómo reducir el peso de las imágenes de tu sitio web sin perder calidad
Subir la imagen original de la cámara sin redimensionar es uno de los errores más comunes y más costosos en velocidad de carga de un sitio web.
Por qué esto importa más de lo que parece
Las imágenes suelen representar más de la mitad del peso total de una página web. Un sitio lento por imágenes pesadas no solo frustra al visitante, también afecta directamente el posicionamiento en buscadores, que consideran la velocidad de carga como un factor real de ranking.
Los tres factores que definen el peso de una imagen
| Factor | Qué controla |
|---|---|
| Resolución (dimensiones en píxeles) | Una foto de cámara suele venir en un tamaño mucho mayor al que se muestra en pantalla |
| Formato | JPG, PNG y WebP comprimen de forma muy distinta según el tipo de imagen |
| Nivel de compresión | Cuánto se sacrifica de calidad visual a cambio de reducir el tamaño del archivo |
Qué formato usar según el tipo de imagen
Fotografías
- WebP como primera opción, JPG como respaldo
- Compresión con pérdida es aceptable, el ojo casi no nota la diferencia
Logos e íconos
- PNG o SVG para mantener bordes nítidos
- SVG es ideal cuando el diseño es vectorial
Cómo servir el tamaño correcto según el dispositivo
<picture>
<source srcset="producto-400.webp" media="(max-width: 600px)">
<source srcset="producto-1200.webp">
<img src="producto-1200.jpg" alt="Producto" loading="lazy">
</picture>
El atributo loading="lazy" evita cargar imágenes que están fuera de la vista inicial del visitante, hasta que este realmente llega a esa parte de la página.
Nunca subas una foto de cámara de 4000px si en pantalla se va a mostrar a 800px.
La diferencia visual suele ser imperceptible incluso con compresión considerable.
Suele pesar entre 25% y 35% menos que un JPG equivalente en calidad visual.
Prioriza lo que el visitante ve primero, retrasa lo que está más abajo en la página.
Hazlo directamente desde el navegador
Con Konvert puedes comprimir y convertir imágenes a WebP sin instalar software adicional, procesando todo localmente antes de subir el resultado final a tu sitio.
¿Tu sitio carga lento por las imágenes?
Comprimir imágenes ahora →