Imagen destacada del artículo Aprende a usar e insertar imágenes en html

Aprende a usar e insertar imágenes en html

html svg
actualizado: 19 / 08 / 2022

Las imágenes son parte fundamental de toda página web, le dan un toque distintivo a nuestro proyecto además de agregarle dinamismo quitan la monotonía que representa una web solo con texto plano.

A continuación aprenderemós a insertar imágenes de forma correcta aprovechando todos los atributos que nos brinda html5 para sacarles el máximo provecho.

¿Cómo poner imagen en html?

Para insertar una imagen en html debemos utilizar la etiqueta img indicando en el atributo src la ruta de la imagen que deseamos colocar en nuestra web.

html
<img src="/ruta-de-la-imagen.png" />

Establecer ancho y alto a nuestra imagen html

Gracias a los atributos width (ancho) y height (alto) podemos especificar las dimensiones que necesitamos que tenga nuestra imagen.

html
<img src="/ruta-de-la-imagen.png" width="400px" height="400px" />

¿Qué es alt en img?

El atributo alt de una imagen html debe utilizarse para describir el contenido de dicha imagen ya que esto es lo que se mostrará en caso de que no cargue o lo que leerá el navegador para las personas que poseen una discapacidad visual.

html
<a href="devxdev.net">
<img
src="/ruta-de-la-imagen.png"
width="400px"
height="400px"
alt="Este texto es la descripción de la imagen"
/>
</a>

Si quieres aprender más acerca del atributo alt y por que es importante para la accesibilidad puedes mirar el siguiente artículo.

¿Cómo poner enlaces en imágenes HTML?

Para que una imagen funcione como enlace debe estar dentro de una etiqueta a como puedes ver en el siguiente snippet de código.

html
<a href="devxdev.net">
<img src="/ruta-de-la-imagen.png" width="400px" height="400px" />
</a>

¿Qué formatos de imagen soporta html?

Html soporta de forma nativa imágenes con las siguientes extensiones:

  • JPEG
  • GIF
  • PNG
  • APNG
  • SVG
  • BMP
  • BMP ICO y PNG ICO
Artículos relacionados:
Cómo poner comentarios en javascript

Imagen destacada del artículo Cómo poner comentarios en javascript

Cómo crear un menú desplegable con html y css

Imagen destacada del artículo Cómo crear un menú desplegable con html y css

Cómo desinstalar paquetes npm

Imagen destacada del artículo Cómo desinstalar paquetes npm

Cómo poner una imagen de fondo en html con css

Imagen destacada del artículo Cómo poner una imagen de fondo en html con css

Cómo crear un dropdown (menu desplegable) accesible con reactjs

Imagen destacada del artículo Cómo crear un dropdown (menu desplegable) accesible con reactjs

Cómo justificar el texto html con css

Imagen destacada del artículo Cómo justificar el texto html con css

Cómo cambiar color del texto en html con css

Imagen destacada del artículo Cómo cambiar color del texto en html con css

Cómo poner color de fondo en html con css

Imagen destacada del artículo Cómo poner color de fondo en html con css