![]() ![]() By using imgix, we only have to store the original asset and then manipulate it on the fly as we’ve seen above. This gives you the best of both worlds: full resolution for devices that support it, without delivering more data than necessary to devices that won’t use it. Thus, the 400×300 image at dpr=2 will actually be a 800×600 pixel image. The dpr parameter instructs imgix to treat the w parameters as device independent pixels (also known as “CSS pixels”). You can see that we’ve applied dpr=1, dpr=2, and dpr=3 to our 1x, 2x, and 3x assets, respectively. imgix will automatically serve more pixels when given the dpr parameter. We get an image tag that serves out the best resolution for each device, based on its device-pixel-ratio (DPR). We want to serve this image at 400 pixels wide: See the Pen aOxmqg by imgix on CodePen. For this example, we will use the image located at: Using the imgix w and dpr URL parameters, we can simplify the amount of effort it takes to generate the srcset attributes on our images. With imgix, your entire image library is srcset-ready instantly. ![]() When dealing with a large library or with user-generated content, this is untenable. This can cause storage costs to balloon, and you may never serve every asset you generate. While this delivers the best assets to users, it moves the burden to the service to generate and store each version of every asset. It allows sites to serve 2x, 3x, or higher versions of images to modern devices with high-resolution displays. Srcset provides a simple way to specify different images for different device resolutions. The srcset attribute is one of the best ways to do so today. Serving correctly-sized images is important because it can minimize bytes transferred and CPU overhead. This tutorial covers the ins and outs of using the srcset attribute, and how imgix makes the process easier. Every byte you don’t have to transfer to serve your content means a leaner page and faster load times for your users. Because nearly 50% of a typical page’s weight is made up of images, optimizing images is extremely important for running a performant site.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |