Saltar al contenido

Cómo agregar una imagen y una imagen de fondo en HTML

enero 30, 2022
how to insert an image in html.jpgkeepProtocol

Alguna vez has oído eso la gente recuerda solo el 20% de lo que lee, pero el 80% de lo que ve? Si bien se debaten los porcentajes exactos, la idea básica no lo es: es fácil para las personas aprender y procesar la información visualmente.

Es por eso que la mayoría de los sitios web utilizan imágenes y por eso es importante incluir imágenes en su propio sitio. Las imágenes ayudan a que su contenido sea más informativo, atractivo y memorable. Además de mejorar la experiencia del visitante, también pueden ayudar a impulsar su tráfico de búsqueda orgánica.

Si utiliza una plataforma de creación de sitios web como Centro de CMS o WordPress, simplemente haga clic en el ícono de imagen en su barra de herramientas, seleccione una imagen de su administrador de archivos e insértela. Si no usa un constructor, aún puede agregar fácilmente imágenes a su sitio web. Solo necesitas saber algunos HTML. Veamos el proceso a continuación.

Descargar ahora: Guía de introducción gratuita a HTML y CSS

La sintaxis se ve así: texto descriptivo

El elemento de imagen HTML es un «elemento vacío», lo que significa que no tiene una etiqueta de cierre. A diferencia de elementos como el párrafo que consisten en una etiqueta de apertura y una de cierre con contenido en el medio, una imagen especifica su contenido con atributos en la etiqueta de apertura.

Compara las siguientes líneas de código para ver la diferencia entre un párrafo y una imagen:

 

<p>This is a paragraph.</p>

<img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg" alt=”an artist's rendition of a black hole in space”>

Observe los dos atributos en el elemento de imagen de arriba, origen y alternativa. Analicemos estos dos importantes atributos a continuación.

El atributo img src

Un elemento de imagen siempre debe tener un atributo src (fuente), que contiene la URL de la imagen o la ruta del archivo. De lo contrario, el navegador no sabrá qué renderizar. Los tipos de archivos de imagen permitidos dependerán del navegador que cargue la página, pero todos los navegadores le permiten colocar formatos comunes como .jpeg, .png y .gif, así como también .svg.

En el ejemplo de código anterior, la fuente es un hipervínculo completo; esto se debe a que la imagen se obtiene de otro sitio web. Si desea colocar una imagen almacenada en su servidor, puede usar la ruta del archivo de imagen sin el nombre o protocolo del sitio web. Por ejemplo, si la imagen se encuentra en una subcarpeta almacenada en el mismo lugar que su archivo HTML, su elemento de imagen puede parecerse más a esto:

 

<p>This is a paragraph.</p>

<img src="https://blog.hubspot.com/csz/news/800/2017/theoreticala.jpg" alt=”an artist's rendition of a black hole in space”>

… en este caso, «csz» sería una carpeta ubicada en el mismo directorio que su archivo HTML.

El atributo img alt

Mientras que un navegador puede representar una imagen sin la alternativa atributo, se considera una buena práctica incluir este atributo. Esto se debe a que este atributo contiene texto alternativo de imagen.

El texto alternativo de la imagen es importante por varias razones. Primero, aparecerá en lugar de una imagen si la imagen no se carga en la pantalla de un usuario. En segundo lugar, ayuda a las herramientas de lectura de pantalla a describir imágenes para lectores con discapacidades visuales que podrían tener problemas para comprender la imagen sin ella.

En tercer lugar, el texto alternativo de la imagen permite que los motores de búsqueda rastreen y clasifiquen mejor su sitio web. Imágenes de Google, no Búsqueda de Google, Google Imagen Búsqueda: es un importante motor de búsqueda por sí mismo y otra forma en que las personas pueden encontrar su sitio web. Proporcionar imágenes con texto alternativo descriptivo puede ayudarlo a clasificar sus palabras clave objetivo y generar tráfico a su sitio. En 2019, HubSpot hizo exactamente eso, lo que generó un crecimiento interanual del 25 % en el tráfico orgánico proveniente de la búsqueda web y de imágenes.

El atributo de estilo img

También puede ver un estilo atributo dentro de un etiqueta que contiene el ancho y el alto de la imagen. Especificar el ancho y el alto puede ayudar a evitar que la página web parpadee mientras se carga la imagen. Así es como se vería el código con estos atributos adicionales:

 
<img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg" alt=”an artist's rendition of a black hole in space” style=”width:400px;height:200px;">

Imagen insertada debajo del título y el párrafo en un archivo HTML

Es importante tener en cuenta que también puede especificar el tamaño de una imagen usando CSS interno o externo, sobre CSS en línea. Para conocer la diferencia entre estos tres tipos de CSS, consulte nuestra guía sobre cómo agregar CSS a HTML.

Los atributos de ancho y alto de img

El ancho y el alto de una imagen también se pueden especificar en píxeles con ancho y altura atributos, así:

 

<img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg" alt=”an artist's rendition of a black hole in space” width="400" height="200">

Esto producirá el mismo resultado que la imagen de arriba, donde el estilo se utilizó el atributo. La principal diferencia entre estos métodos es que el uso de ancho y estilo los atributos le dirán al navegador cuánto espacio guardar para la imagen, lo que puede resultar en una carga más fluida (aunque esto dependerá en última instancia del diseño de la página).

Cómo insertar una imagen de fondo en HTML

Si desea establecer una imagen como fondo de una página web o un elemento HTML, en lugar de simplemente insertar la imagen en la página, deberá usar el CSS imagen de fondo propiedad. Esta propiedad CSS reemplazó a la imagen de fondo atributo en versiones anteriores de HTML. Es mucho más flexible y predecible que el atributo HTML, y sigue siendo fácil de usar.

Para establecer el valor de imagen de fondotienes que usar la siguiente sintaxis: URL(‘ ‘);

Entre las comillas simples, colocará la URL de la imagen o la ruta del archivo.

Cómo insertar una imagen de fondo en una página

Para empezar, supongamos que desea establecer una imagen como fondo de toda la página. En este caso, aplicaría CSS al cuerpo elemento. Con un selector de CSS, puede definir el imagen de fondo propiedad en el cabeza sección de su archivo HTML o en una hoja de estilo externa. Para esta demostración, usaremos la misma imagen que la anterior y cambiaremos el color del texto a blanco para que podamos verlo.

Aquí está el CSS:

 
body {
    background-image: url('https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg');
    color: #FFFFFF;
}

Aquí está el HTML:

 
<h2>Background Image</h2>
<p>The background image is specified in the body element.</p>

Aquí está el resultado:

Configuración de la imagen de fondo de toda la página web en HTML

¡Se ve muy bien! Pero, ¿qué sucede si la imagen es más pequeña que el navegador? En ese caso, se colocará en mosaico de manera predeterminada, como se muestra a continuación.

Establecer la imagen de fondo del elemento del cuerpo en HTML significa que se repetirá de forma predeterminada

Para evitar que esto suceda, puede utilizar el repetición de fondo propiedad y establecerlo en sin repetición.

Aquí está el CSS:

 
body {
    background-image: url('https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg');
    background-repeat: no-repeat;
    color: #FFFFFF;
}

El HTML permanece igual. Así es como se vería en el front-end ahora:

Configuración de la imagen de fondo del elemento del cuerpo en HTML para que no se repita

Ha resuelto el problema de la repetición, pero ahora tiene muchos espacios en blanco adicionales debajo y a la derecha de la imagen. Para asegurarse de que la imagen de fondo cubra todo el cuerpo elemento, o, en otras palabras, ocupa toda la ventana del navegador, puede usar el tamaño de fondo propiedad y establecerlo en cubrir. Luego, para evitar que la imagen se deforme en sus dimensiones, use el archivo adjunto de fondo propiedad y establecerlo en reparado. De esa forma, la imagen mantendrá sus proporciones originales.

Aquí está el CSS:

 
body {
    background-image: url('https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: #FFFFFF;
}

El HTML permanece igual. Así es como se vería en el front-end ahora:

una imagen de fondo en html que se expande para ocupar toda la ventana del navegador

Cómo insertar una imagen de fondo en un elemento HTML

También puede establecer una imagen como fondo de un elemento HTML en lugar de toda la página web.

Por ejemplo, puede colocar elementos HTML dentro de un div y luego apuntar al div con las propiedades CSS que usamos anteriormente. Una diferencia es que en lugar de configurar el tamaño de fondo propiedad a cubrirlo vamos a configurar 100% 100%. Eso significa que la imagen se estirará horizontal y verticalmente según sea necesario para adaptarse a todo el elemento div, sin conservar sus dimensiones originales.

Aquí está el CSS:

 
div {
    background-image: url('https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    color: #FFFFFF;
}

Aquí está el HTML:

 
<div>
    <h2>Background Image</h2>
    <p>In this example, the background image is specified for the div element.</p>
    <p>But you can specify the background image for any HTML element.</p>
    <p>Try it for a paragraph, heading, and more.</p>
</div>

<p>This paragraph is not contained in the div. Therefore it does not have an image background.</p>

Aquí está el resultado:

Configuración de la imagen de fondo de un elemento div en HTML

Cómo hacer un enlace de imagen en HTML

Las imágenes también son enlaces efectivos: puede crear un enlace desde un icono o una imagen de alta resolución. De cualquier manera, el proceso es el mismo: Adjunte su elemento en un (ancla) etiqueta, así:

 
<a href="http://blog.hubspot.com/website/URL">
    <img src="https://blog.hubspot.com/website/URL" alt="descriptive text"/>
</a>

Este es un ejemplo interactivo: haz clic en el logotipo de HubSpot para ir a la página de inicio de HubSpot.

ver la pluma Crear un enlace de imagen de Christina Perricone (@hubspot) sobre CódigoPen.

Hacer que su sitio web sea visual

Agregar imágenes en su sitio web es importante tanto para la experiencia del visitante como para los motores de búsqueda. Es fácil ya sea que esté creando su sitio web con un sistema de administración de contenido o desde cero. Solo necesitas saber algo de HTML y CSS.

Nota del editor: esta publicación se publicó originalmente en septiembre de 2020 y se actualizó para que sea más completa.

Nueva llamada a la acción