Cómo insertar imágenes en HTML
Las imágenes son una parte importante del diseño web y pueden mejorar la apariencia visual de una página web. En este artículo, aprenderás a insertar una imagen en un documento HTML.
Insertar imágenes en páginas web
El elemento <img> se utiliza para insertar imágenes en documentos HTML. Es un elemento vacío y solo contiene atributos. para escribir la etiqueta <img> en html debe seguir la siguiente estructura:
html<img src="url" alt="texto_alternativo" />
El siguiente ejemplo inserta tres imágenes en una página web:
html<img src="perros.jpg" alt="Perros jugando" /><img src="gatos.jpg" alt="Gatos durmiendo" /><img src="caballos.jpg" alt="Caballos corriendo" />
Cada imagen debe tener al menos dos atributos: el atributo src y el atributo alt.
El atributo src le indica al navegador dónde encontrar la imagen. Su valor es la ruta del archivo donde se encuentra la imagen.
Mientras que el atributo alt asigna un texto alternativo que se mostrará si la imagen no puede cargar por alguna razón. Su valor debe ser un sustituto significativo de la imagen es decir debe describir lo que es la imagen.
Al igual que `<br>`, el elemento `<img>` también es un elemento vacío y no tiene una etiqueta de cierre. Sin embargo, en XHTML se cierra a sí mismo terminando con />
Configurando el ancho y alto de una imagen en html
Los atributos width y height se utilizan para especificar el ancho y alto de una imagen. Los valores de estos atributos se interpretan en píxeles de forma predeterminada.
html<img src="perros.jpg" alt="Perros jugando" width="300" height="300" /><img src="gatos.jpg" alt="Gatos durmiendo" width="250" height="150" /><img src="caballos.jpg" alt="Caballos corriendo" width="200" height="200" />
También puedes usar el atributo style para especificar el ancho y alto de las imágenes. Esto evita que las hojas de estilo cambien el tamaño de la imagen accidentalmente, ya que el estilo en línea tiene la prioridad más alta.
html<imgsrc="perros.jpg"alt="Perros jugando"style="width: 300px; height: 300px;"/><imgsrc="gatos.jpg"alt="Gatos durmiendo"style="width: 250px; height: 150px;"/><imgsrc="caballos.jpg"alt="Caballos corriendo"style="width: 200px; height: 200px;"/>
Es una buena práctica especificar tanto los atributos de ancho como de alto para una imagen, para que el navegador pueda asignar tanto espacio para la imagen antes de descargarla. De lo contrario, la carga de imágenes puede causar distorsión o parpadeo en el diseño de su sitio web.
Insertar imagen usando la etiqueta Picture de HTML5
En ocasiones, escalar una imagen hacia arriba o hacia abajo para adaptarse a diferentes dispositivos (o tamaños de pantalla) no funciona como se espera. Además, reducir la dimensión de la imagen mediante el atributo o propiedad width y height no reduce el tamaño del archivo original.
Para solucionar estos problemas y mejorar el rendimiento de nuestro sitio web, HTML5 ha introducido el elemento <picture>, que permite definir varias versiones de una imagen para diferentes tipos de dispositivos.
La etiqueta <picture> puede contener varios o niungún elemento <source>, cada uno apuntando a una ruta de imagen diferente y un elemento <img> al final.
Además, cada elemento <source> tiene el atributo media, que especifica una media query (similar a como se hace en css) que utiliza el navegador para determinar cuándo se debe cargar una imagen u otra.
html<picture><source media="(min-width: 1000px)" srcset="logo-large.png" /><source media="(max-width: 500px)" srcset="logo-small.png" /><img src="logo-default.png" alt="Mi logo" /></picture>
El navegador evaluará cada elemento `<source>` secundario y elegirá la mejor coincidencia entre ellos; si no se encuentran coincidencias, se utilizará la URL del atributo src del elemento `<img>`. Además, la etiqueta `<img>` debe especificarse como el último hijo del elemento `<picture>`
