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.
¿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. |
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.
Artículos similares
HTML div: todo lo que necesitas saber sobre el uso de contenedores div
Dado que la etiqueta div no tiene características semánticas propias, desde la introducción de HTML5 solo se recomienda su uso si no se dispone de otros elementos más adecuados. Aquí aprenderás todo sobre el contenedor div, aprenderás cómo se utiliza con ejemplos prácticos y por qué div ya casi no tiene importancia en HTML.
Ejemplo de encabezado para tu web
La etiqueta style de HTML es la mejor opción para ajustar la forma en la que se visualiza cada elemento de una página web para construirla de la mejor manera posible. Te explicamos para qué se usa la tag style de HTML así como los atributos HTML con los es compatible. De esta manera, podrás insertar la etiqueta en tu código.
_target: define el destino de los enlaces en HTML
Cuando añadas enlaces a tu web, puedes utilizar el atributo de HTML _target para determinar dónde debe abrirse el enlace. Podrás decidir si el usuario se queda en tu web o si en cambio se va a ir a otra página. A continuación, te explicamos cómo se usa _target, te indicamos los distintos valores y explicamos otra información de interés relacionada.
