Imágenes en html: la etiqueta img

0
(0)

Publicado

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

Sintaxis etiqueta img
Etiqueta img HTML con sus atributos

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:

Atributos html obsoletos en html5 para img
Atributos obsoletos en HTML5 para la etiqueta

En esta entrada hemos visto el concepto de enlace. ¿Te atreverías a hacer una imagen que al hacerle click se viera una entrada? ¡Dímelo en los comentarios!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 0 / 5. Votos: 0

Todavía no hay votos. Sé el primero en valorar la entrada.

  1. Avatar de jose sanchez

    Conocía todos los formatos de imágenes y sobre el svg, de oídas, tampoco sabia que se creada por código, pero la gran sorpresa para mi ha sido el comentario que haces sobre introducir script malicioso en el mismo código de creación de la imagen. Gracias por ponernos en conocimiento de ello. ;))

    1. Avatar de Francesc Ricart

      hola jose!
      debo reconocer que he sido un poco sensacionalista porqué al final todo queda dentro del navegador… pero puede llegar a asustar algún despistado 😉 Si te interesa el tema dale un vistazo a esta lectura dónde explica como hacerlo paso por paso.
      Coge también una imagen .svg y ábrela con el sublime. Verás que detrás de un simple .svg hay un montón de código.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *