PNG vs JPEG vs WebP: ¿qué formato de imagen deberías usar?

La mayoría de las decisiones sobre formatos de imagen se reducen a dos preguntas. ¿La imagen necesita zonas transparentes? ¿Y se notará una pequeña pérdida de calidad? Responde a esas dos y el formato casi se elige solo. La tercera pregunta, adónde va el archivo, decide si los formatos más nuevos están permitidos siquiera, porque los marketplaces y muchas aplicaciones siguen aceptando solo JPEG y PNG.

Esta guía compara los cuatro formatos que te encontrarás con más frecuencia para fotos y gráficos en la web: JPEG, PNG, WebP y AVIF. Termina con una elección rápida para los trabajos más habituales: logotipos, fotos de producto, fotos normales y recortes con fondo transparente.

La tabla comparativa

Los detalles de los formatos proceden de la guía de tipos de archivo de imagen de MDN. La fila de compatibilidad importa menos para los navegadores que antes: todos los navegadores principales actuales muestran WebP, y AVIF es compatible con las versiones recientes de todos ellos. Donde sigue importando es en todo lo demás, como formularios de subida, marketplaces, clientes de correo y software de escritorio antiguo.

Con pérdida y sin pérdida, en pocas palabras

La compresión sin pérdida reduce un archivo sin cambiar un solo píxel. Al decodificar un PNG obtienes exactamente lo que se guardó. Eso la hace ideal para todo lo que tenga bordes duros y colores planos, como texto, logotipos, dibujos lineales, interfaces y capturas de pantalla, donde cualquier desenfoque o halo de color se nota enseguida.

La compresión con pérdida descarta detalles que el ojo difícilmente notará. Las fotografías lo toleran bien porque están llenas de ruido y de tonos graduales. JPEG funciona así, y con ajustes de calidad razonables una foto puede quedarse en una fracción de su tamaño en PNG sin ningún cambio visible.

De ahí salen dos reglas prácticas:

• Cada guardado con pérdida pierde un poco más. Conserva un original sin pérdida (el original de la cámara, un PNG o el archivo propio de tu editor) y exporta desde él las copias con pérdida, en lugar de editar y volver a guardar el mismo JPEG.
• La compresión con pérdida es peor en los bordes nítidos. Un logotipo guardado como JPEG se llena de "ruido mosquito" borroso alrededor de las letras, y una captura de pantalla acaba con el texto borroso.

Transparencia: la característica decisiva para los recortes

JPEG no tiene canal alfa. No hay forma de guardar en un JPEG que "este píxel es transparente", así que cuando quitas un fondo y guardas como JPEG, la zona vacía se rellena con un color sólido, normalmente blanco o negro. Si quieres que el recorte quede encima de otro contenido, necesitas PNG, WebP o AVIF.

PNG guarda un canal alfa completo: cada píxel puede ir de totalmente opaco a totalmente transparente, que es lo que hace que los bordes suaves, como el pelo humano, el de los animales y las sombras, se vean naturales. También tiene un modo más simple en el que un color de la paleta se marca como transparente, que sirve para gráficos planos pero da bordes dentados en fotos. Si quieres los detalles, lee qué es un canal alfa.

WebP admite transparencia tanto en su modo sin pérdida como en el modo con pérdida. La documentación de WebP de Google dice que WebP sin pérdida añade la transparencia con un 22% más de bytes aproximadamente, y que WebP con pérdida y transparencia suele ser unas 3 veces más pequeño que un PNG equivalente. Eso convierte a WebP con pérdida en la forma más eficiente de publicar una foto de producto transparente en tu propia web.

Tamaño de archivo

Para una misma imagen, el orden aproximado de mayor a menor es PNG, JPEG, WebP, AVIF, con una salvedad importante: PNG solo es "grande" en fotos. En gráficos planos con pocos colores, PNG suele ser más pequeño que JPEG y siempre más nítido.

Las cifras publicadas por Google para WebP son una referencia útil:

• Los archivos WebP sin pérdida son un 26% más pequeños que los PNG.
• Los archivos WebP con pérdida son entre un 25 y un 34% más pequeños que los JPEG equivalentes con la misma puntuación de calidad SSIM.

El consejo de MDN para imágenes rasterizadas en la web es preferir WebP o AVIF, que en general comprimen mejor que PNG, JPEG y GIF. AVIF también admite color de 10 y 12 bits, lo que ayuda con los degradados suaves. Su punto débil es la compatibilidad fuera de los navegadores: muchas aplicaciones y formularios de subida todavía lo rechazan.

