Cómo utilizar elementos de imagen HTML5 para procesar imágenes responsivas

El diseño de sitios web de ancho fijo y píxeles perfectos se está alejando cada vez más de nosotros. En un mundo de monitores de pantalla ancha, televisores con acceso a Internet, tabletas y teléfonos inteligentes de varios tamaños, nuestros diseños deben hacer frente a las posibilidades de anchos que van desde 320 px hasta 7680 px.

En este caso de resolución múltiple, necesitamos estirar o reducir la imagen para adaptarla a estos diferentes requisitos. Esto puede entenderse como el siguiente problema: cuando algo sale mal con los gráficos vectoriales, la gran mayoría de imágenes con píxeles específicos no cambiarán de ancho.

Entonces, ¿qué debemos hacer?

La solución más común con diferencia es

Como regla general, encontrarás los siguientes estilos CSS en cualquier sitio web responsivo:

1

img {

2

ancho máximo: 100

3

alto: automático;

4

}

Este código utiliza la configuración max-width: 100 para garantizar que la imagen nunca exceda el ancho de su contenedor principal. Si el ancho del contenedor principal se reduce a menos que el ancho de la imagen, la imagen también se reducirá. La configuración de altura: automática garantiza que cuando esto suceda, la imagen mantendrá su propia relación de aspecto.

Esto resuelve un aspecto del problema y nos permite mostrar la misma imagen en muchas situaciones diferentes. Sin embargo, esto no nos permite especificar diferentes imágenes para diferentes situaciones.

#p#Subtitle#e#

Nueva solución:

Este es un nuevo elemento en HTML5.

Si este elemento funciona junto con los elementos actuales y, mejorará enormemente el proceso de trabajo con imágenes responsivas. Le permite colocar múltiples etiquetas de origen para especificar diferentes nombres de archivos de imágenes, que a su vez se pueden cargar en diferentes condiciones.

Le permite cargar imágenes completamente diferentes en función de:

Características del medio como: altura, ancho y orientación de la ventana gráfica.

Densidad de píxeles

Esto a su vez significa que puedes:

Cargar el archivo con imágenes del tamaño adecuado para aprovechar al máximo el ancho de banda disponible.

Cargue imágenes recortadas de manera diferente y que tengan diferentes proporciones para adaptarse a los cambios de diseño en diferentes anchos.

Cargue una mayor densidad de píxeles para mostrar imágenes de mayor resolución.

Cómo funciona

Los pasos básicos de trabajo son los siguientes:

Crear etiquetas.

Crea un elemento dentro de estas etiquetas que desees utilizar para realizar cualquier función.

Agregue propiedades multimedia para incluir las propiedades que desee, como la altura, el ancho, la orientación, etc. actuales de la ventana gráfica.

Agregue el atributo srcset para que coincida con el nombre del archivo de imagen correspondiente que se cargará. Si desea proporcionar diferentes densidades de píxeles, como pantallas Retina, puede agregar nombres de archivos adicionales en el atributo srcset,

agregar un elemento alternativo. jpg

4

img srcset=

default.jpg

alt=

Mi imagen predeterminada

5

/imagen

Puedes notar que la sintaxis utilizada en las propiedades de medios es la misma que la que se usa al crear funciones de medios CSS. Puede utilizar los mismos atributos, lo que significa que puede consultar propiedades como ancho máximo, ancho mínimo, altura máxima, altura mínima, orientación, etc.

Además, puede utilizar estas propiedades para determinar la orientación del dispositivo para cargar versiones horizontales o verticales de la imagen, y puede mezclar y combinar propiedades de tamaño. Por ejemplo: