Las imágenes son el elemento central más visual de una web y es necesario que estas imágenes estén correctamente optimizadas y con el formato correspondiente para que no pesen mucho, al ser subidas a la web y para que la web en todo momento pueda cargar rápido y que además tengan una excelente calidad que permita verse en cualquier tamaño de pantalla, ya sea móvil, tablet, escritorio y todas las variantes de tamaño de cada dispositivo.
El formato de las imágenes juega una importante labor en conseguir el propósito de la buena calidad en las imágenes.
Existen distintos tipos de imagen y seguro que los que más os suenan son PNG y JPG, pero el mundo no se acaba aquí, existen otros muchos tipos y en este post vamos a dedicarle una especial atención al formato Avif, recientemente considerado el mejor formato para tus imágenes web.
¿Qué formatos de imágenes existen?
Existen varios formatos de imágenes, pero en este post solo vamos a repasar y destacar los más utilizados.
SVG
Las siglas de este formato de imagen significan: Scalable Vector Graphics. Este formato se utiliza para los vectores por su gran escalabilidad, esto significa que su contenido puede adaptarse perfectamente a distintos tamaños sin perder la calidad. Además de su escalabilidad, también se utiliza por
Este formato es utilizado sobre todo por los diseñadores, lo que sigue siendo un gran desconocido para el resto de las personas. Es por esta razón por la que vamos a explicar de forma un poco más detallada, las ventajas y los inconvenientes de trabajar con SVG en tus imágenes, porque recordemos que este formato no es apto para fotografías.
Ventajas del formato SVG:
- Es escalable
- Pesa muy poco
- Su definición es mayor en tamaños más reducidos
- Se puede utilizar en todos los navegadores web, hoy en día no existen problemas de compatibilidad en este formato.
- Admite tipografías con trazado y de texto y Google las indexa perfectamente. Eso sí, es necesario que estas tipografías se incluyan en el estilo CSS o que ya formen parte de la propia tipografía de la web.
- Los archivos SVG soportan estilos CSS y la ventaja de esto es que en caso de cambiar un estilo de la web, también cambiaría el estilo de dentro del archivo. Este formato puede incluir scripts para que admitan los cambios dinámicos incluso acciones o cambios al hacer click.
- Los iconos guardados en SVG están totalmente adaptados para las webs responsive, ya que al ser escalables no pierden calidad en los distintos tamaños del dispositivo que lo visualiza.
- Se puede utilizar también para crear animaciones, además de las imágenes fijas.
- Una vez se ha guardado el archivo, no pierde ningún dato al comprimirse. Esto significa que procesa un número ilimitado de colores, ideal sobre todo para gráficos e ilustraciones que posteriormente aparecerán en la web.
Inconvenientes del formato SVG:
- Pese a ser un formato de archivo ideal para web, solo es admitido para ilustraciones, ya que se trabaja sobre vectores, sin ser apto para fotografías.
- El tamaño del SVG será más grande a medida que el objeto central del archivo esté compuesto por pequeños elementos.
- Es imposible leer una parte del objeto gráfico, solo es posible leer el objeto entero y esto hace que reduzca la velocidad del sitio web al cargarse.
PNG
Sus siglas significan: Portable Network Graphics. Este formato de imagen es muy muy conocido, sobre todo por relacionarlo con el tipo de imagen sin fondo.
Existen dos tipos de PNG, los PNG 8 y los PNG 24.
- Los PNG 8 utilizan una paleta de colores limitada con tan solo 256 colores, pero a su vez, también consigue utilizar un tamaño más pequeño.
- Los PNG 24 utilizan una paleta de colores limitada pero con un mayor tamaño. Los dos formatos tienen una compresión sin ninguna pérdida.
Ventajas del formato PNG:
- Su gran ventaja es la opción de exportar la imagen sin fondo, por lo que es ideal para fotografías de siluetas o para imágenes con texto
- Renderizan muy bien los logos. Esto significa que consiguen una imagen con foto realista desde un modelo tridimensional.
- Puedes utilizar descripción de texto para los motores de búsqueda y así optimizar tu SEO.
- En caso de una imagen sin pocos colores, el formato PNG 8 te puede ayudar a conseguir una imagen con escaso peso.
Inconvenientes del formato PNG:
- Cuantas más imágenes dentro de un mismo archivo, mayor peso
- Solo es válido para imágenes sin animación.
JPG
Sus siglas significan: Joint Photographic (Experts) Group. Este sin duda es el formato de imágen más conocido. Se ha utilizado, sobre todo, por la cantidad ilimitada de colores que pueden tener sus imágenes.
Ventajas del formato JPG:
- Son ideales para las fotografías por la cantidad de colores que puede contener.
- Es posible reducir el tamaño sacrificando un poco de calidad. (recomendamos que se comprima entre un 60-70 para no perder demasiada calidad)
Inconvenientes del formato JPG:
- Por cada compresión se pierde el original y la imagen se va degradando.
- No tienen transparencias
- Los metadatos hay que realizarlos de forma manual.
WEBP
Este formato de imagen se lanzó en el año 2010 por Google. Este formato es una combinación de los anteriores. Te explicamos sus ventajas e inconvenientes:
Ventajas del formato WebP:
- Es posible comprimir este archivo sin pérdida, aunque en caso de querer una gran compresión sí tendría pérdida. Se puede comprimir hasta un 50 sin pérdida.
- Opción a transparencia, como el formato PNG
- Secuencias de imágenes para animaciones, como el formato GIF
- Peso reducido, como el formato JPG, incluso son menos pesadas que las propias imágenes JPG y con la misma calidad.
Inconvenientes del formato WebP:
- Limitación de 8 bits en la profundidad de color.
- Usa submuestreo de crominancia, es decir, almacena el color a la mitad de resolución de la imagen. Esto es ideal para vídeos pero no lo suficientemente útil para imágenes.
- Muchos navegadores no pudieron soportar este tipo de archivos y no cargaban las imágenes en las webs. Firefox empezó a soportarlo en enero del 2019 y Safari en el 2020.
- A día de hoy, no tenemos certeza de que las imágenes WebP sean compatibles en todos los navegadores, por lo que es posible que si estás utilizando este formato en las imágenes de tu web, no todas puedan ser vistas.
AVIF
Sus siglas significan: AV1 Image File Format. Este nuevo y reciente formato, se está popularizando y haciendo competencia al formato recientemente comentado, WebP. El formato AVIF es muy reciente y poco a poco está considerándose uno de los mejores formatos web.
Ventajas del formato AVIF:
- Es compatible con cualquier codec de imagen
- Compatible también con HDR
- Permite almacenar secuencias de imágenes, como lo hace el formato GIF
- Tiene transparencias, como el formato GIF
Inconvenientes del formato AVIF:
- Está soportado por Chrome desde agosto del 2020, pero aún no lo está en Opera ni en Edge
- No soporta el renderizado progresivo, esto significa que para que el navegador pueda visualizar una imagen AVIF, primero es necesario que se descargue por completo. Con los otros formatos es posible visualizar primero una versión de poca calidad y poco a poco se va cargando de forma que ya se vea completamente. En el formato AVIF se carga todo de una sola y única vez.
- Es necesaria una gran potencia de procesador para poder visualizar las imágenes en AVIF. Codificar AVIF es mucho más complejo que hacerlo en JPG.
Una vez ya tienes la información suficiente sobre los formatos de imágenes más importantes, podrás elegir el que más te interese para las imágenes de tu web, incluyendo el formato AVIF.
En Global Brand siempre estamos informándonos sobre las últimas actualizaciones en diseño para garantizar el correcto funcionamiento de nuestros diseños web y una correcta optimización en los buscadores.
Si quieres más información o que presupuestamos tu diseño, no dudes en contactar con nosotros. Te informaremos sin ningún compromiso.
