Images done right: How to use and optimize images for lightweight websites

Hello, everyone, and welcome to another episode of the Green Web podcast. I'm your host, Sandy Dähnert, and in this podcast we discuss ecologically and socially sustainable UX/UI design. In today's episode, we will talk about images. Images have quite an intensive way of increasing the data weight of websites and digital products. So we want to talk today about exactly that data intensity and questions to ask for a more lightweight way of implementing those images. Let's dive right into it.

Images are everywhere you look. You can see it in every digital product. You can see it nowadays, even in newsletters and emails. You can see it in email signatures, even. Don't we really need that? But yeah, we have it on websites, we have it in apps, we have it in ebooks and workbooks and just everything that you can think of. But there are a couple of things that you have to know. And the most important thing is that images are quite data heavy. And it's actually one of the things that is one of the easiest to optimize on your website or a digital product. And images are so data heavy because nowadays we do have quite of a quality and pixel density and the more pixel dense an image is and bigger this image is, the more data heavy is it, the more kilobytes or even megabytes this image brings with it. If you already have a website out there, you can check if your images are actually weighing down your website. One tool that I really love to use a lot is Digital Beacon. You can find the link in the description down below. And with this tool you can just put in your website, your URL, and then you can see of this exact page that you just put into the tool. If your images are data heavy, you can see all kinds of other types of content like your font and script and other things, which of them are actually heavy and which are not. And what I see most often in analyzing other websites is images are the top one of really data heavy implementation, and we can reduce that really, really easily. And Digital Beacon is just one of the tools that you can check your images with. I will have a podcast episode coming up in the next weeks talking about all kinds of tools that you can use to analyze your website and all kinds of different content types. Digital Beacon will be one of the tools that I will mention, but also other tools that you can also find in my tool list on my website. And now let's dive into the questions to ask for a more lightweight way of implementing images. And the first one might be surprising. It's Do you really need images at all? Plenty of websites are out there that don't have any image. Back in the days and the early web times, there were pretty much all websites that didn't have any images because, yeah, you know, theta was very limited. But even nowadays there is absolutely nothing wrong with not having images on your digital product. You really have to rethink the usage of images on your website, even on your ecommerce shop. So what do you really want to achieve with the images? What emotions, what support, what visual appearance? What is the purpose of those images that you want to integrate? If there is no purpose or if there is images that are even misleading? Kick them out. They shouldn't be in there at all. There is plenty of other things that we can do to make a website more interesting and will. We'll get to that in a second. But really thinking about what images do I really need? Do I really need images? And if yes, what images are there that could support my message, my branding, the whole appearance of the page of the digital product? Think of images at something that supports your usability, that supports the process. The user has to go through that supports the information that is given. Don't just put images everywhere because we're used to doing that. That's not what it should be like. Really think quality over quantity. Select a few images, have them really shine, but not put images everywhere where it can just think of. And there is a couple of things that you can do to also replace images. You can replace images with icons, with illustrations, with other visual effects, with colors, with forms, with shapes to make a website or digital product interesting. You don't have to use images. And if you would like to use icons illustrations, I will link a blog article that I've written last year for illustrations Where to find them. All kinds of platforms that are really cool to use where you find free as well as small budget illustrations and icons. I will link this blog article below in the description. Have a look in there because there is brilliant artwork out there. You can of course always create your own as well and really think about what are there, what are other visual things that I can integrate other than images that make my website more interesting but are a lot less data heavy? All right. What size and location to choose for your images is this second question. So as we know, every pixel of an image adds to the data heaviness of the image itself. We have to think about the size of the image. And there was a huge trend that everyone placed a full width image on the mood section, the first section of a website, and I hope those days are accounted because it's pretty boring at some point as well. And it's not just full width images on this mood section, but also throughout the pages that you have like full width background images and single images that you can see or with parallax effects, you have those images in the background. Let's think about if we actually need that because of course, if you use a full width image, you also need a really big image in size like width. And if you can integrate, for example, just an image that's half width of the website, then of course it's a lot smaller. It needs a lot less data, really simple tricks. So can you choose a different layout? Because every pixel adds more data. Smaller images mean less pixels, and less data means more lightweight. I'm not saying that all images should be super small, but can you think of ways to integrate your images in different ways than full width background images? And with that comes the third question. Image styles and level of details. You can add interest with design elements along with your images. It may be shapes of the images themselves, may be visual add ons on or around the images. There's plenty of opportunities. Think about how to make it more interesting, appealing, and emotional. As you remember, every pixel counts. You can also blur the edges with a soft focus on the images that reduces the pixels. You can even cut off the corners to reduce the data weight of the image. Yes, that works. It's really impressive when you start thinking about how can you reduce the pixels of an image to reduce the data, heaviness and intensity of the image. There is a lot of creativity in there that you can also gather. Also, more grain means less file size, but also less detail. Of course, black and white or dual tone rendering reduces the color gamut, which you may be able to use cleverly for your branding as well. Maybe it's absolutely like in your way of doing things. Maybe you want the most colorful images and that's absolutely fine. But just to think about, there is certain ways where you can reduce detail and file size with, yeah, just adding things to your images, but also taking away things from your images. Play around with it and you can find a couple of best practices in my best practice library on my website. I will link it below in the description as well where you can see how on really well performing lightweight websites, designers have chosen little add ons on images or different shapes and forms of images to make it interesting, but still very lightweight. I will never get old to say this over and over again. Be creative with your images. Lightweight imagery doesn't mean that it's boring, dull, lame. Not at all. It actually can bring more creativity. It actually brings in more innovative space in thinking out of the box. Again, not putting just full width images everywhere. Yes, they do have an emotional effect, but how can we bring this emotional effect onto our digital products without using this full width space, but actually different kinds and ways in doing it, really playing around and just seeing where it takes you. There are so many opportunities and options. Just get inspired by the world out there. And if you got inspired and you have your creative imagery and you have your creative image language that you use on your website or digital product, there is a couple of things that you can do technically to reduce the data intensity of the images themselves. First is to adjust the size and the resolution. You might already know that the DPI, for example, should not be more than 72. You can set that in your design program because everything higher than that is only needed for printing. And we're talking about digital products. So you don't need anything more than that. And then to scale your images in your design software or directly also if you're using a CMS like WordPress, you can do that in a media library. If you use, for example, an image that uses half the width of your website of the desktop viewport, then you usually don't need more than 800 pixels of your image with. So uploading any image that is larger than 3000 pixels that's just so unnecessary of data to load. You don't need that because every browser reduces this image to then 800 pixels or 600 pixels. But all the data already comes with this image. So really just scaling your images correctly is the easiest thing you can do. Adjust your images in size and resolution and then you can compress your images even further. For example, there is a couple of browser plugins and tools that you can use. I really love using short pixel or a tiny PNG. There is a couple of WordPress plugins if you're using that as well. That's short pixels, match or optimal. There's a couple of others out there as well. You can all find them on my tool list. On my website I will link that below and you can also add other formats of imagery. For example, web P format. One of the newer innovative formats that there are that needs up to 50% less data than JPEGs. But in a couple of browsers there is still a fallback JPEG image needed to be displayed. There is options in development where you can have both integrated into your database and when the browser is okay with using WebP images, then this will be displayed with a lot less data. Or if it needs a fallback jpeg then that is displayed. So that's compressing and using different kinds of file formats. And then there's two other things that we can quickly get into. One is loading your pictures with lazy loading and lazy loading as a method to postpone the data load of images to when the user actually scrolls to that specific image. That's not in the first viewport. So you have imagery down below the website and the user scrolls down. And when the user is actually at this point where the image should be shown, then it gets loaded. That's what lazy loading is called. There is a couple of scripts that you can find out there. There's a lot of WordPress plugins out there as well. You can have that with auto optimize, smash, optimal. Again, there's even more of course for that and it saves a lot of loading time, especially for the first impression of your website. And a second one is activating caching. This means that when a user has been on your website before and it loaded this image already the second time that this user gets to your website, it's already cached in the browser history. It doesn't need to be loaded again. It saves a ton of data, it saves a ton of requests going back and forth from data servers to your device or to your user's device and therefore is less carbon intensive. Great solution. So as you can see, there's one part of imagery that is do you really need images? Can you replace your images with any other visual effects and illustrations and icons and shapes and forms and things? How can you creatively adjust and optimize your images with different shapes, blurry edges, or cut off edges or other styles that can take away pixels and data heaviness? And then you can go into the technical sphere of reducing your images data weight with adjusting the size, the resolution, compressing them, loading the pictures with lazy loading and activating caching. That's all. It's really simple if you look at it and if you don't want to go through the first ones, the easiest thing is to just have a look at your website's images or maybe 3000 pixels. Just reduce them to less than maybe 1000 pixels if they're really small, sometimes even 400, 302 hundred pixels in width are absolutely fine. Put them into short pixel as a browser tool to compress your images, load them back up on your website, and then you're good to go like. Really, really, really simple. To reduce your website's footprint is just by optimizing your images the right way. I hope that did answer a couple of questions for you and let me know what you thought of those questions and those little optimization tricks and tools. Let me know on Instagram at Green, the Web or on LinkedIn at Green, the Web. Comment and rate this podcast. It would really mean the world to me if you give this podcast a rating. Share the love. Share this podcast if it helps you. Just send it over to your friends, to your colleagues, and let them know that there is simple things that we can do to reduce our website's footprint and carbon intensity and energy intensity. And images is one of the easiest ones. So get going. It is done really, really quickly. Enjoy it. And I know it's sometimes hard to sit down and to actually do those nitty gritty things and optimization, especially when you just want to upload this one image really quickly, but adding this one more step of compressing it and scaling it down is. I takes it a long, long way. And it's all for a better page speed because images are usually slowing down websites tremendously. So if you want to have a faster website, optimize your images. And as we also know, having a fast website is really good for your SEO ranking, your search engine optimization and search engine ranking. So it has so many benefits. Just reduce your images and think about them twice. Helps you and your business and your users and nature. Oh my God, there are so many benefits and I hope you got a lot out of today's episode. As I said, share this episode and let me know what you thought of it and see you in the next one.