Elegir los tipos de archivos de imagen correctos puede parecer una decisión trivial.

Pero los seres humanos son criaturas visuales, y las imágenes forman parte integral de la experiencia online.

La mayoría de las páginas y artículos utilizan capturas de pantalla e 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

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

Ampliación del formato de la imagen vectorial (Fuente de la imagen: Wikipedia.com)

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.

Solo el 8% de los sitios web no incluyen contenido visual... pero para el otro 92%, mostrar imágenes con el tipo de archivo correcto es esencial. 🖼 Encuentra las 15 mejores opciones en este guide👇Click to Tweet

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)

Tiger Image Formato JPEG

Tigre formato de imagen JPEG

JPEG (o JPG) 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 para los navegadores y los sistemas operativos

Casos de uso

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

El centro de recursos de Kinsta. Archivo de imagen png

El centro de recursos de Kinsta formato de imagen .png

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

Soporte para los navegadores y los sistemas operativos

Casos de uso

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

Ejemplo de una imagen gif

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

Soporte para los navegadores y los sistemas operativos

Casos de uso

4. WebP

Ejemplo de imagen 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

Soporte para los navegadores y los sistemas operativos

Casos de uso

5. TIFF

Icono de TIFFC

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

Soporte para los navegadores y los sistemas operativos

Casos de uso

6. BMP — Bitmap

bmp vs gif

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

Soporte para los navegadores y los sistemas operativos

Casos de uso

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

Formato JPEG vs HEIF

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

Soporte para los navegadores y los sistemas operativos

Casos de uso

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

Logotipo de SVG

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

Soporte para los navegadores y los sistemas operativos

Casos de uso

9. EPS — Encapsulated Postscript (PostScript Encapsulado)

Icono EPS

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

Soporte para los navegadores y los sistemas operativos

Casos de uso

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

Ejemplo de archivo PDF

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. También es la elección preferida para nuestros libros electrónicos de Kinsta.

Ventajas y desventajas

Soporte para los navegadores y los sistemas operativos

Casos de uso

11. PSD — Photoshop Document (Documento de Photoshop)

El logo de PSD

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

Casos de uso

12. AI – Adobe Illustrator Artwork

Icono de archivo de Adobe Illustrator

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.

¿Cansado de un host lento para tu sitio de WordPress? Proporcionamos servidores rápidos y soporte de clase mundial las 24 horas del día, los 7 días de la semana por parte de expertos de WordPress. Consulta nuestros planes

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

Ventajas y desventajas

Casos de uso

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

Icono XCF

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

Casos de uso

14. INDD — Adobe InDesign Document

Icono de Adobe InDesign

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

Casos de uso

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:

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

Casos de uso

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 uso de formatos de archivos de imagen

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

Examinemos qué es lo que los hace tan populares abajo.

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

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 (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 cómica PNG vs JPEG

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, 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.

Mantén el contenido visual de tu sitio web con una visualización clara con esta guía de los mejores tipos de archivos de imagen ✨Click to Tweet

Resumen

No hay escasez de imágenes que podrías utilizar legítimamente para tus proyectos. Esperemos que este artículo te haya ayudado a entender qué tipos y formatos de archivos de imagen usar en qué contexto para obtener los mejores resultados.

Los formatos rasterizados se usan mejor para imágenes y fotografías, mientras que los vectoriales son un gran sustituto de los logotipos, iconos y gráficos digitales.

El uso de los tipos de archivos de imagen adecuados para la tarea correcta no solo puede ayudar a mejorar las velocidades de carga de la página, sino también a reducir el ancho de banda y las cargas del servidor. Como un efecto positivo posterior, tu experiencia de usuario en general también mejorará en gran medida. No está mal,  ¿verdad?


Si le ha gustado este artículo, entonces le encantará la plataforma de Kinsta WordPress hosting. Acelere su sitio y reciba soporte 24/7 de nuestro equipo de WordPress veterano. Nuestra infraestructura potenciada por Google Cloud se centra en escalamiento automático, rendimiento y seguridad. ¡Déjenos mostrarle la diferencia con Kinsta! Conozca nuestros planes