There are a few descriptors and attributes you can apply to your srcset to ensure browsers read the specific image you want depending on the situation – see this page for an extensive breakdown. If srcset is not supported in the browser, the browser will default to small.jpg.Deliver small.jpg to visitors with a DPR of 1.Deliver large.jpg to visitors with a DPR of 2.This code snippet translates into the following results: This is useful for responsive design when you have multiple images to deliver across several devices and dimensions.įor example, let’s say you want to send a high-resolution image to only those users that have high-resolution screens, as determined by the Device pixel ratio (DPR). ![]() The srcset HTML tag provides the browser with variations of an image (including a fallback image) and instructs the browser to use specific images depending on the situation.Įssentially, you create various sizes of your image, and then utilize the srcset tag to define when the images get served. You can use srcset to easily implement and automate the use of responsive images in your domain. Properly size your images using our guide – How to Optimize Images: A Practical Guide.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |