Insertar una imagen en HTML
Las imágenes son un elemento importante en cualquier web ya que aportan valor visual al contenido y mejoran la experiencia de usuario. Insertar imágenes en HTML es una tarea bastante sencilla pero es importante que sepas hacerlo correctamente para que no cometas errores que puedan afectar al rendimiento o al SEO de tu web. Para ello te voy a explicar en este artículo todo lo que necesitas saber sobre cómo insertar una imagen en HTML.
- Cómo insertar una imagen en HTML
- Sintaxis de la etiqueta <img> de HTML
- Atributos de las imágenes en HTML
- Formatos para las imágenes en HTML
- Cómo centrar imágenes en HTML
- Cómo poner imágenes de fondo en HTML
- Consejos para optimizar imágenes HTML y mejorar el SEO
Cómo insertar una imagen en HTML
Añadir una imagen en HTML es tan sencillo como utilizar el siguiente código:
<img src=”https://cdn-assets.raiolanetworks.com/dist/images/logos/logo-raiola-networks.webp” alt=”Logotipo de Raiola Networks” />
Como puedes ver, para poner una imagen en tu web solo tienes que utilizar una etiqueta <img> de HTML e indicar la ruta de tu imagen con su extensión (y un texto alternativo). Parece fácil y lo es, pero no nos vamos a quedar ahí. La etiqueta <img> de HTML admite muchas opciones que debes conocer. Pero antes vamos a analizar el código del ejemplo anterior.
Sintaxis de la etiqueta <img> de HTML
En HTML existen dos tipos de etiquetas: las de apertura y cierre y las de autocierre. Un ejemplo básico de etiqueta con apertura y cierre es la etiqueta <p> la cual envuelve un contenido:
<p>Lorem ipsum</p>
Por otro lado están las etiquetas de autocierre, que no envuelven ningún contenido ya que son contenido en sí mismas. Se escriben entre los símbolos < y > y el símbolo > puede estar precedido de una barra / de manera opcional (en HTML5 no es obligatorio, pero antes se usaba para indicar el final de la etiqueta). Un ejemplo claro de etiqueta de autocierre es el que nos interesa en este post, la etiqueta <img>.
La sintaxis básica de la etiqueta <img> de HTML es la siguiente:
<img atributo1=”valor1” atributo2=”valor2”>
Como ves, después del nombre de la etiqueta podemos incluir una serie de atributos con sus respectivos valores. Los atributos se separan con un espacio y los valores van entre comillas. Estos atributos sirven para configurar o modificar parámetros de la etiqueta en cuestión. Hay atributos comunes a todas las etiquetas HTML (como id o class) pero también hay etiquetas que tienen sus propios atributos.
Atributos de las imágenes en HTML
A la hora de insertar una imagen en HTML puedes utilizar una gran variedad de atributos, pero ten en cuenta que algunos de ellos son obligatorios.
- Atributo src:
Sirve para indicar la ruta de la imagen a través de una URL. Puede ser una ruta relativa (/img/imagen.jpg) o absoluta (https://tuweb.com/img/imagen.jpg). También puedes utilizar rutas externas (de un dominio diferente al de tu sitio web). Tal y como puedes ver en los ejemplos anteriores, hay que indicar el nombre del archivo con su extensión (más adelante te hablaré sobre los formatos de imagen). Este atributo es obligatorio. - Atributo alt:
Es el texto alternativo que se mostrará si por alguna razón la imagen no carga. Es un atributo importante de cara al SEO ya que ayuda a los motores de búsqueda a saber qué representa la imagen. También es importante de cara a la accesibilidad ya que es el texto que leen los lectores de pantalla. Es recomendable que el “alt” sea descriptivo y evitar poner cosas tipo “imagen1”. Es obligatorio. - Atributo title:
El “title” proporciona un texto adicional que se muestra cuando el usuario pasa el cursor por encima de la imagen, en una especie de tooltip. Es opcional.
<img src=”camiseta.webp” alt=”Camiseta celeste con rayas blancas” title=”Camiseta deportiva hecha de algodón”>
- Atributos width y height:
Sirven para indicarle al navegador cuánto ancho y alto (en píxeles) va a ocupar la imagen. De esta manera el navegador reserva ese espacio en la página evitando que la estructura de la página cambie hasta que se cargue la imagen. Aunque su valor se indica en píxeles, no es necesario indicar la unidad (es decir, el valor correcto sería “500” y no “500px”). Es opcional, pero recomendable.
<img src=”coche.webp” alt=”Coche deportivo gris” width=”350” height=”200”>
- Atributos srcset y sizes:
Se utilizan para crear conjuntos de imágenes adaptables, ideales para el responsive de la web. Cuando usamos “srcset” debemos mantener el atributo “src” ya que actuará como “fallback”.- Con “srcset” puedes indicar un conjunto de posibles versiones de la imagen a usar, con sus respectivos tamaños reales indicando el ancho en “w” en lugar de en “px” (también puedes utilizar “srcset” para definir diferentes imágenes para diferentes densidades de px: 1x, 2x, etc).
- Con “sizes” indicas cuánto ocupará la imagen según el ancho de pantalla. De esta manera el navegador puede elegir qué imagen de las que has indicado en el “srcset” es la más adecuada en cada ancho de pantalla.
<img src="tokyo.webp" srcset=" tokyo-400.webp 400w, tokyo-800.webp 800w, tokyo-1200.webp 1200w " sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 1200px" alt="Vista de la ciudad de Tokyo">
- Atributo loading:
Este atributo le dice al navegador cuándo debe cargar la imagen. Existen dos posibles valores: eager (es el valor por defecto) con el que el que la imagen se cargará inmediatamente y lazy con el que la imagen se cargará cuando el usuario haga scroll hasta ella. Si no utilizas este atributo la imagen usará el valor por defecto y se cargará inmediatamente. Es especialmente útil para mejorar el tiempo de carga inicial de la página. Es opcional pero recomendable.
<img src=”pikachu.webp” alt=”Pikachu lanzando impactrueno” loading=”lazy”>
- Atributo fetchpriority:
El proceso de carga de una imagen en el navegador implica dos cosas. Por un lado el navegador tiene que descargar el fichero y posteriormente decodificarlo para mostrar la imagen. Con el atributo “fetchpriority” puedes establecer la prioridad a la hora de descargar el archivo. El valor por defecto es “auto” con el que el navegador decidirá la prioridad, pero también puedes usar los valores “high” (más prioridad) y “low” menos prioridad. Lo ideal es que solo las imágenes más importantes y visibles nada más cargar la página tengan el valor “high”.
<img src=”logo-raiola-networks.webp” alt=”Raiola Networks, dominios y alojamiento web de calidad” fetchpriority=”high”>
- Atributo decoding:
Con este atributo puedes indicarle al navegador cómo debe decodificar la imagen. Tiene tres posibles valores:- auto (por defecto) con el que el navegador decide cómo decodificar la imagen.
- sync con el que le das prioridad a la imagen para que la decodifique antes que otras
- async con el que la imagen se decodificar de manera asíncrona.
Es útil para darle prioridad a imágenes con más importancia o que están más arriba en la estructura (como el logo por ejemplo). Es opcional.
<img src=”gato.webp” alt=”Gato bebiendo agua” decoding=”async”>
Formatos para las imágenes en HTML
Cuando añadimos imágenes en HTML podemos utilizar una gran variedad de formatos de archivo. Recuerda que a la hora de insertar la imagen, tienes que especificar su extensión de archivo:
<img src=”imagen.jpg” alt=”Imagen”> <img src=”imagen.png” alt=”Imagen”> <img src=”imagen.webp” alt=”Imagen”>
Es importante conocer bien los diferentes formatos de imagen para saber cual es el más adecuado en cada caso. Para que no tengas dudas sobre qué formato utilizar a la hora de poner imágenes en HTML en tu sitio web vamos a hacer un repaso de los más utilizados:
- JPG / JPEG: Es un formato con compresión con pérdida y compatible con todos los navegadores. Es probablemente el más conocido y más utilizado (aunque ahora veremos que hay otros formatos que le están ganando terreno). No admite transparencia y se suele utilizar para fotografías o imágenes con mucho nivel de detalle. Los archivos JPG suelen ser poco pesados
- PNG: El PNG es un formato con compresión sin pérdida, por lo que suele ser más pesado que el JPG. En este caso sí que admite transparencia, por lo que es adecuado para imágenes sin fondo. Es compatible con todos los navegadores y se suele utilizar para elementos gráficos, logos o iconos.
- SVG: Se trata de un formato vectorial, por lo que no pierde calidad al ser reescalado. Además los archivos .svg suelen ocupar muy poco y admiten transparencia. Es compatible con prácticamente todos los navegadores modernos y se suele usar para imágenes vectoriales como iconos o logos. No es recomendable para fotografías y tampoco se recomienda utilizarlo de fuentes externas ya que existe el riesgo de inyección de código no deseado.
- GIF: El formato GIF se suele usar para animaciones. Tiene compresión sin pérdida por lo que no suelen ser archivos demasiado livianos. Admite transparencia y es compatible con todos los navegadores.
- WEBP: A día de hoy es el formato más recomendable. Los archivos WEBP pesan mucho menos que en JPG y PNG manteniendo muy buena calidad. Además admite transparencia y animaciones, por lo que es casi un todo en uno. En cuanto a su compatibilidad, a día de hoy es un formato permitido por todos los navegadores modernos y solo navegadores antiguos como Internet Explorer no lo soportan.
- AVIF: El formato AVIF es un formato relativamente moderno por lo que todavía hay unos pocos navegadores que no lo soportan. Al igual que el WEBP admite transparencia y animaciones, y su compresión es incluso mejor que este último. Los archivos AVIF también suelen ser bastante ligeros.
Y para ponértelo fácil a la hora de elegir el formato correcto para las imágenes de tu web, te dejo aquí abajo una tabla que resume las principales características de los formatos anteriores:
Cómo centrar imágenes en HTML
A continuación te voy a explicar cómo podemos centrar una imagen HTML con respecto al contenido, pero antes de nada es importante que sepas que en HTML existen dos tipos de elementos: en línea (inline) y en bloque (block). Te los explico rápidamente.
La estructura de una página web sigue el llamado “box-model” o modelo de caja, es decir, todos los elementos de una web son en realidad pequeñas cajas. Dichas cajas pueden ser de dos tipos: elementos “block” que ocupan todo el ancho disponible desplazando al siguiente elemento hacia abajo o elementos “inline” que ocupan solamente el ancho que necesitan permitiendo tener al siguiente elemento a su lado.
Las imágenes en HTML son elementos “inline”. Si en tu código metes varias etiquetas <img> seguidas, dichas imágenes se verán, en principio, una al lado de la otra.
Aclarado este aspecto vamos, ahora sí, a ver diferentes métodos sobre cómo centrar una imagen en HTML.
1. Con “text-align: center;” en el contenedor.
<div class=”container”>
<img src=”mi-imagen.jpg” alt=”Imagen”>
</div>
<style>
.container{text-align: center;}
</style>
Con “text-align” puedes centrar los elementos inline que estén dentro del contenedor.
2. Con “display: block;” y “margin: auto;”.
<img src=”mi-imagen.jpg” alt=”Imagen”>
<style>
img{
display: block;
margin: auto;
}
</style>
Usamos la propiedad “display” para hacer que la imagen pase a ser un elemento en bloque y usamos el márgen automático para que reparta el espacio alrededor de la imagen equitativamente, centrándola.
3. Con “display: flex;” y sus ajustes de alineado.
<div class=”container”>
<img src=”mi-imagen.jpg” alt=”Imagen”>
</div>
<style>
.container{
display: flex;
justify-content: center; /* para centrar la imagen horizontalmente */
align-items: center; /* para centrar la imagen verticalmente*/
}
</style>
La propiedad “flex” de CSS es muy versátil y permite centrar el contenido tanto horizontal como verticalmente.
4. Con “display: grid;” y sus ajustes de alineado.
<div class=”container”>
<img src=”mi-imagen.jpg” alt=”Imagen”>
</div>
<style>
.container{
display: grid;
place-items: center;
}
</style>
La propiedad “grid” permite centrar el contenido horizontal y verticalmente utilizando “place-items”.
5. Con “position: absolute;” y desplazamiento.
<div class=”container”>
<img src=”mi-imagen.jpg” alt=”Imagen”>
</div>
<style>
.container{
position: relative;
}
img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
}
</style>
Este es un método un poco “a lo bruto” pero puede llegar a ser útil en algunos casos. Consiste en aplicar una posición absoluta a la imagen (lo que permite moverla libremente sobre el resto de elementos) y una posición relativa a su contenedor. Después basta con desplazar la imagen con “top” y “left” para llevarla al centro y utilizar “transform” para corregir la posición y que quede exactamente centrada.
Cómo poner imágenes de fondo en HTML
Hasta ahora hemos visto cómo insertar imágenes en HTML como parte del contenido, pero también es posible añadir imágenes de fondo cuyo propósito es más bien decorativo.
Al contrario que las imágenes que insertamos con la etiqueta <img> o la etiqueta <picture>, las imágenes de fondo carecen de contenido semántico. Además tampoco tienen “alt” o texto alternativo, por lo que ni los motores de búsqueda ni los lectores de pantalla pueden leerlas.
Para insertar imágenes de fondo en nuestra web necesitamos utilizar CSS, en concreto una propiedad llamada ‘background-image’ con una función “url” en la que indicaremos la ruta (absoluta o relativa) de la imagen. Un ejemplo muy básico sería algo como esto:
<div class=”header”></div>
<style>
.header{
background-image: url(‘bg-playa.jpg’);
width: 100%;
height: 250px;
}
</style>
Como puedes ver, las imágenes de fondo van asociadas a un elemento HTML, o dicho de otra manera, la imagen la utilizamos como fondo de un elemento HTML (en el caso del ejemplo, un <div>).
En el caso de las imágenes que se insertan en el contenido con <img>, la propia imágen ya tiene unas dimensiones (ancho y alto). Pero en el caso de las imágenes de fondo su tamaño va condicionado al tamaño de su contenedor. Yo en el ejemplo anterior he puesto un ancho completo y una altura fija, para que pudieras ver la imágen de fondo, pero si el <div> tuviera contenido la imágen de fondo tendría el tamaño que ocupase ese contenido. Por ejemplo:
<div class=”header”>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu eros enim. Donec erat tortor, ultrices eu nunc ut, tempus imperdiet neque. Donec euismod placerat volutpat. Morbi eget enim magna. Proin dignissim ac eros a suscipit. Sed vehicula, ex vel imperdiet porttitor, lorem velit vehicula ex, non interdum enim nisi at tortor. Vivamus eleifend justo quis ante varius congue. Mauris consectetur imperdiet orci, bibendum blandit orci porta in.
</div>
.header{
background-image: url(‘bg-playa.jpg’);
}
</style>
Normalmente la propiedad ‘background-image’ se suele combinar con otras propiedades CSS para las imágenes de fondo que nos ayudan a ajustar o modificar cómo se va a ver dicha imagen. Te hago un resumen de las más utilizadas:
- background-repeat: Sirve para indicar si queremos que la imagen de fondo se repita o no en el caso de que no abarque todo el tamaño del contenedor. Sus posibles valores son:
repeat: la imagen se repite horizontal y verticalmente.- no-repeat: la imagen no se repite.
- repeat-x / repeat-y: la imagen se repite solo en el eje X (horizontalmente) o en el eje Y (verticalmente).
- space: repite la imagen tantas veces como pueda pero sin que se corte en ningún momento, aplicando un espacio uniforme entre las repeticiones.
- round: repite la imagen tantas veces como pueda pero sin que se corte en ningún momento, redimensionandola para que no queden espacios entre las repeticiones.
- background-position: Permite especificar la posición (eje X y eje Y) en la que se situará la imagen dentro del contenedor. Por defecto es “0% 0%” y si solo especificas un eje el valor se aplicará a ambos. El valor se puede indicar de varias formas:
- Con las palabras clave: top, bottom, left, right y center.
- Con porcentajes: por ejemplo “0% 50%”, “100% 100%”, etc.
- En píxeles, rem, em, vw o vh: “25px 100px”, “137px 0px”, “1rem 3rem”, etc.
- Combinando las anteriores: “0% 5vh”, “top 50px”, etc.
- background-size: Con esta propiedad puedes indicar el tamaño que tendrá la imagen de fondo dentro del contenedor. Puedes utilizar:
- El valor “cover”: la imagen va a ocupar todo el contenedor y para ello se estirará si es necesario. Es posible que parte de la imagen no sea visible si las proporciones lo impiden, pero el contenedor quedará completamente relleno.
- El valor “contain”: la imagen de fondo se verá entera, sin ser recortada, pero es posible que queden espacios en blanco en el contenedor si las proporciones no coinciden.
Un valor en px o %: permite indicar un valor concreto de ancho y alto.
- background-attachment: Esta propiedad sirve para indicar si la imagen de fondo se va a quedar fija o no al hacer scroll. Por defecto tiene el valor “scroll”, es decir que la imagen se moverá con el scroll. Se puede configurar a “fixed” de manera que la imagen de fondo se quedará fija al hacer scroll.
Consejos para optimizar imágenes HTML y mejorar el SEO
Si has llegado hasta aquí ya has visto lo fácil que es insertar imágenes con HTML pero seguramente te estés dando cuenta de lo importante que es hacerlo bien. Y no solo de cara a la experiencia de usuario si no también de cara al SEO.
Las imágenes también son un elemento que tienes que tener muy en cuenta cuando quieres mejorar el SEO de tu web, ya que hay una serie de factores que influyen (y a veces mucho) el mismo.
A continuación te dejo una serie de consejos para optimizar las imágenes y mejorar el SEO de tu web:
- El nombre del archivo es importante. Es recomendable renombrar las imágenes con nombres de archivo descriptivos y no utilizar nombres de archivo como “IMG001.jpg”. Además es recomendable que uses guiones en lugar de espacios.
- Utiliza siempre el atributo “alt” y escribe un texto alternativo que describa la imagen (no pongas cosas del tipo “imagen-1”). Ten en cuenta que los motores de búsqueda leen este texto.
- Elige bien el formato, tamaño y comprime tus imágenes. Utiliza herramientas online como squoosh.app o iloveimg.com (o un editor de imágenes como Photoshop si lo prefieres) para redimensionar las imágenes al tamaño que van a ocupar, elegir el formato adecuado y comprimir su peso. Este aspecto es crucial ya que influye directamente en la velocidad de carga de tu web.
- Utiliza los atributos “width” y “height” para decirle al navegador que reserve el espacio para la imagen. De esta manera evitas pequeños “saltos” visuales cuando la página se está cargando.
- Utiliza el “loading lazy” o carga diferida en las imágenes que puedas. Evítalo solo si las imágenes se encuentran “above the fold” (es decir, las ves al cargar la página sin hacer scroll). De esta manera no estás cargando inicialmente imágenes que el usuario todavía no está viendo porque no ha llegado a ellas a través del scroll.
