-
-
Save hsanchez7934/d186dd17f175e258e478c7be67299fb0 to your computer and use it in GitHub Desktop.
Responsive Image Handling
srcset defines the set of images we will allow the browser to choose between, and what size each image is. Before each comma, we write:
An image filename (puppy-480w.jpg.)
A space.
The image’s inherent width in pixels (480w) — note that this uses the w unit, not px as you might expect. This is the image’s real size, which can be found by inspecting the image file on your computer (for example on a Mac you can select the image in Finder, and press Cmd + I to bring up the info screen.)
sizes defines a set of media conditions (e.g. screen widths) and indicates what image size would be best to choose, when certain media conditions are true — these are the hints we talked about earlier. In this case, before each comma we write:
a media condition ((max-width:480px)) - In this case, we are saying “when the viewport width is 480 pixels or less”.
A space.
The width of the slot the image will fill when the media condition is true (440px.)
Image Sprite
An image sprite is a collection of images put into a single image.
A web page with many images can take a long time to load and generates multiple server requests.
Using image sprites will reduce the number of server requests and save bandwidth.
https://css-tricks.com/css-sprites/