Cómo poner una imagen en html

HTML Markup Html5 Lenguaje de Markup Html

Las imágenes dentro de un sitio web son fundamentales para enriquecerlo y hacer activa la interacción con el usuario, haciendo más atractiva la página. En los sencillos pasos que vamos a describir, aprenderemos cómo insertar imágenes en html y cómo mejorar la gestión y calidad de la imagen en el lenguaje HTML, para tener el máximo rendimiento posible en tu aplicación web.

Pero volvamos atrás, ¿qué es html?

Qué es el código html

HTML es un lenguaje de marcas, por lo tanto, no se identifica como un lenguaje de programación. El acrónimo html significa Hypertext Mark-up Language y se utiliza para crear documentos de hipertexto, las páginas que todos vemos en la web. Compuesto por etiquetas html y atributos, se ha utilizado para crear la estructura de todas las páginas web desde los años 90.

Cómo poner una imagen en html

La etiquetas h tml es exactamente lo que nos permitirá insertar la imagen en nuestra página web, pero el lenguaje HTML proporciona varias soluciones para la gestión de imágenes. Por ejemplo:

<img> usando src
<img> usando srcset
<picture> con más <source> y srcset
<img> con solo src y una Image Manager (es una solución muy práctica)

Supongamos que tenemos un sitio web que está simplemente cargando una imagen desde un dominio. Veamos cómo insertar imágenes en HTML:

<!DOCTYPE html>
 <html>
 <body>
   <img 
     src="https://aulab.it/img/aulab-hackademy-header.webp"
     alt="PC portátil sobre un fondo amarillo y gris."
   >
 </body>
</html>

Un documento HTML con una sola etiqueta de imagen tiene un atributo src y alt. Este es el primer paso para cargar y mostrar una imagen en una página web, ahora el objetivo es optimizar esta imagen.

Step 1: optimizar y hacer el “resize” de la imagen

El primer paso es bastante simple. Las imágenes de tu página html deben ser tan grandes como sea necesario (incluso el gusto personal). Si tu imagen es de 600x400 píxeles, es inútil que los usuarios descarguen una imagen de 1920x1080 píxeles. Muchos sitios web no necesitan la mayor calidad posible. La compresión de imágenes es útil en estas situaciones. Para la compresión, puedes usar Squoosh, una aplicación web que permite cambiar rápidamente el resize de una imagen a tu elección.

Step 2: crear imágenes responsive

El atributo srcset en el lenguaje HTML es crucial para esta tarea. Nos permite definir múltiples orígenes (diferentes) para la imagen, en función de ciertas características, como el ancho del dispositivo, por ejemplo.

<!DOCTYPE html>
 <html>

 <body>
   <img
     srcset="
       https://aulab.it/img/aulab-hackademy-header-1080x540.webp 1080w,
       https://aulab.it/img/aulab-hackademy-header-480x240.webp 480w,
       https://aulab.it/img/aulab-hackademy-header-200x100.webp 200w,
       https://aulab.it/img/aulab-hackademy-header-768x384.webp 768w,
       https://aulab.it/img/aulab-hackademy-header-1080x540.webp 1200w"
     src="https://aulab.it/img/aulab-hackademy-header.webp"
     alt="PC portátil sobre un fondo amarillo y gris."
   >
 </body>
 </html>

¡Hecho! Cinco imágenes de diferentes tamaños definiendo los anchos correspondientes. Visualmente no hay cambios, pero la imagen se adaptará al tamaño de las pantallas.

Cuanto menor sea el tamaño, más rápido se carga y envía la imagen. Los atributos srcset en el lenguaje HTML ayudan a cambiar el tamaño de la imagen incluso cuando se carga en una pantalla relativamente pequeña y viceversa.

Este método mejora enormemente la experiencia del usuario, ahorrando ancho de banda y mejorando no solo el rendimiento visual sino también el de carga.

