En esta publicación, le presentaré el uso de la etiqueta img de manera eficiente y eficaz, ¿por qué de manera eficiente? ¿Porque funciona y por qué eficaz? Debido a que el uso de los recursos se optimizan en función del dispositivo que muestra nuestro contenido, profundicemos en la acción:
Primero que todo, gracias a Kevin Powell por el video del final de la publicación que me inspiró.
Este es mi resumen:
Les hablaré sobre los atributos srcset y sizes y cómo usarlos:
comencemos con src-set, de acuerdo con MDN Mozzilla Webdocs:
Cuando usamos el atributo srcset, aceptará tantos argumentos como imágenes en diferentes densidades que hayas separado por comas, pero ¿cómo le dices al navegador cuál de ellos cargará? fácil, puede usar 2 enfoques, uno es usar el valor de relación de píxeles popular que puede ser 2x 3x como este:
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg"
srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-1000.jpg 2x,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-1500.jpg 3x" />
Recuerde establecer el atributo src original para permitir que los navegadores antiguos rendericen una imagen almenos, pero para una recomendación, esta imagen debe ser la más pequeña en calidad porque si es un navegador más antiguo, tal vez sea una pantalla más antigua;), profundicemos en ello:
Vemos 3 fuentes basadas en la calidad img y por supuesto el peso img después de estas fuentes, definimos la densidad de píxeles de la pantalla, quién renderizará la imagen y el navegador hará el cálculo para renderizar la mejor imagen en cada situación.
Pero hay otro método que en mi opinión es mejor que la relación de píxeles y el método consiste en definir el ancho de la imagen src, la única diferencia es que en lugar de usar 2x y 3x usamos la cantidad de ancho de píxel seguido del w char así:
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg"
srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg 500w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-1000.jpg 1000w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-1500.jpg 1500w" />
Con esta información, el navegador detectará la imagen en función de su ancho, dividiendo el ancho real de la pantalla con la proporción de píxeles y aproximando este cálculo al tamaño de la imagen del dispositivo.
Pero eso no es todo, porque el ancho del navegador no siempre es el tamaño de la imagen y puedes tener un mejor rendimiento si le dices al navegador exactamente cuánto del ancho del browser tiene que cubrir esta imagen, para hacer eso debe asignar un atributo adicional al atributo sizes:
attr-sizes
Contiene un conjunto de tamaños de fuente separados por comas, que pueden indicarle cuánto del ancho de la ventana gráfica estará ocupada con la imagen en cada punto de interrupción de las media queries CSS, este ancho debe definirse con dos parámetros, la media query utilizada en el ejemplo de imagen (min-width: 600px) (esto se pone como un ejemplo de lo que sucede si la imagen tiene este min-width) y el ancho de la imagen que puede ser el 50% del viewport representado por 50vw y puedes separe cada consulta de medios + ancho con comas dejando la última (el mínimo en este caso sin consulta de medios para usar como predeterminado. Aquí hay un ejemplo completo:
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg"
srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg 500w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-1000.jpg 1000w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-1500.jpg 1500w"
sizes="(min-width: 600px) 50vw,
100vw"
alt="alternative text">
aquí está el video que inspira este post gracias a Kevin Powell
y el ejemplo funcionando