¿Cuáles son los tipos de imágenes más empleados?. Sus ventajas, desventajas y usos.

¿Cuáles son los tipos de imágenes más empleados?. Sus ventajas, desventajas y usos.

• Etiquetas: contenido, creatividad, diseño, optimización

Elegir los tipos de archivos de imagen correctos puede parecer una decisión trivial. Pero los seres humanos somos criaturas visuales, y las imágenes forman parte integral de la experiencia online.

La mayoría de las páginas y artículos utilizan imágenes para enriquecer el contenido del texto. De hecho, solo alrededor del 8% de los sitios web no incluyen ningún contenido visual.

Desafortunadamente, muchos propietarios de sitios web todavía no entienden qué tipos de archivos de imagen elegir para los diferentes casos de uso. ¿El resultado? Acaban ralentizando la velocidad de carga de su sitio porque sus imágenes no tienen el mejor formato disponible, ni están optimizadas.

En este artículo, repasaremos todas las extensiones de archivos de imagen más importantes y cuándo deberías usarlas para proporcionar la mejor experiencia de usuario posible a tus visitantes.

¿Cuáles son los diferentes tipos de archivos de imagen?

Los tipos y formatos de archivos de imagen se dividen en dos categorías principales: archivos de imágenes rasterizadas y archivos de imágenes vectoriales. Echemos un vistazo más de cerca a cada categoría.

Formatos de archivos de imágenes rasterizadas

Los formatos de imagen más comunes para la web (JPEG, GIF y PNG) están todos bajo la categoría de raster.

Los tipos de archivos de imágenes rasterizadas muestran imágenes estáticas en las que cada píxel tiene un color, una posición y una proporción definidos en función de su resolución (por ejemplo, 1280×720).

Como son estáticas, no se puede cambiar el tamaño de las imágenes de manera eficiente, el diseño original y los píxeles simplemente se estirarán para llenar el espacio extra. Esto termina creando una imagen borrosa, pixelada o distorsionada de alguna manera.

Imagen Raster – ejemplo JPEG

La gran mayoría de las fotografías o imágenes que ves en Internet utilizan un formato de imagen rasterizada.

Formatos de archivos de imágenes vectoriales

SVG, EPS, AI y PDF son ejemplos de tipos de archivos de imágenes vectoriales.

A diferencia de los formatos de archivos de imagen rasterizados estáticos, donde cada forma y color del diseño está ligado a un píxel, estos formatos son más flexibles.

Los gráficos vectoriales utilizan en cambio un sistema de líneas y curvas en un plano cartesiano, escalado en comparación con el área total, no un solo píxel.

Esto significa que se puede ampliar infinitamente la resolución de la imagen original sin ninguna pérdida de calidad o distorsión.

Ampliación del formato de la imagen vectorial

Como puedes ver, la diferencia de calidad cuando se amplía 7 veces es completamente incomparable.

Como el SVG calcula las posiciones basándose en un porcentaje del área total, y no en píxeles, no hay ninguna pixelación.

Los 15 tipos de archivos de imagen más populares

A continuación, repasaremos todos los formatos de archivos gráficos principales, desde imágenes web rasterizadas, a vectoriales, hasta archivos de software de edición de imágenes.

Haremos una inmersión profunda y analizaremos los pros y los contras, el navegador y el soporte del sistema operativo, y los casos de uso ideales para cada formato.

1.JPEG (y JPG) – Joint Photographic Experts Group (Grupo Conjunto de Expertos en Fotografía)

Tigre formato de imagen JPEG

JPEG (oJPG) es un formato de archivo de imagen rasterizado con una compresión con pérdida que lo hace adecuado para compartir imágenes. Los JPEG son imágenes «con pérdida», lo que significa que reducen el tamaño del archivo, pero también la calidad de las imágenes cuando se utiliza el formato.

JPEG sigue siendo uno de los tipos de archivos de imagen más utilizados en Internet debido a su compresión y su soporte virtualmente universal para los navegadores y los sistemas operativos.

La mayoría de las plataformas de medios sociales (como Facebook e Instagram) convierten automáticamente los archivos de imagen cargados en JPEG. También utilizan tamaños de imagen de medios sociales únicos para controlar la resolución de tus fotos.

Ventajas y desventajas

• Soporte universal para navegadores y sistemas operativos.
• Un tamaño de archivo bastante pequeño.
• La pérdida de compresión de la imagen puede causar una mala legibilidad del texto.

Soporte para los navegadores y los sistemas operativos

• Soportado desde la versión 1.0 de todos los principales navegadores (Chrome, Firefox, Safari, etc.)
• Soportado por defecto por todos los visualizadores y editores de imágenes de los principales sistemas operativos.

Casos de uso

• Buena elección para imágenes de blogs y artículos, como fotos principales y de contenido, imágenes de productos y más.
• No utilices JPEG para las infografías con mucho texto pequeño o capturas de pantalla de tutoriales donde el texto es fundamental.

2. PNG – Portable Network Graphics (Gráficos de Red Portátiles)

PNG es un formato de gráficos rasterizados que soporta una compresión sin pérdidas, manteniendo el detalle y el contraste entre los colores.

En particular, el PNG ofrece una mejor legibilidad del texto que el JPEG. Esto hace que PNG sea una opción más popular para las infografías, los banners, las capturas de pantalla y otros gráficos que incluyen tanto imágenes como texto.

Ventajas y desventajas

• Imágenes de mayor calidad (sin pérdidas) y texto claramente visible.
• Los tamaños de archivo más grandes pueden ralentizar tu sitio web si se utilizan en exceso (especialmente las imágenes de alta resolución).

Soporte para los navegadores y los sistemas operativos

• Soportado por todos los principales navegadores (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari).
• Soportado por todos los principales sistemas operativos y sus editores de imagen estándar.

Casos de uso

• Buena elección para infografías, banners, gráficos de blogs, capturas de pantalla, cupones y otros elementos visuales que incluyen texto.
• No lo utilices para fotos de alta resolución, ya que creará archivos grandes de hasta varios megabytes.

3. GIF — Graphics Interchange Format (Formato de Intercambio de Gráficos)

Ejemplo de una imagen gif

El GIF es otro tipo de archivo de imagen que cae dentro del formato raster. Utiliza una compresión sin pérdidas pero «restringe» la imagen a 8 bits por píxel y una paleta limitada de 256 colores.

El formato GIF es el más famoso (y más utilizado) para las imágenes animadas porque su limitación de 8 bits mantiene el tamaño de los archivos de animaciones pequeños y fáciles de usar en Internet.

Ventajas y desventajas

• El tamaño del archivo es pequeño.
• Soporte de animación.
• La limitación de 8 bits conlleva a una calidad de imagen limitada.

Soporte para los navegadores y los sistemas operativos

• Soportado por todos los principales navegadores (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari).
• Soportado por todos los principales sistemas operativos y sus editores de imagen estándar.

Casos de uso

• Utiliza los GIF animados no solo para «darle sabor al contenido» sino que también para demostrar cómo completar las tareas en los tutoriales y guías.
• No lo utilices si necesitas imágenes en color de más de 8 bits (JPEG admite hasta 24 bits).

4. WebP

Ejemplo de imagen WebP

WebP es un formato de imagen desarrollado específicamente para proporcionar una mejor compresión de imágenes sin pérdidas y con pérdidas.

Cambiar de JPEG y PNG a WebP puede ayudar a ahorrar espacio en el disco del servidor y un ancho de banda significativo, con hasta un 35% de archivos de imagen más pequeños para una calidad idéntica.

Ventajas y desventajas

• Archivos más pequeños para la misma o mejor calidad de imagen.
• No está soportado por todos los navegadores y editores de imágenes.

Soporte para los navegadores y los sistemas operativos

• Google Chrome (Versión 17+ para escritorio, 25+ para móvil), Firefox (65+), Edge (18+) y Opera (11.0+), soportan WebP de forma nativa. La versión 14 planeada de Safari será compatible con WebP.
• El formato todavía no es soportado por la mayoría de los editores de imagen nativos del sistema operativo, pero las opciones profesionales como Photoshop soportan WebP.

Casos de uso

• Reemplaza los archivos JPEG y PNG para ahorrar ancho de banda y acelerar tu sitio. Si utilizas WordPress como tu software CMS preferido, aquí te mostramos cómo utilizar imágenes WebP en WordPress y aplicar otros formatos a los navegadores heredados.

5. TIFF

Icono de TIFFC

Un formato que no puede faltar en esta guía de tipos de archivos de imagen, tenemos el TIFF.

TIFF, que es la abreviatura de Tagged Image File Format, es un formato de imagen rasterizado que se utiliza más comúnmente para almacenar y editar imágenes que más tarde se utilizarán para la impresión.

No ofrece ninguna compresión porque la prioridad es preservar la calidad de la imagen.

Ventajas y desventajas

• Archivos de alta calidad perfectos para el almacenamiento o la publicación impresa.
• La falta de opciones de compresión hace que los archivos de imagen sean muy grandes.
• Soporte limitado para los navegadores.

Soporte para los navegadores y los sistemas operativos

• Ningún navegador importante puede mostrar un archivo TIFF sin add-ons o extensiones.
• Principalmente disponible como formato de exportación para herramientas profesionales de edición y publicación de imágenes.

Casos de uso

• Almacenamiento y preparación de imágenes y gráficos para su publicación.
• Utilizado por muchos escáneres para preservar la calidad de los documentos o imágenes escaneadas.

6. BMP — Bitmap

Bitmap vs gif

El Bitmap (BMP) es un formato de archivo de imagen prácticamente obsoleto que mapea los píxeles individuales con poca o ninguna compresión. Esto significa que los archivos BMP pueden fácilmente llegar a ser extremadamente grandes y son poco prácticos de almacenar o manejar.

Ventajas y desventajas

• Tamaños de archivo gigantescos sin ganancias de calidad notables comparado con formatos como WebP, GIF o PNG.

Soporte para los navegadores y los sistemas operativos

• Soportado por todos los principales navegadores (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari).
• Soporte nativo en la mayoría de los editores de imágenes del sistema operativo predeterminado, como MS Paint.

Casos de uso

• En 2020, hay básicamente cero casos de uso legítimo del formato de imagen BMP.

7. HEIF – High Efficiency Image File Format (Formato de Archivo de Imagen de Alta Eficiencia)

Formato JPEG vs HEIF

HEIF, abreviatura de High Efficiency Image File Format, es un formato de imagen desarrollado por el equipo que está detrás del formato de vídeo MPEG para ser un competidor directo de JPEG.

En teoría, la compresión es casi el doble de eficiente que el JPEG, lo que permite obtener imágenes de hasta el doble de calidad con tamaños de archivo idénticos.

Es un formato de imagen rasterizado, basado en el mapeo de píxeles, lo que significa que no se pueden ampliar las imágenes sin perder calidad.

Ventajas y desventajas

• Una gran relación calidad/tamaño de archivo.
• Los navegadores no son soportados y el soporte para los sistemas operativos es limitado.

Soporte para los navegadores y los sistemas operativos

• No es soportado por ninguno de los principales navegadores.
• Soporte nativo en macOS Sierra e iOS 11 y posteriores, pero no en sus respectivas versiones de Safari.

Casos de uso

• Usado por algunos teléfonos y dispositivos más nuevos para almacenar fotos en mayor calidad que los archivos JPEG.

8. SVG — Scalable Vector Graphics (Gráficos Vectoriales Escalables)

Logotipo de SVG

El formato de archivo Scalable Vector Graphics, normalmente conocido como SVG, fue desarrollado por el W3C como un lenguaje de marcado para renderizar imágenes bidimensionales directamente en el navegador.

No se basa en píxeles como un formato rasterizado, sino que utiliza texto XML para contornear formas y líneas de forma similar a como las ecuaciones matemáticas crean los gráficos.

Esto significa que puedes ampliar las imágenes SVG infinitamente sin pérdida de calidad.

Ventajas y desventajas

• Pequeños tamaños de archivo y escalado sin pérdida para ilustraciones, formas y textos simples.
• No es un formato ideal para imágenes o dibujos complejos.

Soporte para los navegadores y los sistemas operativos

• Soportado por todos los principales navegadores (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari).
• Los editores de imágenes predeterminados tienden a no soportar el SVG (ya que no es adecuado para las fotografías), pero la mayoría de los programas de ilustración soportan las exportaciones de SVG.

Casos de uso

• SVG es el formato ideal para logotipos, iconos, ilustraciones simples y cualquier otra cosa que quieras que se pueda escalar libremente. Si utilizas WordPress, asegúrate de revisar cómo habilitar la compatibilidad del SVG de WordPress para tu sitio web.

9. EPS — Encapsulated Postscript (PostScript Encapsulado)

Icono EPS

En esencia, un archivo EPS (PostScript Encapsulado) es un archivo de imagen vectorial utilizado para almacenar ilustraciones en Adobe Illustrator y otros programas de ilustración como CorelDraw.

Al igual que los archivos SVG, el EPS es en realidad un documento basado en texto que traza formas y líneas con código, en lugar de mapear píxeles y colores. Como resultado, los archivos EPS también soportan el escalado sin pérdidas.

Ventajas y desventajas

• Escalabilidad sin pérdida.
• Soporte de impresora para documentos y diseños.

Soporte para los navegadores y los sistemas operativos

• El EPS no es un formato de archivo de imagen web estándar y no es soportado por los principales navegadores.

Casos de uso

• Se utiliza principalmente para almacenar, guardar e imprimir ilustraciones cuando se trabaja con Adobe Illustrator u otro software.

10. PDF — Portable Document Format (Formato de Documento Portátil)

Ejemplo de archivo PDF

Probablemente asocies el PDF con el almacenar, guardar y leer de documentos basados principalmente en texto. Eso es perfectamente comprensible – el documento está ahí en el nombre después de todo.

Pero los archivos PDF están basados en el mismo lenguaje PostScript que impulsa los archivos de imágenes vectoriales EPS y pueden ser usados para guardar imágenes e ilustraciones también.

Es el formato de imagen elegido para almacenar ilustraciones, portadas de revistas y más para su posterior impresión.

Ventajas y desventajas

• El texto indexable y buscable lo hace perfecto para infografías o informes en profundidad.
• Puedes incluir enlaces, botones CTA y otros elementos interactivos.
• Escalabilidad sin pérdida.
• No se puede incluir en el contenido de la web (al menos que lo hagas a través de un iframe), debe ser cargado y leído como un archivo separado.

Soporte para los navegadores y los sistemas operativos

• Soportado por todos los principales navegadores, pero estás obligado a abrir el PDF como un archivo separado. (No puedes usar los archivos PDF para mostrar imágenes en todo tu contenido HTML).
• Soportado como formato por la mayoría de los editores de documentos estándar (como MS Word o Google Docs), y software de ilustración (AI, Inkscape) pero no por software de edición de imágenes.

Casos de uso

• El PDF es la mejor opción si deseas crear un informe visual interactivo o una infografía que complemente tu contenido.

11. PSD — Photoshop Document (Documento de Photoshop)

Logotipo de PSD

Como su nombre indica, el formato de archivo PSD es un formato de imagen utilizado para guardar documentos de imagen y trabajos en curso con Adobe Photoshop.

No es un formato de imagen seguro para la web, por lo que no es compatible con ningún navegador, o visualizador, o editor de imágenes estándar.

Ventajas y desventajas

• Todos los filtros, las transparencias, los trazos y las ediciones son totalmente personalizables y reversibles.
• Calidad de imagen sin pérdidas.
• Archivos de gran tamaño.

Casos de uso

• Guardar y almacenar proyectos de Photoshop antes y después de que se completen.

12. AI – Adobe Illustrator Artwork

Icono de archivo de Adobe Illustrator

La IA es otro formato de imagen desarrollado específicamente por Adobe para no solo guardar la imagen, sino también el estado del proyecto.

Al igual que el PSD, no está diseñado para su uso en la web y no es compatible con ningún navegador, ni con la mayoría de los visualizadores de imágenes predeterminados.

A diferencia de los archivos PSD, puedes ampliar libremente los archivos AI sin pérdida de calidad.

Ventajas y desventajas

• Todos los trazos, líneas, formas, filtros, son personalizables y reversibles.
• Amplia libremente los tamaños de las ilustraciones.

Casos de uso

• Guardando y almacenando proyectos de Adobe Illustrator antes y después de que se completen.

13. XCF — eXperimental Computing Facility (Desenvoltura Informática Experimental)

Icono de XCF

XCF, que significa eXperimental Computing Facility, es un tipo de archivo de imagen nativo del editor de imágenes de código abierto GIMP. Es el equivalente a los archivos PSD y guarda rutas, transparencia, filtros y más.

Una vez más, se trata de un tipo de archivo nativo para almacenar proyectos y no es compatible con ningún navegador o visualizador de imágenes predeterminado.

Ventajas y desventajas

• Todos los trazos, filtros y formas son personalizables y reversibles.
• Calidad de imagen sin pérdidas.
• Archivos de gran tamaño.

Casos de uso

• Guardando y almacenando los proyectos del GIMP antes y después de que se completen.

14. INDD — Adobe InDesign Document

Icono de Adobe InDesign

El INDD es un tipo de archivo nativo para los usuarios de Adobe InDesign donde puedes guardar los archivos del proyecto incluyendo el contenido de la página, estilos, muestras y más.

Aunque a veces se denomina formato de archivo de imagen, tiende a vincularse a elementos visuales más allá del texto.

No está soportado por ningún navegador o visualizador de imágenes por defecto, ya que no es un formato seguro para la web.

Ventajas y desventajas

• Almacena grandes proyectos de diseño de varias páginas con elementos personalizables.

Casos de uso

• Utilizado principalmente por diseñadores gráficos y artistas de producción para diseñar y colaborar en carteles, folletos, revistas, panfletos y más.

15. Raw Image File Types (Formato de Imágenes Raw)

Los formatos de imagen en bruto son los tipos de archivo que una cámara digital utiliza para almacenar imágenes de calidad total para su posterior post-producción y edición.

Los principales tipos de archivos de imágenes en bruto por el fabricante de la cámara:

• Kodak: CR, K25, KDC
• Canon: CRW CR2 CR3
• Epson: ERF
• Nikon: NEF NRW
• Olympus: ORF
• Pentax: PEF
• Panasonic: RW2
• Sony: ARW, SRF, SR2

En lugar de los 256 colores disponibles en un archivo JPEG, los archivos RAW ofrecen hasta 16.384 colores diferentes en una sola imagen. Eso te da más flexibilidad a la hora de ajustar los colores y el contraste en el post-procesamiento.

Las imágenes Raw no están pensadas para la web o para ser compartidas y no son compatibles con ningún navegador o  visualizador de imágenes importante.

Ventajas y desventajas

• Imágenes de mayor calidad con mayor variabilidad en los colores.
• Archivos de imágenes gigantes (un archivo Raw puede fácilmente ser de hasta 20 a 40 megabytes).

Casos de uso

• Guardar las fotos con la mayor calidad posible para su post-procesamiento y edición.

Preguntas frecuentes sobre los tipos de archivos de imagen

¿Cuáles son los 3 tipos de archivos más comunes de un archivo de imagen?

Según los datos relacionados con el uso de la web, los tres tipos de archivos de imagen más comunes son PNG, JPEG y SVG.

Estadísticas de los tipos de archivos de imagen (Fuente de la imagen: w3techs.com)

Examinemos qué es lo que los hace tan populares…

1. PNG: Capturas de pantalla, banners, infografías, fotos…

Dado que el PNG como formato se presta mejor para el texto dentro de la imagen, se utiliza más a menudo para capturas de pantalla, banners (dependiendo del tamaño del anuncio), y más.

Dado que utiliza la compresión sin pérdidas, también es utilizada por diseñadores y fotógrafos para mostrar imágenes de alta calidad en los sitios web de sus portafolios, por ejemplo.

