![]() ![]() This approach is hassle-free - and yet the most precise one. Use TwicPics for hands-free and pixel-perfect optimization of responsive images. ![]() This complexity might increase exponentially as you also need to comply with the other best practices (conditional delivery in next-gen formats, etc), and art direction.īelow we will propose an approach that sets the developers free from this error-prone and time-consuming task. The more variants you specify, the more efficient the responsive image optimization would be - but this comes at a cost of additional complexity. ![]() This optimization technique is described here. Such native responsive images are best for images above the fold (so-called "critical images"). You could use the srcset and sizes attributes of the tag to let the browser choose the most appropriate version of the responsive image to load. There are multiple ways to implement such responsive image optimization. Your goal is to make the intrinsic size of the image version to be loaded as close as possible to the rendered size, corrected for the DPR. Ideally, you’d need to prepare for the modern diversity of screens with the resolution ranging from 320px to 4K, as well as varying density pixel ratios. The solution to the “properly size images” problem lies in serving differently sized versions of the image for mobiles, tablets, and desktops. More generally, the “Properly size images” warning is issued each time Google Lighthouse detects a discrepancy between the maximum recommended and the intrinsic sizes of the image of over 4%. The audit reports the culprit image weight as 421.3 KiB, out of which at least 317.6 KiB could be saved by serving an adequately-sized version to the mobile devices. Other things being equal, this difference in pixel count makes the larger image 3.1 times heavier. This 1904 x 1904 pixels intrinsic size of the category image is way larger than the maximum recommended size of 1080 x 1080 pixels. The rendered size 360 x 360 pixels (marked with red underline), and the intrinsic size is 1904 x 1904 pixels (yellow underline).Hover on the src attribute of the image to see its rendered and intrinsic sizes on this device) The right part displays the page’s HTML code.You see the Chrome Developer tools interface where you can check how the page renders on different devices. ![]() Right click on the image you want to check.It makes sense to cap the adjustment for density pixel ratio to DPR 2).Ī quick look on the page with Chrome Developer Tools shows that Jimmy Choo makes mobile users load a 1904 x 1904 pixels category image. Over 90% of humans don’t see a difference between DPR 3 and DPR 2 on mobiles. (Please note that in practice, even this “maximum recommended size” might be overshot. Therefore, a 1080 x 1080 pixels resolution is the maximum recommended for a category image for Moto G4. Anything above this resolution would waste bandwidth without improving quality. The DPR 3 screen has enough physical pixels to display fine detail of an image dimensioned up to 3 times the rendered size. This is called the image’s rendered size. On a Moto G4 the category image occupies the space of 360 x 360 logical pixels. Our page’s CSS context implies that on mobile devices each category image occupies 100% of the viewport with a 1:1 aspect ratio. We will take the first one as an example for the rest of this guide. In our case, the tool signals a problem with the four category images. The resulting visual quality might suffer, as the resizing algorithms of the browsers are usually optimized for speed at the detriment of quality.The browser would spend additional time to resize the image (the lag depends on the CPU power of the user’s device).The image takes a longer time to load, as it is too heavy.The “Properly size images” warning tells that some of the page’s images are served with significantly larger dimensions than needed for rendering on the user’s screen. But qualitatively, this relatively high estimate is a strong indication that this aspect is the top priority to improve the page’s user experience. The tool’s estimation of 5.7 seconds of potential savings of load time should be taken with a grain of salt. According to Google Lighthouse, the greatest potential improvement is fixing the “properly size images” problem. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |