You can see the styles that control the background image in style. This means that the same image background is being used for all screen sizes. Resize the browser window and notice that the Network Log isn't showing any new requests being made by the page. You'll see that the only image that's being requested is background-desktop.jpg, which has a size of 1006KB: Alternatively, open File Explorer, select any two images, right-click on them, click Resize pictures, then click on the gear icon in the bottom-left corner of the dialog box to access Image Resizer settings. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.Ĭheck out Inspect Network Activity With Chrome DevTools if you need more help with DevTools. Launch PowerToys from your desktop or Start menu, scroll down the General settings options, and click on Image Resizer.Open the unoptimized demo in a new Chrome tab.Understand responsive background images #įirst, analyze the network traffic of the unoptimized demo: You'll just need to map the Chrome DevTools screenshots in this guide back to the relevant features in your browser of choice. You can use another browser's DevTools instead if you prefer. This guide assumes that you're familiar with Chrome DevTools. This guide shows you how to use media queries to send images that are only as large as they need to be, a technique commonly known as responsive images. Using media queries is a popular technique for delivering tailored stylesheets and assets to different screens to reduce the amount of data transferred to users and improve page load performance. Many sites request heavy resources, like images, that are not optimized for certain screens, and send large CSS files containing styles that some devices will never use. Effects on Largest Contentful Paint (LCP). Understand responsive background images.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |