Antonio Margareeete

Antonio margareeti

Imágenes en la WEB

Para incluir imágenes en la web es necesario prestar atención a sus características:

Imagen Pixelar

La palabra píxel es un acrónimo del inglés picture element, "elemento de imagen".

Imágenes pixelares son aquéllas que están construidas a partir de una matriz de áreas cuadradas de pequeña dimensión llamadas píxels, cada píxel puede mostrar un color de la paleta de colores que se utilice, las imágenes se forman mediante la sucesión de píxeles.

Habitualmente se utiliza un byte para almacenar la información de cada píxel de una imagen pixelar, en las primeras imagenes pixelares se utilizó un bit para almacenar la información de cada pixel con una paleta binaria en blanco y negro y a esas imagenes se las llamó mapa de bits.

Formatos de imagen pixelar

WEbP

WebP es un formato de archivo para imágenes desarrollado por Google en 2010.

WebP es el más compatible de los formatos de última generación y se puede usar para renderizar imágenes en la web.

Compresión (con pérdida): la compresión con pérdida de WebP se basa en la codificación del fotograma clave de VP8.

Compresión (sin pérdida): esta se basa en en el algoritmo LZ77, entre otros que transforman los parámetros y datos de la imagen.

Transparencia:el canal alfa de 8 bits que ofrece este formato se puede utilizar para la compresión RGB con pérdida.

AVIF

El formato de archivo de imagen AV1 (.avif) es un formato de imagen de código abierto para almacenar imágenes, lanzado por Alliance for Open Media (AOMedia).

AVIF es la versión de imagen del popular formato de video AV1, de última generación y libre de regalías.

En 2015 se fundó un consorcio de los principales actores de la economía digital con la tarea de mejorar la compresión de archivos de imagen.

La Alliance for Open Media (AOMedia), entre cuyos miembros se encuentran Amazon, Cisco, Facebook, Google (incluido YouTube), Mozilla, Microsoft, Netflix, Intel, AMD, Tencent y Apple, se centra en el tráfico de datos en línea.

Dado que las imágenes consumen más de la mitad del ancho de banda medio de una página web, AVIF tiene un nivel mucho más amplio de soporte de navegador como formato abierto y libre de regalías.

Google Chrome ha sido totalmente compatible con imágenes AVIF desde Chrome 85 en agosto de 2020

HEIF / HEIC

Uno de los sistemas operativos que adoptó al formato HEIF ha sido iOS, donde iOS HEIF se ha convertido en el formato de archivo predeterminado para las fotos tomadas con la cámara del iPhone.

Sin embargo, a pesar de que esta corporación crucial saltó para admitir HEIF, la poca compatibilidad con los navegadores es una limitación actual para HEIF.

Tanto HEIF como AVIF o AV1 comparten el mismo estándar (ISO-23000-12) y una de las ventajas de estos formatos es la compresión de las imágenes.

Imagen vectorial para web

svg

Scalable Vector Graphic, Gráficos Vectoriales Redimensionables, es un estándar abierto desarrollado por el W3C desde el año 1999., se convirtió en un estándar del W3C en septiembre de 2001.

Basado en XML, el estándar SVG proporciona marcado para describir rutas, formas y texto dentro de una ventana gráfica.

Las imágenes vectoriales están construidas a partir de objetos lógicos creados mediante código xml, que también es un estandard del W3C, y a diferencia de los mapas de bits, las imágenes vectoriales pueden ser redimensionadas, tanto como se quiera, sin pérdida de calidad de la imagen.

Etiqueta figure

El elemento HTML < figure > representa contenido independiente, a menudo con un epígrafe en un elemento < figcaption >.

Si bien < figure > se relaciona con el flujo principal, su posición es independiente de éste.

Por lo general, se trata de una imagen, una ilustración, un diagrama, un fragmento de código, o un esquema al que se hace referencia en el texto principal.

< figure >
< img src= "carpeta/archivo-de-imagen.avif" alt= "texto alternativo" / >
< figcaption >
texto del figcaption < /figcaption >
< /figure >