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:

Corrige los errores que veas en la estructura web | Ejercicios html
- 49
Ejercicio html dónde se muestran errores comunes que cometemos al escribir documentos html. Incluye solución.
Creación de formularios html
- 806
En esta entrada repasamos las etiquetas html imprescindibles para escribir formularios así como los atributos más importantes de todos.
Como usar los encabezados h1 a h6 en html
- 358
Una duda frecuente cuando nos iniciamos en el mundo del html es saber cuando debemos usar un h1, un h2, un h3 o hasta un h4. En esta entrada miramos de dar un criterio lógico que pueda servir de ayuda...
Meta etiquetas en HTML : meta tags
- 656
Las meta etiquetas son un tipo de tags que se escriben en la cabecera de un documento web que aportan información técnica a los motores de búsqueda sobre como deben leer nuestro sitio web. Vemos los t...
Errores html típicos que todos cometemos alguna vez
- 56
Cuando nos iniciamos todos solemos cometer errores parecidos. En esta entrada encontrarás un buen repositorio de casos reales en alumnos.
Resumen de como comentar código en html, css y javascript
- 587
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...
Qué es un favicon y para que sirve
- 178
¿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.
Listas HTML. Etiquetas ol, ul, li, dl, dt, dd.
- 832
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...
Ejercicio sobre listas de definiciones html
- 47
Gran excusa para repasar las listas html de definiciones y conceptos de cultura general sobre web e internet. Incluye solución.
Mapas de imagen en html
- 421
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...
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.