¿Cómo insertar una imagen en HTML?

Como un libro, que no es una novela, un sitio web a veces necesita imágenes para presentar un texto. Ya sea para destacar un servicio que ofrece su empresa, fotos de platos de su restaurante o recuerdos de su último viaje de esquí en su blog personal, insertar imágenes en su sitio es tan esencial como agregar texto.

En un sitio que codifica solo, será más que necesario que sepa cómo insertar una imagen en HTML. Sin embargo, incluso si usa un CMS como WordPress, Shopify o Prestashop, por nombrar algunos, no se excluye que tenga que poner sus manos en el código para insertar una imagen usted mismo en lugar de usar herramientas CMS prediseñadas.

Por eso es fundamental saber insertar una imagen en HTML. Esto es lo que te explicaremos en este tutorialrial.

Los fundamentos para integrar una imagen

La etiqueta HTML que le permitirá insertar una imagen es la siguiente: <img/>.

A pesar de que puede contener una amplia gama de atributos, el único esencial para su funcionamiento es el atributo src.

Este atributo te permitirá indicar la ruta (absoluta o relativa) de tu imagen. Por lo tanto, indicará en este atributo y entre comillas dónde se encuentra su imagen en su computadora, servidor o cualquier otro sistema de alojamiento.

Supongamos que está escribiendo un artículo sobre pterosaurios y desea incorporar una imagen de pterodáctilo en su artículo. Por ejemplo, obtendrá una imagen de Pixabay (citando al autor como fuente).

Descargue la imagen libre de derechos de autor de un pterodáctilo del sitio de Pixabay y luego aloje esta imagen en su servidor o en un servidor de imágenes gratuito (por ejemplo, goopics.net). Finalmente, agregará la imagen a su sitio usando la etiqueta <img/> como esto :

<img src="https://i.goopics.net/kn9pe.jpg" />

¿Tiene miedo de las etiquetas HTML? Empiece por aprender los conceptos básicos de HTML o contrate a un desarrollador web independiente para crear y formatear su sitio web.

Los otros atributos de una imagen

Si desea ir más allá en la inserción de su imagen en su sitio web, podrá completar su etiqueta <img/> con otros atributos distintos a src.

Entre estos atributos encontraremos: alt, title, height, width para los más famosos.

Atributo Alt: texto alternativo

Atributo alt o texto alternativo es un atributo muy importante en una imagen porque ofrecerá 2 posibilidades importantes a su imagen:

  1. Ser leído por un lector de pantalla que sería utilizado por un usuario con discapacidad visual. Si su imagen está relacionada con texto o contenido importante, su etiqueta alt describirá la escena de su imagen y un lector de pantalla puede leerla para describir esa escena si el usuario tiene una discapacidad visual.
  2. La imagen puede ser indexada por motores de búsqueda, Google para los más famosos, en las palabras clave contenidas en su etiqueta alt. Por lo tanto, esta etiqueta es muy importante para la referencia de sus imágenes y, por lo tanto, también de su sitio.

Dependiendo de la utilidad de su imagen, el contenido de la etiqueta alt Será diferente:

  • Si su imagen es solo una “decoración”, como un ícono sin un vínculo real a texto o contenido importante, deje el atributo alt vacío como se muestra a continuación. De esta forma, los lectores de pantalla ignorarán la imagen.

<img src="https://i.goopics.net/kn9pe.jpg"  alt=""/>

  • Si la imagen complementa el texto o agrega algo al contenido al que está vinculada, describa en la etiqueta alt qué representa la imagen o la información adicional proporcionada por la imagen:

<img src="https://i.goopics.net/kn9pe.jpg"  alt="Pterodáctilo volando"/>

Atributo de título: burbuja de ayuda

Este atributo le permitirá agregar una información sobre herramientas a su imagen que aparecerá cuando pase el mouse sobre ella para proporcionar información adicional para comprender la imagen.

El atributo de título se usa de esta manera:

<img src="https://i.goopics.net/kn9pe.jpg" title="Pterodáctilo volando" />

Los atributos height y width: define el alto y el ancho

Estos dos atributos te permitirán definir una altura (height) y un ancho (width) base a su imagen, que también es posible en CSS.

Su uso es sencillo, escribe las dimensiones deseadas (en px, %, em, rem,…) en estos 2 atributos y cuando aparezca la imagen se redimensionará automáticamente.

Ejemplo:

<img src="https://i.goopics.net/kn9pe.jpg" height="100px" width="200px" />

Conclusión

Ahora sabe cómo insertar una imagen en HTML en su sitio o en cualquier otro lugar donde pueda escribir código HTML. La etiqueta <img/> puede ser simple pero también mucho más complejo con el uso de una multitud de otros atributos existentes para esta etiqueta.