Helpful resources ▼
  Download   Pricing   Buy

Añadir Imagen a HTML – De la Sintaxis Básica a las Técnicas Avanzadas

Este artículo explora varios métodos para añadir imágenes a HTML, desde las etiquetas básicas <img> hasta técnicas avanzadas como el uso de CSS y JavaScript. También cubre las mejores prácticas para el rendimiento y la accesibilidad y proporciona ejemplos HTML para ayudarle a integrar fácilmente imágenes en sus proyectos web.

Imágenes en HTML

Si las páginas web fueran sólo texto, serían bastante aburridas. Las imágenes y otros tipos de medios desempeñan un papel crucial a la hora de hacer que el contenido sea visualmente atractivo, atrayente e informativo. Por eso, añadir imágenes a HTML es una parte fundamental del desarrollo web.

Formatos de imagen. Elegir el formato de imagen adecuado afecta la velocidad y la calidad de carga:

Para optimizar el rendimiento y el SEO, comprima las imágenes para reducir el tamaño del archivo y utilice nombres de archivo descriptivos para mejorar la visibilidad en las búsquedas.

Nota: Los motores de búsqueda también leen los nombres de archivo de las imágenes y los tienen en cuenta para optimizar las búsquedas. Así que dé a sus imágenes nombres significativos: landscape.jpg es mejor que img1.jpg.

Añadir imágenes usando la etiqueta <img>.

La forma más sencilla de añadir una imagen a una página HTML es utilizando la etiqueta <img>. Este elemento no contiene una etiqueta de cierre y requiere el uso de al menos un atributo – src, que contiene la ruta a la imagen que desea incrustar en la página. Sin embargo, para mejorar el SEO, recomendamos utilizar también otros atributos. Los atributos clave son:

Si su imagen se llama landscape.jpg y está en el mismo directorio que su página HTML, puede incrustarla como se muestra a continuación:

1<img src="landscape.jpg" alt="Summer landscape – a field with windmills." width="400" height="150">

Nota: Muchas imágenes de Internet están protegidas por derechos de autor. Violar los derechos de autor es ilegal. Si usted no ha creado la imagen y la ha tomado de la web, debe asegurarse de que la imagen es de dominio público o de que tiene permiso para utilizarla.

Añadir imágenes de diferentes fuentes

Las imágenes en HTML pueden añadirse utilizando rutas de archivos locales, URL remotas o incrustadas directamente con codificación Base64.

Imágenes locales

El uso de imágenes locales suele ser mejor que el de imágenes remotas porque se cargan más rápido, reducen la dependencia de servidores externos y garantizan la disponibilidad aunque la conexión a Internet sea lenta o el servidor remoto no esté disponible. Las imágenes locales también mejoran la seguridad al evitar posibles rastreos o cambios no autorizados desde fuentes de terceros.

Si la imagen está en un subdirectorio images en el mismo directorio que la página HTML, puede incrustarla así:

1<html>
2	<body>
3		<h1>Adding Images Using img Tag</h1>
4		<img src="images/landscape.png" alt="Summer landscape – a field with windmills." width="400" height="150" >
5		<p>When an image is loaded without specified width and height attributes, the browser initially doesn’t reserve space for it, causing content to shift as the image loads.</p>
6	</body>
7</html>

Ancho y alto de la imagen

Cuando se carga una imagen sin especificar los atributos width y height, el navegador no le reserva espacio inicialmente, lo que provoca que el contenido se desplace a medida que se carga la imagen. Este fenómeno afecta negativamente a la experiencia del usuario, haciendo que la página parezca inestable, especialmente en conexiones lentas. Especificando width y height, el navegador puede asignar espacio para la imagen antes de que se cargue, evitando cambios repentinos en el diseño. Esta práctica no sólo mejora la estabilidad visual, sino también las métricas básicas de la web, ayudando a mejorar el SEO y el rendimiento general del sitio.

La siguiente figura muestra ejemplos de páginas web: sin espacio reservado para una imagen que aún no se ha cargado (a); el espacio está reservado en la página web para la imagen desde que se especificaron los atributos height y width en la etiqueta <img> (b); una página web con una imagen cargada (c).

Texto “La figura ilustra el comportamiento del navegador (cambio de diseño) tras la carga de la imagen”

Nota: Cuando se carga una página web, el navegador recupera la imagen del servidor web en la ruta especificada en src y la inserta en la página. Si falta la imagen, el navegador muestra un icono de enlace roto y el texto alternativo.

Imágenes remotas

Una ruta de archivo absoluta es la ruta completa al archivo de imagen, comenzando desde la raíz del servidor web o utilizando una URL completa. También puede incrustar la imagen utilizando su URL absoluta, por ejemplo:

1<img src="https://docs.aspose.com/svg/images/api/lioness.jpg" alt="The muzzle of a lioness close-up." width="350" height="200" >

Sin embargo, no se recomienda utilizar URLs absolutas. Siempre que sea posible, debe alojar las imágenes que desee utilizar en su sitio, lo que, en configuraciones sencillas, significa almacenar las imágenes para su sitio en el mismo servidor que su HTML.

Codificación Base64

La codificación Base64 permite incrustar imágenes directamente en HTML como URI de datos, eliminando la necesidad de archivos de imagen independientes. Esto reduce las peticiones HTTP, mejorando los tiempos de carga para imágenes pequeñas o iconos. Sin embargo, las imágenes codificadas en Base64 aumentan el tamaño del archivo HTML, lo que puede afectar al rendimiento. Es mejor utilizarlas para gráficos incrustados, como logotipos o pequeños elementos de interfaz de usuario, que para imágenes de gran tamaño.

Este fragmento de código muestra cómo incrustar imágenes Base64 en HTML:

1<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ..." alt="Red circle" width="300" height="200" >

El siguiente código HTML muestra cómo agregar una imagen a un archivo HTML desde tres tipos diferentes de fuentes de imagen:

 1<html>
 2    <body>
 3		<h1>Add Image to HTML</h1>
 4		<!-- Adding image to HTML using local path -->
 5		<img src="images/georgia-castle.png" alt="Ananuri fortress complex in Georgia" width="350" height="200" >
 6
 7		<!-- Adding image to HTML using absolute URL -->
 8		<img src="https://docs.aspose.com/svg/images/api/lioness.jpg" alt="The muzzle of a lioness close-up." width="350" height="200" >
 9
10		<!-- Adding image to HTML using Base64 encoded data -->
11		<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8Y2lyY2xlIGN4PSIxNTAiIGN5PSIxMDAiIHI9I
12		jgwIiBzdHlsZT0iZmlsbDpyZWQ7IHN0cm9rZS13aWR0aDo1OyBzdHJva2U6dGVhbCIgLz4NCjwvc3ZnPg==" alt="Red circle" width="300" height="200" >
13	</body>
14</html>

La imagen ilustra el archivo HTML escrito anteriormente. Vemos tres imágenes cargadas desde un archivo local, una URL fuente remota y a través de datos codificados en Base64.

Texto “Tres imágenes que se añadieron al html usando ruta local, URL absoluta, y codificación Base64.”

Resumir

  1. Utilice la etiqueta <img> – Añada imágenes con los atributos src, alt, width y height. Todos estos atributos son importantes para la accesibilidad y SEO.
  2. Elija el formato adecuado – Utilice JPEG (fotos), PNG (transparencia), SVG (escalable), WebP (optimizado). El uso del formato WebP proporciona una compresión y calidad superior en comparación con formatos como JPEG o PNG.
  3. Imágenes locales vs. remotas – Las imágenes locales se cargan más rápido y son más fiables; las remotas dependen de servidores externos.
  4. Optimice el rendimiento: comprima las imágenes, utilice nombres de archivo descriptivos y prefiera el alojamiento local por motivos de velocidad y SEO.

Imágenes de fondo HTML

