7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 1.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 The Classic Approach

If you've ever built a responsive website before, then I'm sure you've come across this problem. So you have this great image that's, is detailed, vibrant. It speaks a lot to your content and it looks great on like a really big screen. But when you see that image or that website on a mobile phone the image, you know, doesn't shrink, doesn't adapt to the width of the phone. So you get like a really small portion of it and you'll have to scroll to see it all. So how exactly do you fix this problem? Here we have a very simple page with two images, some headings and some paragraphs and the page looks something like this. So we have a very large image that you actually need to scroll to see it all. Same goes with this one here. Yeah, and then some text. And when we look at this on a large 1440p display for example, then we can see the entire image. But on this size, which is just 720p, we only see part of it. If we're gonna resize this to a mobile size, for example, 360 by 640, we'll have to scroll even further to get to the end of that image. So how exactly do you fix this? Well, the simple solution is to target the images and set max-width to 100% and then just to save the browser a little bit of computing add height: auto yourself. So now, if we refresh our page, you'll see that the images will resize automatically while keeping their ratio. Same goes for this one and as I decrease the size of my view port. Yeah, you can see the images are fluid and they scale nicely with my view port size. And this is actually the simplest solution and the solution that most people use when it comes to responsive images. Great. You’ve solved the responsive image problem, right? No, not really. [LAUGH] What you’ve done here is only, what only works as a short-term solution and it has two big problems. The first one is performance. Now, if we take a look at the page we've built, we're loading two images there and you can see the time it took for the browser to load those images. Of course, we can lower this wait by optimizing the images. Maybe choosing a different formats. Maybe making them smaller, but the truth is sometimes, we do actually need very big image. For example, for a hero shot or a background. Now you might be thinking, well, what's one megabyte if I'm on a wireless network, even on a mobile phone. Wireless networks usually have large bandwidth. So, 1 megabyte shouldn't be a problem. However, the problem becomes really obvious when you're on a mobile data plan. Depending on your carrier and your plan, you may or you may not have a fast connection. And even if you do have a fast connection, you still have to pay for that traffic. So when you download 1 megabyte now, 1 megabyte ten minutes later and so on. All of this adds up. So what you're doing here, basically is downloading a very large image, and then resizing it to fit your screen. You're downloading 1 megabyte, an image, that's 1 megabyte to fit in a space that a 100 kilobyte image would fit very well. So, as you can see, that's wasted bandwidth. Plus there's this thing called browser preloading. So let me talk a little bit about that. Your browser, when you access a webpage, needs to download HTML, CSS images scripts and so on and each browser has a parser. And that parser goes line by line on the HTML and whenever it finds a resource like an image or a script, it fires a request for downloading that resource from the server. The thing is when the browser finds a script, it stops everything until the script is downloaded and executed. That's why you always get recommendation of referencing the scripts in the footer or right before the end of the body tag after. All of the other content is finished downloading. Now when this happens when the browser stops while it is downloading a script the browser actually is very smart. It has a, a second power circle the preloaded, which scans the rest of the documents to find other potential resources the download. So, it's doing that so that when the first script finishes downloading and executing, the rest of the page is already downloaded and that improves with the loading time and this is a good thing. Right? It is a good thing, but also it has a drawback. And the drawback is it will download any images it finds at full size. It doesn't matter if you're resizing those images later in CSS and your only displaying them at 50%. Whatever image it finds, it will download it. And imagine you have a bunch of these images. Well, this this will actually impact the page loading time. So that's the problem that fluid images have from a performance point of view. The other problem refers to arc correction, so let's learn more about that.

Back to the top