2.1 Images in Web Design
They say a picture is worth a thousand words. I know it’s a cliche and this expression has been used a billion times before, but there’s a lot of truth in it.
Let’s see how images are used in web design.
1.Hello!2 lessons, 03:03
2.Working With Responsive Images5 lessons, 26:19
3.Existing Solutions7 lessons, 44:50
4.Conclusion1 lesson, 02:34
2.1 Images in Web Design
They say a picture is worth a thousand words. I know it's cliche by now and this expression has been used like, a billion times before but there is a lot of truth in it. Images can sometimes convey a message way better than words can. And this is true not only in web design, but everywhere around us, like a banner on the street, or an ad in a supermarket, or a picture of a dish in a restaurant menu, or even the picture of your loved ones that's sitting on your desk. Images are really powerful. That's why the majority of websites nowadays use images. In fact, there is a very accurate data that proves this. The data comes from a website called httparchive.org. And this is a really nice website that will give you an insight and a bunch of different statistics about the web. In our case we are interested in the images or the image usage more specifically, so let's go to stats and let's compare, let's say, last month, which is March 2015. Right, so in here you're gonna see the Average Bytes per Page by Content Type. And we can see that the images make up the majority of those bytes, of that weight. So if we scroll further down, we can see the image requests by format. We can see that the JPEGs are currently leading and the PNGs are on the second place followed by GIFs. And then another stat that's interesting to us is the Image Requests per Page. So we can see that over 27% of the websites are requesting between 21 and 40 images. And that the image transfer size per page is between one and 400 kilobytes in this majority, 36% so, as you can see pretty pretty big images there. There are also different stats for this like JPG Requests per Page so you can definitely check it out, but we're only interested in a few of these. Let's compare this with the same month from 2012. Yeah, so we're gonna say March 15th, 2012. And then we're gonna get the charts, and let's do a little bit of comparison here. So as you can see, only in three years, the weight that's represented by images has doubled. So from 630 kilobytes to 12048 kilobytes. That's a lot. Let's see some of our stats like the Image Requests by Format. We can see that the JPEG is still kind of the same from 44% to 46% today. The PNG usage has started to rise a little bit, and the GIFs are used a bit less frequently, from 32% to 23%. So what's the conclusion that we can draw here? Well in, in some cases it's pretty obvious. The image size or the image weight has increased, and it will probably continue to increase. As for image formats, we can see that the JPEG is still holding a pole position. So, it's probably gonna be a while until we see some new formats emerge. Now I showed you these charts so you can kind of understand or get a, get a grasp on the direction the web is going. Since images are starting to use more and more, and the websites get more image heavy, now is probably the best time to implement responsive images. Because what happens is, as the web evolves, it starts to move more and more towards mobile devices. So it's important that we keep performance in mind. Now we all know how to use an image on a typical website. We load it, we give it some dimensions maybe, and then we just forget about it. But what if we viewed that website on a mobile phone, and that particular picture is just too big for that little screen? What do we do then? Well, let's find out.