Además de mostrar imágenes utilizando la etiqueta <img>, puedes utilizar CSS para manipular imágenes de otras formas, como por ejemplo para establecer una imagen de fondo. Las imágenes de fondo se utilizan principalmente con fines decorativos, como la adición de texturas, degradados o patrones para mejorar el atractivo visual de un sitio web. Para añadir una imagen de fondo a HTML, puede utilizar:

Imagen de fondo para toda una página

Si quieres añadir una imagen de fondo a toda la página web, puedes establecer la propiedad CSS background-image en el elemento <body> dentro del elemento <style>. Por defecto, una imagen de fondo se repetirá si es más pequeña que el elemento especificado, en este caso, el elemento <body>:

 1<html>
 2	<head>
 3		<style>
 4			body {
 5				background-image: url("lioness.png");
 6			}
 7		</style>
 8	</head>
 9	<body>
10		<h1>Background Image for an Entire Page</h1>
11	</body>
12</html>

Si quieres que la imagen de fondo cubra todo el elemento, puedes establecer la propiedad background-size a cover:

1body {
2  background-image: url("lioness.png");
3  background-size: cover;
4}

Para evitar la repetición de la imagen de fondo, establezca la propiedad background-repeat a no-repeat:

1body {
2  background-image: url("lioness.png");
3  background-repeat: no-repeat;
4}

La siguiente figura ilustra tres pantallas de ordenador (disminuidas) con imágenes de fondo que fueron añadidas utilizando las propiedades background-image con la configuración por defecto (a), background-size: cover (b), y background-repeat: no-repeat (c):

Texto “Tres pantallas de ordenador con imágenes de fondo repetidas (a) con una imagen cubierta a pantalla completa (b) e imagen en su propio tamaño.”

Nota: Las imágenes de fondo son puramente decorativas y no requieren atributos como alt, width o height, ya que no forman parte del contenido real de la página. A diferencia de las imágenes insertadas con la etiqueta <img>, las imágenes de fondo no transmiten información significativa a los usuarios y no son leídas por los lectores de pantalla, por lo que el atributo alt no es necesario para la accesibilidad. Además, sus dimensiones se controlan mediante CSS, por lo que no es necesario definir explícitamente width o height.

Imagen de fondo para un elemento HTML

La imagen de fondo de un elemento HTML se especifica mediante la propiedad CSS background-image, que permite aplicarla a elementos como p, div, body o section. Puedes controlar la posición de una imagen de fondo con background-position, ajustar la escala con background-size y mejorar la capacidad de respuesta con background-repeat.

El siguiente Ejemplo 1 muestra cómo añadir una imagen de fondo a un elemento <p> utilizando el atributo style y la propiedad CSS background-image:

Ejemplo 1

1<p style="background-image: url('winter.png'); "> A background image for an HTML element is set using CSS with the background-image property...</p>

El siguiente ejemplo 2 muestra cómo añadir una imagen de fondo a un elemento <div> utilizando el elemento <style> en el <head> del documento y la propiedad CSS background-image:

Ejemplo 2

 1<html>
 2	<head>
 3		<style>
 4			div {
 5				background-image: url("winter.png");
 6			}
 7		</style>
 8	</head>
 9    <body>
10		<h1>HTML Background Images</h1>
11		<div>
12			<h2>Background Image for an HTML Element</h2>
13			<p> A background image for an HTML element is set using CSS with the background-image property, allowing you to apply images to elements like div, body, or section... </p>
14			<br>
15		</div>
16	</body>
17</html>

La siguiente figura muestra el resultado de renderizar los Ejemplos 1 y 2: la imagen de fondo se añade utilizando el atributo style al elemento <p> (a); la imagen de fondo se añade utilizando el elemento <style> y se aplica al elemento <div> (b).

Texto “Dos imágenes con el texto del elemento y sobre fondo rosa con copos de nieve blancos.”

