Imágenes HTML
Para incrustar una imagen en una página web, usa la etiqueta <img>.
La etiqueta <img> admite una serie de atributos obligatorios y opcionales, que proporcionan información adicional sobre ella.
Sintaxis
La etiqueta <img> está vacía, lo que significa que no se requiere la etiqueta de cierre. Contiene solo atributos. Pero en XHTML, la etiqueta (<img>) debe cerrarse (<img/>).
Atributos obligatorios de la imagen - src y alt
El atributo src (source) especifica el nombre o la ubicación de la imagen que se mostrará. El valor del atributo src debe contener el nombre del archivo de imagen o su URL.
Ejemplo de URL
<img src="example.jpg" />
or
<img src="https://www.example.com/images/example.jpg" />El atributo alt también es obligatorio para la etiqueta <img>. Se utiliza para proporcionar a los navegadores un texto alternativo en caso de que la imagen no pueda mostrarse (por ejemplo, en caso de conexión lenta, cuando se usa un lector de pantalla, etc.). Nota: El comportamiento del tooltip al pasar el cursor en realidad está controlado por el atributo title, no por alt.
La sintaxis de la etiqueta <img> con los atributos obligatorios src y alt se verá así:
Ejemplo de imagen HTML
<img src="example.jpg" alt="HTML tutorial" />TIP
Usa el atributo alt en todas las imágenes para proporcionar una descripción clara y concisa del contenido de la imagen, lo que mejora la accesibilidad y ayuda a los motores de búsqueda a entender tu página.
Atributos de imagen recomendados - width y height
Se recomienda encarecidamente usar los atributos width y height con la etiqueta <img>. Si se usan estos atributos, el navegador reserva el espacio para la imagen mientras se carga el contenido, y esto acelera el renderizado de la página.
Ejemplo de imagen HTML
<img src="https://www.example.com/images/example.jpg" alt="HTML tutorial" width="200" height="120" />Ejemplo de la etiqueta HTML <img> con los atributos src, alt, width y height:
El encabezado de la imagen|Ejemplo|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<p>This is Aleq's photo</p>
<img src="https://es.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Resultado
TIP
En lugar de usar las dimensiones width y height, podrías establecer el tamaño mediante las propiedades CSS max-width o max-height para obtener mayor flexibilidad. Esto puede evitar que las imágenes grandes arruinen tu diseño en un dispositivo con una pantalla pequeña.
Flotado de imágenes
De forma predeterminada, un elemento <img> es en línea, por lo que el texto fluye a su alrededor. Sin embargo, puedes controlar el diseño usando la propiedad float de CSS. Esta propiedad especifica cómo debe flotar la imagen, o cómo debe envolverse el texto alrededor de ella. (Nota: aunque históricamente se usaba float para esto, los diseños modernos suelen usar Flexbox o Grid para un mejor control.)
Para mostrar la imagen en el lado izquierdo y el texto en el lado derecho, añade style="float:left" a la etiqueta <img>. Para una mejor mantenibilidad, considera mover los estilos en línea a una clase CSS.
Ejemplo de la etiqueta <img> y la propiedad float de CSS para flotar una imagen a la izquierda:
Ejemplo de una imagen con float|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<img src="https://es.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:left"/>
<p>Aleq's photo</p>
</body>
</html>Añadir el atributo style="float:right" a la etiqueta <img> posiciona el texto a la izquierda y la imagen a la derecha.
Ejemplo de la etiqueta <img> y la propiedad float de CSS para flotar una imagen a la derecha:
Ejemplo con un atributo float:right|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<img src="https://es.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:right"/>
<p>Aleq's photo</p>
</body>
</html>Resultado
Cómo añadir un hipervínculo a una imagen
Como la etiqueta <a> se usa para insertar hipervínculos, solo necesitas poner la imagen dentro de la etiqueta <a> para hacer que tu imagen sea clicable.
Ejemplo de las etiquetas <a> y <img> para añadir un hipervínculo a una imagen:
Ejemplo de una imagen con un hipervínculo
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/" aria-label="w3docs homepage">
<img src="https://es.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo"/>
</a>
</body>
</html>Qué formato de imagen elegir para la web
Hay tres tipos principales de formatos de imagen compatibles con los navegadores:
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
GIF tiene 256 colores únicos que permiten gráficos simples y de carga rápida. Puedes usar GIF para dibujos pequeños, diagramas, gráficos, botones y otros gráficos simples que no impidan que tu página se cargue rápidamente.
JPEG suele ser un formato de 24 bits que combina luz roja, azul y verde para mostrar millones de colores. Por eso se usa principalmente para fotografías. Este formato te da la flexibilidad de elegir cuánto comprimir tu imagen: desde 0% (compresión alta) hasta 100% (sin compresión). Puedes elegir este formato si no te importa sacrificar algo de calidad a cambio de reducir el tamaño. Evita usar JPEG para imágenes con texto, formas o grandes bloques de color, porque cuando el archivo se comprime, las líneas se difuminan y los colores cambian.
El formato PNG combina las ventajas de JPEG y GIF: admite millones de colores y permite compresión sin pérdida. Puedes usar PNG para gráficos web que requieran transparencia, gráficos complejos o con mucho color, o fotografías.
Formatos de imagen modernos
Hoy en día, se usan varios formatos de imagen modernos para la web con imágenes más pequeñas, más ricas y de carga más rápida.
WebP, diseñado por Google, ofrece compresión sin pérdida y con pérdida para imágenes en la web. Su objetivo principal es convertirse en el formato principal para fotografías en la web, reemplazando a JPEG. (WebP - Wikipedia)
Otro formato diseñado para reemplazar JPEG es BPG (Better Portable Graphics), que también presume de una alta tasa de compresión (los archivos son más pequeños que JPEG con la misma calidad).
HEIC es un nuevo formato de imagen que Apple usa en lugar de JPEG en iOS 11. Este formato utiliza métodos modernos de compresión, que hacen posible tener una mayor calidad de imagen en archivos más pequeños.
Practice
Which of the following tags and attributes can be used when defining images in HTML?