HTML img tag: cómo insertar imágenes en tu página web

El img tag te permite integrar imágenes en tu página web con facilidad. Admite un gran número de formatos. La gran variedad en atributos hace que el img tag se adapte aún mejor a HTML.

Certificados SSL con IONOS

Protege tu dominio y consigue la confianza de tus clientes con una página web con encriptación SSL.

Activación fácil
Seguridad máxima
Asistencia 24/7

¿Para qué se utiliza el img tag?

El HTML tag img permite integrar imágenes y gráficas en páginas web. El img tag funciona más o menos como un marcador de posición. Cuando se consulta una página web, el atributo src se enlaza con la ubicación real de la imagen. A continuación, la imagen se integra en la página web. Además del atributo src, el img tag necesita un atributo alt que almacene un texto alternativo en caso de que la imagen no pueda ser mostrada. JPEG, GIF y PNG, entre otros, son compatibles con el HTML img tag.

¿Cuál es la sintaxis del HTML img tag?

La sintaxis de un img tag es muy sencilla y apenas requiere de unos pocos elementos. La variante más sencilla es la siguiente:

<img src="cocherojo.png" alt="Coche deportivo rojo en un semáforo">

Sin embargo, es más seguro si además defines siempre al menos la altura y la anchura de la imagen en la página web cuando utilizas un img tag. De este modo, puedes asegurarte de que la imagen se muestra correctamente. Estos ajustes se realizan a través de width y hight en los atributos HTML. El código apropiado puede tener, por ejemplo, el siguiente aspecto:

<img src="cocherojo.png" width="500" height="200" alt="Pequeño coche rojo en un semáforo">

También se recomienda el atributo loading para el HTML img tag. Este consigue que el gráfico correspondiente solo se cargue cuando los usuarios se desplacen a la altura de la página correspondiente. Para ello debes establecer el valor del atributo loading como lazy. Así es como queda en el código:

<img src="cocherojo.png" width="500" height="200" alt="Pequeño coche rojo en un semáforo" loading="lazy">

¿Qué atributos se pueden utilizar para el HTML img tag?

Además de los atributos width, height y loading mencionados anteriormente, existen otros muchos atributos que admite el HTML img tag. Estos incluyen todos los atributos globales, los de eventos y otros atributos concretos. A continuación, te mostramos un breve resumen de los atributos que se pueden utilizar con el img tag:

Atributo Valor Descripción
alt "Text" Obligatorio; especifica un texto alternativo para la imagen.
crossorigin anonymous, use-credentials Determina qué páginas web de terceros pueden acceder a la imagen en cuestión a través de un script.
decoding auto, sync, async Define cómo y si acaso una imagen puede ser decodificada.
height Pixel o porcentual Establece la altura de la imagen en una página web.
ismap true, false Controla el acceso que tiene la imagen a un mapa de imágenes del servidor.
loading auto, eager, lazy Determina cuándo se debe cargar una imagen.
referrerpolicy no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url Especifica si la imagen también puede proceder de una fuente no segura.
sizes sizes Define el tamaño de la imagen para diferentes disposiciones de la página web.
src URL Obligatorio; especifica la dirección URI de la imagen.
srcset URL-Listen Deposita una lista de imágenes para diferentes fines como, por ejemplo, diferentes dispositivos y tamaños.
usemap #mapname Vincula el elemento a un mapa de imágenes específico.
width Pixel oder Prozent Especifica el ancho de la imagen.

Aunque todos los atributos anteriores pueden seguir utilizándose en un img tag, también hay algunos que se consideran obsoletos desde que salió HTML5 y HTML 5.1. Entre ellos se encuentran align, border, hspace, longdesk und vspace.

Consejo

El editor de páginas web de IONOS es la mejor herramienta para conseguir una página web personalizada y profesional. Te permite crear tu propia presencia online de acuerdo con tus necesidades, incluso sin necesidad de tener muchos conocimientos previos. Si prefieres dejar esta tarea en manos de profesionales, nuestros expertos están encantados de ayudarte.