Cómo optimizar imágenes para la web
Formato, dimensiones y calidad: el orden correcto para reducir el peso sin perder nitidez.
Última revisión:
Por qué importa el peso de las imágenes
Las imágenes suelen ser lo que más pesa en una página. Reducirlas acelera la carga, sobre todo en móviles y conexiones lentas, y mejora métricas como el Largest Contentful Paint (LCP), una de las Core Web Vitals.
Paso 1: ajusta las dimensiones
No sirvas una foto de 4000 píxeles para mostrarla a 800. Redimensiona primero al tamaño máximo que se mostrará (por ejemplo, el ancho del contenedor multiplicado por 2 para pantallas de alta densidad). Reducir las dimensiones a la mitad divide los píxeles, y aproximadamente el peso, entre cuatro.
Paso 2: elige el formato adecuado
- JPG: fotografías sin transparencia. Muy compatible.
- PNG: capturas de pantalla, gráficos con texto o imágenes que necesitan transparencia. Sin pérdida, pero pesado para fotos.
- WebP: admite transparencia y suele pesar entre un 25 % y un 35 % menos que JPG con calidad similar. Compatible con todos los navegadores actuales.
- SVG: logotipos e iconos vectoriales; no es un formato para fotografías.
Paso 3: ajusta la calidad
La compresión con pérdida elimina detalles que el ojo apenas percibe. Una calidad entre 70 % y 85 % suele ser un buen equilibrio para fotos. Compara siempre el resultado a tamaño real: si ves bloques o halos alrededor de los bordes, sube la calidad. Guarda el original, porque recomprimir una imagen ya comprimida degrada la calidad.
Hazlo sin subir tus fotos
Las herramientas de imagen de TodoEnUnClick usan la API Canvas del navegador: tus fotos no salen de tu dispositivo. El orden recomendado es redimensionar, convertir al formato adecuado y, por último, ajustar la calidad con el compresor.