Una guía para principiantes sobre imágenes receptivas en HTML

Una imagen receptiva es una imagen que se adapta a las diferentes características del dispositivo. Cuando se hace correctamente, las imágenes receptivas pueden mejorar el rendimiento y la experiencia del usuario de un sitio.

Este artículo explora cómo puede crear imágenes receptivas en HTML usando srcset y el elemento de imagen.

¿Por qué debería usar imágenes receptivas?

Cuando los ingenieros de software estaban creando la web, no consideraron cómo los navegadores manejarían las imágenes receptivas. Después de todo, los usuarios solo accedían a la web desde computadoras de escritorio o portátiles. Por supuesto, eso no es cierto hoy en día.

De acuerdo a estatista, más del 90 por ciento de la población mundial de Internet se conecta a través de su teléfono móvil. La mayoría de las páginas web en Internet contienen imágenes y estas imágenes son una de las métricas utilizadas para medir el rendimiento web. Para mejorar el rendimiento, debe optimizar sus imágenes haciéndolas receptivas.

Cómo crear imágenes receptivas en HTML

Puede acercarse a las imágenes receptivas desde dos ángulos, ya sea sirviendo la misma imagen con diferentes tamaños o sirviendo diferentes imágenes de acuerdo con las características de visualización. podrías usar o. Estas dos opciones manejan las imágenes receptivas de manera diferente, pero todas muestran una imagen de alternativas dadas según las reglas establecidas.

Relacionados: Cómo hacer que su sitio web sea receptivo e interactivo con CSS y JavaScript

Usando srcset

El estandar HTML solo le permite especificar un archivo de imagen. Si desea mostrar una imagen diferente según el tamaño del dispositivo, debe usar srcset.

Sintaxis:

srcset le permite proporcionar archivos fuente adicionales y el navegador elegirá la imagen que parezca óptima para ese tamaño de imagen.

 src="lindo-gato.jpg"
 alt="Un lindo gato">

srcset consta de tres partes: el nombre de archivo de la imagen que especifica la ruta a la imagen de origen, un espacio y el ancho intrínseco o real de la imagen.

Usando srcset Con tamaños

El problema con el uso srcset es que usted no tiene control sobre qué imagen elegirá mostrar el navegador. Combinatorio srcset con tamaños resuelve este problema. tamaños defina un conjunto de condiciones de medios que insinúen la imagen con el tamaño óptimo.

Ahora puede reescribir el etiqueta arriba de la siguiente manera.

tamaños = "(ancho máximo: 600px) 480px,
 800px"
 src="lindo-gato.jpg"
 alt="Un lindo gato">

tamaños se compone de una condición de medios, en este ejemplo es (ancho máximo: 600 px) que representa la ventana gráfica el ancho, el espacio y el ancho de la ranura (480 px) especificando el espacio que ocupará la imagen si la condición del medio es cierto.

Relacionados: Cómo usar consultas de medios en HTML y CSS para crear sitios web receptivos

Aquí, el navegador primero verificará el ancho del dispositivo y lo comparará con la condición del medio. Si la condición es verdadera, verificará el ancho de la ranura y cargará una imagen desde srcset con el mismo ancho o el siguiente más grande.

Tenga en cuenta que también está incluyendo origen que proporciona la imagen para recurrir a los navegadores que no son compatibles srcset y tamaños.

srcset también le permite servir imágenes en diferentes resoluciones usando descriptores x.

 src="lindo-gato-bajo.jpg"
 alt="Un lindo gato">

En este ejemplo, si el dispositivo tiene una resolución de dos píxeles de dispositivo por CSS o más, el navegador cargará la imagen cute-cat-high1.jpg.

Píxeles de hardware y software

El problema con esta solución es que las imágenes solo responden en términos de densidad de píxeles del dispositivo. Esta es la relación entre los píxeles de hardware y los píxeles de software o CSS. Un píxel de hardware es el punto real de luz en la pantalla, mientras que el píxel de software o píxel CSS es una unidad de medida. La densidad de píxeles determina la resolución del dispositivo.

Al renderizar imágenes receptivas, no solo considere la resolución; el tamaño de la pantalla también es importante. De lo contrario, podría terminar cargando innecesariamente imágenes grandes o demasiado pixeladas.

 src="lindo-gato-bajo.jpg"
 alt="Un lindo gato">

Utilizando

es un elemento HTML que envuelve varios elementos que contienen diferentes archivos fuente y un elemento. Tiempo hace que las imágenes respondan mostrando diferentes tamaños de la misma imagen, le permite cambiar realmente la imagen que se muestra.

Sintaxis:

Considere una situación en la que tiene una gran imagen de paisaje. La imagen se muestra y se ve proporcional en una computadora de escritorio, pero se reduce significativamente en un dispositivo móvil, de modo que los elementos de la imagen se vuelven diminutos. La imagen que no responde contribuye a una mala experiencia del usuario. Con puede decirle a su navegador que cambie a una imagen de retrato de primer plano cuando esté en el móvil.

Como en el primer acercamiento, contiene un atributo de medios que puede usar para proporcionar la condición de medios. Por ejemplo, el navegador mostrará "cute-cat-480w.jpg" si el ancho de la ventana gráfica es de 639 px o menos. los srcset contiene la ruta del archivo de imagen que desea mostrar y origen especifica la imagen predeterminada.

Relacionados: 7 nuevas características de CSS para hacer un sitio web receptivo

Alternativa para el formato de imagen WebP

otra cosa que se maneja bien proporciona una alternativa para los formatos de imagen modernos como WebP. Las imágenes WebP tienen un alto rendimiento, son pequeñas y ofrecen una experiencia web rápida. Por lo tanto, puede decidir utilizarlos en sus sitios. Un desafío que puede experimentar es que no todos los navegadores admiten imágenes WebP. Con, no experimenta este problema ya que su navegador puede cargar una imagen alternativa si no es compatible con WebP.

¿Por qué crear imágenes receptivas en HTML y no en CSS?

CSS ofrece opciones robustas para manejar imágenes receptivas. Entonces, ¿por qué no usarlo? El navegador precarga imágenes antes de analizar CSS. Entonces, antes de que el JavaScript de su sitio detecte el ancho de la ventana gráfica para realizar los cambios apropiados en las imágenes, las imágenes originales ya se han precargado. Debido a esto, es mejor manejar imágenes receptivas usando HTML.

Apunte a la mejor calidad de imagen posible

Ha visto cómo puede crear imágenes receptivas en HTML usando > y en este articulo. La entrega de imágenes receptivas generalmente implica considerar el tamaño de la imagen y la resolución de la imagen en relación con el tamaño de la pantalla. Si se hace mal, la calidad de la imagen puede verse afectada. Asegúrese de elegir una imagen que proporcione una usabilidad óptima utilizando la menor cantidad de recursos.

Principios de diseño web receptivo

Los diseñadores web han defendido el diseño receptivo durante años, pero ¿qué es y cómo puede producir páginas web superiores?

Leer siguiente

Sobre el Autor