![]() ![]() Additionally, RespImageLint is a helpful bookmarklet for identifying the optimal srcset and sizes values for your images. With responsive images, you generate multiple versions of each image, and then specify which version to use in your HTML or CSS using media queries, viewport dimensions, and so on. The main strategy for serving appropriately sized images is called "responsive images". Anything larger than that just results in wasted bytes and slows down page load time. Ideally, your page should never serve images that are larger than the version that's rendered on the user's screen. If the rendered size is at least 4KiB smaller than the actual size, then the image fails the audit. The rendered size also accounts for device pixel ratio. ![]() Resize these images to save data and improve page load time: # How Lighthouse calculates oversized imagesįor each image on the page, Lighthouse compares the size of the rendered image against the size of the actual image. The Opportunities section of your Lighthouse report lists all images in your page that aren't appropriately sized, along with the potential savings in kibibytes (KiB). ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |