Cada imagen que pones en un sitio web es un equilibrio entre peso, calidad y funciones. PNG, JPG y WebP cubren casi todos los casos, pero no son intercambiables. Esta guía explica para qué sirve bien cada formato y cómo elegir sin adivinar.
La respuesta corta
- JPG para fotografías e imágenes complejas, cuando un archivo pequeño importa más que los píxeles perfectos.
- PNG para capturas, diagramas, logos y todo lo que necesite transparencia o detalle sin pérdida.
- WebP cuando quieres el archivo más pequeño con una calidad similar y con transparencia.
Comparación rápida
| Formato | Compresión | Transparencia | Ideal para |
|---|---|---|---|
| PNG | Sin pérdida | Sí | Capturas, gráficos, logos |
| JPG | Con pérdida | No | Fotos, compartir, correo |
| WebP | Con o sin pérdida | Sí | Sitios modernos, archivos más pequeños |
PNG: píxeles nítidos, archivos más grandes
PNG es un formato sin pérdida. Cada píxel se conserva exactamente, lo que lo hace la opción adecuada para capturas de pantalla, maquetas de interfaz, gráficos y logos de bordes definidos. PNG también admite un canal alfa, así que los fondos transparentes siguen siéndolo.
El precio es el peso. Una fotografía guardada como PNG puede pesar fácilmente de cinco a diez veces más que la misma foto en JPG, porque las fotografías contienen muchos matices de color sutiles que la compresión sin pérdida no puede descartar. Por eso PNG es una mala opción por defecto para galerías de fotos.
Usa PNG cuando:
- la imagen tenga texto, líneas finas o bordes definidos;
- necesites un fondo transparente;
- vayas a editar el archivo otra vez y quieras evitar compresiones con pérdida repetidas.
JPG: fotos pequeñas, sin transparencia
JPG usa compresión con pérdida. Descarta detalle que el ojo humano tiende a no notar, lo que funciona muy bien en fotografías. Un JPG de alta calidad suele verse idéntico al original y pesa mucho menos.
Los contras son reales: JPG no tiene canal alfa y cada guardado pierde un poco más de detalle. Editar y volver a guardar un JPG muchas veces es mala idea. El texto y los bordes definidos también pueden mostrar artefactos visibles, sobre todo con calidades bajas.
Usa JPG cuando:
- la imagen sea una fotografía;
- el peso importe más que la exactitud píxel a píxel;
- la imagen no necesite transparencia.
Un valor de calidad entre 80 y 90 suele ser el punto óptimo. Por debajo de 70, los artefactos se ven con facilidad en caras, cielos y degradados.
WebP: la opción moderna por defecto
WebP admite compresión con y sin pérdida, además de transparencia. Con una calidad visual similar suele pesar un 25–35 % menos que JPG, y puede sustituir a PNG en gráficos que necesitan alfa.
La compatibilidad con navegadores ya no es un problema: Chrome, Firefox, Safari y Edge actuales muestran WebP. Si necesitas dar soporte a navegadores muy antiguos, mantén una alternativa JPG o PNG, pero la mayoría de los sitios ya no la necesita.
Usa WebP cuando:
- quieras el archivo más pequeño para la web;
- la imagen necesite transparencia;
- te venga bien apuntar a navegadores modernos.
Cómo elegir sin darle demasiadas vueltas
- ¿Es una foto? Empieza con JPG o WebP.
- ¿Necesita transparencia? Usa PNG o WebP.
- ¿Es una captura o un logo? PNG o WebP sin pérdida.
- ¿El ancho de banda importa? Prefiere WebP y luego JPG.
- ¿Vas a editarla varias veces? Guarda un PNG maestro y exporta una copia comprimida.
Puedes convertir entre los tres formatos en el navegador con el conversor de imágenes. Mantiene las dimensiones originales y te deja ajustar la calidad de JPG y WebP.
Errores habituales
- Guardar capturas como JPG. Los bordes del texto se ven borrosos y el archivo ni siquiera es mucho más pequeño. Usa PNG o WebP.
- Guardar fotos como PNG. El archivo es mucho más grande sin ninguna ventaja visible. Usa JPG o WebP.
- Usar una imagen de 4000 px en un hueco de 400 px. Redimensiona primero y luego comprime; el navegador no debería descargar píxeles que nunca va a mostrar.
- Volver a guardar un JPG muchas veces. Cada guardado acumula artefactos de compresión. Conserva el original y exporta una sola vez.
- Olvidar la transparencia. JPG aplana las zonas transparentes a blanco, lo que puede arruinar un logo sobre un fondo de color.
Si necesitas reducir una foto grande antes de subirla, el compresor de imágenes puede redimensionarla y comprimirla en local. Y si estás preparando el icono de un sitio, el generador de favicons produce todos los tamaños a partir de una sola imagen.
Una regla sencilla
Usa WebP para la web siempre que puedas, JPG para fotos y PNG para capturas, gráficos y transparencia. Convierte a propósito, redimensiona antes de comprimir y guarda un maestro sin pérdida de todo lo que vayas a editar de nuevo.