The Power of Image Optimization: Boosting Your Website's Performance

Are your website images slowing you down? Let's revamp your understanding of image optimization, and watch your site's performance skyrocket! This episode is packed with secrets on web image optimization, covering everything from choosing the right file format to understanding the role of alternate text in SEO and ADA compliance. We're arming you with practical tips and a free download to make this process as seamless as possible. 

We'll also be taking a deep-dive into the world of image formats for web optimization. Get ready for a thorough exploration of JPEGs, PNGs, and WebP. We're shedding light on the importance of resizing images and sharing foolproof tips on compressing images without losing quality. Additionally, we're guiding you through the process of using Photoshop and GIMP for optimal image optimization. So, buckle up for this insightful journey and remember to rate and subscribe! We're always here to answer your questions or engage in further discussion.

Mentioned Resources: 

How to Optimize Images for Web – Downloadable Banner Optimization Guide

Understanding your Site’s Performance – Google Core Web Vitals Podcast

Importance of Accessibility – ADA Compliance Podcast

Join entrepreneurs and online business owners just like you in my Free Facebook Group “Website & Tech Tips for Online Business Owners”
 
 Where we help break down the tech and hurdles Online Business Owners encounter!
 
Simply to go ecommercemadeeasypodcast.com/facebook/ and answer the membership questions so we know you are a real, warm-hearted, online business owner.

Chapters

• 0:01 Optimizing Web Images for Better Performance
• 12:10 Optimizing Image Formats and Compression
• 20:05 Optimizing Images Using Photoshop and GIMP

Transcript

Speaker 1: 0:01

Welcome to this week's episode of Ecommerce Made Easy.

Speaker 1: 0:04

So this week we're talking about how to optimize your images for the web, why it's important, how to do it and what you need to be looking for. So this is a question we get asked a lot in our business. Over the past 20, some years, and especially as of late, because of Google's new rules that and some of them are newer, some of them have been around a while, but they're really cracking down on the speed of your website, and images can greatly affect the speed of your website. If you didn't already listen to episode 21, where we talk about web core vitals, this kind of digs down into a little bit more detail on one of those elements that can affect several other web core vitals. So if you haven't listened to that episode, I highly recommend you go back and listen. So let's get right to it.

Speaker 1: 0:50

Welcome to the Ecommerce Made Easy podcast. I'm your host, keri Saunders. When we started this business, all I had was a couch, a laptop and a nine month old. My main goal To help others. Now, with over 20 years in the e-commerce building industry and even more than that in web development, I've seen a lot. I love breaking down the hard tech and to easily understandable bits to help others be successful in their online business. Whether you're a seasoned e-commerce veteran or just starting out, you've come to the right place. So sit back, relax and let's dive into the world of e-commerce together.

Speaker 1: 1:22

Welcome back to this week's episode of Ecommerce Made Easy. Today, we are talking about how to optimize your images for the web. Now, this can sound pretty techy, but what we want to do today is really break down the why we want to do it. What does it mean to have images optimized, as well as how do we do it? So I'm going to be breaking this down step by step, and we have a free download on this episode as well. If you need something to really follow that you can visually look at, so make sure you go to ecommercemadeeasypodcastcom forward slash 22 to get that download. All right.

Speaker 1: 2:03

So let's first talk about what does it mean to have web optimized images? So what that really means is that the file sizes for your images are the smallest they can be without really losing the quality of what we visually perceive in the image. So images nowadays, especially when they're taken from our cameras, from our phones all of our cameras and our digital equipment do so much better at capturing a lot of the details that didn't happen, say, five or so years ago. So when we're taking images from our with our phones or our nice digital cameras, or even when we're creating graphics using an image editor like Canva or Photoshop, we need to make sure, when we're saving those images and getting them ready for the web, that we optimize them and make them as small as possible without losing that image quality. It also means that the file format is appropriate for the web, and we'll go over some of the file formats here in a minute. It also makes means that the dimensions of the images are the right size for the web.

Speaker 1: 3:18

So think of it this way you can have a big mural, say, on my back wall. I know it's just a plain light blue background, but if we had a mural on the back of my wall, you can see For us to see that on a smaller screen say the video I'm doing we would need to shrink that mural down right. So we need to be thinking about how big does an image actually need to be for the website? So we what we find a lot, as our clients will have a banner image that is way wider than any screen out there that you would recently run into, and they put that up rather than shrinking it down to what the website is actually designed to have it show at. So the website might be showing it at 800 pixels wide, but your images say 2000 pixels wide. We need to make sure it's shrunk down to that size 800. And a pixel is just basically a dot on the computer. It's something that's easy for you to figure out, usually when you're looking at the image on the web, and it's something very commonly used when you're talking about image sizes rather than inches or centimeters. So when we're talking about websites, we talk about in pixels.

Speaker 1: 4:32

So make sure that your image size is also what the display intended image size is. We want to make sure they're not bigger than that, and then we also want to have alternate text for our images. This kind of goes along with some search engine optimization there and as well as ADA compliance, which we also have on a previous podcast episode and why that's super important, and if you're not paying attention to that, I highly recommend you go back to that episode. We'll link to it in the show notes, but making sure you have alt tags for your images and basically what that is is just an area you put, and usually most softwares out there have a notation where you can type the alt text and you just type a description of what the image is. So a boy playing ball with a dog. So if it's a picture of a dog and a boy throwing ball to it, that's what you would put or say it's you know you're selling shoes or something. You know it would be brand name of your shoes and maybe put running shoes in there. So some keywords that really describe what they're looking at. That way, if somebody with visual impairment is looking at your site, they can have the screen reader describe to them the image. It also helps Google and other search engines understand what the image is. Now, I do know there's a lot of AI out there that can recognize a lot of images now, but they really do require this textual version as well to see what you want to describe it as at, as well as helping those with visual impairment.

Speaker 1: 6:03

Okay, so now that we know a bit about what it means to have an optimized web images. So making sure the file size is small as it can be, making sure that the image resolution size. The pixel size is the intended display size, alternate text for images, etc. Let's talk to why you want to optimize your images for the web, and we've touched on this a little bit already, but I want to make sure we dig into it more specifically. So next we're going to talk about why you need to make sure that your images are optimized for the web, and we've touched on a few of these already a little bit, but let's dig into it a little bit more.

Speaker 1: 6:41

Okay, so first off, if your images are optimized, your users are going to experience faster load times on your website. If you have a really big image, that's say a couple megs or even more, that's going to take quite a bit of time to download, especially on mobile or slower internet connections, and Google and other search engines will penalize you for having images that are really, really huge, especially when they're just the main images on the website rather than an image you would get, maybe when you click to get a detailed, really close up view. That's a little bit different than the main images that are displayed on an everyday web page. So we want to make sure that there's small in size so that it's faster to load. It also improves your search engine optimization, which we touched on a little bit here.

Speaker 1: 7:32

When your images are optimized for the web, so they're small in size and you have the alternate description behind them, that really helps your search engine optimization or your SEO, because what it does is it boosts your website as being a faster website if your images are fast, and then the alternative text also helps describe your images so that search engines can really know exactly what you're going on in your image and what your description is of it. That helps boost your SEO. You got to make sure that you're putting keywords, especially keywords that are human, readable and descriptive in your alternative text. You don't want to try to fool the search engines with alternate text, keyword stuffing. Don't do it. It's so old hat search engine optimization and it's been looked down upon for many, many years. So don't do it and don't let anybody else do that on your website.

Speaker 1: 8:29

Okay, so if we have a website that has fast loading images and the alternate text, we're going to have a better experience with that website, right? Nobody really wants to sit there and wait for an image to fill out, and I'm sure you can remember just being on a website where it just feels like it's chunking down and just starting to fill out the images taken forever. So you're going to have a better user experience and that's what the Webcore Vitals episode talks about. A lot is that a good user experience helps you with search engine optimization, and images are part of the core of that. Also, you're going to have cross browser across device more compatibility if you have your images small and you can get a little bit more techie with this, and if you need a bit of help with that, you can always contact us.

Speaker 1: 9:21

