Formatos de imágenes para la web: ¿cuál es el mejor y cómo elegir?

Actualmente tenemos muchos formatos de imágenes para una página web: JPG, JPEG, WEBP, GIF, PNG, SVG, AVIF… ¿Cuál es el mejor y cómo elegir bien?

Hay tantos tipos de formatos de imágenes para la web que puede ser difícil distinguir unos de los otros. Pero no es algo que debes dejar de lado, pues pueden tener un impacto importante en tu página web. Es una de esas decisiones antes crear página web.

El mejor formato de una fotografía para la web no es el mismo que el de un gráfico o un logo. En este artículo te explicaremos por qué para que puedas escoger los formatos de imágenes más adecuados para tu página web.

Importancia del formato de imagen para la web

Hay cientos de formatos de imágenes, y la mayoría está diseñada con propósitos muy específicos. Pero no te preocupes: no necesitas decidir entre todos ellos. Solo un puñado de formatos de imágenes se utilizan en el internet.

Cada formato de imagen para la web es único por sus propias razones, y cada uno afectará tu página web de manera distinta.

En general, los formatos de imágenes afectan tres factores distintos de tu página web:

• Rendimiento. Algunos formatos ocupan más espacio que otros. Mientras más pesada sea una imagen, más tiempo tardará tu página web en cargarla. Esto significa que el tiempo de carga de tu página web se verá afectado según el tipo de imagen que escojas. Este punto lo comentamos en detalle en otro artículo donde hablamos del SEO para imágenes.
• Apariencia. Unos formatos de imágenes pueden incluir más detalle que otros, tanto en su resolución como en su variedad de colores. Algunos formatos se degradan cada vez que se copian, mientras que otros mantienen su calidad en el tiempo.
• Escalabilidad. Estirar o agrandar una imagen perjudica su calidad. Dependiendo del formato, esa pérdida de calidad será mayor o menor. Esto significa que algunos formatos de imágenes son más escalables que otros.

Idealmente, deberías tomar estos tres factores en cuenta para escoger formatos de imágenes para tu página web para conseguir un buen balance entre calidad y rendimiento. Es preferible que no uses más de dos formatos distintos en tu página web para mantener la consistencia.

¿Formato de imagen rasterizada o vectorial para la web?

Hay una división fundamental entre los formatos de imágenes para la web: los rasterizados y los vectoriales.

Las imágenes rasterizadas están conformadas por una red de píxeles de dos dimensiones. Cada pixel contiene información sobre color y transparencia.

Como las imágenes rasterizadas están hechas de píxeles, no escalan muy bien. Si agrandas una imagen rasterizada más allá de su tamaña original, perderá detalle y se verá borrosa.

Algunos de los formatos rasterizados más populares son JPEG, JPG, GIF y PNG.

Por otro lado, las imágenes vectoriales están hechas de líneas, formas y trazados. No contienen información sobre píxeles, sino información matemática.

Como son independientes de los píxeles, una imagen vectorial puede agrandarse y estirarse ilimitadamente y mantener su calidad. No importa cuanto zoom hagas sobre ella, siempre se verá igual de nítida.

La limitación obvia es que los formatos de imágenes vectoriales solo funcionan con imágenes hechas de vectores. Sin embargo, son extremadamente útiles cuando se trata de mostrar, logos, gráficos, íconos, mapas, etc. El tipo de formato de imagen vectorial más popular para la web es SVG.

¿Compresión de la imagen con o sin pérdida?

Hay dos maneras de comprimir archivos digitales: con pérdida y sin pérdida. Esto aplica para cualquier medio además de imágenes, como sonido y video.

Un archivo comprimido con pérdida pierde parte su información original. Si descomprimes una imagen comprimida con pérdida, no recuperarás el 100% de su contenido, sino que una parte se habrá perdido permanentemente. Por esa razón, las imágenes comprimidas con pérdida pueden reducirse para ocupar espacios mucho menores al original.

El ejemplo más popular de este tipo es JPEG.

Por otro lado, los archivos comprimidos sin pérdida no sacrifican nada de información. Si descomprimes una, recuperarás la totalidad del contenido original. Esto significa que no hay pérdida de calidad en la compresión sin pérdida. Sin embargo, los archivos resultantes ocupan más espacio que los archivos comprimidos con pérdida.

Los formatos de imágenes de este tipo usados más comúnmente son PNG y GIF.

Formatos de imágenes para la página web

JPG / JPEG

JPEG es el formato más práctico para guardar fotografías para la web. Este formato fue creado en 1986 por el Joint Photographic Experts Group, de donde viene su nombre.

