Conceptos básicos de imagen
¿JPG, PNG o WebP? Cómo elegir el formato de imagen adecuado
Respuesta rápida: usa JPG (o WebP) para fotos, PNG (o WebP sin pérdida) para capturas de pantalla, texto y todo lo que tenga fondo transparente, y SVG para logotipos e iconos dibujados con formas. Si un formulario, un correo o un programa antiguo es exigente, JPG para fotos y PNG para gráficos son la opción más segura. ¿Necesitas otro formato? Conviértelo con las herramientas de Refentra enlazadas, en tu navegador. Convertir nunca devuelve el detalle que ya se perdió.
Los archivos se procesan localmente.
En esta página
Dos preguntas deciden casi todo
1. ¿Es una foto o un gráfico? Las fotos están hechas de transiciones suaves de color, así que el formato puede descartar detalles diminutos que no notarás (compresión con pérdida: JPG, WebP con pérdida). Las capturas, los diagramas, los logotipos y el texto tienen bordes duros; la compresión con pérdida deja ahí borrosidad y halos de color, por eso necesitan formatos sin pérdida (PNG, WebP sin pérdida).
2. ¿Necesita transparencia o animación? JPG no puede guardar píxeles transparentes ni animarse. PNG y WebP pueden guardar transparencia; WebP y AVIF también pueden animarse. GIF es el formato de animación más antiguo y el menos eficiente.
Qué formato para cada tarea
- Foto para una web o para compartir
- WebP o JPG (AVIF donde se admita). El WebP con pérdida es de media un 25–35 % más pequeño que el JPEG con calidad similar.
- Captura de pantalla, texto, diagrama
- PNG. El WebP sin pérdida es de media un 26 % más pequeño que el PNG.
- Necesita fondo transparente
- PNG o WebP. JPG no tiene transparencia.
- Logotipo o icono hecho de líneas y formas
- SVG. Escala a cualquier tamaño sin desenfocarse; no sirve para fotos.
- Animación corta
- WebP o AVIF animado. GIF solo cuando no se acepte nada más.
- Formularios, correo, programas antiguos
- JPG para fotos, PNG para gráficos. Revisa antes los formatos admitidos.
Fuente: MDN, Image file type and format guide (en inglés), consultada el 5 de octubre de 2026. Los ahorros son medias de esa página; tus archivos variarán. Refentra no está afiliada a MDN.
Errores que cuestan calidad o peso
- Convertir JPG a PNG para «mejorar la calidad». La imagen sigue igual de blanda, pero el archivo pesa mucho más.
- Guardar una captura como JPG. El texto queda con bordes borrosos y halos de color. Usa PNG.
- Usar PNG para fotos. El archivo suele pesar varias veces más que un JPG sin ganancia visible.
- Volver a guardar el mismo JPG una y otra vez. Cada guardado pierde un poco más. Conserva el original y exporta una copia una sola vez.
- Enviar WebP donde solo se acepta JPG o PNG. Conviértelo antes, ver abajo.
Convertir en tu navegador
- JPG a PNG y PNG a JPG (en zonas transparentes confirmas un color de fondo).
- WebP a JPG y WebP a PNG cuando una web o un programa rechaza WebP.
- Imagen a WebP e imagen a AVIF para archivos web más pequeños.
Para tu propia web
MDN recomienda preferir WebP o AVIF para imágenes de mapa de bits y añadir una alternativa JPEG o PNG para los navegadores que no puedan mostrarlas. El elemento picture lo hace:
<picture>
<source srcset="photo.avif" type="image/avif" />
<source srcset="photo.webp" type="image/webp" />
<img src="photo.jpg" width="1200" height="800" alt="…" />
</picture>Los atributos width y height evitan que el diseño salte mientras cargan las imágenes. Consulta también cómo corregir los avisos de imágenes de PageSpeed.
Fuentes y método
Las propiedades de los formatos y las recomendaciones proceden de la página de MDN enlazada, consultada el 5 de octubre de 2026. Los nombres y límites de las herramientas se comprobaron con las herramientas actuales de Refentra. Esta guía se redactó y editó con ayuda de IA.