But one thing to note is and something we're really finding lately is with responsive design being super popular the past, you know, five, seven years or so but browsers or, say, google, for example, is really looking at what it takes to download these images. We need to make sure that we have images sized for mobile as well. So let me back up a little bit again on that responsiveness. So responsive means you could have a look and feel of your website and look at it on a laptop or desktop computer and then when you look at it on a tablet or a cell phone, it's going to shrink and kind of respond to that smaller size. So what a lot of people used to do is have the one big image for desktop. They'd optimize it and then it just shrinks the display of it for tablets and for mobile, for cell phones. So that is becoming a bit of a problem now that Google has introduced the WebCorp vitals, because it not only tests the WebCorp vitals for your website when you're in desktop mode, but it also does it for mobile. So what they're doing is they're checking to see is the image size a reasonable size to download over a cellular connection. So now what we're doing and working with our clients is helping them have a way to have a mobile, smaller version of the image as well as the bigger desktop version of the image. So make sure that if you don't have that already in place, you get with a web developer and have them help you implement that, because Google is really penalizing websites that use the desktop version of the image but displayed in a smaller size, and they're penalizing them for that because the image is still just too big for mobile and for the cellular connection.

Speaker 1: 11:12

Okay, so now that we covered what it means to be optimized for the web and why you want to be optimized for the web, let's next talk about how to be optimized for the web. And again, I do want to remind you that we have a free downloadable on our podcast website, ecommercemadeeasypodcastcom, forward slash 22 to really step you through this. So make sure you get that downloadable too, after you listen to this episode, because it's going to help connect the dots, especially since you know it's an audio only podcast. So, but we need to make sure that our images are optimized to the web. So how we can do that is, we need to make sure we choose the right image format based upon the type of image we are trying to display. And I'll try to go over this slowly, because even for me, I sometimes have to go back and look at a reference for this, because I'm I'm not always working in images myself too much, but when I'm helping a customer optimize it, I go back and refer to this to make sure I'm doing it properly.

Speaker 1: 12:10

So a JPEG, or JPEG, is best used for photographs and for images with many colors. So think about photographs you take of your products, maybe photographs of yourself, of your selling services, or photos like that that you might have lots and lots of colors behind it. So you want to use a JPEG for that, or JPEG for short, and the reason being is that image type supports multiple colors a lot. There are some other formats we're going to talk about next that do a lot more compression, so you can think about squeezing something together. They do a lot more compression and pushing the information behind the image together, and there's not as much information to be had there to show all these colors. So JPEG is great for when you have a lot of colors.

Speaker 1: 12:59

All right, so next is PNG. Now, this is a good one when you have images with transparent backgrounds or sharp edges. So a PNG is a bit more. A JPEG has been around a long time. Png is a little bit newer, but it's still been around quite a while at this point in time and it is great, like I said, for transparent background. So, whenever, so, like if we took a screenshot, if you're watching this on YouTube and do you know, I don't I'm not sure if I mentioned this before, but we do have a podcast on YouTube but so if you took a screenshot of me doing this podcast and you want to take out the background to put it on a different color, you would put it as a transparent background. So that's why you'd want to use a PNG.

Speaker 1: 13:44

Now one of the newer formats is WebP WebP I guess you would call it W-E-B-P and it's a modern format that offers a balance between quality and compression. It is possibly not supported by all browsers yet. I feel like most of them nowadays it is, but like a couple years ago it wasn't. So this is going to get you a nice balance between the JPEG and the PNG or the GIF and we're not even really going to talk about GIFs here, which is G-I-F Some people call it GIFs, I call it GIFs so it offers a good in between for compression, yet lots of detail too. So if you're having a hard time getting that JPEG down to the size that you want as far as how big it is to download you might want to look at that new type and you might need help with your developer on that. That kind of depends upon what software you're running as to whether it supports that, since it is a bit newer. So if your software is a little bit older, you might need a little bit of help with that, but that is definitely another option. Most people stick with JPEG, jpeg or PNG for now. So if you don't feel like you're more adventurous and advanced, to try the web P WBP, then just shoot for those other two for now and make sure you're optimizing those.

Speaker 1: 15:13

