Saltar al contenido

Imágenes HTML

septiembre 20, 2021

Las imágenes pueden mejorar el diseño y la apariencia de una página web.



Sintaxis de imágenes HTML

El HTML <img> La etiqueta se utiliza para incrustar una imagen en una página web.

Las imágenes no se insertan técnicamente en una página web; las imágenes están vinculadas a páginas web. los <img> La etiqueta crea un espacio de espera para la imagen a la que se hace referencia.

los <img> La etiqueta está vacía, solo contiene atributos y no tiene una etiqueta de cierre.

los <img> La etiqueta tiene dos atributos obligatorios:

  • src: especifica la ruta a la imagen
  • alt: especifica un texto alternativo para la imagen

Sintaxis

src atributo especifica la ruta (URL) a la imagen.

Nota: Cuando se carga una página web, es el navegador, en ese momento, el que obtiene la imagen de un servidor web y la inserta en la página. Por lo tanto, asegúrese de que la imagen permanezca en el mismo lugar en relación con la página web, de lo contrario, sus visitantes obtendrán un icono de enlace roto. El icono de enlace roto y el alt el texto se muestra si el navegador no puede encontrar la imagen.


El atributo alt

Lo requerido alt El atributo proporciona un texto alternativo para una imagen, si el usuario por alguna razón no puede verla (debido a una conexión lenta, un error en el atributo src o si el usuario usa un lector de pantalla).

El valor de la alt El atributo debe describir la imagen:

Si un navegador no puede encontrar una imagen, mostrará el valor de la alt
atributo:

Propina: Un lector de pantalla es un programa de software que lee el código HTML y permite al usuario «escuchar» el contenido. Los lectores de pantalla son útiles para personas con discapacidad visual o con problemas de aprendizaje.



Tamaño de la imagen: ancho y alto

Puedes usar el style atributo para especificar el ancho y alto de una imagen.

Ejemplo

Inténtalo tú mismo »

Alternativamente, puede utilizar el width y height atributos:

Ejemplo

Inténtalo tú mismo »

los width y height Los atributos siempre definen el ancho y el alto de la imagen en píxeles.

Nota: Siempre especifique el ancho y alto de una imagen. Si no se especifican el ancho y el alto, la página web puede parpadear mientras se carga la imagen.


¿Ancho y alto, o estilo?

los width, height, y style todos los atributos son válidos en HTML.

Sin embargo, sugerimos utilizar el style atributo. Evita que las hojas de estilos cambien el tamaño de las imágenes:

Ejemplo

img {
ancho: 100%;
}

close