JPG vs PNG vs WebP: cuál usar en cada situación (guía 2026)

Respuesta rápida
Para fotos en una web, WebP (o AVIF, con JPG de respaldo). Para logos, iconos y gráficos planos, SVG si es posible y, si no, PNG o WebP sin pérdida. Para capturas de pantalla con texto, PNG o WebP sin pérdida. Para correo electrónico, impresión o máxima compatibilidad, JPG en fotos y PNG en gráficos. JPG no admite transparencia; PNG sí, pero pesa mucho en fotos; WebP admite las dos cosas y animación.
Elegir entre JPG, PNG y WebP no va de cuál es «el mejor formato», sino de qué contiene la imagen y dónde se va a ver. Una fotografía de paisaje, un logotipo con fondo transparente y una captura de pantalla llena de texto tienen necesidades opuestas, y el formato que funciona de maravilla para una estropea a la otra: el JPG ensucia el texto con halos, el PNG convierte una foto de 300 KB en una de 3 MB y el WebP, que casi siempre gana en la web, no sirve para mandar a una imprenta ni para un boletín por correo. En esta guía tienes la regla práctica para cada caso, lo que pasa por dentro de cada formato para que entiendas el porqué, y cómo servir varias versiones a la vez en tu web sin complicarte.
Qué formato usar en cada caso: la tabla de decisión
Si solo tienes un minuto, quédate con esta tabla. El resto del artículo explica el porqué de cada fila y los matices que cambian la respuesta.
| Qué vas a guardar | Formato recomendado | Alternativa válida | Evita |
|---|---|---|---|
| Fotografía para una web | WebP con pérdida (o AVIF) | JPG bien comprimido | PNG |
| Logotipo o marca | SVG | PNG o WebP sin pérdida con transparencia | JPG |
| Icono de interfaz | SVG | PNG pequeño o WebP sin pérdida | JPG |
| Captura de pantalla con texto | PNG o WebP sin pérdida | WebP con pérdida a calidad alta | JPG |
| Foto de producto en tienda online | WebP (con JPG de respaldo) | AVIF | PNG salvo que necesites recorte transparente |
| Producto recortado sobre fondo transparente | WebP con canal alfa | PNG | JPG (no tiene transparencia) |
| Animación corta | Vídeo MP4/WebM o WebP animado | GIF solo si no hay otra opción | GIF largo o a pantalla completa |
| Imagen para un email | JPG (fotos) y PNG (gráficos) | GIF para animaciones sencillas | WebP y SVG |
| Archivo para imprenta | PDF, TIFF o el formato que pida la imprenta | JPG a máxima calidad | WebP y PNG de baja resolución |
| Original para seguir editando | Formato nativo del editor, TIFF o PNG | JPG a calidad máxima | Reguardar muchas veces en JPG |
La pregunta útil no es «qué formato es mejor», sino «qué hay en la imagen, dónde se va a ver y si alguien la va a volver a editar».
Cómo funciona cada formato por dentro
Entender la mecánica básica te ahorra memorizar reglas. Casi todas las recomendaciones de la tabla salen de tres preguntas: si el formato descarta información (pérdida), si guarda un canal de transparencia (alfa) y si puede contener varios fotogramas (animación).
JPG (JPEG): el veterano de la fotografía
JPEG es un estándar de principios de los años noventa y sigue siendo el formato más compatible que existe: lo abre cualquier navegador, sistema operativo, cámara, móvil, cliente de correo o impresora. Su compresión es con pérdida y está pensada para imágenes fotográficas. Divide la imagen en bloques de 8×8 píxeles, transforma cada bloque en frecuencias (la transformada discreta del coseno) y descarta con más agresividad los detalles finos que el ojo humano percibe peor. Además suele guardar el color a menor resolución que el brillo (el llamado submuestreo de croma), porque somos menos sensibles a los cambios de tono que a los de luminosidad.
En una foto de un paisaje o de una persona, ese recorte es casi invisible y el archivo queda muy ligero. En un gráfico con bordes duros y colores planos, en cambio, aparecen los defectos típicos: halos alrededor de las letras, bloques visibles en las zonas lisas y manchas de color en los bordes rojos o azules. JPEG no tiene transparencia ni animación, y trabaja con 8 bits por canal, suficiente para la web pero corto para edición intensa. Existe una variante progresiva que se dibuja primero borrosa y luego se va afinando, útil en conexiones lentas.
PNG: exactitud píxel a píxel
PNG nació a mediados de los noventa como sustituto libre del GIF. Su compresión es sin pérdida: lo que guardas es exactamente lo que recuperas, píxel a píxel, por muchas veces que lo abras y lo vuelvas a guardar. Para lograrlo aplica unos filtros por filas que predicen cada píxel a partir de sus vecinos y después comprime el resultado con DEFLATE, el mismo algoritmo que usan los ZIP.
Esa forma de comprimir funciona muy bien cuando hay zonas de color uniforme, repeticiones y pocos colores: interfaces, diagramas, texto, logotipos. Funciona mal con fotografías, donde cada píxel se parece poco al de al lado por el ruido del sensor y los degradados; por eso una foto en PNG puede pesar varias veces más que la misma foto en JPG sin verse mejor en pantalla. PNG admite canal alfa completo (256 niveles de transparencia por píxel, lo que permite sombras y bordes suaves), paletas de hasta 256 colores (el llamado PNG-8, muy ligero para gráficos sencillos) y profundidades de hasta 16 bits por canal. Existe también APNG, una extensión con animación que leen los navegadores actuales, aunque se usa poco.
WebP: el formato pensado para la web
WebP es un formato que Google presentó en 2010 y que tiene, en realidad, dos motores distintos bajo el mismo nombre. El modo con pérdida deriva de la codificación de fotogramas del códec de vídeo VP8: predice cada bloque a partir de los vecinos y codifica solo la diferencia, lo que en fotografías suele dar archivos claramente más pequeños que un JPG de aspecto parecido. El modo sin pérdida es un algoritmo aparte, con transformaciones específicas para gráficos, que en la práctica suele dejar los PNG más ligeros sin tocar un solo píxel.
WebP admite transparencia tanto en modo sin pérdida como con pérdida (una combinación que ni JPG ni PNG ofrecen: una foto recortada, con fondo transparente y comprimida con pérdida), y admite animación. Sus limitaciones: trabaja a 8 bits por canal (no sirve para HDR), en modo con pérdida siempre reduce la resolución del color, lo que puede emborronar texto rojo sobre fondo oscuro, y su tamaño máximo es de 16.383 píxeles por lado. Fuera del navegador su soporte es bueno en programas modernos pero irregular en software antiguo, clientes de correo y algunas plataformas.
¿Cuánto ahorra? Google, que creó el formato, publica en su documentación ahorros del orden de un cuarto a un tercio frente a JPEG con calidad comparable y algo más de un cuarto frente a PNG en modo sin pérdida. Tómalo como orden de magnitud: el resultado real depende muchísimo de la imagen, del codificador que uses y de lo comprimido que viniera el original. Un JPG que ya se guardó a calidad baja apenas mejora al pasarlo a WebP, y a veces empeora.
Compresión con pérdida y sin pérdida: lo que de verdad cambia
La compresión sin pérdida reorganiza la información para ocupar menos, pero no descarta nada: al descomprimir obtienes los mismos píxeles exactos. Es obligatoria cuando necesitas fidelidad total (texto, planos, originales que vas a seguir editando, material de archivo). La compresión con pérdida descarta información que se considera poco visible a cambio de reducir mucho más el tamaño. En fotografía es casi siempre la opción correcta para publicar, porque la diferencia no se aprecia y el ahorro es enorme.
El parámetro de «calidad» de los codificadores (de 0 a 100 en la mayoría de programas) no es un porcentaje de calidad real ni es comparable entre formatos: un 80 en JPG no equivale a un 80 en WebP ni a un 80 en AVIF, y ni siquiera dos programas distintos que exporten JPG producen lo mismo con el mismo número. Como punto de partida orientativo para fotos en la web, muchos flujos de trabajo usan valores entre 70 y 85 en JPG o WebP; a partir de ahí, lo correcto es mirar el resultado a tamaño real y bajar hasta justo antes de que se noten defectos.
Los defectos típicos de cada formato
- Bloques y halos (JPG): cuadrículas visibles en cielos y zonas lisas, y un «ruido» alrededor de letras y bordes contrastados.
- Banding o escalones de color: degradados que se convierten en franjas, sobre todo en cielos y fondos difuminados a calidades bajas o con paletas reducidas.
- Emborronado de detalles finos (WebP con pérdida y AVIF): en lugar de bloques, las texturas finas como pelo, hierba o tela se suavizan y pierden nitidez.
- Color corrido en bordes: texto rojo o azul intenso sobre fondo oscuro que se ve manchado por el submuestreo del color.
- Posterización en PNG-8: al reducir a 256 colores, las fotos y los degradados muestran saltos bruscos.
La pérdida generacional: no reguardes en JPG
Cada vez que abres un JPG, lo editas y lo vuelves a guardar como JPG, el codificador vuelve a descartar información sobre una imagen que ya había perdido parte. Tras varias rondas, los defectos se acumulan. Por eso conviene trabajar siempre sobre un original sin pérdida (el formato nativo de tu editor, TIFF, PNG o el RAW de la cámara) y exportar a JPG o WebP solo al final, para publicar. Lo mismo vale para convertir entre formatos con pérdida: pasar un JPG a WebP con pérdida es comprimir dos veces, y si el JPG ya estaba muy comprimido, el WebP hereda sus defectos.
Guarda un original sin pérdida y exporta a formato web al final. Convertir una y otra vez entre formatos con pérdida es la forma más rápida de degradar una imagen.
Transparencia, animación y color
Canal alfa: quién tiene transparencia de verdad
La transparencia permite que una imagen se superponga sobre cualquier fondo sin un rectángulo blanco alrededor. JPG no la tiene: si conviertes un PNG transparente a JPG, las zonas transparentes se rellenan con un color sólido (normalmente blanco o negro, según el programa). PNG y WebP tienen canal alfa completo, con niveles intermedios que permiten sombras suaves y bordes antialiasados que se funden bien con el fondo. GIF solo tiene transparencia binaria (un píxel es totalmente transparente o totalmente opaco), lo que deja bordes dentados sobre fondos que no sean del color para el que se preparó la imagen.
WebP añade una ventaja práctica: puedes combinar compresión con pérdida para el color y transparencia para el recorte. Es la mejor opción para fotos de producto recortadas en una web, porque un PNG de ese mismo recorte fotográfico pesaría mucho más.
Animación: GIF, WebP animado, APNG y vídeo
GIF sigue siendo el formato de animación más reconocido, pero es muy ineficiente: está limitado a 256 colores por fotograma y comprime mal. WebP animado y APNG ofrecen más colores y transparencia real con archivos más pequeños, y los navegadores actuales los reproducen. Para cualquier animación de más de unos segundos, o con contenido fotográfico, lo más eficiente es no usar una imagen: un vídeo MP4 o WebM corto con los atributos autoplay muted loop playsinline suele pesar una fracción del GIF equivalente y se ve mejor. Reserva el GIF para donde no se puede usar otra cosa, como muchos clientes de correo.
Perfiles de color y metadatos
Una imagen puede llevar incrustado un perfil de color ICC que indica cómo interpretar sus valores. La web asume sRGB por defecto; los móviles recientes capturan a menudo en un espacio más amplio (Display P3). Si eliminas el perfil de una imagen que no está en sRGB, los colores pueden verse apagados o desplazados. Regla práctica: para la web, convierte a sRGB antes de exportar y deja el perfil incrustado si pesa poco. JPG, PNG, WebP y AVIF pueden llevar perfil ICC.
Los metadatos EXIF guardan datos de la cámara, la fecha y, a menudo, la ubicación GPS de donde se hizo la foto. Para publicar suelen sobrar: ocupan espacio y pueden revelar dónde vives o trabajas. Muchos compresores los eliminan; los conversores que funcionan en el navegador redibujando la imagen sobre un lienzo (canvas), como los de GlobalTool, generan un archivo nuevo a partir de los píxeles, así que el EXIF del original no pasa al archivo resultante. Si necesitas conservar metadatos (por ejemplo, derechos de autor en un archivo fotográfico), usa un programa de escritorio que te deje elegir qué mantener.
Tabla comparativa: JPG, PNG, WebP, AVIF, GIF y SVG
Esta tabla recoge capacidades técnicas del formato, no pesos inventados: cuánto ocupa cada archivo depende de la imagen concreta, así que la única forma fiable de comparar es exportar tu propia imagen en cada formato y mirar el resultado.
| Característica | JPG | PNG | WebP | AVIF | GIF | SVG |
|---|---|---|---|---|---|---|
| Tipo de imagen | Mapa de bits | Mapa de bits | Mapa de bits | Mapa de bits | Mapa de bits | Vectorial |
| Compresión | Con pérdida | Sin pérdida | Con y sin pérdida | Con y sin pérdida | Sin pérdida (256 colores) | Texto (se puede comprimir con gzip o brotli) |
| Transparencia | No | Sí, alfa completo | Sí, alfa completo | Sí, alfa completo | Solo binaria | Sí |
| Animación | No | Solo como APNG | Sí | Sí | Sí | Sí (CSS o SMIL) |
| Profundidad de color | 8 bits | Hasta 16 bits | 8 bits | Hasta 12 bits, admite HDR | 256 colores | No aplica |
| Navegadores actuales | Todos | Todos | Todos los principales | Todos los principales, versiones recientes | Todos | Todos |
| Clientes de correo | Todos | Todos | Irregular | Irregular | Casi todos | Muy irregular |
| Mejor uso | Fotos con máxima compatibilidad | Gráficos, capturas, originales | Casi todo en la web | Fotos en la web cuando buscas el mínimo peso | Animaciones muy simples en email | Logos, iconos, ilustraciones planas |
AVIF y JPEG XL: el contexto de 2026
La comparación entre JPG, PNG y WebP se queda corta si no mencionas a los dos formatos que aspiran a relevarlos.
AVIF se basa en el códec de vídeo AV1 y es, a día de hoy, el formato con mejor compresión que puedes usar en la web con soporte amplio: los navegadores principales en sus versiones actuales lo muestran. En fotografías suele producir archivos más pequeños que WebP a calidad visual parecida, admite transparencia, animación, mayor profundidad de color y HDR. Sus pegas: codificar es bastante más lento (se nota si conviertes miles de imágenes o si generas versiones al vuelo en el servidor), a calidades bajas tiende a suavizar texturas finas, y el soporte fuera del navegador (programas, redes sociales, correo) todavía es desigual. WordPress admite la subida de AVIF desde la versión 6.5.
JPEG XL es un estándar ISO más reciente con una propuesta muy atractiva: buena compresión con y sin pérdida, decodificación progresiva, HDR y, sobre todo, la capacidad de recomprimir un JPG existente sin pérdida y volver a obtener el JPG original bit a bit. Su problema es el soporte: Safari lo muestra desde la versión 17, pero en Chrome y Firefox su situación ha cambiado varias veces y a día de hoy no puedes dar por hecho que un visitante lo vea. Si lo quieres usar, siempre dentro de un <picture> con alternativa.
La estrategia sensata para 2026: WebP como formato base para casi todo, AVIF como primera opción si tu herramienta o tu CDN lo generan sin esfuerzo, y JPG o PNG como respaldo para los pocos casos que no admiten lo anterior.
Soporte en navegadores, correo y programas
En navegadores, WebP ya no es un riesgo: lo muestran todos los navegadores principales actuales en escritorio y móvil. Los únicos que se quedan fuera son versiones antiguas, como Internet Explorer o Safari en sistemas Apple muy desactualizados. Si tu público incluye equipos corporativos antiguos o dispositivos que no se actualizan, el elemento <picture> resuelve el problema sin renunciar a WebP.
Donde sí hay problemas es fuera del navegador:
- Correo electrónico: los clientes de correo interpretan el HTML a su manera y varios de escritorio no muestran WebP ni SVG. Para boletines y firmas, JPG y PNG siguen siendo la opción segura.
- Programas de edición y ofimática: las versiones recientes de los editores habituales (GIMP, Photoshop, los visores de Windows y macOS) abren WebP, pero software antiguo o especializado puede no hacerlo.
- Vistas previas de enlaces: cuando compartes una URL en mensajería o redes, el servicio lee la imagen de
og:image. No todos los rastreadores aceptan WebP o AVIF; JPG o PNG es la apuesta segura para esa imagen concreta. - Formularios y plataformas de terceros: administraciones, marketplaces y portales de empleo suelen limitar los formatos admitidos a JPG, PNG o PDF.
Un caso aparte es HEIC, el formato por defecto de las fotos de iPhone: comprime bien, pero la mayoría de navegadores no lo muestran y muchas webs no lo aceptan en sus formularios. Si subes fotos desde el móvil, conviértelas antes a JPG o WebP, o configura la cámara para capturar en un formato más compatible.
Cómo servir varios formatos en tu web: picture, srcset y sizes
No tienes que elegir un único formato para todos tus visitantes. HTML permite ofrecer varias versiones de una misma imagen y que cada navegador descargue la mejor que entiende. El navegador recorre las fuentes en orden y se queda con la primera cuyo tipo sabe mostrar:
<picture>
<source type="image/avif" srcset="foto.avif">
<source type="image/webp" srcset="foto.webp">
<img src="foto.jpg" alt="Descripción de la foto" width="1200" height="800">
</picture>
Tres detalles que se olvidan a menudo: el <img> final es obligatorio (es el que lleva el alt, las dimensiones y el respaldo), el orden importa (pon primero el formato más eficiente) y los atributos width y height sirven para que el navegador reserve el hueco antes de descargar la imagen y la página no dé saltos.
El segundo problema es el tamaño. Mandar una foto de 2.400 píxeles de ancho a un móvil que la muestra a 400 es desperdiciar datos, y eso pesa más que la elección de formato. Para eso existen srcset y sizes:
<picture>
<source type="image/webp"
srcset="foto-480.webp 480w, foto-960.webp 960w, foto-1600.webp 1600w"
sizes="(max-width: 768px) 100vw, 768px">
<img src="foto-960.jpg"
srcset="foto-480.jpg 480w, foto-960.jpg 960w, foto-1600.jpg 1600w"
sizes="(max-width: 768px) 100vw, 768px"
alt="Descripción de la foto" width="1600" height="1067" loading="lazy" decoding="async">
</picture>
srcset lista las versiones disponibles con su ancho real en píxeles (480w, 960w…), y sizes le dice al navegador qué ancho ocupará la imagen en pantalla según el tamaño de la ventana. Con esos dos datos y la densidad de píxeles del dispositivo, el navegador elige la versión más pequeña que se verá nítida. Si tu web va detrás de un CDN de imágenes, muchos hacen esto automáticamente: leen la cabecera Accept del navegador y devuelven AVIF, WebP o JPG desde la misma URL, además de redimensionar al vuelo.
Si usas un gestor de contenidos, revisa qué hace por ti. WordPress genera varios tamaños y escribe el srcset de forma automática, admite subir WebP desde la versión 5.8 y AVIF desde la 6.5, pero por sí solo no convierte tus JPG a WebP ni crea el <picture> con alternativas: para eso necesitas un plugin de optimización o un CDN.
Imágenes y Core Web Vitals: LCP y CLS
Google mide la experiencia de carga con las Core Web Vitals, y las imágenes influyen en dos de ellas de forma directa.
LCP (Largest Contentful Paint)
El LCP mide cuánto tarda en pintarse el elemento más grande visible al cargar la página, y en la mayoría de artículos, fichas de producto y portadas ese elemento es una imagen: la foto de cabecera, el banner o la imagen principal del producto. Google considera bueno un LCP de hasta 2,5 segundos en el percentil 75 de las visitas reales. Para bajarlo, el formato ayuda, pero no es lo único:
- Peso: un WebP o AVIF bien comprimido y al tamaño correcto baja directamente el tiempo de descarga.
- Prioridad: añade
fetchpriority="high"a la imagen principal para que el navegador la pida antes que otros recursos. - No retrasarla: nunca pongas
loading="lazy"en la imagen de la parte superior; la carga diferida es para las imágenes que quedan por debajo del primer pantallazo. - Descubrimiento: si la imagen principal se define en CSS como fondo o la inserta un script, el navegador tarda en encontrarla. Mejor un
<img>en el HTML o un<link rel="preload">conimagesrcset.
CLS (Cumulative Layout Shift)
El CLS mide los saltos de maquetación: ese momento en que vas a pulsar un enlace y el texto se desplaza porque acaba de cargar una imagen encima. El valor bueno es 0,1 o menos. La solución es sencilla y no depende del formato: pon siempre width y height (o una proporción con aspect-ratio en CSS) para que el navegador reserve el espacio exacto antes de tener la imagen.
¿Posiciona mejor una web por usar WebP? No de forma directa: Google no premia un formato concreto, sino la experiencia de carga. Pero como las imágenes suelen ser la mayor parte del peso de una página, pasar de JPG sin optimizar a WebP o AVIF bien dimensionados es una de las mejoras de rendimiento más baratas que puedes hacer, y herramientas como PageSpeed Insights te señalarán qué imágenes merece la pena recomprimir. Y no olvides el SEO de imágenes propiamente dicho: nombre de archivo descriptivo, texto alt que explique la imagen y que esté cerca de un texto relacionado.
Una foto de 3.000 píxeles de ancho servida a un móvil pesa demasiado en cualquier formato. Primero ajusta el tamaño; después elige el formato.
Caso por caso: qué formato elegir
Fotografía
Para publicar en una web: WebP con pérdida o AVIF, con JPG como respaldo si tu público lo necesita. Exporta al ancho máximo al que se va a mostrar (teniendo en cuenta pantallas de alta densidad, que suelen pedir el doble de píxeles que el ancho en CSS), en sRGB y sin EXIF. Para enviar a alguien que la va a abrir en cualquier dispositivo, o para subir a un formulario, JPG sigue siendo lo más seguro. Para archivar o seguir editando, guarda el original en RAW, TIFF o el formato nativo del editor, nunca solo en JPG comprimido.
Logotipo
El formato natural de un logotipo es SVG: es vectorial, así que se ve nítido a cualquier tamaño y en cualquier pantalla, suele pesar muy poco y admite transparencia. Si necesitas un mapa de bits (porque una plataforma no acepta SVG o el logo incluye efectos fotográficos), usa PNG o WebP sin pérdida con fondo transparente y expórtalo al tamaño en que se va a mostrar, o al doble para pantallas de alta densidad. Nunca JPG: le pondrá un fondo sólido y halos alrededor de las letras.
Captura de pantalla
Las capturas tienen texto, líneas finas y zonas de color plano, justo lo que peor lleva la compresión con pérdida. PNG o WebP sin pérdida mantienen el texto limpio; WebP sin pérdida suele pesar menos que el PNG equivalente. Si la captura incluye una foto o un vídeo a pantalla completa, un WebP con pérdida a calidad alta es buen compromiso. Antes de publicarla, recorta lo que sobre y revisa que no aparezcan datos personales, correos o pestañas abiertas que no quieras enseñar.
Iconos: mejor SVG
Para iconos de interfaz (flechas, menús, redes sociales, carrito), usa SVG siempre que puedas. Un único archivo sirve para todos los tamaños, se puede colorear con CSS, se ve perfecto en pantallas de alta densidad y suele ocupar menos que un PNG. Solo necesitas mapas de bits para casos concretos como el favicon clásico (ICO o PNG, aunque los navegadores actuales también aceptan SVG) o los iconos de aplicación que exigen las tiendas de apps y los sistemas operativos. Un aviso de seguridad: un SVG es código y puede contener scripts, así que no permitas que usuarios anónimos suban SVG a tu web sin sanearlos.
Tienda online (e-commerce)
En una tienda, las imágenes son a la vez el principal argumento de venta y el principal peso de la página. Lo razonable:
- Fotos de producto: WebP (o AVIF) generado desde un original de buena resolución, con JPG de respaldo. Sirve varios tamaños con
srcsetpara que el listado cargue miniaturas y la ficha cargue la versión grande. - Zoom: la versión ampliada puede ser más pesada, pero cárgala solo cuando el usuario la pida.
- Producto recortado: WebP con transparencia en lugar de PNG si vas a colocarlo sobre fondos de color.
- Marketplaces y comparadores: cada plataforma publica sus propios requisitos de formato, tamaño y fondo, y a menudo solo aceptan JPG o PNG. Consulta su guía antes de exportar.
- Consistencia: mismo encuadre, mismo fondo y misma proporción en todo el catálogo; evita saltos de maquetación en la rejilla de productos con dimensiones fijas.
Redes sociales
Las redes sociales recomprimen y a menudo redimensionan todo lo que subes, así que no ganas nada enviando un archivo muy comprimido: el resultado será una doble compresión. Sube JPG de buena calidad para fotos y PNG para gráficos con texto, al tamaño y la proporción que recomienda cada plataforma, y deja que ellas hagan la conversión final. Para la imagen de vista previa de tu web (og:image), usa JPG o PNG con unas proporciones de tipo 1200×630, que es lo que la mayoría de servicios muestran bien. Para ajustar tamaños tienes la guía para redimensionar imágenes para redes sociales.
Impresión
Ni WebP ni AVIF son formatos de imprenta, y PNG tampoco es lo habitual: no admiten CMYK, el modo de color con el que trabajan las imprentas. Para imprimir, lo normal es entregar un PDF preparado para impresión o un TIFF, con la resolución adecuada al tamaño final (como referencia habitual, en torno a 300 píxeles por pulgada para piezas que se miran de cerca) y el perfil de color que indique la imprenta. Si solo puedes entregar un JPG, que sea a calidad máxima y a resolución suficiente. Pregunta siempre a la imprenta qué formato prefiere: te ahorrará sorpresas de color.
Correo electrónico
En boletines y firmas de correo, compatibilidad por encima de todo: JPG para fotos, PNG para logotipos y gráficos, GIF solo para animaciones muy sencillas. Evita WebP, AVIF y SVG, que varios clientes de correo no muestran. Mantén el peso bajo, porque muchos lectores abren el correo con datos móviles, y añade siempre un texto alternativo: hay clientes que bloquean las imágenes por defecto.
Cómo convertir y comprimir tus imágenes con GlobalTool
En GlobalTool tienes varias herramientas gratuitas que funcionan en tu navegador: la imagen se procesa en tu equipo, sin registro.
- Convertir formato de imagen: cargas una imagen y eliges el formato de salida entre JPG, PNG y WebP. Útil para pasar un JPG o un PNG a WebP. Si usas Safari, comprueba el archivo descargado: algunos navegadores no saben codificar WebP desde el lienzo y entregan un PNG.
- Comprimir imágenes: recomprime la imagen en JPG con un control de calidad (de 10 a 100) y te muestra el peso antes y después. Como el resultado es JPG, no la uses con imágenes que necesiten transparencia.
- Convertir PNG a JPG: para pasar capturas o gráficos a JPG cuando una plataforma no admite PNG o cuando el PNG es una foto que pesa demasiado. Las zonas transparentes no se conservan.
- Redimensionar imagen y recortar imagen: para dejar la imagen a su tamaño real de uso antes de comprimirla, que es donde está el mayor ahorro. Ambas descargan el resultado en PNG, así que si es una foto conviértela después a WebP o JPG.
Tienes todas las herramientas de imagen reunidas en la sección de herramientas de imágenes. Si quieres más detalle sobre cada paso, lee cómo convertir JPG a WebP y cómo comprimir imágenes sin perder calidad.
Un flujo de trabajo que funciona
- Parte del mejor original que tengas, a ser posible sin comprimir.
- Recorta y redimensiona al tamaño máximo al que se va a mostrar (el doble si quieres nitidez en pantallas de alta densidad).
- Elige el formato según la tabla de decisión: WebP para fotos en la web, PNG o WebP sin pérdida para capturas y gráficos, SVG para logos e iconos.
- Ajusta la calidad mirando la imagen a tamaño real, no a ojo sobre una miniatura. Baja hasta justo antes de ver defectos.
- Compara pesos: si el WebP no pesa claramente menos que el JPG original, quédate con el JPG.
- Publica con
width,heightyalt, con carga diferida en lo que no se ve al entrar y prioridad alta en la imagen principal. - Mide con PageSpeed Insights o la pestaña de rendimiento del navegador y corrige las imágenes que te señale.
Si trabajas con muchas imágenes, las herramientas de línea de comandos (cwebp para WebP, avifenc para AVIF, ImageMagick para casi todo) o aplicaciones como Squoosh, que compara formatos lado a lado, te permitirán automatizar conversiones por lotes con los mismos ajustes.
Errores frecuentes al elegir formato
- Guardar fotos en PNG «para no perder calidad». En pantalla no se ve mejor y pesa varias veces más. PNG es para gráficos y originales, no para publicar fotos.
- Guardar logotipos y capturas en JPG. Aparecen halos alrededor del texto y un fondo sólido donde debería haber transparencia.
- Convertir a WebP sin redimensionar. Un WebP de 4.000 píxeles sigue siendo enorme. El tamaño en píxeles importa más que el formato.
- Convertir un JPG muy comprimido a WebP esperando milagros. Los defectos del JPG se quedan y el ahorro es pequeño; si tienes el original, conviértelo desde ahí.
- Reguardar JPG una y otra vez. Cada guardado acumula pérdida.
- Poner
loading="lazy"en la imagen principal. Retrasa justo la imagen que marca el LCP. - Olvidar el respaldo cuando usas formatos nuevos en entornos donde no los leen (correo, vistas previas de enlaces, plataformas externas).
- Quitar el perfil de color a fotos de móvil en Display P3 sin convertirlas antes a sRGB: los colores cambian.
- Publicar fotos con la ubicación GPS incrustada en el EXIF sin darte cuenta.
Preguntas frecuentes
¿Qué es mejor, JPG, PNG o WebP?
Depende del contenido. Para fotos en la web, WebP suele dar el mismo aspecto que un JPG con menos peso. Para gráficos, texto y transparencias, PNG o WebP sin pérdida. Para máxima compatibilidad fuera del navegador (correo, formularios, imprenta), JPG en fotos y PNG en gráficos.
¿WebP sustituye por completo a JPG y PNG?
En la web, casi: todos los navegadores principales actuales lo muestran y cubre fotos, transparencias y animaciones. Fuera de la web no, porque varios clientes de correo, programas antiguos, vistas previas de enlaces y plataformas de terceros siguen pidiendo JPG o PNG. Guarda siempre un respaldo en esos formatos.
¿Pierdo calidad al convertir JPG a WebP?
Si conviertes a WebP con pérdida, sí, algo: es una segunda compresión sobre una imagen que ya perdió información al guardarse en JPG. A calidad alta la diferencia no suele verse, pero el ahorro también es menor. Lo ideal es convertir desde el original sin comprimir. Si conviertes a WebP sin pérdida no pierdes nada más, aunque el archivo puede acabar pesando más que el JPG.
¿PNG tiene más calidad que JPG?
PNG no pierde información, así que es fiel al 100 %. Pero en una foto, un JPG bien exportado se ve igual en pantalla y pesa muchísimo menos. La «calidad» extra del PNG solo se nota en gráficos, texto y bordes definidos, o si vas a seguir editando la imagen.
¿Qué formato tiene transparencia?
PNG, WebP, AVIF y SVG admiten transparencia completa con niveles intermedios. GIF solo admite transparencia binaria (sí o no por píxel). JPG no admite transparencia: si conviertes una imagen transparente a JPG, el fondo se rellena con un color sólido.
¿Qué nivel de calidad elijo al exportar a WebP?
Como punto de partida orientativo para fotos, valores entre 70 y 85 suelen equilibrar bien peso y aspecto. Para capturas o gráficos, mejor el modo sin pérdida. El número no es comparable entre programas ni entre formatos, así que la regla fiable es mirar el resultado a tamaño real y bajar hasta justo antes de que aparezcan defectos.
¿Es mejor AVIF que WebP?
En compresión, normalmente sí: a calidad parecida suele pesar menos, y admite HDR y más profundidad de color. A cambio codifica más lento y su soporte fuera del navegador es más limitado. Lo práctico es servir AVIF primero y WebP como alternativa dentro de un <picture>, con JPG como último respaldo.
¿Usar WebP mejora el SEO?
No hay un premio por el formato en sí. Lo que cuenta es la velocidad de carga y la experiencia (Core Web Vitals, sobre todo el LCP), y ahí las imágenes más ligeras ayudan. Un WebP mal dimensionado no mejora nada; una imagen al tamaño correcto, con dimensiones declaradas y buen texto alternativo, sí.
¿Puedo subir WebP a WordPress?
Sí. WordPress admite subir WebP desde la versión 5.8 y AVIF desde la 6.5, y genera automáticamente el srcset con varios tamaños. Lo que no hace por sí solo es convertir tus JPG a WebP ni ofrecer una alternativa JPG a navegadores antiguos: para eso hace falta un plugin de optimización o un CDN de imágenes.
¿Qué formato uso para el logo de mi web?
SVG, siempre que tengas el logo en vectorial: se ve nítido a cualquier tamaño y pesa poco. Si solo lo tienes en mapa de bits, PNG o WebP sin pérdida con fondo transparente, exportado al doble del tamaño en que se muestra para que se vea bien en pantallas de alta densidad.
¿Qué formato uso para imágenes en un correo o una newsletter?
JPG para fotos y PNG para logos y gráficos. Varios clientes de correo de escritorio no muestran WebP ni SVG, y GIF solo conviene para animaciones muy sencillas. Añade texto alternativo porque algunos clientes bloquean las imágenes por defecto.
¿Por qué mi imagen WebP se ve peor que el JPG original?
Normalmente por una calidad de exportación demasiado baja, porque el original ya era un JPG muy comprimido o porque la imagen tiene texto de colores intensos, que el modo con pérdida de WebP emborrona al reducir la resolución del color. Sube la calidad, convierte desde un original mejor o usa WebP sin pérdida para ese tipo de imágenes.