WebP, JPEG o PNG: cómo comprimir imágenes para la web
Criterios prácticos para elegir formato, dimensiones y calidad antes de publicar una imagen.
Una imagen pesada aumenta el tiempo de carga y el consumo de datos móviles. La solución no es bajar la calidad hasta que el archivo sea irreconocible. El mayor ahorro suele venir de combinar dimensiones correctas, formato adecuado y revisión visual.
Fotos, logotipos, capturas e ilustraciones no deben recibir el mismo tratamiento. Primero define dónde aparecerá la imagen y cuál es el mayor tamaño que realmente necesita.
Redimensiona antes de ajustar la calidad
Si una imagen se mostrará a 800 píxeles de ancho, publicar un original de 5.000 píxeles transfiere información que la mayoría nunca verá. Conserva la fuente y crea otra versión para el uso previsto.
Las pantallas de alta densidad pueden aprovechar un archivo algo mayor, pero no justifican usar la foto original en una tarjeta pequeña. Prueba el diseño real en móvil y escritorio.
Cuándo usar JPEG, PNG y WebP
JPEG funciona bien para fotografías y muchas variaciones de color, pero no admite transparencia. PNG sirve para transparencias, líneas nítidas y casos donde no se aceptan pérdidas, aunque las fotos en PNG suelen ser pesadas.
WebP puede manejar fotos y transparencia y suele ofrecer un buen equilibrio. Considera la compatibilidad del destino y prueba una muestra antes de procesar un lote.
Encuentra el nivel de compresión correcto
Empieza con calidad alta, redúcela poco a poco y compara cabello, cielos, sombras, texto pequeño y degradados. Detente antes de que aparezcan bloques, bandas o contornos borrosos al tamaño real de uso.
No existe un porcentaje perfecto. Una foto con fondo desenfocado tolera más compresión que una captura con letras pequeñas. Prueba ejemplos representativos y registra la configuración adecuada.
Evita comprimir varias veces
Mantén el original separado y genera las versiones publicadas desde él. Abrir y guardar repetidamente un formato con pérdidas acumula defectos. Vuelve a la fuente cuando necesites otro tamaño.
Usa nombres que indiquen dimensión y finalidad, como “producto-1200-web.webp”. Esto evita usar una miniatura como imagen principal y facilita reemplazos.
Lista final
- Define las mayores dimensiones de visualización.
- Usa JPEG o WebP para fotos y PNG o WebP para transparencia.
- Compara detalles difíciles al tamaño real.
- Evita exportaciones repetidas con pérdidas.
- Prueba la carga con una conexión móvil.
Ponlo en práctica
Compresor de Imágenes
Usa la herramienta gratis y compara el resultado con la lista de esta guía.
Referencias consultadas
Fuentes externas usadas para confirmar conceptos y buenas prácticas de esta guía.