Okay, so we talked about this some before, but resizing your images to the specific dimensions that's required to be displayed on your website is super important. You want to make sure you're not displaying images that are way bigger than they are being used on your website and that's kind of hard to describe in words. I'm kind of struggling with how to describe that. But again, like I said earlier, it's like one of those images that could maybe feel two different monitors on a laptop or a desktop computer, say, two monitors wide, but you're really only displaying it at 800 pixels, which is about two-thirds of one average monitor, let's say so a lot smaller than two monitors, right? So we need to make sure that we have our images shrunk down to that smaller size, and the downloadable we have will help you with that. And we also want to make sure, when I was talking about mobile here, that the responsive images are there for different size screens. So I would probably recommend at least having two different sizes the desktop size and the mobile size. If your software can allow it, do a third size and do a tablet size, because there are quite a few people who still are looking at websites on a tablet, so you can look at those different sizes. This is probably, unless you're really techy on the web, this might be where you're going to need some extra help to make sure you have the guidance as to what size you should be making for your website. So next we need to be looking at compression, and so that might sound a bit a bit more advanced, but it's actually not too hard to do and our downloadable will help you with this.

Speaker 1: 17:00

And what it does is it applies a simplification basically to the information behind the image to make it be less of a size, so it's a lot smaller size. You can think about it as in the fact that, let's say, let's say you're reading an article on the internet. Say it's, you know, 10 pages, 10 scrolls of your desktop browser down, but you really just need the overview of it. So what you would probably want would be a summary or a shortened version of it. So all those words aren't necessary to get across the same meaning. Sometimes just a summary is good enough to get the meaning across on an article.

Speaker 1: 17:43

It's similar for images. We don't need all those details and all that information to be stored for our eyes to see what we need to see. Many times a lot of that information. Especially in the computing nowadays that we can take, all this information we couldn't do before it's just simply unnecessary for us to visually still see what we're intended to see. So in compression really kind of shrinks down that information and simplifies it and makes everything smaller and more compact, is what it does for you. And so when you're doing this with your software you will find a good balance between too much compression and not enough. So when you get too much compression you're going to be able to visually see that the image is a little bit distorted or fuzzy or looks a little off really. So you want to back off the compression when you get to that point and you will be able to find that sweet spot for the images you're working with. And we do find that if you have, say, a photo with text layered over it, that makes it a little bit more complicated and you might need to adjust the image behind it first and then add your text to it so that you get the best balance of compression without losing the details of the edges, of the letters, in your words, on your image.

Speaker 1: 19:08

So let's recap this week's episode. So first we talked about what does it mean to have optimized images for the web. This is important for everybody. It doesn't matter what you sell, whether it's products or services or anything like that. It's super important that all your images are optimized to the web. And then we talked about why we want to be concerned about our images being optimized. And for one user experience you want to make sure you give your users a good experience, and when you give your users a good experience, then your search engine optimization rankings are going to be a lot higher. So there's two very good reasons to make sure that you do it.

Speaker 1: 19:48

And then we talked about how we want to make sure we're using the proper image format based upon what we're trying to achieve.

Speaker 1: 19:55

We need to make sure our images are appropriately sized and not too big or too small.

Speaker 1: 19:59

We didn't want to go too much into the too small Most people don't do that anymore but not too big for what you're trying to display.

Speaker 1: 20:05

And then we also need to make sure we get the right balance of compression behind our images. Ok, so make sure that you go to ecommercemadeeasypodcastcom forward slash 22 so you can get that downloadable to really kind of help you step by step through this. We're giving examples in there on how to do this with Photoshop, as well as a free image editing software called GIMP G-I-M-P, and so we try to give it with both different worlds, because most are pretty popular those two are. So make sure you download that so you can get your nice step by step on how to go through this process yourself to optimize your images. And, as always, if you have any questions, feel free to email us at podcast at bcsinjoneeringcom, and make sure you rate us wherever you're listening. We love those awesome ratings and reviews you guys are giving us so far. It's been just wonderful to see your feedback and how we're helping you. And make sure you subscribe to this podcast where you're listening so you don't miss out on any future episodes. And I will see you next week.