El tamaño de archivo importa sobre todo cuando sirves muchas imágenes a muchos visitantes. Para una sola subida a un marketplace que de todos modos vuelve a comprimirlo todo, importa más el formato que acepta el marketplace que los bytes que te ahorras.

Dónde se acepta cada formato

Los navegadores son la parte fácil. Los marketplaces y las aplicaciones son donde se rechazan los formatos. Estos son los formatos aceptados según la documentación de cada plataforma, revisada en octubre de 2026:

Destacan dos cosas. Primero, Amazon, Walmart y los catálogos de Meta no aceptan WebP ni AVIF, así que usa JPEG o PNG para las subidas a marketplaces. Segundo, Etsy dice que no admite PNG transparentes y que las zonas transparentes pueden verse negras, así que aplana los recortes sobre un color antes de subirlos allí. Para los tamaños exactos en píxeles de cada plataforma, consulta la referencia de tamaños de fotos de producto.

Qué formato usar en los trabajos más comunes

Logotipos

Usa SVG cuando tengas un original vectorial; MDN lo recomienda para logotipos e iconos. Cuando necesites un archivo rasterizado, usa PNG con fondo transparente, o WebP sin pérdida en tu propia web. Nunca JPEG: añade ruido alrededor de los bordes y no puede ser transparente.

Fotos de producto

Para las imágenes principales de los marketplaces, usa JPEG sobre fondo blanco puro. El blog para vendedores de Amazon dice que JPEG es el formato preferido, y todos los marketplaces de la tabla anterior lo aceptan. Exporta con una calidad alta (entre 85 y 92 en la mayoría de herramientas) desde un original sin pérdida.

En tu propia tienda, sube un JPEG o PNG de alta calidad y deja que la plataforma lo convierta. Shopify, por ejemplo, dice que su servicio de imágenes sirve automáticamente a cada visitante el mejor formato que admite su navegador.

Fotos normales

JPEG es la opción segura para compartir y subir. En una web que controles, WebP o AVIF con JPEG como alternativa dan el mismo aspecto con menos bytes. Si tu móvil guarda archivos HEIC, conviértelos a JPEG antes de subirlos a cualquier sitio que no mencione HEIC.

Recortes e imágenes transparentes

Usa PNG cuando el archivo tenga que funcionar en todas partes: en diapositivas, documentos, herramientas de diseño y la mayoría de formularios de subida. Usa WebP cuando vayas a poner la imagen en tu propia página web y quieras que pese poco. Usa JPEG solo si has rellenado el fondo a propósito con un color sólido, por ejemplo blanco para un marketplace.

Capturas de pantalla y diagramas

PNG, o WebP sin pérdida. Los formatos con pérdida emborronan el texto.

Servir formatos modernos con alternativa

Si tienes tu propia web, no tienes que elegir un solo formato. El elemento HTML picture deja que el navegador elija el primer formato que entiende:

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img src="product.png" alt="Leather wallet, front view" width="1200" height="1200">
</picture>

Los navegadores compatibles con AVIF toman la primera fuente, los demás pasan a WebP, y cualquier navegador más antiguo usa el PNG. Muchas plataformas de alojamiento y CDN de imágenes hacen esta conversión por ti según la cabecera Accept del navegador, lo que suele ser más sencillo que generar tú todos los formatos.

Convertir entre formatos sin sorpresas

• De PNG o WebP a JPEG: las zonas transparentes se aplanan. Elige tú el color de relleno (normalmente blanco) en lugar de dejar que lo elija la herramienta, porque algunas usan negro por defecto.
• De JPEG a PNG: el archivo crece pero no mejora. La calidad perdida en el JPEG no vuelve.
• De cualquier formato a WebP o AVIF: comprueba que la transparencia se ha conservado y que los colores se ven bien; convierte primero al perfil de color sRGB si la imagen se va a ver en la web.
• Volver a guardar JPEG: cada guardado a menor calidad acumula pérdida. Exporta una sola vez desde el original.

Una opción más rápida para los recortes

Si quitas fondos de forma masiva, removebackground.dev exporta el recorte como PNG o WebP transparente, o como JPG sobre cualquier color sólido, así que puedes sacar de la misma subida un JPEG sobre blanco para el marketplace y un PNG transparente para tu web.