Imágenes en html: la etiqueta img

Hoy en día se nos hace difícil imaginar aquellas primeras páginas web sin imágenes. La etiqueta <img/> de html se propuso por primera vez en 1993 por Marc Andreessen.¡Si os gusta la arqueología digital pasaros por este enlace! Y se introdujo de forma oficial con el stándard HTML2.0 en 1995.

Tuvieron que pasar cinco años desde que el HTML saliera a la luz para que fueran un stándard y reconocida por los navegadores de la época como Mosaic y posteriormente Netscape.

La imagen HTML

La etiqueta img hace posible que las páginas web puedan tener imágenes.

Los formatos más extendidos son el .gif, el .png y el .jpg. Se trata de formatos no vectoriales y con perdida de calidad de la imagen. El formato .svg es cada vez más popular por ser vectorial, pero ni de lejos es a día de hoy un habitual de las páginas web.

• El formato punto gif es que da una menor calidad de todos y permite hasta 256 colores. Mediante el efecto dithering consistente en un efecto óptico podemos visualizar más colores de los que realmente existen. Las imágenes gif permiten una transparencia e imágenes animadas.
• El formato .jpg es el formato que mejor resultado calidad/compresión nos da. De los 3 formatos descritos es el más optimizado. Ofrece una calidad mayor al gif.
• El formato .png permite transparencias y con diferencia el que permite más colores. También es el más pesado de todos. Típicamente suele usarse para logotipos e imágenes que necesitan transparencias.
• El formato svg puede ser hackeado mediante scripts.

En cuanto a los distintos atributos que pueden acompañar a una imagen:

• alt. Suele ser un texto descriptivo de la imagen. Junto el texto que le rodea y el contexto de la imagen en el documento web  tiene un papel en el SEO por imágenes muy importante.
• title. Se usa para garantizar la usabilidad y la accesibilidad web, ayudando a la navegabilidad a aquellas pesonas de visión reducida.
• width i height. Sorprendéntemente estos 2 atributos no son deprecated en html5. Si no se indica lo contrario se entienda que sus medidas son en píxeles. Si en un documento web se ha indicado el widht o height, siempre podamos usar el valor auto para forzar al navegador a redimensionar la imagen sin perder las proporciones originales.
• usemap es un atributo que ha caído un poco en desuso pero que conviene conocer. Su uso es muy similar al de las anclas pero en este caso para un mapa de imágenes.

Atributos obsoletos

La etiqueta <img/> es una de las más antiguas que existen. En su recorrido de HTML2.0 pasando por el html 3.2, el 4.1 y el XHTML 1.0 ha experimentado cambios e implementado nuevos atributos. Muchos de estos atributos actualmente estan deprecated.

Deberemos usar CSS en su lugar. Veámos de cuales se trata en la siguiente tabla: