¿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 los humanos aprender y manipular la información visualmente.
Esta es la razón por la que la mayoría de los sitios web usan imágenes y, por lo tanto, es importante que incruste imágenes en su propio sitio. Las imágenes hacen que el contenido sea más informativo, atractivo y memorable. Además de mejorar la experiencia del visitante, también pueden ayudar a aumentar el tráfico orgánico de los motores de búsqueda.
Si está utilizando una plataforma de desarrollo de sitios web como Centro CMS o WordPress, simplemente haga clic en el icono de la imagen en la barra de herramientas, seleccione una imagen de su administrador de archivos e insértela. Si no utiliza el asistente, aún puede agregar fácilmente imágenes a su sitio web. Solo necesitas saber un poco HTML. Veamos el proceso a continuación.
Cómo insertar una imagen en HTML
Para insertar una imagen en HTML, use la etiqueta de la imagen e incluya los atributos fuente y alt. Como cualquier otro elemento HTML, agregará imágenes a la sección de contenido de su archivo HTML.
La sintaxis se ve así:
El elemento de imagen HTML es un «elemento vacío», lo que significa que no hay una etiqueta de cierre. A diferencia de elementos como un párrafo, que consta de una etiqueta de apertura y una etiqueta de cierre con contenido en el medio, una imagen determina su contenido utilizando los atributos de 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”>
Tenga en cuenta los dos atributos en el elemento de imagen de arriba, origen y alternativa. Ahora analicemos estos dos atributos importantes. Pero primero, este video se sumerge en los pasos que acabamos de explicar.
El atributo img src
Un elemento de imagen siempre debe tener un atributo src (fuente) que contenga 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 admiten formatos comunes como .jpeg, .png y .gif, así como .svg.
En el ejemplo de código anterior, la fuente es un hipervínculo completo; eso se debe a que la imagen se está descargando de otro sitio. Si desea colocar una imagen almacenada en el servidor, puede usar la ruta del archivo de imagen sin un sitio web o nombre de protocolo. Por ejemplo, si la imagen está en una subcarpeta almacenada en la misma ubicación que el archivo HTML, el elemento de la imagen podría verse así:
<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 en el mismo directorio que el archivo HTML.
Atributo alt de img
El navegador puede representar la imagen sin alternativa atributo, se considera una buena práctica incluir ese atributo. Esto se debe a que este atributo contiene el texto alternativo de la imagen.
El texto alternativo de la imagen es importante por varias razones. Primero, aparecerá en lugar de la imagen si la imagen no se carga en la pantalla del usuario. En segundo lugar, ayuda a las herramientas de lectura de pantalla a describir imágenes para lectores con discapacidad visual que pueden tener problemas para comprender la imagen sin ella.
En tercer lugar, el texto alternativo de una imagen permite que los motores de búsqueda indexen y clasifiquen mejor su sitio. Imágenes de Google – no el motor de búsqueda de Google, Google Imagen Búsqueda: este es el motor de búsqueda principal por derecho propio y otra forma en que las personas pueden encontrar su sitio. Proporcionar imágenes descriptivas de texto alternativo puede ayudarlo a clasificar sus palabras clave y atraer tráfico a su sitio web. En 2019, HubSpot hizo exactamente lo que condujo a un aumento interanual del 25 % en el tráfico orgánico de los motores de búsqueda y las imágenes.
Atributo de estilo img
También puedes ver estilo atributo dentro de un una 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;">
Es importante tener en cuenta que también puede determinar el tamaño de una imagen utilizando CSS interno o externo, en lugar del CSS integrado. Para conocer la diferencia entre estos tres tipos de CSS, consulte nuestra guía sobre cómo agregar CSS a HTML.
Atributos de ancho y alto de la imagen
El ancho y el alto de la imagen también se pueden especificar en píxeles con un ancho y aumentar atributos como:
<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 en la imagen de arriba, donde estilo se utilizó el atributo. La principal diferencia entre estos métodos es que cuando se utilizan ancho y estilo Los atributos le dirán al navegador cuánto espacio debe ahorrar en la imagen, lo que puede resultar en una carga más fluida (aunque, en última instancia, dependerá del diseño de la página).
Cómo insertar una imagen de fondo en HTML
Si desea establecer una imagen como fondo del sitio web o elemento HTML, en lugar de simplemente insertar una imagen en la página, debe usar CSS Imagen de fondo propiedad. Esta propiedad CSS ha reemplazado a la Imagen de fondo atributo en versiones HTML anteriores. Es mucho más flexible y predecible que el atributo HTML, y sigue siendo fácil de usar.
Para establecer un valor Imagen de fondodebe usar la siguiente sintaxis: dirección URL (»);
Pondrás la URL de la imagen o la ruta del archivo entre comillas simples.
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 ese caso, aplicará CSS a cuerpo elemento. Con el selector de CSS puedes definir Imagen de fondo propiedad en cabeza sección del archivo HTML o en una hoja de estilo externa. Para esta demostración, usaremos la misma imagen que arriba y cambiaremos el color del texto a blanco para 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 código HTML:
<h2>Background Image</h2>
<p>The background image is specified in the body element.</p>
Aquí está el resultado:
¡Se ve genial! Pero, ¿y si la imagen es más pequeña que el espectador? En ese caso, se organizará como se muestra a continuación de forma predeterminada.
Para evitar que esto suceda, puede utilizar fondo repetitivo propiedad y establecerlo en sin repeticiones.
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;
}
HTML sigue siendo el mismo. Así es como se verá ahora en la interfaz:
Resolvió el problema recurrente, 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 utilizar tamaño de fondo propiedad y establecerlo en cubrir. Luego, para que la imagen no se deforme en sus dimensiones, utilice el botón archivo adjunto en segundo plano propiedad y establecerlo en él arregló. De esta manera, la imagen mantendrá su relación de aspecto original.
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;
}
HTML sigue siendo el mismo. Así es como se verá ahora en la interfaz:
¿Cómo inserto una imagen de fondo en un elemento HTML?
También puede establecer una imagen como fondo de un elemento HTML, no de toda la página web.
Por ejemplo, podría poner 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 establecer tamaño de fondo propiedad de cubrirlo configuraremos para 100% 100%. Esto significa que la imagen se estirará horizontal y verticalmente según sea necesario para adaptarse a todo el elemento div sin mantener las 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 código 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:
Cómo vincular a una imagen en HTML
Las imágenes también son enlaces efectivos: puede vincular desde un ícono o imagen de alta resolución. De cualquier manera, el proceso es el mismo: incluye el tuyo elemento en un (ancla), por ejemplo:
<a href="https://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 a la imagen. de Christina Perricone (@hubspot) en CódigoPen.
Crear un sitio visual
Agregar imágenes a su sitio es importante tanto para la conveniencia de los visitantes como para los motores de búsqueda. Es simple, ya sea que esté creando su sitio web con un sistema de administración de contenido o desde cero. Solo necesitas saber un poco de HTML y CSS.
Nota del editor: esta publicación se publicó originalmente en septiembre de 2020 y se actualizó para que sea completa.
