Las primeras versiones de HTML a inicios de los 90s no manejaban imágenes. Solo hasta la versión HTML 2.0 se adiciono soporte para manejar imágenes, desde entonces se ha mantenido y evolucionado acorde a las nuevas tecnologías.
Formatos y Tipos de Imagen
Para la web hay dos tipos de imagen: las imágenes que hacen parte de la interfaz visual, y las imágenes que hacen parte del contenido, es muy importante definir, separar y tener claro el propósito de las imágenes en los proyectos web.
Existen docenas de diferentes formatos de imágenes, para la web, usualmente se tienen solo tres opciones: GIF, JPEG y PNG, estos tres acrónimos se refieren a los tres formatos de manejo de mapas de bits más comunes en la web y las aplicaciones.
GIF
GIF significa Formato de Intercambio de Graficas (Graphic Interchange Format), se creó en 1987, y para la época se usaba en imágenes con limitados colores y bordes duros, como logos o iconos, en 1989 se adiciono la capacidad de manejar animación, que solo hasta hace pocos años se ha hecho popular.
- Permite el manejo de un color como transparencia
- Puede ser animado
- Mejor formato para color plano, pequeñas gráficas, texto de navegación, e imágenes no fotográficas.
- Es de algoritmo patentado
PNG
PNG significa Red Portátil de Gráficos (Portable Network Graphics), se desarrolló en 1996 por el W3C y es un formato libre.
- Permite transparencia por tonos.
- Maneja millones de colores sin pérdida de información
- Se puede incrustar metadatos
- No maneja animación
JPEG
JPG es el acrónimo del grupo que lo creo, Grupo Articulado de Expertos Fotográficos (Joint Photographic Experts Group) en 1992. Es muy usado, pero es comprimido y genera perdida de información, degradando la calidad.
- Se generan artefactos visuales por la compresión
- No maneja transparencia
- No maneja animación
- Cambia los colores reales
Etiquetas para contenidos de Imagen
<img /> es una etiqueta vacía que se usa para adicionar imágenes de contenido al cuerpo del documento HTML. El único atributo obligatorio es el ‘src’, que no es más que la ubicación de la imagen físicamente, en el disco.
<img src="nombre archivo de imagen" /> El Atributo ALT
El atributo ALT, corresponde al texto alternativo, que se ve, o se oye cuando existe algún problema con la imagen y esta no puede ser visualizada. Se usa para introducir una pequeña descripción de la imagen y es buena práctica siempre usarlo.
<img src="nombre archivo de imagen" alt="descripción corta" />Artículo en línea para complementar el tema del elemento <img>:
https://developer.mozilla.org/es/docs/Web/HTML/Elemento/img
Formatos y Tipos de Imagen SVG
SVG, Graficas Escalables de Vectores (Scalable Vector Graphics), se creó en 1999 y se usa en la web de manera estable desde el 2003. Este formato contiene instrucciones para dibujar formas en vez de cuadriculas de pixeles. Es mejor usado en iconos, logos, mapas o gráficos de datos.
Etiquetas para contenidos de Imágenes SVG
Las imágenes SVG se pueden incrustar en un documento HTML de 2 maneras, de manera directa o de manera indirecta.
SVG de Manera Indirecta
Al ser un formato de imagen, podemos incrustar un archivo SVG de la misma forma en que lo hacemos con una imagen JPG o PNG, usando la etiqueta <img />.
<img src="img/albert.svg" alt="Icono retrato de Albert">SVG de Manera Directa
Al ser un formato de imagen que se crea con código XML, podemos incrustar un archivo SVG de manera directa usando las instrucciones XML:
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M36 32.17c-1.52 0-2.89.59-3.93 1.54L17.82 25.4c.11-.45.18-.92.18-1.4s-.07-.95-.18-1.4l14.1-8.23c1.07 1 2.5 1.62 4.08 1.62 3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6c0 .48.07.95.18 1.4l-14.1 8.23c-1.07-1-2.5-1.62-4.08-1.62-3.31 0-6 2.69-6 6s2.69 6 6 6c1.58 0 3.01-.62 4.08-1.62l14.25 8.31c-.1.42-.16.86-.16 1.31 0 3.22 2.61 5.83 5.83 5.83s5.83-2.61 5.83-5.83-2.61-5.83-5.83-5.83z"/></svg>
Conclusión
JPG, GIF y PNG permiten manejar imágenes de mapas de bits, se conocen como formatos rasterizados, que manejan pixeles, para manejar múltiples tamaños debemos manejar varias imágenes responsivas. SVG no maneja pixeles y es ideal para manejar imágenes en vectores que al aumentar su tamaño no se pixelan, un SVG se construye por código XML, un lenguaje similar a HTML y además se puede animar.