Códigos HTML para Imágenes

HTML5 generó una total revolución en el uso del código para inserción de las imágenes en un sitio web. Antes, las imágenes eran fijas y no respondían a los estándares responsive o debían estar acompañadas de una cantidad de etiquetas, scripts o códigos de apoyo para que se adapten al tipo de pantalla o dispositivo que está usando el usuario. Sin embargo, hoy en día, el nuevo elemento <picture> de HTML5 permite describir con todo detalle como deben cargarse las imágenes en el sitio web, adaptándose de manera automática al proceso responsive.

Anteriormente, el código único y más simple para insertar una imagen era:

CODIGO ANTIGÜO <img src="images/imagen-unica.jpg" alt="descripción">

Con HTML5, esta sintaxis cambia con el uso del elemento <picture> en el que se debe definir todas las imágenes responsive que colocaremos como disponibles y que serán seleccionadas por el navegador según el dispositivo o tamaño de la pantalla que tenga el usuario. Ahora, el código es el siguiente: 

CÓDIGO SIMPLE
inserción de una imagen cualquiera

CÓDIGO RESPONSIVE
inserción de imágenes según tamaño de la pantalla del dispositivo del usuario.

CÓDIGO SIMPLE  <picture> <img  src="images/imagen-pequena.jpg" alt="descripción"> </picture> CÓDIGO RESPONSIVE  <picture> <source  media="(min-width: 650px)" srcset="images/imagen-larga.jpg">  <source  media="(min-width: 465px)" srcset="images/imagen-mediana.jpg">  <img  src="images/imagen-pequena.jpg" alt="descripción"> </picture>

Sin embargo, HTML5 sigue unido con el estilo de la página con los archivos CSS, así que debemos agregar unas líneas de código al estilo, sea dentro de la página o en el archivo de estilo principal .css, según nuestra estructura y diseño, de la siguiente manera:

Estilo incluido en el archivo .html <style> img { display: block; margin: 0 auto; } </style> Estilo para incluir en el archivo .css (main.css) (Sección: Author's custom styles) .img { display: block; margin: 0 auto; }

Con este elemento estamos listos para incluir imágenes responsive dentro de nuestro sitio web, con la diferencia de que no debemos tener solo una imagen única, sino varias que se adapten al diseño que podrá ser visualizado en todos los dispositivos. 

Tomado de: http://hoth.fatla.org/2018/mod/resource/view.php?id=45 en fecha 17/04/2018