¿Qué es un atributo srcset en la etiqueta IMG y cómo usarlo?

Quiero saber cómo podría comenzar a usar el atributo HTML srcset img en mis aplicaciones móviles. O ¿Hay algún otro complemento jQuery que me ayude a resolver el problema de resolución de imagen?

 Banner Image 

En resumen, Srcset es un nuevo atributo que le permite especificar diferentes tipos de imágenes para diferentes tamaños de pantalla / orientación / tipos de visualización. El uso es realmente simple, solo proporciona una gran cantidad de imágenes diferentes que las separan con una coma como esta: image . Aquí hay un ejemplo: srcset="https://stackoverflow.com/questions/19634463/what-is-an-srcset-attribute-in-img-tag-and-how-to-use-it/image.jpg 160w, image2.jpg 320w, image3.jpg 2x"


Esta es una respuesta más larga que explica las cosas con más detalle.

Diferencia entre srcset y la imagen . Tanto la srcset como la picture hacen aproximadamente las mismas cosas, pero hay una diferencia sutil: la picture dicta qué imagen debe usar el navegador, mientras que srcset le da al navegador una opción. Se pueden usar muchas cosas para seleccionar esta opción, como el tamaño de la ventana gráfica, las preferencias de los usuarios, las condiciones de la red, etc. El soporte para srcset es bastante bueno y casi todos los navegadores actuales lo soportan más o menos. La situación con un elemento de picture es un poco peor .

Los descriptores son solo una forma de mostrar qué tipo de imagen se oculta detrás del recurso. Hay varios tipos de descripciones:

  • descriptor de densidad . srcset="https://stackoverflow.com/questions/19634463/what-is-an-srcset-attribute-in-img-tag-and-how-to-use-it/image.jpg, image-2X.jpg 2x" Los valores de densidad de visualización (1x, 2x, etc.) se conocen como descriptores de densidad de visualización. Si no se proporciona un descriptor de densidad de visualización, se supone que es 1x. Buena variante para apuntar a la retina.
  • descriptor de ancho srcset="image-240.jpg 240w, image-640.jpg 640w" . Estoy seguro de que esto se explica por sí mismo. El único problema es que, por sí solo, el descriptor de ancho no es realmente útil. ¿Por qué? leer aquí
  • descriptor de tamaño , que solo tiene sentido si usa el descriptor de ancho. srcset="image-160.jpg 160w, image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w" sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"> . Las instrucciones para el navegador serían las siguientes: (max-width: 480px) 100vw : si la ventana (max-width: 480px) 100vw tiene 480 píxeles de ancho o menos, la imagen será del 100% del ancho de la ventana gráfica. (max-width: 900px) 33vw : si la ventana (max-width: 900px) 33vw tiene 480 píxeles de ancho o menos, esta regla nunca se alcanzará debido a la condición del medio anterior. Y 254px es cuando no hay una condición de medios en la lista, se supone que la longitud es un valor predeterminado que se usa cuando no se cumple ninguna de las demás condiciones de medios.

Solo para completar, agregaremos aquí que hay un atributo image-set () para una imagen de fondo en CSS y algún otro enlace útil aquí

Aquí hay un buen artículo sobre el atributo srcset y cómo usarlo. srcet permite declarar un conjunto de imágenes que se mostrarán en diferentes tamaños de ventanas. Solo tiene que guardar e imagen con diferentes resoluciones, por ejemplo, banner-phone-HD.jpeg sería la resolución más alta.

Exmaple:

 my awesome image 

Lo anterior serviría banner-phone.jpeg a dispositivos con ancho de vista bajo 640px, banner-phone-HD.jpeg a dispositivos de alta resolución de pantalla pequeña, banner-HD.jpeg a dispositivos de alta definición con pantallas superiores a 640px, y https://stackoverflow.com/questions/19634463/what-is-an-srcset-attribute-in-img-tag-and-how-to-use-it/banner.jpeg a todo lo demás.

También hay otros métodos, como consultas de medios CSS, que puede usar para producir el mismo efecto.

No estoy al tanto de ningún complemento de JQuery que pueda ayudar con esto.