Responsive images with the image-set() CSS function

Responsive Images

Resoluton Switching

The browser automatically selects an image from the image set whose resolution is suitable for the resolution of the users screen.

Photo by Markus Spiske on Unsplash

Art Direction

landscape view of a woman standing in front of a multi-colored wall
On large screens, the browser displays the normal image in a landscaped orientation. On mid screens, the image is cropped a little on the sides, while on small screens the image is cropped into a portrait orientation.

Photo by Tyler Nix on Unsplash