Imágenes en html: la etiqueta img

Imágenes en html: la etiqueta img

Print Friendly, PDF & Email
Imágenes en html: la etiqueta img
Valora esta entrada
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 <img>

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!

Entradas relacionadas:

Mapas de imagen en html
- 265
Los mapas de imágenes son una funcionalidad HTML para las imágenes muy curiosa que permiten definir diferentes enlaces asociados a distintas zonas de una misma imagen. A pesar de haber caído en desuso...
Como indicar a Google la modificación y corrección de contenidos mediante html
- 62
Cuando escribes contenidos en Internet es inevitable cometer errores. ¿Sabes como corregirlos semánticamente para que los navegadores se enteren de que has escrito una corrección o actualización?
Qué es un favicon y para que sirve
- 101
¿Eres de los que se fija en todos los detalles de una página web cuando navega? Entonces el favicon es para ti. En esta entrada te explico que es y para que sirve.
Validadores de código HTML y CSS
- 385
Incluso los programadores y diseñadores más experimentados cometen errores de sintaxis o vocabulario picando código en lenguaje html, css, javascript y cualquier otro lenguaje de programación. Nos pas...
Como funcionan los frameset de html. ¡Cuidado que están obsoletos!
- 244
El uso de framesets está completamente desaconsejado. Son etiquetas obsoletas. Sin embargo en esta entrada recuperamos su uso y las repasamos. ¡Nunca se sabe si algún día volverán a ser de utilidad!...
Ejemplo de creación de página web con capas y migración a HTML5
- 749
El lenguaje de marcas sirve para dotar de estructura y contenido a un documento web. Mediante la etiqueta div veremos un ejemplo de como dotar de estructura a una página web. Y después utilizaremos la...
Resumen de como comentar código en html, css y javascript
- 318
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
La importancia de la etiqueta < title > para el SEO
- 129
¿Quieres evitar que tus páginas web sean invisibles en internet? Entonces la etiqueta title es para ti y esta entrada te interesa.
Como hacer espacios en blanco con html
- 121
Has intentado separar palabras en blanco pulsando el espaciador? Seguramente has comprobado que no funciona. En esta publicación vemos un ejemplo de como se debe hacer con HTML.
Listas ordenadas, no ordenadas y de definiciones en HTML y listas anidadas
- 547
Una lista html es una relación de datos agrupados y que tienen una temática en común. Las listas pueden ser ordenadas, no ordenadas y de definiciones. Veamos en este escrito como es su sintaxis, que a...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

2 Comentarios
  • jose sanchez
    Publicado a las 10:32h, 16 febrero Responder

    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. ;))

    • Francesc Ricart
      Publicado a las 12:51h, 16 febrero Responder

      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.

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.