Como en versiones tempranas de Windows las extensiones de archivos no podían tener más de tres caracteres, el nombre completo (JPEG) se abrevió a JPG. Hoy en día Windows permite nombres más largos como JPEG, pero aún es común el uso de JPG.

JPEG es un formato de imagen con compresión con pérdida diseñado especialmente para fotografías.

Gracias a que puede contener más de 16 millones de colores, JPEG es capaz de guardar imágenes complejas sin pérdidas de calidad notorias en su tamaño natural.

Sin embargo, debido a este tipo de compresión, cada vez que una imagen JPG se guarda pierde un poco de su calidad. Esta pérdida se traduce en artefactos visuales que emborronan detalles pequeños. Mientras más veces se guarde, más notorios se hacen los artefactos. La mejor manera de conservar la calidad de tu fotografía es conservar el archivo original sin compresión.

Otra desventaja del formato JPEG es que no tiene soporte de transparencia. Por lo tanto, estas no es un formato de imagen válido para poner en capas.

La gran ventaja de las JPEG está en la cantidad de espacio que ahorran. Un archivo de 10MB puede pasar a ser de tan solo 100KB. Ya que las imágenes pequeñas requieren menos recursos para ser procesadas, este formato ayuda a acelerar y hacer rápida una página Web.

PNG

PNG es el formato más adecuado para reproducir imágenes con precisión. A diferencia de JPEG, PNG es un formato de compresión sin pérdida. Esto significa que puede retener toda la calidad de la imagen original.

Esto último depende de qué tipo de PNG se utilice: PNG-8 o PNG-26. PNG-8 puede incluir hasta 256 colores, mientras que PNG-26 puede incluir más de 16 millones de colores, al igual que JPEG.

PNG tiene soporte de transparencia, lo cual es muy útil para mostrar logos o poner imágenes en capas.

El formato PNG puede retener la calidad de las fotografías para la web aún mejor que JPEG, pero el archivo resultante será mucho más grande.

PNG es bueno para gráficos, logos, ilustraciones simples y otros tipos de imágenes en la web que usan pocos colores y transiciones simples entre colores.

Podrás retener toda la nitidez de estas imágenes y el tamaño seguirá siendo pequeño.

Ten en cuenta que PNG es un formato optimizado para pantallas y la web. No obtendrás buenos resultados si tratas de imprimir un PNG en papel.

GIF

El GIF es otro formato de imagen con compresión sin pérdida que ganó popularidad por ser capaz de lograr tamaños de archivo mucho menores a otros formatos de imágenes . La desventaja es que solo puede incluir hasta 256 colores.

Los GIFs pueden incluir texto y fondos transparentes. Esto hace al formato GIF ideal para crear banners que con texto sobre imágenes. También es especialmente útil para mostrar muchos gráficos pequeños, como íconos y logos en la misma página.

Sin embargo, por su limitada capacidad para mostrar colores, no son un buen formato para mostrar fotografías en la web. Para ese propósito es mejor recurrir a JPEG y PNG.

Quizás la cualidad más conocida de los GIFs es que pueden ser animados. Incluso en estos casos pueden retener toda la definición original y lograr un tamaño pequeño, lo que lo hace ideal si quieres mostrar un logo animado. Ya que solo puede mostrar 256 colores, cosas como clips de películas no se verán muy bien.

SVG

SVG viene de Scalable Vector Graphics (Gráficos de Vectores Escalables). Como lo indica su nombre, el formato SVG es ilimitadamente escalable sin pérdida de calidad. Esto se debe a que no está hecho de píxeles, sino de información matemática.

El formato SVG existe desde el 2001, pero la mayoría de los navegadores no le había dado soporte hasta hace poco. Desde entonces, ha pasado a ser uno de los formatos de imágenes favoritos de los desarrolladores.

La escalabilidad de SVG hace que este formato sea ideal para cosas como gráficos, mapas e íconos.

Pero esta no es su única ventaja: como está hecho de información matemática, puedes animar cada elemento individual de un SVG fácilmente. De hecho, puedes incluir la información de un SVG dentro de código HTTP y animarlo a través de JavaScript y CSS.

Lo mejor es que el tamaño de los archivos SVG son aun más pequeños que los JPG y PNG cuando la imagen es sencilla, como un logo o un ícono. Sin embargo, cuando la imagen crece en complejidad, el tamaño del archivo también crece, y muy drásticamente.

Naturalmente, este formato no es utilizable en el caso de fotografías para la web.

WEBP

WebP combina las ventajas del JPEG y el PNG. Es uno de los formatos de imágenes más interesantes de esta lista porque fue creado específicamente para ser utilizado en la web.

WebP es un formato de imagen Open Source desarrollado por Google en el 2010, aunque aún no es tan popular como otros formatos de imágenes . Tiene soporte en muchos navegadores, y hay maneras de hacer que funcione en versiones antiguas y no compatibles de navegadores como Firefox y Safari.

WebP puede comprimir imágenes con pérdida y sin pérdida. En el caso de imágenes comprimidas sin pérdida, el tamaño es 26% menor a los PNGs, mientras que las imágenes comprimidas con pérdida son 25-34% más pequeñas que las imágenes JPEG.

Tanto la versión con pérdida como la versión sin pérdida de imágenes WebP tienen soporte para transparencia. En el caso de la compresión con pérdida, añadir transparencia solo aumenta el tamaño un 22%.

APNG

El formato APNG extiende el formato estándar PNG para incluir animaciones. Este formato desarrollado por Mozilla puede cumplir el mismo rol que los GIFs, pero tiene algunas ventajas sobre este.

Para comenzar, el formato APNG puede indexar una variedad de profundidades de color, mientras que el GIF está limitado a colores indexados de 8 bits.

Esto hace que APNG sea un formato ideal para animaciones que no necesitan estar sincronizadas con sonido. Esto incluye barras de progreso y stickers animados.

Al igual que el formato GIF que pretende reemplazar, el formato APNG utiliza compresión sin pérdida. Sin embargo, ya que este permite indexar una mayor variedad de colores, los APNGs pueden contener contenidos más complejos como clips de películas sin que haya una pérdida de calidad drástica.

HEIC/HEIF

HEIC es una de las extensiones que puede tener el formato HEIF. El High Efficiency Image File Format fue creado por el MPEG (Moving Picture Experts Group) y ofrece varias ventajas sobre el ya antiguo JPEG. HEIF utiliza la misma tecnología que el formato de video HEVC o H.265.

Los archivos con extensión .heic son en realidad contenedores de archivos de imágenes individuales codificadas como .heif. Aquí vemos una de sus características más interesantes: el formato HEIC puede almacenar secuencias de imágenes e imágenes HDR.

Además, los ficheros HEIC pueden contener información además de imágenes, como sonido y texto. Esto significa que las imágenes .heic pueden editarse sin modificar la versión original. También tienen soporte para transparencia.

Las imágenes en formato HEIF utilizan compresión con pérdida, pero pesan solo la mitad de su contraparte JPG y al mismo tiempo retienen más calidad que estas. Convertir y procesar un archivo HEIC requiere más poder de procesamiento que un JPEG y podría ser una limitación en equipos viejos, pero esto no tiene por qué ser un problema en la web.

El único obstáculo ante el uso del formato HEIF es la compatibilidad. JPEG sigue teniendo un soporte mucho más amplio. Los iPhones y iPads ahora guardan sus fotos en formato HEIF, pero deben convertirlos a JPEG para compartirlas.

AVIF

AVIF es un formato Open Source con el potencial de convertirse en uno de los formatos de imágenes más relevantes. Tiene una gran variedad de funciones y utiliza la última tecnología de compresión. Al igual que los HEIC, AVIF codifica imágenes en formato HEIF.

AVIF puede guardar imágenes comprimidas con pérdida y sin pérdida. Sus archivos comprimidos con pérdida son un 50% más pequeños que un JPEG con la misma calidad, y logra entre 30% y 50% más compresión que un WebP.

Al igual que un GIF, puede guardar animaciones o secuencias de imágenes. También tiene soporte para transparencia e imágenes HDR.

Por ahora, el formato de imagen para la web AVIF tiene soporte en Chrome, Opera y Firefox, aunque solo parcialmente en este último caso.

¿Te ayudamos a elegir el mejor formato de imagen para tu web?

Para escoger los formatos de imágenes y fotografía ideales para tu web hay que conocer qué es lo que diferencia a unos de otros. El objetivo debería ser lograr un balance entre calidad y rendimiento.

Utilizar varios formatos de imágenes en una sola página web puede ser útil, pero debes entender qué es lo que cada uno hace mejor y mantener la consistencia en la medida de lo posible.

Pero el trabajo no termina allí. Los distintos formatos de imágenes pueden tener impacto en tu SEO y cada uno debe optimizarse a su manera.

En la agencia SEO Xplora tenemos experiencia ayudando mejorar el SEO de todo tipo de páginas web y sabemos cómo optimizar el efecto de tus imágenes. ¡Contáctanos!