Es difícil encontrar un sitio web en Internet que no contenga imágenes, y no es de extrañar, porque son la parte principal del diseño web que le da un aspecto memorable. Y un buen diseño web es la clave de su éxito. Para mostrar imágenes en HTML existe una única etiqueta <img>.

Sintaxis de la Etiqueta <img>

<img alt="Descripción de la imagen" src="URL" [atributos]>

Nota

Ten en cuenta que esta etiqueta es una etiqueta única y no requiere una etiqueta de cierre </img>.

Ejemplo:

<img src="logo.gif" alt="HTML desde Cero">

El siguiente ejemplo de código configura una imagen llamada logo.gif, que se encuentra en la misma carpeta que la página web:

  • src: El atributo src es obligatorio. Especifica la dirección de la imagen que se mostrará. Puedes especificar una URL absoluta o relativa. Si no se especifica o se escribe mal, la imagen no se mostrará.
  • alt: El atributo alt no es obligatorio, pero es mejor acostumbrarse a que lo prescriba a cada imagen, porque es necesario tanto para los usuarios como para los motores de búsqueda.
  • El resto de los atributos son opcionales y los veremos a continuación.

Cómo Usar la Etiqueta <IMG> en HTML: Ejemplo

La etiqueta <img> se utiliza para insertar una imagen en HTML. Ya hemos explicado la sintaxis. Veamos algunos ejemplos prácticos.

HTML
<html>
<body>
...
<img src="https://htmldesdecero.es/medios/2022/04/Logo-panel-HTML.png">
...
</body>
</html>

Este código se convierte en la página en lo siguiente:

Ejemplo de uso de etiqueta IMG
Ejemplo de uso de etiqueta IMG

En este ejemplo hemos especificado la dirección directa de la imagen desde las fotos de nuestro servidor web. Lo más habitual es especificar enlaces a imágenes que se encuentran en la misma URL. Por ejemplo, src="/medios/2022/04/Logo-panel-HTML.png", es decir, se especifica una dirección relativa.

Ahora veamos otro ejemplo: visualización de varias imágenes una tras otra en HTML.

HTML
<html>
<body>
...
<img alt="Logo de HTML en panel" src="https://htmldesdecero.es/medios/2022/04/Logo-panel-HTML.png">
<img alt="Logo principal HTMLdesdeCero"  src="https://htmldesdecero.es/medios/2021/10/Logo-HTML.png">
...
</body>
</html>

Así es como luce:

Uso de varias etiquetas IMG HTML
Uso de varias etiquetas IMG HTML

Si colocáramos otra imagen, sería en una nueva línea, pues ya no cabría en ésta.

Uso de texto alternativo (alt) en img

Es una buena idea poner texto alternativo (alt) en la etiqueta <img> para ayudar a entender el contexto cuando no se pueda acceder a la imagen. A continuación se muestra un ejemplo de uso del texto alt (en este ejemplo, la imagen es inaccesible).

HTML
<html>
<body>
...
<img alt="Logo de HTML en panel" src="Logo-panel-HTML.png">
<img alt="Logo principal HTMLdesdeCero"  src="Logo-HTML.png">
...
</body>
</html>

Convertido en la página a la siguiente:

Importancia del atributo alt en etiqueta img
Importancia del atributo alt en etiqueta img

Si colocáramos otra imagen, sería en una nueva línea, pues ya no cabría en esta.

Ahora vamos a echar un vistazo más de cerca a todos los atributos de la etiqueta <img>.

Lista de Atributos <img> HTML

La siguiente tabla enumera los atributos de la etiqueta img y sus valores. Los atributos de uso común se muestran en negrita.

AtributosValores
alignright, left (predeterminado), top, middle, bottom; obsoleto: us la propiedad CSS float o position en su lugar
altFrase de texto que describe la imagen.
borderTamaño del borde de la imagen en píxeles; border = “0” evita que se muestre el borde de un hipervínculo de imagen; obsoleto: usa la propiedad border CSS en su lugar
heightAltura de la imagen en píxeles.
hspaceCantidad de espacio, en píxeles, que está en blanco a la izquierda y derecha de la imagen; obsoleto— usa la propiedad padding CSS en su lugar
idNombre del texto: alfanumérico, que comienza con una letra, sin espacios; el valor debe ser único y no se debe utilizar para otros valores de identificación en el mismo documento de la página web
longdescURL de un recurso que contiene una descripción accesible de una imagen compleja
nameNombre del texto: alfanumérico, que comienza con una letra, sin espacios; este atributo nombra a la imagen para que se pueda acceder fácilmente a ella mediante lenguajes de script del lado del cliente, como JavaScript; obsoleto: usa el atributo id
srcLa URL o nombre de archivo de la imagen.
srcsetNuevo atributo HTML 5.1 que admite la visualización del navegador de imágenes sensibles.
titleUna frase de texto que contiene información orientativa sobre la imagen; normalmente más descriptiva que el texto alternativo.
vspaceCantidad de espacio, en píxeles, que está en blanco encima y debajo de la imagen; obsoleto usar la propiedad padding CSS en su lugar
widthAncho de imagen en píxeles.

Observa que varios atributos en la Tabla están marcados como obsoletos. Aunque están obsoletos en HTML5, siguen siendo válidos en XHTML, por lo que los verás codificados en las páginas web existentes. Mientras trabajas en este curso, usarás CSS para volver a crear las funciones de estos atributos ahora obsoletos.

Atributos de la Etiqueta <img> con Ejemplos

src

La dirección del archivo gráfico que se mostrará en la página web. Los archivos más populares están en formato PNG y JPEG.

Sintaxis:

<img src="<ruta-de-imagen>" />
  • Valores: Se toma como valor la ruta completa o relativa del archivo.
  • Valor por defecto: Ninguno.

alt

El atributo alt establece un texto alternativo para las imágenes. Este texto permite recuperar información textual sobre la imagen cuando la carga de imágenes está desactivada en el navegador, y por motores de búsqueda o lectores de pantalla que leen el texto de la pantalla para personas con problemas de visión.

Sintaxis:

<img alt="<texto-que-describe-imagen>" />
  • Valores: Cualquier cadena de texto adecuada.
  • Valor por defecto: Ninguno.

Ejemplo:

HTML
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" 
alt="Un perro negro, marrón y blanco con un pañuelo.">

Nota

El W3C recomienda que el texto alternativo no tenga más de 100 caracteres. Evita usar el nombre del archivo o palabras como imagen y gráfico como el valor del atributo alt. En su lugar, usa una frase breve que describa la imagen.

height

Los atributos height y width se utilizan para cambiar el tamaño de una imagen mediante HTML. Está permitido utilizar valores en píxeles o porcentajes.

Si se establece una entrada de porcentaje, las dimensiones de la imagen se calculan en relación con el elemento padre – el contenedor donde se encuentra el elemento <img>. Si no hay contenedor padre, la ventana del navegador actúa como tal.

En otras palabras, width="100%" significa que la imagen se extenderá a todo el ancho de la página web. Si sólo se añade un atributo width o height, se conserva la relación de aspecto de la imagen. El navegador espera a que la imagen esté completamente cargada para determinar su altura y anchura originales.

Consejo

Intenta dimensionar todas las imágenes de una página web. Esto acelera algo la carga de la página, ya que el navegador no necesita calcular el tamaño de cada imagen después de recibirla.

Nota

La anchura y la altura de la imagen pueden modificarse hacia arriba o hacia abajo. Sin embargo, esto no afectará a la velocidad de carga de la imagen, ya que el tamaño del archivo seguirá siendo el mismo. Sin embargo, la calidad de la imagen puede deteriorarse.

Sintaxis:

<img height="<valor>" />
  • Valores: Cualquier número entero positivo en píxeles o porcentajes.
  • Valor por defecto: La altura original de la imagen.

width

Sintaxis:

<img width="<valor>" />
  • Valor: Cualquier número entero positivo en píxeles o porcentaje.
  • Valor por defecto: La anchura original de la imagen.

ismap

El atributo ismap indica al navegador que la imagen es un mapa de imagen del lado del servidor. Los mapas de imagen permiten enlazar a distintas zonas de la misma imagen.

Se implementa en dos variantes distintas: servidor y cliente. En el caso del servidor, el navegador envía una petición al servidor para obtener la dirección del enlace seleccionado y espera una respuesta con la información requerida. Este enfoque requiere un tiempo de espera adicional y archivos independientes para cada mapa de imagen.

Para enviar los datos al servidor haz lo siguiente. Coloca un elemento <img> en un contenedor <a> con la dirección del servidor como valor del atributo href. El programa analiza las coordenadas del clic del ratón recibidas, que se cuentan desde la esquina superior izquierda de la imagen, y devuelve la página web deseada.

Sintaxis:

<img ismap />
  • Valores: Ninguno.
  • Valor por defecto: Por defecto, este atributo está desactivado.

sizes

Establece las dimensiones de la imagen para diferentes diseños de página. A continuación, se muestran diferentes valores y ejemplos de uso.

Un valor de anchura. Aquí vw es la anchura como porcentaje de la ventana gráfica. Puedes usar em, ex, ch, rem, vw, vh, vmin, vmax, cm, mm, q, in, pc, pt, px como valores, pero no porcentaje.

sizes="100vw"

Consulta de medios con un único valor de anchura. En este caso, se establece 40em como punto de referencia.

sizes="(min-width: 40em) 100vw"

Una lista separada por comas de las dimensiones enumeradas. Se pueden especificar consultas de medios y calc() en los valores.

sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)")

Sintaxis

[ <tamaño de la fuente># , ]? <valor del tamaño de la fuente>
<consulta de medios> <valor del tamaño de la fuente>
    <tamaño>

<valor de tamaño de fuente> no permite porcentaje, usa sólo unidades vw.

  • Valor por defecto: No.

srcset

Una lista separada por comas de uno o más valores que indican un conjunto de posibles imágenes que se mostrarán en el navegador. Cada línea puede constar de las siguientes partes

  • una dirección de imagen;
  • un descriptor de anchura, que es un número entero positivo seguido de w (ejemplo: 600w);
  • el descriptor de densidad de píxeles, que es un número decimal positivo seguido inmediatamente de x.

Cada línea de la lista debe contener la dirección y, opcionalmente, un descriptor de anchura o densidad de píxeles. Si no se especifica ningún descriptor, por defecto es 1x.

El navegador elige la imagen más adecuada de la lista, teniendo en cuenta, por ejemplo, la densidad de píxeles del dispositivo, y la muestra.

Ejemplo:

<img
  src="image-src.png"
  srcset="image-1x.png 1x, image-2x.png 2x"
/>
  • Valor por defecto: Ninguno.

usemap

El atributo usemap relaciona la imagen con el mapa de imagen definido en el contenedor <map>. Esta relación es el nombre del identificador, que se especifica en el valor del atributo usemap, y el mismo nombre especificado en el atributo name del elemento <map>. En “img>”, el identificador debe comenzar con un signo de almohadilla (#).

Sintaxis:

<img usemap="#<identificador>" />
  • Valor: Una cadena de texto que empieza por un carácter #.
  • Valor por defecto: Ninguno.

Ejemplo de Creación de un Mapa de Imagen

  • Marcar la imagen original en áreas activas de la forma deseada. Las coordenadas de las áreas pueden calcularse con un programa de tratamiento de fotografías como Adobe Photoshop o Paint.
  • Establecer el nombre del mapa añadiéndolo al elemento <map> con el atributo name. Utiliza el mismo valor para el atributo usemap del elemento <img>.
  • Añadir un enlace a la página web o parte del documento web para cada punto caliente en el que el usuario debe hacer clic para navegar al hacer clic en el punto caliente.
HTML
<img src="https://htmldesdecero.es/medios/2018/12/Flores-mapa-imagen.png" alt="foto de flores" width="680" height="383" usemap="#flores">
<map name="flores">
<area shape="circle" coords="70,164,50" href="https://htmldesdecero.es/" alt="gerbera" target="_blank"> 
<area shape="poly" coords="191,13,240,98,143,98,191,13" href="https://es.wikipedia.org/wiki/Hyacinthus" alt="jacinto" target="_blank"> 
<area shape="circle" coords="318,93,50" href="https://htmldesdecero.es/blog/insertar-imagen-html/" alt="manzanilla" target="_blank"> 
<area shape="circle" coords="425,129,45" href="https://htmldesdecero.es/etiquetas/anchor/" alt="narciso" target="_blank"> 
<area shape="rect" coords="480,3,572,89" href="https://htmldesdecero.es/blog/html5-diferencias-html/" alt="tulipán" target="_blank"> 
</map>
Flores para mapa de imagen
Flores para mapa de imagen

Cómo Enlazar una Imagen

Esta es una pregunta que se hacen los webmasters. En realidad es muy fácil. Basta con enmarcar la etiqueta <img> con la etiqueta <a> (enlace).

Por ejemplo:

HTML
<html>
<body>
...
<a href="Dónde_lleva_el_enlace"><img src="Ruta_imagen"></a>
...
</body>
</html>

Cómo Redondear las Esquinas de una Imagen

Para que la imagen sea más efectiva, se recomienda en algunos casos aplicar la propiedad border-radius: N px, donde N es el radio de corte de la imagen. Por ejemplo:

HTML
<img src="https://htmldesdecero.es/medios/2018/12/Curso-HTML-desde-Cero-Online.png" 
style="border-radius: 30px">
Redondear imagen en etiqueta img
Redondear imagen en etiqueta img

Para obtener más información sobre el redondeo de esquinas, y otras personalizaciones, deberás consultar con CSS.

Prácticas Recomendadas para Etiqueta <img> HTML

No cambies el tamaño de una imagen con los atributos de anchura y altura.

Es una mala práctica porque puede distorsionar la imagen y afectar a su calidad.

En su lugar, puedes optimizar la imagen a las dimensiones deseadas con un software de edición de fotos como Photoshop.

En el fragmento de código siguiente, especifico una anchura y una altura para la imagen – una mala práctica:

HTML
<img
      src="https://htmldesdecero.es/medios/2018/12/Curso-HTML-desde-Cero-Online.png"
      height="440px"
      width="440px"
      alt="Curso de HTML desde Cero"
/>

La imagen tiene este aspecto:

Imagen cortada con largo y ancho
Imagen cortada con largo y ancho

Sin utilizar los atributos de anchura y altura, la imagen tiene este aspecto:

Imagen sin cortar el largo ni ancho
Imagen sin cortar el largo ni ancho

¿Se ve mejor? Sí.

Nombra tus imágenes adecuadamente

Dar un nombre apropiado a las imágenes puede ayudar a los motores de búsqueda a entender de qué trata la imagen. Por ejemplo, nombra una imagen perro-afgano-casa.webp en lugar de photo-1580855733764-021023.webp. Esto último no es suficiente para la optimización de motores de búsqueda (SEO).

Reducir el tamaño del archivo de imagen

El tamaño del archivo de imagen es crucial cuando se trata de la velocidad de la página. Un tamaño de imagen más pequeño (que conserve la calidad de la imagen) reduce el tiempo de carga, mientras que las imágenes más grandes tardan una eternidad en cargarse.

Existen varias herramientas y software que pueden ayudarte a conseguirlo. Algunos ejemplos son imageOptim, jStrip y PNGGauntet. Y si te preocupa la optimización para motores de búsqueda (SEO), te conviene echarles un vistazo, ya que la velocidad de la página es un factor de clasificación importante.

Alojar imágenes con una CDN

Imagínate que un sitio web está alojado en Estados Unidos pero un usuario de África quiere acceder a él. Activos como imágenes e iconos tendrían que viajar de Estados Unidos a África, lo que a su vez ralentiza el tiempo de descarga.

El uso de una CDN (Content Delivery Network) permitirá que las imágenes del sitio web se almacenen en caché en varios lugares del mundo. La CDN puede entonces servirlas desde las ubicaciones más cercanas al usuario, mejorando el tiempo de carga y proporcionando una mejor experiencia de usuario.

Cloudflare es una CDN popular que muchos desarrolladores utilizan para alojar sus imágenes.

Texto alternativo descriptivo

Utilizar un texto alternativo descriptivo ayuda a los motores de búsqueda a entender de qué trata la imagen. Pero esto no es todo: el texto alternativo también debe ser relevante para la imagen.

Por ejemplo, utiliza esto:

HTML
<img
   src="medios/2018/12/Curso-HTML-desde-Cero-Online.png"
   alt="Portada Curso HTML desde Cero"
/>

En lugar de esto:

HTML
<img src="medios/2018/12/Curso-HTML-desde-Cero-Online.png" alt="HTML" />

Utilizar el atributo title para mostrar información sobre la imagen

Al igual que el atributo alt, puedes utilizar el atributo title para mostrar información adicional sobre la imagen. Los navegadores muestran esta información en forma de tooltip cuando el usuario pasa el ratón por encima de la imagen.

HTML
<img
    src="medios/2018/12/Curso-HTML-desde-Cero-Online.png"
    alt="Portada Curso HTML desde Cero"
    title="Portada de Página HTML desde Cero"
/>

Conclusión

Espero que este artículo te ayude a entender cómo funciona la etiqueta <img> en HTML para que puedas utilizarla correctamente en tus proyectos. Si lo haces, te ayudará a mejorar la experiencia de usuario.

Muchas gracias por leer, y sigue codificando.

5/5 - (7 votos)