Tutorial HTML

INICIO HTML Introducción HTML Editores HTML HTML básico Elementos HTML Atributos HTML Encabezados HTML Párrafos HTML Estilos HTML Formato HTML Cotizaciones HTML Comentarios HTML Colores HTML CSS HTML Enlaces HTML Imágenes HTML icono de favoritos HTML Tablas HTML Listas HTML Bloque HTML y en línea Clases HTML Identificación HTML Marcos flotantes HTML HTML JavaScript Rutas de archivo HTML Encabezado HTML Diseño HTML Responsivo HTML Código informático HTML Semántica HTML Guía de estilo HTML Entidades HTML Símbolos HTML Emoticonos HTML Juego de caracteres HTML Codificación de URL HTML HTML frente a XHTML

Formularios HTML

Formularios HTML Atributos de formulario HTML Elementos de formulario HTML Tipos de entrada HTML Atributos de entrada HTML Atributos de formulario de entrada HTML

Gráficos HTML

Lienzo HTML HTML SVG

Medios HTML

Medios HTML Vídeo HTML Audio HTML Complementos HTML HTML de YouTube

API de HTML

Geolocalización HTML Arrastrar/soltar HTML Almacenamiento web HTML Trabajadores web HTML SSE HTML

Ejemplos HTML

Ejemplos HTML Cuestionario HTML Ejercicios HTML Certificado HTML Resumen HTML Accesibilidad HTML

Referencias HTML

Lista de etiquetas HTML Atributos HTML Atributos globales HTML Compatibilidad con navegador HTML Eventos HTML Colores HTML Lienzo HTML Audio/vídeo HTML Tipos de documentos HTML Conjuntos de caracteres HTML Codificación de URL HTML Códigos de idioma HTML Mensajes HTTP Métodos HTTP Convertidor PX a EM Atajos de teclado

Imágenes HTML


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


Ejemplo

<img src="pic_trulli.jpg" alt="Italian Trulli">

Ejemplo

<img src="img_girl.jpg" alt="Girl in a jacket">

Ejemplo

<img src="img_chania.jpg" alt="Flowers in Chania">

Sintaxis de imágenes HTML

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

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

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

La <img>etiqueta tiene dos atributos obligatorios:

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

Sintaxis

<img src="url" alt="alternatetext">

El atributo src

El srcatributo requerido 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 realmente permanezca en el mismo lugar en relación con la página web, de lo contrario, sus visitantes obtendrán un ícono de enlace roto. El icono de enlace roto y el alttexto se muestran si el navegador no puede encontrar la imagen.

Ejemplo

<img src="img_chania.jpg" alt="Flowers in Chania">


El atributo alt

El altatributo requerido proporciona un texto alternativo para una imagen, si el usuario por algún motivo 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 del altatributo debe describir la imagen:

Ejemplo

<img src="img_chania.jpg" alt="Flowers in Chania">

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

Ejemplo

<img src="wrongname.gif" alt="Flowers in Chania">

Sugerencia: 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 las personas con problemas de visión o de aprendizaje.


Tamaño de la imagen: ancho y alto

Puede utilizar el styleatributo para especificar el ancho y el alto de una imagen.

Ejemplo

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

Alternativamente, puede usar los atributos widthy :height

Ejemplo

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Los atributos widthy heightsiempre definen el ancho y el alto de la imagen en píxeles.

Nota: Siempre especifique el ancho y el 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 atributos width, heighty styleson todos válidos en HTML.

Sin embargo, sugerimos usar el styleatributo. Evita que las hojas de estilo cambien el tamaño de las imágenes:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

Imágenes en otra carpeta

Si tiene sus imágenes en una subcarpeta, debe incluir el nombre de la carpeta en el srcatributo:

Ejemplo

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Imágenes en otro servidor/sitio web

Algunos sitios web apuntan a una imagen en otro servidor.

Para apuntar a una imagen en otro servidor, debe especificar una URL absoluta (completa) en el srcatributo:

Ejemplo

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

Notas sobre imágenes externas: las imágenes externas pueden estar protegidas por derechos de autor. Si no obtiene permiso para usarlo, es posible que esté violando las leyes de derechos de autor. Además, no puede controlar imágenes externas; se puede quitar o cambiar repentinamente.


Imágenes animadas

HTML permite GIF animados:

Ejemplo

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

Imagen como enlace

Para usar una imagen como enlace, coloque la <img>etiqueta dentro de la <a> etiqueta:

Ejemplo

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Imagen flotante

Usa la propiedad CSS floatpara dejar que la imagen flote a la derecha o a la izquierda de un texto:

Ejemplo

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

Sugerencia: para obtener más información sobre CSS Float, lea nuestro Tutorial de CSS Float .


Formatos de imagen comunes

Estos son los tipos de archivos de imagen más comunes, compatibles con todos los navegadores (Chrome, Edge, Firefox, Safari, Opera):

Abbreviation File Format File Extension
APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg

Resumen del capítulo

  • Usar el elemento HTML <img>para definir una imagen
  • Use el atributo HTML srcpara definir la URL de la imagen
  • Use el atributo HTML altpara definir un texto alternativo para una imagen, si no se puede mostrar
  • Utilice el HTML widthy los heightatributos o el CSS widthy las height propiedades para definir el tamaño de la imagen.
  • Use la propiedad CSS floatpara dejar que la imagen flote hacia la izquierda o hacia la derecha

Nota: La carga de imágenes grandes lleva tiempo y puede ralentizar su página web. Usa las imágenes con cuidado.


Ejercicios HTML

Ponte a prueba con ejercicios

Ejercicio:

Utilice los atributos de imagen HTML para establecer el tamaño de la imagen en 250 píxeles de ancho y 400 píxeles de alto.

<img src="grito.png"="250"="400">


Etiquetas de imagen HTML

Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources

Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML .