First, though, let’s discuss our next optimization strategy: compression. Below, in the section on responsive images, I’ll share how we can leverage the tag to do this work for us. A desktop monitor, though, generally has a DPR of 1, necessitating a 500px wide image for a 500px container on the page.Īs you might imagine, managing images for different DPRs could quickly become complex and tedious. That means a 500px wide container on the page requires an image that’s 1,500px wide. For an iPhone 14, which has a DPR of 3, we would need to serve an image three times larger than its width on the page. Visit to see your current DPR.ĭPR is important to understand because it affects our Goldilocks principle. This ratio of physical pixels to CSS pixels is called the Device Pixel Ratio (DPR). However, each one of those pixels comprises three physical pixels. With high-density displays, more than one physical pixel on a device constitutes one CSS pixel.įor example, the iPhone 14 display is 390px wide. Depending on the device’s resolution, 500px isn’t always equal to 500px. (An image that’s too small will appear blurry and pixelated.)Ī wrench in the machine here is that not all displays are alike. We have a Goldilocks principle here: serve an image that’s just right, neither too big nor too small. If the width were only 500px, then the optimal image size would be 500px. For example, our resized image that’s 1,500px wide is perfect for a webpage where it’ll appear 1,500px wide. Generally, you want to serve an image that is equal in size to how it’s going to appear in the browser. Ensuring that you’re serving the right-sized image is an essential first step in optimizing images for the mobile browser.Ĭheck out the demo to compare the quality of the images. Open the image in Preview (on a Mac) and adjust the size, or use PowerToys on Windows to do it right from File Explorer.Īny way you want to do it, the idea is the same: make the image smaller than before.īy resizing our cactus image to a width of 1,500px, we reduce our load time to about 47 seconds. Most image editors allow you to resize your images. Let’s get to optimizing by resizing the image to something more sensible. Given that an iPhone is only 390px wide, an image that’s 4,000 plus pixels seems just a bit overkill. While that might yield a nice print, loading this image on a mobile device on a fast 3G connection takes over 53 seconds. The image comes from Unsplash, an amazing resource for finding high-quality images that are free to use.ĭownloading this image from Unsplash yields a massive 4,678 by 3,175px JPEG that is 3MB in size. Choosing Fast 3G, for example, will cause images to take considerably longer to load and accentuate the performance benefits from our optimizations.īefore getting into those strategies, let’s establish a baseline that we can use to measure our progress.īehold this beautiful image of saguaro cacti by Dulcey Lima. To exaggerate the results, use your dev tools to throttle your connection. The demo gives an overview of image loading times and file sizes, as well as lets you compare the fidelity of different images. To help us visualize optimization performance, I created a demo that compares the strategies we’re going to discuss. I’ll explain the concepts, techniques, and tools you need to know to be an image optimization pro. The main idea is simple: reduce image size as much as possible without sacrificing its quality. In this tutorial, we’ll walk through the fundamental strategies for optimizing images for mobile browsers. It’s the best target if you want to max out your site’s performance, improve user experience, and boost your site’s search engine optimization. Optimizing images, then, is a no-brainer. No one ever said, “Please make me wait longer.” But if you’re not optimizing the images on your website, that’s exactly what you’re doing: you’re making your users needlessly wait and wasting their mobile data along the way.Īdding fuel to the fire, the HTTP Archive’s 2022 Almanac found that images are the most significant contributor to a webpage’s weight, accounting for around half its size. ❤️ Optimizing images for mobile browsers with a UX mindset I love building websites and apps with JavaScript, CSS, and HTML - and sharing what I learn. Ryan Feigenbaum Follow Developer Experience Engineer at the open source publishing platform Ghost.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |