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.3 Using Multiple Image Formats

In the examples you’ve seen so far, only a single image format has been used: JPEG, exported at 100% quality.

Let’s experiment with some different formats.

Related Links

3.3 Using Multiple Image Formats

In the examples you saw so far, a single image format was used, JPEG at 100% quality. Now, this is overkill. And I did that on purpose. There's very little difference between 100% and 90% or 80% on JPEGs, especially on the web. But the thing is 80% quality will give you a much, much lower file size. For example, the image on the left is 100% quality and 873 kilobytes, while the one on the right is 80% and 202 kilobytes. To me, they look exactly the same, but the 80% one is four times smaller in size. So, you gotta be careful with how you export your images. I deliberately used 100% just to demonstrate how large regular images can get. And how different they are in file size when you play around with the export settings. Now, the picture element gives us the option of loading different image formats, if the browser supports them. And, a very good example of this would be a logo. Where you could load an SVG for the browsers that support it. Or a JPEG or a PNG if you want transparency. And you can do that with the following code. This is a good approach. SVGs are resolution independent, so you won't have to load different images on high DPI screens. Plus, if the user increases the font size, your logo will keep its sharpness. Now, there are a few image formats that are starting to get used more and more often. Two of these are WebP and JPEG XR. The WebP format is developed by Google. And it's currently supported in Chrome and Opera. JPEG XR stands for JPEG extended range. And its only compatible with Windows Vista plus and Internet Explorer 7 and up. Now the webP format is very interesting. It promises very good quality and very low file size. And so far it delivers. The image on the left side is a 100% quality JPEG, while the one on the right is a 100% quality WebP. The JPEG is 873 kilobytes, and the WebP is 371 kilobytes. And to me, they look exactly the same. Now, let's apply the WebP format to our page and see the results. In order to apply the new format, we need to use the picture element to detect it. So, if the browser supports it, we can have a special source for it. If it doesn't, well, we'll jut fall back to the JPEG versions. So instead of this IMG here, we're going to use the picture. Now these are JPEGs for the WebP. We'll simply copy this source. Paste it here. And we'll add another attribute that's type. And we'll set that to image/webp. And then the source set will change these three from JPEG to WebP. I've already exported these images. So, now we'll take this and apply it to all of the other images. Okay, so now let's have a look. We're using Chrome here because Chrome and Opera are currently the only browsers that will render WebP. As you can see, the images look very good. No differences in quality there, compared to our JPEGs here. So, let's see about performance now. In here, we're loading all the large JPEG versions. In here, again, we're loading the large versions, but this time, WebP. So we have 1.6 megabytes and 3.8 megabytes on the JPEG versions. Big, big difference. So, as you can see, even the image sizes, if we compare the same image with different formats, 854 kilobytes and 363. And the quality, you know, it's the same. I, I don't see any differences from the WebP version to this one, the JPEG version. Now compare what was it? 1.6, right? 1.6. On here with our baseline, which is 6.8, I believe. Yes, 6.8. And you'll see that it's a massive, massive difference. And that's how you apply different image formats using the picture elements. Now, we've seen how easy it is to use and implement responsive images using picture source set sizes and so on. But is it that easy? I mean what about browser support? Let's find out

Back to the top