Estos dos factores, junto con el soporte universal del navegador y del sistema operativo, lo convierten en el tipo de archivo de imagen más popular de la web. Los PNG están presentes en un impresionante 77% de los sitios web.

2. JPEG: Fotos

La compresión con pérdida significa que JPEG es una mejor opción para mostrar imágenes en todo el contenido. La pérdida de calidad es apenas visible para el usuario medio de Internet, y puedes ahorrar un considerable espacio en disco y ancho de banda.

Por eso es el segundo formato más popular en Internet, usado por casi el 72% de los sitios web. La mayoría de los sitios usan tanto PNG como JPEG para diferentes propósitos.

Como un recordatorio: No hay diferencia entre JPG vs JPEG, son dos acrónimos y extensiones de archivo diferentes para el mismo formato.

3. SVG: Logos, iconos e ilustraciones

Los archivos SVG son archivos vectoriales escalables que son perfectos para iconos, logotipos, gráficos e ilustraciones simples. La imagen puede incluso ser insertada directamente en la página como código CSS.

Es por eso que los SVG están en tercer lugar, utilizados por el 27% de los sitios web.

Mención de honor: Imágenes GIF animadas

Aunque raramente es el formato elegido para las imágenes estáticas, el GIF ha vuelto a ser la opción número uno para compartir animaciones.

Ejemplo de GIF animado

Como resultado, alrededor del 22% de los sitios web usan GIF en sus páginas, aunque probablemente también usen PNG y JPEG como formatos estándar.

¿Qué formato de imagen es el de mayor calidad?

Los formatos de imagen Raw son de la más alta calidad pero tienen tamaños de archivo irrazonablemente grandes de hasta cientos de megabytes.

Para las imágenes de la web, el formato de archivo WebP ofrece tamaños de archivo entre 25 y 35 % más pequeños que el JPEG para las fotos de la misma calidad, lo que significa que puedes subir imágenes de mayor calidad para el mismo espacio de disco y acelerar tu sitio.

HEIF es otra alternativa de JPEG con una compresión más eficiente, pero actualmente no es soportada por ninguno de los principales navegadores.

Los archivos PNG ofrecen una compresión sin pérdidas, pero eso significa que los tamaños de los archivos serán excesivamente grandes y lentos de cargar. Un solo archivo PNG puede tener a menudo de cientos de KB o incluso más de 1 MB. Sin embargo, si aprovechas algunas tácticas como la carga lenta (lazy load – disponible en el núcleo desde WordPress 5.5) y un CDN, todavía podrías tener un sitio rápido.

¿Qué formatos de archivo soportan la transparencia?

Los tipos de archivos de imagen más comunes para la web que soportan la transparencia son PNG, WebP, GIF, e incluso SVG.

La mayoría de los tipos de archivos de imagen de proyectos nativos como PSD, XCF y AI también soportan la transparencia.

Por otro lado, el popular formato de imagen JPEG no soporta la transparencia.

¿Es PNG mejor que JPEG?

La principal diferencia entre PNG y JPEG es que PNG es un formato de imagen sin pérdidas, mientras que JPEG es un formato con pérdidas. Esto significa básicamente que PNG utiliza técnicas de compresión sin sacrificar la calidad original o el detalle de la imagen.

Para el texto de las imágenes, las capturas de pantalla del tutorial, y cuando se quiere que los signos u otros elementos finos sean 100% visibles en una foto, PNG es el formato adecuado.

Tira de prensa PNG vs JPEG (Fuente de la imagen: lbrandy.com)

Como puedes ver en esta divertida imagen de arriba, PNG, que se representa a la izquierda, es mucho mejor para mostrar claramente el texto y las formas simples en comparación con JPEG, el de la derecha.

¿Significa esto que JPEG es un tipo de archivo de imagen malo? No, en absoluto.

Para las entradas regulares de los blogs o las imágenes de cabecera (headers, sliders), JPEG ofrece una calidad más que suficiente con un tamaño de archivo significativamente menor. A menudo puedes ahorrar hasta un 50% o más de espacio mientras luchas por detectar cualquier diferencia de calidad a simple vista.