Helpful resources ▼
  Download   Pricing   Buy

Añadir imágenes a HTML – De la sintaxis básica a técnicas avanzadas

Este artículo explica varias formas de añadir imágenes a HTML, desde la etiqueta básica <img> hasta técnicas con CSS, JavaScript, Base64 y SVG en línea. También cubre buenas prácticas de rendimiento, accesibilidad y SEO, con ejemplos HTML para integrar imágenes en proyectos web.

Imágenes en HTML

Si las páginas web fueran solo texto, resultarían bastante aburridas. Las imágenes y otros tipos de medios desempeñan un papel crucial para que el contenido sea visualmente atractivo, interesante e informativo. Por eso, añadir imágenes a HTML es una parte fundamental del desarrollo web.

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

Para optimizar rendimiento y SEO, comprima las imágenes para reducir el tamaño del archivo y use nombres de archivo descriptivos que mejoren la visibilidad en 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 la optimización de consultas. Use nombres significativos: landscape.jpg es mejor que img1.jpg.

Añadir imágenes con la etiqueta <img>

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

Si su imagen se llama landscape.jpg y está en el mismo directorio que la página HTML, puede incrustarla así:

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

Nota: Muchas imágenes en Internet están protegidas por derechos de autor. Infringir esos derechos es ilegal. Si no creó la imagen y la tomó de la web, asegúrese de que sea de dominio público o de tener permiso para usarla.

Añadir imágenes desde distintas fuentes

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

Imágenes locales

Usar imágenes locales suele ser mejor que usar imágenes remotas porque se cargan más rápido, reducen la dependencia de servidores externos y garantizan 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 dentro del 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 una imagen se carga sin los atributos width y height, el navegador no reserva espacio para ella al principio, lo que provoca que el contenido se desplace durante la carga. Este fenómeno afecta negativamente a la experiencia del usuario porque la página parece inestable, especialmente en conexiones lentas. Al especificar width y height, el navegador puede reservar espacio para la imagen antes de cargarla y evitar cambios repentinos en el diseño. Esta práctica mejora la estabilidad visual y las métricas web principales, lo que ayuda al SEO y al 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); con espacio reservado porque los atributos height y width se especificaron en la etiqueta <img> (b); y con la imagen ya cargada (c).

Comportamiento del navegador y desplazamiento del diseño después de cargar una imagen

Nota: Cuando una página web se carga, el navegador recupera la imagen del servidor web en la ruta indicada en src y la inserta en la página. Si la imagen falta, 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, empezando desde la raíz del servidor web o usando una URL completa. También puede incrustar una imagen mediante 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 depender de URL absolutas externas. Siempre que sea posible, aloje en su propio sitio las imágenes que desea usar. En configuraciones simples, esto significa almacenar las imágenes del sitio en el mismo servidor que el HTML.

Codificación Base64

La codificación Base64 permite incrustar imágenes directamente en HTML como URI de datos, sin archivos de imagen separados. Esto reduce solicitudes HTTP y puede mejorar los tiempos de carga en 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 el rendimiento. Es mejor usarlas para gráficos incrustados, como logotipos o pequeños elementos de interfaz, y no para imágenes grandes.

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 añadir una imagen a un archivo HTML desde tres tipos de fuentes:

 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 anterior. Se ven tres imágenes cargadas desde un archivo local, una URL remota y datos codificados en Base64.

Tres imágenes añadidas a HTML mediante ruta local, URL absoluta y codificación Base64

Resumen

  1. Use la etiqueta <img> – añada imágenes con los atributos src, alt, width y height. Todos son importantes para accesibilidad y SEO.
  2. Elija el formato adecuado – use JPEG para fotos, PNG para transparencia, SVG para gráficos escalables y WebP para imágenes optimizadas. WebP ofrece mejor compresión y calidad que formatos como JPEG o PNG.
  3. Compare imágenes locales y remotas – las imágenes locales cargan más rápido y son más fiables; las remotas dependen de servidores externos.
  4. Optimice el rendimiento – comprima imágenes, use nombres de archivo descriptivos y prefiera alojamiento local para mejorar velocidad y SEO.

Imágenes de fondo HTML

Además de mostrar imágenes con la etiqueta <img>, puede usar CSS para manipular imágenes de otras formas, por ejemplo, estableciendo una imagen de fondo. Las imágenes de fondo se usan principalmente con fines decorativos, como añadir texturas, degradados o patrones para mejorar el aspecto visual de un sitio web. Para añadir una imagen de fondo a HTML, puede usar:

Imagen de fondo para toda una página

Si desea añadir una imagen de fondo a toda la página web, puede establecer la propiedad CSS background-image en el elemento <body> dentro del elemento <style>. De forma predeterminada, una imagen de fondo se repetirá si es más pequeña que el elemento especificado, en este caso, <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 desea que la imagen de fondo cubra todo el elemento, establezca la propiedad background-size en cover:

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

Para evitar que la imagen de fondo se repita, establezca la propiedad background-repeat en no-repeat:

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

La siguiente figura ilustra tres pantallas de computadora (reducidas) con imágenes de fondo añadidas mediante la propiedad background-image con la configuración predeterminada (a), con background-size: cover (b) y con background-repeat: no-repeat (c):

Tres pantallas con imágenes de fondo repetidas, una imagen que cubre toda la pantalla y una imagen en su tamaño original

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

Imagen de fondo para un elemento HTML

Una imagen de fondo para un elemento HTML se especifica con la propiedad CSS background-image, lo que permite aplicarla a elementos como p, div, body o section. Puede controlar la posición con background-position, ajustar la escala con background-size y controlar la repetición con background-repeat.

El siguiente Ejemplo 1 muestra cómo añadir una imagen de fondo a un elemento <p> usando 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> usando 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 al elemento <p> mediante el atributo style (a); la imagen de fondo se añade mediante el elemento <style> y se aplica al elemento <div> (b).

Dos elementos HTML con texto sobre un fondo rosa con copos de nieve blancos

Resumen

  1. Las imágenes de fondo son útiles en diseño web cuando se necesitan elementos visuales decorativos sin afectar la estructura del documento.
  2. Use la propiedad CSS background-image para añadir imágenes a elementos como <body>, <div> o <p>. Puede hacerlo en línea en el atributo style, en un bloque <style> o en un archivo CSS externo.
  3. No se necesita el atributo alt. Las imágenes de fondo son decorativas y no forman parte del contenido, por lo que no requieren alt, width ni 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, use formatos modernos como WebP.

Añadir imágenes mediante JavaScript

Aunque usar la etiqueta <img> es más sencillo para contenido estático, JavaScript es una mejor opción cuando las imágenes deben añadirse o modificarse dinámicamente.

 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 usar la etiqueta <img> es más sencillo para contenido estático, JavaScript resulta más adecuado cuando es necesario añadir o modificar imágenes de forma dinámica. Añadir imágenes mediante JavaScript permite carga condicional y lazy loading, lo que mejora rendimiento y flexibilidad. A diferencia de las etiquetas <img> estáticas, este enfoque permite manejo de errores, actualizaciones en tiempo real y mejor mantenimiento en aplicaciones interactivas.

Usar SVG en línea para gráficos vectoriales

Usar SVG en línea en HTML permite incrustar gráficos vectoriales escalables directamente en el documento sin archivos de imagen externos. Como los SVG son independientes de la resolución, permanecen 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 anterior. El archivo usa un SVG incrustado con el logotipo de Aspose:

Texto de elementos h1 y p con el logotipo de Aspose debajo

FAQ

¿Cuál es la forma más simple de añadir una imagen a HTML?

Use la etiqueta <img> con src para la ruta de la imagen y alt para texto alternativo. Añada también width y height para evitar desplazamientos de diseño durante la carga.

¿Cuándo debo usar una imagen de fondo CSS en lugar de img?

Use <img> cuando la imagen sea contenido importante. Use background-image cuando la imagen sea decorativa, como una textura, patrón o fondo visual que no necesita texto alternativo.

¿Es bueno incrustar imágenes Base64 en HTML?

Base64 puede ser útil para iconos o gráficos pequeños porque evita solicitudes HTTP adicionales. Para imágenes grandes, suele empeorar el rendimiento porque aumenta el tamaño del HTML.

¿Cómo añado imágenes a HTML con Aspose.HTML for .NET?

Use Aspose.HTML for .NET para crear o editar documentos HTML mediante programación. Consulte Añadir imagen a HTML en C# para ver ejemplos con la API.

Artículos relacionados

Nombres de colores HTML Trabajar con color HTML