HTML img tag: cómo insertar imágenes en tu página web
Equipo editorial de IONOS4 mins
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.
Evita aparecer en la barra del navegador como "página no segura" 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.