Resumir

  1. Las imágenes de fondo son útiles en el diseño web cuando se necesitan elementos visuales decorativos sin afectar a la estructura del documento.
  2. Utilice la propiedad CSS background-image para añadir imágenes a elementos como <body>, <div>, o <p>. Esto puede hacerse en línea en el atributo style del elemento, en un bloque <style> o en un archivo CSS externo.
  3. No se necesita el atributo alt. Las imágenes de fondo son decorativas, no forman parte del contenido, por lo que no necesitan atributos alt, width o height. Las herramientas de accesibilidad no las leen.
  4. Las imágenes de fondo pueden ralentizar la carga de la página, especialmente si son grandes o no están optimizadas. Para mejorar el rendimiento, utilice formatos de imagen modernos como WebP para una mejor compresión.

Añadir imágenes mediante JavaScript

Aunque utilizar la etiqueta <img> es más sencillo para el contenido estático, JavaScript es la mejor opción cuando hay que añadir o modificar imágenes de forma dinámica.

 1<html>
 2	<body>
 3		<h1>Adding Image via JavaScript</h1>
 4		<script>
 5			// Create a new image element
 6			let img = document.createElement("img");
 7
 8			// Set the image source
 9			img.src = "https://docs.aspose.com/svg/images/api/lioness.jpg";
10
11			// Set alternative text, width and height for accessibility and SEO
12			img.alt = "The muzzle of a lioness close-up. The lioness looks away.";
13			img.width = 350;
14			img.height = 200;
15
16			// Append the image to the body
17			document.body.appendChild(img);
18		</script>
19	</body>
20</html>

Aunque el uso de la etiqueta <img> es más sencillo para el contenido estático, JavaScript es la mejor opción cuando es necesario añadir o modificar imágenes de forma dinámica. La adición de imágenes mediante JavaScript permite la carga condicional y la carga lenta, lo que mejora el rendimiento y la flexibilidad. A diferencia de las etiquetas estáticas <img>, este enfoque permite la gestión de errores, actualizaciones en tiempo real y una mejor capacidad de mantenimiento en aplicaciones interactivas.

Uso de SVG en línea para gráficos vectoriales

El uso de SVG en línea en HTML le permite incrustar gráficos vectoriales escalables directamente en su documento sin necesidad de archivos de imagen externos. Dado que los SVG son independientes de la resolución, se mantienen nítidos en todos los tamaños de pantalla, lo que los hace ideales para iconos, logotipos y gráficos complejos.

 1<html>
 2	<head>
 3		<style>
 4			.page {
 5				width: 160mm;
 6				height: 90mm;
 7				border: 2px solid #026dc5;
 8				text-align: center;
 9			}
10			h1,p {
11				color: #054c87;
12			}
13		</style>
14	</head>
15	<body>
16		<div class="page">
17			<h1>Using Inline SVG as image in HTML</h1>
18			<p>Because SVGs are resolution-independent, they remain crisp on screens of all sizes, making them ideal for icons, logos, and complex graphics...</p>
19			<svg height="140" width="140" viewBox="-40 0 140 140" xmlns="http://www.w3.org/2000/svg">
20				<path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78" fill="#3993c9"/>
21				<path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#f3622a" transform= "rotate(90 30 64) translate(5 -14)"/>
22				<path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#c1af2c" transform= "rotate(180 25 78) translate(-19 9)"/>
23				<path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#499c43" transform= "rotate(-90 25 78) translate(-5 14)"/>
24				<circle cx="34.5" cy="73.5" r="40"   fill="white" fill-opacity="0.3" />
25			</svg>
26		</div >
27	</body>
28</html>

La siguiente figura ilustra el archivo HTML escrito anteriormente. El archivo utiliza un SVG incrustado, que es el logotipo de la empresa Aspose:

Texto “Texto de los elementos h1 y p y el logotipo de Aspose debajo.”

Ver también

Nombres de colores HTML ¿Qué es HTML DOM?
Subscribe to Aspose Product Updates

Get monthly newsletters & offers directly delivered to your mailbox.

© Aspose Pty Ltd 2001-2025. All Rights Reserved.