Existen muchos formatos de imagen. Seguro que has oído hablar de algunos de ellos e incluso los has usado a menudo, aunque quizás no lo supieras. Estos son algunos de los formatos de imagen más populares: JPG (o JPEG), PNG, WEBP, SVG, GIF, PSD, AI, PDF, TIFF, BMP, etc.
A continuación vas a conocer por encima cada uno de ellos, aprender qué los diferencia y qué formato de imagen elegir en función de lo que necesites.
Pero esto no es un diccionario de formatos de imagen. Así que no voy a usar palabras técnicas complicadas, ni a contarte el origen de las letras de los acrónimos, ni a presentar cada formato de imagen por igual.
Te voy a hablar como diseñadora web experimentada. Así que en este post te voy a hablar sobre todo de los formatos de imagen que más se usan, a día de hoy, en web. Y te las voy a ordenar de más a menos utilizados en web.
Resumen: tabla comparativa de formatos de imagen y sus características
|
Formato de imagen |
Tipo * |
Calidad |
Peso |
Transparencia |
Animación |
Uso típico |
|---|---|---|---|---|---|---|
|
JPG / JPEG |
Ráster |
Alta |
Muy bajo |
❌ |
❌ |
Fotografías |
|
PNG |
Ráster |
Muy alta |
Medio/alto |
✅ |
❌ |
Logos, gráficos, iconos |
|
WEBP |
Ráster |
Muy alta |
Muy bajo |
✅ |
✅ |
Fotografías (en web moderna) |
|
GIF |
Ráster |
Baja |
Depende de los frames |
❌ |
✅ |
Memes o Stickers (redes sociales) |
|
SVG |
Vector |
Perfecta |
Muy bajo |
✅ |
❌** |
Iconos, UI, Logos |
|
Lottie (.json) |
Vector (animación) |
Perfecta |
Muy bajo |
✅ |
✅ |
Animaciones UI |
* La diferencia entre un ráster y un vector es que la imagen vectorial no se deforma ni pierde calidad al modificarla (agrandarla, encogerla, retorcerla, cambiarle el color, modificar sus trazos, etc) con la desventaja de pesar mucho más. Por ello es el tipo de archivo más usado en trabajos gráficos como el diseño de logotipos y de imprenta.
**Animación mediante CSS o JS.
¿Quieres saber más?
Sigue leyendo para conocer más sobre los distintos formatos de imagen. También aprenderás cómo escoger el formato de imagen ideal para la necesidad que tengas en tu web, teniendo en cuenta todas las variables que yo como profesional en Artilet de diseño web en Barcelona centrada en WPO (Web Performance Optimization) valoro.
JPG (o JPEG)
La mayoría de fotografías e imágenes que ves en Internet son .jpg (o .jpeg). Es un método de compresión que permite que la imagen se vea perfectamente, aunque pierde información.
|
Formato de imagen JPG | |
|---|---|
|
Ventajas del JPG |
Desventaja del JPG |
|
|
Como las ventajas del JPG son mayores que su desventaja, el JPG es el formato de imagen más usado en el entorno web. De lejos.
PNG
El formato de imagen PNG permite comprimir imágenes sin perder información, por este motivo suelen ser la mejor opción para diagramas, ilustraciones, y otros elementos gráficos que quieres que se vean nítidamente.
|
Formato de imagen PNG | |
|---|---|
|
Ventajas del PNG |
Desventaja del PNG |
|
|
WEBP
Vamos a decir que .webp reúne las mejores características de JPG y PNG. Es un formato de imagen bastante reciente, desarrollado por Google.
|
Formato de imagen WEBP | |
|---|---|
|
Ventajas del WEBP |
Desventaja del WEBP |
|
|
Es un formato de imagen muy moderno, que con el tiempo puede que llegue a ser el estándar, ya que permite una calidad de imagen similar al PNG pero con un peso menor, pero de momento siguen reinando otros tipos de formato de imagen.
SVG
Puede que alguna vez hayas visto la extensión .svg, aunque ya entramos en el terreno de uno de los formatos de imagen más minoritarios en web.
|
Formato de imagen SVG | |
|---|---|
|
Ventajas del SVG |
Desventaja del SVG |
|
|
El ser un posible objeto de malware (código malicioso) hace que el formato de imagen SVG no sea muy usado. Pero mientras utilices imágenes SVG creadas por ti o descargadas de lugares de confianza, no deberías preocuparte demasiado.
GIF
GIF es un formato de imagen cuya principal característica es que puede animarse. Admite frames y puedes controlar la velocidad de los mismos. Se solían usar mucho más hace años, cuando no existían alternativas para animar imágenes en web.
|
Formato de imagen GIF | |
|---|---|
|
Ventajas del GIF |
Desventaja del GIF |
|
|
Sus dos grandes desventajas, y el hecho de que existen otros formatos de imagen más modernos que permiten crear animaciones, hacen que el GIF no sea muy usado en diseño web desde hace muchos años. Pero GIF sí es altamente popular en redes sociales como WhatsApp.
Extra: Lottie (.json)
Aunque no es un tipo de formato de imagen en sí, he pensado en incluirla porque Lottie es un formato de código ampliamente usado en webs modernas. La extensión es .json, que es un lenguaje de programación, y para crear las animaciones resultantes tendremos que usar un programa específico (Adobe After Effects).
|
Formato de imagen JSON | |
|---|---|
|
Ventajas del JSON |
Desventaja del JSON |
|
|
Existe un repositorio web de JSON muy popular, donde puedes descargar algunas de manera gratuita y usarlas en tu web.
Consejo: si usas Elementor en tu web, no hace falta que instales nada extra, ya que dispone de un widget para usar este formato de imagen. Sin embargo, no podrás usar Lotties con Gutenberg a no ser que instales el plugin oficial.
Otros formatos de imagen
Existen más formatos de imagen, algunos aceptados en web, pero son minoritarios en tanto que no se usan en una web.
Por ejemplo:
- HEIC / HEIF fue creado en 2017 por Apple, y permite guardar imágenes de gran calidad pero ocupando la mitad de espacio que en otros formatos de imagen. No obstante, al ser exclusivo de Apple e incompatible con Android y Windows, no es usado en entorno web.
- AVIF consta de imágenes de alta calidad y excelente peso, pero requieren software específico de compresión.
- BMP es el formato de imagen más usado en mapas de bits. Sería similar a JPG pero con alta calidad y con mucho más peso, al no poder comprimirse.
- RAW es un formato de imagen no alterada (lo que sale de una cámara de fotos digital) que no se usa en diseño web porque los archivos son muy pesados y tienen medidas demasiado grandes, al contener el máximo nivel de detalles.
- TIFF prima la calidad de la imagen muy por encima de su tamaño, por lo que básicamente se usa en publicaciones editoriales y en documentos de dibujo técnico, donde se requiere almacenar imágenes en una calidad incomparable.
- PSD es creación de Adobe, siendo usado en Adobe Photoshop, y es el principal formato de imagen usado para el retoque fotográfico.
- AI fue también creado por Adobe para su programa Adobe Illustrator y es el formato de imagen más popular para el diseño gráfico en general, y para diseñar y vectorizar logotipos en particular, que luego son exportados a JPG y PNG para usar en web.
- PDF, creado por Adobe, no es un formato de imagen pero derrocó a formatos de imagen como EPS por el ahorro de peso que supone. Puedes guardar cualquier cosa en PDF, incluídas imágenes, pero no puedes mostrarse directamente en la web, por lo que no es un tipo de archivo usado en diseño web (más allá de a través de un enlace a un archivo PDF).
- AVIF permite comprimir una imagen para que tenga un peso pequeño y al mismo tiempo conservar una calidad alta, haciéndolo más eficiente que JPG y PNG. Pero al ser un formato de archivo muy reciente (2019), aún no es soportado por algunos navegadores web como Microsoft Edge y Safari.
- EPS es un formato de imagen vectorial usado básicamente para diseño gráfico orientado a imprenta pues demanda alta resolución.
Populares en los años 90, la mayor parte de estos formatos de imagen dejaron de serlo al crearse alternativas mejores (básicamente JPG y PNG).
Preguntas más frecuentes sobre formatos de imagen
¿Qué diferencia hay entre imagen rasterizada y vectorial?
Aunque ya te lo he introducido en el apartado del SVG, te voy a explicar aquí la diferencia entre archivos rasterizados y vectoriales.
Formatos de imágenes rasterizadas: JPG, PNG, WEBP y GIF
En un raster tienes píxeles dispuestos unos al lado del otro, cada uno con su propio color. Si aumentamos una imagen rasterizada, aumentaremos el tamaño de los píxeles. Llega un punto en que dichos píxeles se perciben, generando una ”imagen pixelada”.
Cuando hablamos del tamaño de una imagen, hablamos de unos píxeles de ancho y unos de alto. A más píxeles, mayor tamaño de imagen… y mayor peso. Lo cual es terrible para la velocidad de carga de la web.
Por ejemplo, si en mi web quiero que una imagen se vea a todo lo ancho de pantalla, tengo que tener en cuenta el ancho de la pantalla en la que se va a visualizar.
- Si subo la imagen con un ancho de 800px, en los móviles se verá bien (tienen un ancho menor) pero en el escritorio se verá mal (tienen un ancho mínimo de 1366px).
- Pero si la subo con un ancho de 2000px (para curarme en salud) pesará tanto que la carga de la página será más lenta.
Formatos de imágenes vectorizadas: SVG
Los vectores son imágenes basadas en figuras geométricas y fórmulas matemáticas.
Me parece que la mejor forma de ejemplificar esto es la de la propia Wikipedia:
“Por ejemplo un círculo de color rojo quedaría definido por la posición de su centro, su radio, el grosor de línea y su color.”
En el navegador, esto se traduce en una cadena de texto, y el texto pesa poquísimo. Con lo que el tamaño de un SVG es mínimo.
Además, podemos agrandar, encoger, retorcer, cambiar el color, modificar solamente un trazo… Cualquier modificación de imagen sin que se pierda nada de calidad. Para ello necesitaremos un programa de edición vectorial, como Adobe Illustrator (si eres profesional del diseño) o Canva (si no te dedicas al diseño).
Dato: es importante que dispongas siempre de tu logotipo en formato vectorial. Podrás ponerlo en cualquier sitio (físico o digital) sin que se vea pixelado, evitando dar muy mala imagen.
¿Es mejor JPG o PNG?
Pues depende. En resumen, si no quieres transparencias lo ideal será JPG la mayoría de las veces. Pero si quieres un fondo transparente, como en un logotipo, entonces tendrás que usar un PNG.
¿Cuál es la diferencia entre JPG y JPEG?
La única diferencia es una letra. Por lo demás, como formatos de imagen, son exactamente iguales: misma calidad, misma compatibilidad, mismas características. ¿De dónde viene la diferencia de letra? El formato original JPEG fue creado por un comité de expertos llamado Joint Photographic Experts Group. Sin embargo, antiguamente Windows no aceptaba extensiones de más de 3 carácteres, así que se optó por acortar y crear el formato de imagen JPG (una versión más abreviada).
¿Cómo saber cuál es el formato de una imagen?
Para identificar el formato de una imagen solamente te tienes que fijar en el nombre del archivo. Tienes dos formas de hacerlo:
– Si puedes ver la extensión de la imagen, ya lo tienes. Es lo que aparece tras el punto. Ejemplo: .jpg, .png, .webp, .svg, etc.
– Si no puedes ver la extensión: Haz clic derecho en el archivo > “Ver propiedades” (Windows) o “Obtener información” (Mac). En el apartado “Tipo de archivo” (Windows) o “Clase” (Mac) aparece la información que buscas.
¿Por qué el logotipo de mi web se ve borroso?
Probablemente la resolución no sea adecuada. Si tu dispositivo tiene una pantalla retina, lo ideal es subir el logotipo al doble del tamaño del espacio que ocupa, así aumentarás la concentración de píxeles. También puedes subirlo en formato SVG, que no pierde calidad.
¿Cómo puedo cambiar el tamaño a muchas imágenes a la vez?
Existen herramientas para ello, mi favorita es gratuita: bulkresizephotos.com. Puedes hacerlo también creando una acción con Photoshop, con lo que además no pierdes la información de copyright.
¿Cuál es el peso adecuado de una imagen para que la web cargue rápida?
Cuanto menos mejor. Si una imagen pasa de 150kb, en mi opinión, empieza a ser demasiado grande y su uso en una web tiene que estar muy justificado.
¿Cómo subir WEBP a WordPress?
Desde la versión 5.8 (lanzada en 2021), WordPress soporta de forma nativa el formato WEBP, sin necesidad de plugins externos. Simplemente súbelas a tu biblioteca de medios. Si notas algún error, probablemente la versión que usas sea anterior y tendrás que actualizar WordPress. Recuerda que es importante tener un buen mantenimiento web WordPress.
¿Qué es la compresión con y sin pérdida?
Una compresión con pérdida (JPG) significa que el formato de imagen que usas perderá calidad de imagen para reducir su peso. En cambio, una compresión sin pérdida (PNG, TIFF) te permite aumentar o reducir el tamaño de la imagen manteniendo la calidad de la misma.
¿Cómo subir SVG a WordPress?
WordPress no permite la subida de archivos SVG de forma nativa por motivos de seguridad. Para ello tendrás que instalar usar un plugin o crear una función en el archivo functions.php de tu tema en WordPress. Para las páginas maquetadas con Elementor, no tendrás que instalar ningún plugin ni incluir una nueva función en tu tema. Sigue estos pasos:
- Añade en cualquier página el widget Icono de Elementor, en cualquier parte.
- En el selector del icono, escoge “Subir SVG”.
- Acepta el aviso de seguridad.
- A partir de este momento, tu WordPress ya acepta SVG para su uso con Elementor.
- Puedes eliminar el widget de icono que habías añadido. Solo nos ha servido para que en adelante WordPress permita la subida de SVG.
Eso sí, para usar el formato de imagen SVG en Gutenberg sí que tendrás que usar algún plugin o función específicos.
