# WebP vs PNG y JPG: formatos modernos para la web [Canonical HTML page](https://gradiently.design/es/guide/webp-images) Tu web no tiene por qué servir los mismos archivos que publicas en Instagram. WebP y AVIF hacen el mismo trabajo que PNG y JPG con menos bytes, si los configuras bien. ## The short version - WebP es un formato de imagen que puede comprimir con pérdida como JPG o sin pérdida como PNG, y admite transparencia y animación. - Con una calidad visual parecida, los archivos WebP suelen pesar bastante menos que sus equivalentes en JPG y PNG. - Todas las versiones actuales de Chrome, Safari, Firefox y Edge admiten WebP, así que solo hace falta una alternativa para navegadores muy antiguos. - AVIF comprime más que WebP y ya tiene un soporte amplio, pero codifica más despacio. - Guarda PNG y JPG para subir a redes sociales y para los archivos que envías a otras personas; usa WebP o AVIF en tu propia web. En la duda entre **WebP vs PNG** y JPG, WebP gana en tu propia web: puede comprimir como un JPG o sin pérdida como un PNG, admite transparencia y genera archivos más ligeros con la misma calidad visual. Todos los navegadores actuales lo admiten. Donde PNG y JPG siguen ganando es fuera de tu web: subidas a Instagram y LinkedIn, adjuntos de correo, archivos para clientes e imprentas. Así que la regla práctica es sencilla. Crea y guarda los originales en PNG y sirve WebP (o AVIF) a los visitantes. ## Qué es WebP WebP es un formato de imagen desarrollado por Google y documentado en [web.dev](https://web.dev/articles/serve-images-webp). Un solo formato cubre lo que antes necesitaba tres: fotos con pérdida como JPG, gráficos sin pérdida con transparencia como PNG y animaciones cortas como GIF. El ahorro viene de una compresión más inteligente, que predice cada bloque de píxeles a partir de sus vecinos y guarda solo la diferencia. | Característica | JPG | PNG | WebP | AVIF | | --- | --- | --- | --- | --- | | Con pérdida | Sí | No | Sí | Sí | | Sin pérdida | No | Sí | Sí | Sí | | Transparencia | No | Sí | Sí | Sí | | Animación | No | Limitada (APNG) | Sí | Sí | | Soporte en navegadores | Universal | Universal | Todos los navegadores actuales | Todos los navegadores actuales | | Aceptado por redes sociales | Sí | Sí | De forma irregular | Rara vez | Consulta el soporte actual en [caniuse.com](https://caniuse.com/webp) si tu público usa dispositivos antiguos. ## WebP vs PNG para gráficos y transparencia Para logotipos, imágenes de interfaz y recortes, WebP sin pérdida conserva cada píxel como PNG y suele pesar menos. WebP con pérdida y transparencia es la gran ventaja: un recorte de producto con un borde suave y translúcido puede ocupar una fracción del PNG sin diferencia visible. Los degradados son la excepción que exige cuidado. Una mezcla oscura y suave puede mostrar bandas en WebP con pérdida igual que en JPG. Si tu imagen principal es casi todo degradado, compara la versión con pérdida a calidad alta con la versión sin pérdida, y plantéate si debería ser una imagen: un [degradado CSS](https://gradiently.design/es/guide/css-linear-gradient) no cuesta ninguna descarga. - Azul marino oscuro: prueba sin pérdida: `linear-gradient(160deg, #0c1222 0%, #13294b 50%, #1e3a8a 100%)` - Rosa pálido: con pérdida a calidad alta: `radial-gradient(circle at 70% 30%, #f9a8d4 0%, #fbcfe8 35%, #fdf2f8 80%)` - Tres tonos vivos: con pérdida va bien: `linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%)` Las mezclas oscuras y sutiles delatan antes la compresión; las vivas y cargadas la esconden. Elige los ajustes de WebP según el contenido, no por costumbre. ## WebP vs JPG para fotos En fotografías, WebP con pérdida a una calidad de entre 75 y 80 suele igualar a un JPG al 85 y pesa menos. La diferencia se nota en páginas con muchas imágenes: cuadrículas de productos, portfolios, blogs. En una sola foto principal la mejora es real pero menos espectacular, y acertar con las dimensiones en píxeles importa más que el formato. 1. **Primero el tamaño** Exporta la foto al tamaño máximo al que se muestra de verdad. Una [imagen principal de web](https://gradiently.design/es/guide/website-hero-background) de 1920×1080 nunca necesita un original de 6000 píxeles. 2. **Elige una calidad** Empieza con WebP con pérdida a 80. Mira la piel, los cielos y las esquinas oscuras al 100% de zoom, baja hasta que algo cambie y vuelve un paso atrás. 3. **Crea versiones más pequeñas** Exporta anchos de 640, 1280 y 1920 píxeles para que los móviles descarguen el pequeño. 4. **Sirve con srcset** Deja que el navegador elija el ancho adecuado con `srcset` y `sizes`, como en el código de abajo. ## AVIF vs WebP AVIF es más reciente y suele comprimir más que WebP, sobre todo en fotografías y tonos suaves. Lo admiten todos los navegadores principales actuales. Sus costes son una codificación más lenta, que importa si conviertes imágenes al vuelo, y menos herramientas que lo abran. Muchas webs sirven primero AVIF, luego WebP y por último JPG, y dejan que el navegador tome el primero que entienda. ```html Evening light over the harbour ``` El navegador usa el primer `source` que admite y, si no, recurre al `img`. El ancho y el alto evitan que el diseño salte mientras carga. Si usas un framework o una CDN de imágenes, puede que haga todo esto automáticamente a partir de un único original subido. Revisa lo que genera antes de convertir nada a mano. > **WebP animado y GIF** WebP animado pesa muchísimo menos que GIF y mantiene todo el color, así que encaja con gráficos pequeños en bucle dentro de una página. Para cualquier cosa de más de unos segundos, un vídeo MP4 o WebM sin sonido es aún más ligero. [GIF vs MP4](https://gradiently.design/es/guide/gif-vs-mp4) los compara en detalle. ## Dónde siguen ganando PNG y JPG ### Usa WebP o AVIF - Imágenes de tu propia web - Cuadrículas de productos y galerías - Imágenes de blog y artículos - Recortes transparentes en la web ### Usa PNG o JPG - Subidas a Instagram, LinkedIn, X y Facebook - Imágenes Open Graph para vistas previas de enlaces - Archivos que envías por correo o a clientes - Originales que volverás a editar Las redes sociales convierten las subidas por su cuenta, y algunas rechazan o tratan mal WebP. Los rastreadores de vistas previas de enlaces también varían, así que deja tu [imagen Open Graph](https://gradiently.design/es/guide/open-graph-image-size) como PNG o JPG de 1200×630. Y un WebP enviado a un cliente a menudo se abre en la aplicación equivocada o no se abre. Una imagen panorámica de vista previa de enlace que anuncia una colección de primavera sobre un fondo degradado Una vista previa de enlace a 1200×630. Déjala en PNG para que el rastreador de cada plataforma pueda leerla. ## Cómo convertir PNG a WebP La herramienta gratuita de línea de comandos `cwebp` de Google convierte un archivo o una carpeta entera, y la mayoría de editores de imagen y herramientas de diseño ya exportan WebP directamente. ```bash # lossy, good for photos cwebp -q 80 photo.png -o photo.webp # lossless, good for logos and interface graphics cwebp -lossless logo.png -o logo.webp # a whole folder for f in *.png; do cwebp -q 80 "$f" -o "${f%.png}.webp"; done ``` Conserva los originales en PNG. Convertir un WebP de vuelta a PNG no recupera el detalle perdido por la compresión con pérdida. Tus archivos de diseño originales pueden quedarse en PNG: Gradiently exporta los diseños en PNG y JPG, que son la entrada correcta para este paso y los archivos correctos para cualquier subida a redes. Para entender los ajustes de calidad, lee [compresión de imágenes sin estropear los degradados](https://gradiently.design/es/guide/image-compression); para la pareja clásica, [PNG vs JPG](https://gradiently.design/es/guide/png-vs-jpeg); y para la lista completa de velocidad, [optimizar imágenes para la web](https://gradiently.design/es/guide/lighthouse-image-performance). ## FAQ ### ¿Es WebP mejor que PNG? En una web, normalmente sí: WebP sin pérdida conserva los mismos píxeles en un archivo más ligero y admite transparencia. Para subidas a redes y archivos que envías a otras personas, PNG es más seguro porque se abre en todas partes. ### ¿Todos los navegadores admiten WebP? Todas las versiones actuales de Chrome, Safari, Firefox y Edge admiten WebP. Usa un elemento `picture` con una alternativa en JPG o PNG si necesitas llegar a navegadores muy antiguos. ### ¿Uso AVIF o WebP? AVIF suele pesar menos; WebP codifica más rápido y lo admiten más herramientas. Servir primero AVIF con WebP como alternativa da a la mayoría de visitantes el archivo más ligero. ### ¿Puedo subir WebP a Instagram? El soporte es irregular, así que sube PNG o JPG al tamaño exacto, como 1080×1350 para una publicación vertical. ### ¿WebP admite transparencia? Sí, tanto con pérdida como sin pérdida, lo que lo convierte en un buen sustituto de los PNG transparentes en la web.