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

3.7 Performance Considerations

Let’s take a step back—why are we trying to figure out solutions to responsive images? I mean, why should we care about loading smaller images on mobile devices?

The main reason is performance, and in this lesson we’ll talk about optimisation.

Related Links

3.7 Performance Considerations

Now, why are we trying to figure out responsive images? I mean, why should we care about loading smaller images on mobile devices? Sure, art direction plays a huge role, but the main reason is performance. And in this lesson, we'll talk about optimization. Here's the thing. No matter how great of a solution you find for responsive images, the place you should really start at is optimizing them. So, for example, don't export JPGs at 100% quality like I did in the past few lessons. I only did that to prove a point. Instead, export them at 80 or 90%, and also be mindful of the size you're exporting at. I mean, if the maximum an image is gonna get is 1500 pixels, why do you export it at 3000 pixels? It doesn't make any sense, right? So, before applying the picture element or any kind of third-party app, try to reduce the file size first and take it from there. Now, there are a few ways of doing that and it depends on the image you have so, if you have PNGs or JPGs you can use an online tool called TinyPNG. And with this, you can drag and drop a bunch of images, and in the end, you'll get the same quality but lower file size, and that's pretty cool. For other formats, you know simply Google GIF image file size reduction or something similar. There are a bunch of free tools out there. Apart from this, the guys at Filimon Group raised an interesting question, and it goes something like this. Will a very large image at a very low quality be better than a normal image at a higher quality? And this is very interesting because consider you have two images, basically right? A very big one, low quality, and a much smaller one, right? But the thing is, if you resize the big one to match the, the size of the, of the normal one they'll look the same. So, take a look at this example. The image on the left is 600 by 400 pixels. This plate at its default size. It's a JPG exported from Photoshop at 90% quality, and it weighs 168 kilobytes. The one on the right is actually scaled down from 1500 pixels wide. The difference is, that one is exported at 0% quality, and it weighs just 65 kilobytes, so almost three times smaller in size. The thing is, these two look exactly the same. Maybe, if you look really close, you can spot some minor differences, but on a first glance, you can't see any. And the cool thing is, on retina displays, the large image will look better because it's more than twice the size of the regular one. And all of that with more than 200% file size reduction, I'd say that's pretty impressive. Now, is this a solution to our problem? I don't know, probably not, because it works on simply images but it doesn't address the art correction problem. We're only dealing with resizing here, not cropping. So, probably not good for, if you want to pursue that direction, but it's definitely something worth exploring. Finally, I'd like to tell you about a technique called lazyLoading. You might have heard about this before. And this technique is most effective on websites that have the images, most of the images, below the fold, like a blog index or a portfolio website. Below the fold means content that you can see after you scroll down, and the technique is based on this. The images positioned below the fold will only be loaded when the user scrolls to them. That way, the page loads very, very fast because it's not busy downloading images that might not ever be seen by the user. A tool you can use for this is called lazySizes. It's written in JavaScript. Real easy to use, and I encourage you to use it in your own projects. There are a few more out there, just Google lazyLoading Images and you should get a few results. And, that's it for responsive images. Now, please join me in the next lesson for the conclusion and a small assignment. I'll see you there.

Back to the top