Respuesta corta: Usa JPG para las fotos y SVG para los logos, íconos y diagramas que deben verse nítidos a cualquier tamaño. Usa PNG para las capturas de pantalla, las imágenes con texto y todo lo que necesite fondo transparente. En una web, las fotos pesan menos en WebP, que según MDN comprime mucho mejor que PNG o JPEG.
Qué es cada formato
web.dev divide las imágenes en dos tipos. Las de mapa de bits, como PNG y JPG, guardan el valor de cada píxel en una cuadrícula. Las vectoriales, como SVG, describen la imagen con líneas, puntos y formas.
JPEG es el formato con pérdida más usado para imágenes fijas, y MDN lo considera especialmente útil para fotografías. PNG no tiene pérdida, así que conserva cada píxel, y admite transparencia. Los archivos SVG son archivos de texto que describen un dibujo, y MDN dice que son ideales para imágenes que se dibujan con precisión a cualquier tamaño.
Qué formato usar en cada imagen
| Imagen | Formato | Por qué |
|---|---|---|
| Foto | JPG, o WebP en tu web | El detalle perdido casi no se ve en una foto |
| Logo | SVG, con una copia en PNG | Se ve nítido a cualquier tamaño |
| Ícono | SVG | Se dibuja con precisión a cualquier tamaño |
| Captura o imagen con texto | PNG | Sin pérdida: el texto y los bordes quedan nítidos |
| Fondo transparente | PNG, o SVG si es un dibujo | JPG no tiene canal alfa |
| Gráfico o diagrama | SVG | Las formas y líneas escalan sin perder calidad |
De la guía de formatos de imagen de MDN y de web.dev, «Choose the right image format», en inglés, consultadas el 3 de noviembre de 2026.
Cómo elegir el formato correcto
- Decide si la imagen es una foto o un dibujo hecho de formas, líneas y colores planos.
- Guarda en SVG los dibujos como logos, íconos y diagramas.
- Guarda las fotos en JPG, o en WebP o AVIF para tu web, los formatos que MDN prefiere para las imágenes de píxeles.
- Usa PNG para las capturas de pantalla, las imágenes con texto y todo lo que necesite fondo transparente.
- Deja el texto importante fuera de las imágenes: web.dev señala que el texto de una imagen no se puede seleccionar, buscar ni ampliar.
- Guarda una imagen de píxeles en cada tamaño que necesites, porque al agrandarla se ve dentada y borrosa.
- Comprueba que el nombre de cada archivo termine en la extensión de su tipo, como recomienda Google.
Para los siguientes pasos con las imágenes de tu web, mira nuestras guías de WebP, de texto alternativo y SEO de imágenes y de carga diferida.
Los formatos de nuestra web
Revisamos nuestra web y nuestro kit de marca el 3 de noviembre de 2026. Nuestro logo en SVG pesa 1,762 bytes, y el PNG del mismo logo pesa 101,601 bytes, con 5,229 por 1,577 píxeles.
El logo del encabezado de nuestra web es un PNG de 396 por 119 píxeles que se muestra a 99 por 30: casi cuatro veces su ancho y su alto en pantalla. Los seis íconos de nuestro menú son dibujos SVG escritos en la propia página.
Nuestra biblioteca de medios guarda 665 archivos WebP, 15 PNG, 10 JPEG y 6 SVG. Las fotos de nuestras guías son WebP: la imagen para compartir de nuestra guía del relleno de palabras clave mide 1,200 por 630 píxeles y pesa 20,590 bytes.
Antes de subir una imagen
- Las fotos están en JPG o WebP, no en PNG.
- Los logos y los íconos están en SVG, con una copia en PNG para donde no acepten SVG.
- Las capturas de pantalla y las imágenes con texto están en PNG.
- Los fondos transparentes salen de un PNG o un SVG, nunca de un JPG.
- El texto importante es texto real en la página, no parte de una imagen.
- El nombre de cada archivo termina en la extensión de su tipo.
RecuerdaLas fotos van en JPG o WebP, los dibujos en SVG, y todo lo que lleve texto o fondo transparente en PNG.
Si quieres que las imágenes de tu web estén preparadas para la velocidad y los buscadores, mira nuestro servicio de diseño web.
Respuestas rápidas sobre los formatos de imagen
¿Qué diferencia hay entre PNG y JPG?
JPG usa compresión con pérdida: descarta detalle para que el archivo pese menos, y eso le va bien a una foto. PNG no pierde nada y conserva cada píxel, así que sirve para capturas de pantalla, logos y texto. PNG también admite transparencia; MDN señala que JPEG no tiene canal alfa.
¿Qué es un archivo SVG?
Una imagen vectorial guardada como archivo de texto. En lugar de píxeles, contiene instrucciones para dibujar formas, líneas y colores, así que se puede mostrar a cualquier tamaño sin perder nitidez. MDN lo considera ideal para íconos, diagramas y otras imágenes que se muestran a distintos tamaños.
¿Es mejor SVG que PNG para un logo?
En una web, por lo general sí. Un logo en SVG se ve nítido a cualquier tamaño, y el nuestro pesa 1,762 bytes frente a 101,601 del PNG del mismo logo. Guarda también una copia en PNG para cualquier lugar que no acepte SVG.
¿Qué formatos de imagen admiten fondo transparente?
PNG, WebP y AVIF, según la comparación de formatos de mapa de bits de web.dev. JPG no: MDN señala que JPEG no tiene canal alfa, así que usa PNG cuando una imagen de píxeles necesite fondo transparente.
¿Puedo convertir un JPG o un PNG en SVG?
Solo los dibujos se convierten bien. web.dev recomienda pasar a SVG las imágenes hechas de formas geométricas, pero dice que los formatos vectoriales se quedan cortos con una escena compleja como una foto: el código del dibujo pesa demasiado y aun así no parece real.
Fuentes
Consultadas el 3 de noviembre de 2026. MDN Web Docs, en inglés: Image file type and format guide y SVG: Scalable Vector Graphics. web.dev, en inglés: Choose the right image format. Central de la Búsqueda de Google: Prácticas recomendadas de SEO para imágenes. Nuestro caso: nuestra web y nuestro kit de marca, revisados como visitantes y en nuestro servidor el 3 de noviembre de 2026.