Las imágenes suelen ser la parte más pesada de una página web. Una sola foto sin optimizar, recién salida de un teléfono o una cámara, puede pesar varios megabytes, más que todo el HTML, el CSS y el JavaScript de la página juntos. Comprimir imágenes es una de las formas más fáciles de acelerar un sitio, y no tiene por qué hacer que se vean peor. Esta guía explica cómo funciona la compresión de imágenes, qué formatos elegir, qué ajustes de calidad usar y un método simple que puedes repetir en cada página.
Por qué importa el peso de las imágenes
- Velocidad. Las imágenes pesadas tardan más en descargarse, sobre todo con conexiones móviles. Los visitantes lo notan, y las páginas lentas pierden lectores y clientes.
- Core Web Vitals. En muchas páginas, el elemento visible más grande es una imagen, a menudo la foto principal. La métrica Largest Contentful Paint (LCP) de Google mide qué tan rápido aparece ese elemento, y las Core Web Vitals son parte de cómo Google evalúa la experiencia en la página.
- Costos y límites. Las imágenes más livianas usan menos ancho de banda y espacio de hosting, y algunas plataformas limitan el tamaño de las subidas.
- Búsqueda de imágenes. Las imágenes rápidas y bien descritas son más fáciles de rastrear para los buscadores y de mostrar en los resultados de imágenes.
Compresión con pérdida y sin pérdida
La compresión sin pérdida reduce el archivo sin cambiar ni un solo píxel: encuentra formas más eficientes de guardar los mismos datos. La optimización de PNG es sin pérdida, así que no hay que preocuparse por ningún control de calidad, pero el ahorro suele ser modesto.
La compresión con pérdida elimina detalles que el ojo difícilmente nota, como variaciones sutiles de color y texturas finas, a cambio de archivos mucho más chicos. JPEG, WebP y AVIF admiten compresión con pérdida, controlada por un ajuste de calidad. Con valores razonables, la mayoría de la gente no nota la diferencia al tamaño normal de visualización.
Cómo elegir el formato de imagen correcto
JPEG (JPG)
El formato clásico para fotos. Compatible con todo, buena compresión para fotografías y sin transparencia. Sigue siendo una opción segura cuando necesitas la máxima compatibilidad, por ejemplo en correos.
PNG
Sin pérdida y con transparencia. Ideal para capturas de pantalla, logos, íconos y gráficos con colores planos y bordes nítidos. Una mala elección para fotos, que en PNG quedan enormes.
WebP
Un formato moderno desarrollado por Google que admite compresión con y sin pérdida, además de transparencia. Por lo general produce archivos bastante más chicos que JPEG o PNG con una calidad visual parecida, y todos los navegadores principales actuales lo admiten. Una excelente opción predeterminada para sitios web.
AVIF
Un formato más nuevo basado en el códec de video AV1. Muchas veces comprime todavía mejor que WebP, sobre todo en fotos, y lo admiten las versiones actuales de los navegadores principales. La codificación es más lenta y algunos programas viejos no pueden abrirlo, así que conserva una alternativa si tu público usa dispositivos antiguos.
SVG
No es un formato de fotos, sino gráficos vectoriales descritos como código. Perfecto para logos e íconos que tienen que verse nítidos a cualquier tamaño. Optimiza los SVG quitando los metadatos del editor.
¿Qué ajuste de calidad conviene usar?
No hay un número perfecto único, porque depende de la imagen y del formato, pero estos puntos de partida funcionan bien:
- Fotos para la web: empieza con una calidad de 75–85 en JPEG o WebP y compara.
- Imágenes principales grandes: prueba un poco menos, alrededor de 70–80, porque son grandes y se ven rápido.
- Fotos de productos donde importa el detalle: quédate en el rango alto, 80–90.
- AVIF: usa otra escala. Los números más bajos pueden verse bien igual, así que compara a simple vista.
La mejor prueba son tus propios ojos: comprime, mira el resultado al tamaño en que realmente se va a mostrar y baja la calidad hasta que apenas notes una diferencia; después vuelve un paso atrás.
Redimensiona antes de comprimir
La compresión ayuda, pero la mayor ganancia suele venir de redimensionar. Una foto de teléfono puede tener 4000 píxeles de ancho, mientras que la columna de contenido de tu blog tiene 800. Servir la foto a tamaño completo significa que el navegador descarga muchísimos más píxeles de los que puede mostrar.
- Redimensiona más o menos al tamaño máximo en que se va a mostrar la imagen, o al doble para que se vea nítida en pantallas de alta densidad (retina).
- Usa los atributos HTML
srcsetysizes, o las imágenes adaptables que trae tu CMS, para servir archivos más chicos a las pantallas más chicas.
Un método simple para cada imagen
- Elige el formato correcto: fotos en WebP o JPEG (o AVIF), gráficos y capturas en PNG o WebP, logos en SVG.
- Redimensiona al tamaño de visualización.
- Comprime con el optimizador de imágenes. Sube archivos JPG, PNG, WebP o AVIF (puedes elegir varios a la vez), elige un nivel de calidad y, si quieres, convierte todo a un único formato de salida. Compara el tamaño original con el nuevo y descarga los resultados uno por uno o en un ZIP.
- Revisa el resultado a tamaño real en un teléfono y en una computadora.
- Nombra el archivo de forma descriptiva, como
taza-ceramica-azul.webpen lugar deIMG_4821.webp. El generador de slugs convierte cualquier descripción en un nombre de archivo limpio. - Escribe un texto alternativo (alt) que describa la imagen para lectores de pantalla y buscadores.
- Usa carga diferida en las imágenes de más abajo con
loading="lazy", pero no en tu imagen principal, que debe cargar enseguida.
No te olvides de los metadatos y la privacidad
Las fotos de cámaras y teléfonos llevan metadatos EXIF: modelo de cámara, ajustes, fecha y a veces coordenadas GPS. Suman algo de peso y pueden revelar dónde se tomó una foto. Revisa lo que contiene una imagen con el lector EXIF antes de publicarla, sobre todo si son fotos tomadas en tu casa. Muchos optimizadores y opciones de exportación eliminan los metadatos automáticamente.
Casos especiales
Íconos pequeños
Las imágenes muy pequeñas se pueden incrustar directamente en HTML o CSS como data URI en Base64 con imagen a Base64, lo que ahorra una solicitud de red. Solo tiene sentido para archivos de pocos kilobytes, porque Base64 agrega alrededor de un tercio al tamaño.
Miniaturas de YouTube e imágenes para redes
Si usas la miniatura de un video en un artículo, descárgala con el descargador de miniaturas de YouTube y comprímela como cualquier otra foto.
Capturas de pantalla
Las capturas con texto suelen verse mejor en PNG o WebP sin pérdida. Si son muy grandes, un WebP con pérdida de alta calidad suele estar bien.
Cómo saber si tus imágenes son un problema
- Analiza tu página con PageSpeed Insights de Google o con Lighthouse en las DevTools de Chrome. Busca sugerencias como dimensionar bien las imágenes, servirlas en formatos modernos y codificarlas de forma eficiente.
- En las DevTools, abre la pestaña Network (Red), filtra por imágenes y ordénalas por tamaño para encontrar los archivos más pesados.
- Comprueba que tu servidor use HTTP/2 o HTTP/3 para que muchas imágenes puedan cargarse en paralelo de forma eficiente. El verificador de HTTP/2 te lo dice.
Preguntas frecuentes
¿Comprimir imágenes reduce la calidad?
La compresión sin pérdida no cambia la imagen en absoluto. La compresión con pérdida elimina detalles, pero con ajustes de calidad moderados la diferencia suele ser invisible al tamaño normal de visualización.
¿Cuál es el mejor formato de imagen para sitios web?
Para la mayoría de las fotos, WebP es una excelente opción predeterminada, y AVIF da archivos todavía más chicos. Usa PNG para gráficos que necesitan calidad sin pérdida y SVG para logos e íconos.
¿De qué tamaño deben ser las imágenes de un sitio web?
Redimensiónalas más o menos al tamaño en que se van a mostrar (o hasta el doble para pantallas de alta densidad) y después comprímelas. Para la mayoría de las imágenes de contenido, eso significa mucho menos que los varios megabytes de un original de cámara.
¿La compresión de imágenes ayuda al SEO?
De forma indirecta. Las páginas más rápidas dan una mejor experiencia y pueden mejorar Core Web Vitals como el LCP, que forman parte de las señales de experiencia en la página de Google.
¿Debo convertir todas mis imágenes a WebP?
Para sitios web suele ser buena idea, porque los navegadores modernos lo admiten. Conserva los originales y usa JPEG o PNG donde importa la compatibilidad, como en los newsletters por correo.