Step 3: utilizar formatos de imágenes modernos

La imagen que estamos cargando está en formato WebP, ahora muy utilizado en sitios web, en detrimento de los más populares JPG, PNG o GIF. Estos formatos proporcionan tasas de compresión mucho más altas sin una gran pérdida de datos, lo que significa que podemos ver la misma imagen en un tamaño de archivo mucho más pequeño.

El lenguaje HTML nos pone a disposición el elemento HTML <picture>.

Similar al atributo srcset, picture permite definir diferentes fuentes de imágenes a configurar según las características del dispositivo.

Una cosa que distingue el elemento picture del atributo srcset es que podemos elegir como target diversos tipos mime.

Añadimos un elemento imagen a nuestro ejemplo que incluya los formatos AVIF si el navegador los soporta.

<!DOCTYPE html>
 <html>
 <body>
   <picture>
     <source
       type="image/avif"
       srcset="
       https://aulab.it/img/aulab-hackademy-header-1080x540.webp 1080w,
       https://aulab.it/img/aulab-hackademy-header-480x240.webp 480w,
       https://aulab.it/img/aulab-hackademy-header-200x100.webp 200w,
       https://aulab.it/img/aulab-hackademy-header-768x384.webp 768w,
       https://aulab.it/img/aulab-hackademy-header-1080x540.webp 1200w"
     >
 <img 
          src="https://aulab.it/img/aulab-hackademy-header.webp"
          alt="PC portátil sobre un fondo amarillo y gris."
     >
   </picture>
 </body>
 </html>

De esta forma el formato que mostrará el usuario será AVIF, más moderno, más comprimido, pero con el máximo rendimiento gracias a las herramientas que proporciona nuestro lenguaje de markup favorito.

Step 5: simplificar los formatos de imágenes más modernos

Para simplificar, tenemos la intención de utilizar una versión diferente de la imagen cargada para cada formato y ancho según el dispositivo de destino. Si bien los navegadores brindan funciones para generar mejores imágenes y una mejor experiencia de usuario, esto tiene un costo para el trabajo de los desarrolladores.

Podríamos automatizar el proceso cuando se cargan las imágenes para generar los diferentes formatos y tamaños, y luego almacenar esos detalles en una base de datos. Hay herramientas que pueden ayudar, como sharp, pero aún así son caras.

Se puede usar Akamai Image and Video Manager, aunque también hay otras app que realizan el mismo tipo de trabajo. El objetivo principal es ofrecer la mejor imagen para el usuario sin volver locos a los desarrolladores.

Usando Image Manager es posible crear una instancia de la imagen que queremos cargar modificando la URL y ahorrando el uso de código superfluo como bloquear la etiqueta <picture>.

Entonces la URL se convertirá en esto " https://images.aulab.it/img/aulab-hackademy-header.webp ".

Hemos visto cómo de diferentes formas es posible gestionar y mejorar la calidad de las imágenes de una página web gracias a HTML. Comenzando con la etiqueta de imagen html img, descubriendo gradualmente los diferentes atributos que pueden hacer que la experiencia del usuario sea mejor y más inmersiva. Gracias al Image Manager, todas las etiquetas y atributos html se reemplazan y es un gran ahorro para el desarrollador web.

El lenguaje de markup es también esto, exploración y oportunidad de tener diferentes caminos por recorrer. Por supuesto, siempre es mejor elegir la solución más rápida y económica para un desarrollador web.

Si este pequeño tutorial sobre como añadir imágenes en html y como optimizarlas cuando quieras crear un sitio web o una página simple te ha gustado o te ha creado curiosidad, no puedes perderte nuestra guía html y css en español, con la que podrás comenzar a dominar estos dos lenguajes y dar tus primeros pasos para convertirte en programador. ¿A qué esperas?

Conviértete en Desarrollador weben 6 meses

Descubre el bootcamp de programación Hackademy

Programa Completo