En este post vamos a enumerar los tipos de imágenes para sitios web. Es un tema al que hay que prestarle atención ya que influye en el tiempo que tardan en cargar las páginas y el espacio en disco del servidor. Es el prólogo a otro en el que mencionaremos herramientas de Linux para preparar las imágenes.

Les conté hace unos días que, a pedido de un viejo amigo, retomé temporalmente el desarrollo web (Actividad que abandoné porque no soportaba a los clientes) y, estoy usando eso para comentarles diferentes soluciones de código abierto.

Tipos de imágenes para sitios web

Un sitio tiene dos tipos de contenidos básicos, texto y multimedia. La información sobre ese contenido viaja por la red en formato de bits y el navegador la reconstruye separando lo que son palabras de las imágenes, video o sonido.

Para el caso de las imágenes, se usan diferentes formatos que contienen información sobre la ubicación de los pixeles, colores, dimensiones y algoritmo de compresión.

Los formatos de imágenes más usados en sitios web son:

• APNG: Fue desarrollado por Mozilla para dar capacidades de animación al formato PNG. Ideal para animaciones que no se sincronizan con otros recursos como sonido. Trabaja con una paleta de colores mucho más amplia que GIF.
• AVIF: No hay que confundirlo con el formato de video AVI. Su nombre es el acrónimo de AV1 Image Format y codifica flujos de bits AV1 en el contenedor HEIF (formato de archivo de imagen de alta eficiencia). Tiene mejor compresión con perdida que JPG y PNG y mejor compresión sin pérdida que WebP. Admite animaciones y transparencia. Como punto negativo hay que destacar que la imagen debe descargarse completamente para visulizarse, aunque esto se compensa con el menor tiempo de descarga.
• BMP: Menciono el clásico formato de imágenes de Windows, solo para decirte que nunca debes usarlo. Aunque hay algunas formas de disminuir su tamaño, suelen ser imágenes bastante pesadas.
• GIF: Es un formato creado para comprimir sin pérdida gráficos de 8 bits. Es ideal para animaciones simples e imágenes de sitios web destinados a lugares con conexiones lentas, ya que permite mostrar la imagen completa, pero con menor calidad cuando no terminó de descargarse.
• JPEG: Es un formato de compresión con pérdida muy utilizado para fotos, aunque no es recomendable para gráficos o diagramas.
• PNG: También muy utilizado, ofrece compresión sin pérdida, un excelente manejo de transparencias y una paleta de colores más amplia que GIF.
• SVG: En lugar de pixeles, este formato define las imágenes con una serie de comandos que la van construyendo. Es ideal para gráficos y diagramas que requieran representarse con precisión.
• TIFF: No es un formato demasiado utilizado ya que genera imágenes muy pesadas. Aunque puede ser útil si lo que se quiere incrustar en el sitio son imágenes escaneadas. Puede almacenar múltiples imágenes en un solo archivo.
• WebP: Este formato para imágenes fijas y animaciones produce archivos más pequeños con o sin compresión que JPEG y PNF. También puede usarse para crear animaciones. Aunque es soportado por todos los navegadores modernos, los más antiguos no son compatibles.

¿Qué imagen usar para cada caso

• Fotografía: Lo ideal es usar JPEG o WebP. En caso de que el tamaño sea crítico es mejor usar el segundo, si se quiere asegurar compatibilidad con navegadores antiguos, el primero.
• Iconos: La mejor relación compatibilidad y tamaño la ofrece PNG. También puede usarse WebP (Teniendo en cuenta que solo los navegadores modernos lo soportan) O SVG si queremos usar una imagen vectorial que en otra parte del sitio mostraremos ampliadas.
• Capturas de pantalla: Teniendo en cuenta que en este tipo de imágenes necesitamos que se vea el texto, lo mejor es usar una imagen con compresión sin pérdida como PNG o WebP. Se puede probar cómo se ve usando JPEG.
• Diagramas y gráficos: Aquí sin dudas la mejor opción es SVG, aunque, podemos poner una imagen en formato PNG como respaldo.