In this episode of “Website Success,” Chrissy Rey breaks down the art of image optimization. Learn which file types to use, how to compress and resize images, and even get a handle on advanced formats like WebP and SVG. Plus, discover essential SEO practices to make your images work for you. Don’t miss these tips that can make your website faster and more discoverable!
Listen to the Episode
Show Notes
In today’s episode, we’re diving into the nitty-gritty of optimizing your website images for speed and SEO.
Timestamps
- 0:17: Introduction and what to expect from the episode
- 1:21: Importance of image optimization
- 2:43: Different image file types and their uses
- 4:49: Introduction to WebP and SVG formats
- 6:11: Importance of image dimensions
- 7:18: Image compression tools and techniques
- 9:06: Lazy loading for better page speed
- 10:22: SEO tips for images
- 12:42: Final thoughts and additional resources
Key Takeaways
- Why Image Optimization Matters: Large, unoptimized images can slow down your website and affect your SEO rankings.
- File Types: JPGs are best for complex images and photographs, PNGs are great for transparent backgrounds and flat colors, and GIFs are good for simple animations.
- WebP and SVG: These newer formats offer better compression and are supported by many modern browsers.
- Image Dimensions: Always resize your images to fit the space they will occupy on your website.
- Compression Tools: Use tools like TinyPNG or WordPress plugins like Imagify to compress your images.
- Lazy Loading: This technique can significantly improve your page speed.
- SEO Tips: Always use alternative text and consider the file name for SEO.
Additional Resources
Transcript
Chrissy Rey 0:17
Welcome to Website Success, the ultimate podcast that turns website zeros into heroes. I’m your host, Chrissy Rey. And with over 25 years of website creation experience under my belt, I’m here to guide you every step of the way. Join me on this exhilarating journey. And you’ll learn how to transform your online presence, attract your target audience, and effortlessly convert them into loyal customers. Let’s embark on this transformative adventure together and conquer the digital world, one pixel at a time.
Chrissy Rey 0:53
Hey, everyone! Welcome back to Website Success. Today, we’re gonna dive into a topic that is often overlooked. But it is still incredibly important. And that topic is going to be optimizing the images on your website for speed and SEO. And trust me, you don’t want to miss this one. It’s a simple thing that you can do in order to really speed up your website and also help to improve your search engine optimization. So let’s get started.
Chrissy Rey 1:21
So first of all, why should you even care about optimizing your images? Well, the biggest reason is that large unoptimized images can really slow down your website. I do a lot of website audits for potential clients and clients. And one of the biggest issues that I see with slow performing websites, is they’re using massive images, the either the dimensions are off, or they’re just not optimized. And they’re trying to download huge amounts of images. And it’s just slowing the entire website down. And when you are slowing your website down, you are turning potential customers away. You’re turning your target audience away. You want your pages to load in under three seconds, as close to three seconds or under as possible. And if you have megabytes after megabyte of images to download, it’s going to take longer than that it could take 5, 10, 15 even I’ve seen pages take 20 plus seconds to load, because they were very image heavy and nothing was optimized. So that’s number one.
Chrissy Rey 2:22
The other reason is that Google and some of the other search engines, they do take that page speed into account for ranking your website on the search engine result page. So the faster your page speed, if all other things considered are the same, then the more likely you are to rank higher on that search engine result page.
Chrissy Rey 2:43
So let’s start off with this discussion by talking about file types. You’ve probably heard for images of file types like JPG, PNG or “ping,” depending on who you talk to. And GIF, or “JIF” again, depending on who you talk to. But which ones should you use for your image? Well, it depends on the image. It depends on what is actually going to be in the image.
Chrissy Rey 3:07
Usually, you’re going to use JPEGs for photographs. So anything that’s got a photograph, or gradients or anything like that in it, and anything that’s got like really complex images, with lots of color in them, those are what JPEGs are good for.
Chrissy Rey 3:23
You’re probably going to use PNGs for images that have transparent backgrounds that have lots of large areas have sort of a flat color. So if it’s not a gradient, if it’s just a solid color, then you’re probably going to use PNG. And I usually use PNG for things like logos and icons, and also images that have text in it that I want to make readable, although we’ll talk a little bit more about text a little bit later on. But you’re usually going to use PNGs for those types of image.
Chrissy Rey 3:53
And then another format is GIF or “JIF”, depending on who you ask. It stands for Graphics Interchange Format. And those are not as widely used on the internet except for animated GIFs. So you’ve probably seen those before. So if you’ve got something that is animated, then you might want to consider using a GIF.
Chrissy Rey 4:11
And you may have also heard of another newer format called WebP. It is a newer file format. And it offers better compression and quality than JPG and PNG. And it is pretty widely supported now at least with more modern browsers. So newer, newer versions of the browsers do support it. And using it can give your website a bit of a speed boost. So you might want to consider using it. If you’re using WordPress, which is my tool of choice. There are actually plugins that you can use that will automatically convert your images to WebP, which means it’s easier to do that you don’t have to find a converter to do it for you.
Chrissy Rey 4:49
Another format that you might hear about for images on the internet is SVG, which stands for Scalable Vector Graphics. And SVG is really good for logos, icons, and other simple graphics that I might otherwise use a PNG for. They are resolution-independent, which means that they look really good at any size. So I can make it massive, or I can make it really tiny. And it should still look good. It scales really well without getting pixelated, which means you get those little fuzzy edges on it like you would get if you made a PNG or JPG larger. So that’s one of the nice things about SVG, they’re they’re vector and vector means that either infinitely scalable. One thing you do need to note about SVG files is because they are vector, what basically happens is you get an XML file. It’s a it’s a text file that describes all of the shapes in the SVG file. That’s what the SVG file actually is. And super, super complex images are not going to be good SVG is because it’s going to make the instructions for generating the image very complex, very large. And so the file size could quickly balloon if you have a very complex image. So you have to sort of play the fine line and just determine maybe by creating the image and then testing out different formats, whether SVG or PNG is the right format to use.
Chrissy Rey 6:11
Now the next thing I want to talk about is dimensions. I don’t want to see you using a 4000 by 3000 pixel image for a 400 by 300 space. Just don’t do it! You’re going to need to resize your images to fit the actual dimensions they’re going to occupy on your website, or at least get them relatively close to it. And this is especially important if you download stock photos, a lot of times the stock photos are going to be like 6000 pixels wide, but the place that you’re putting them is maybe only 800 pixels wide. So you really want to resize the image to fit the space that you’re going to put it in. And this is partially important because making the file size or making the dimension smaller, are going to also reduce the file size of those images and smaller file sizes makes for a faster overall page speed, which is going to help with both the user experience and search engine optimization, as we’ve already talked about. And tools like Photoshop Canva, and GIMP, which is a free graphics tool, they can all help you with resizing your images, so make sure you’re using them.
Chrissy Rey 7:18
Now let’s talk about compression. This is going to be where you reduce the file size without losing any quality. So you can optimize, and if you’ve ever used Photoshop, you might have seen the ability to save a JPG and you can change the quality of the JPG. So you can make it maximum high, medium or low, and the image will look the same, but you’re gonna get different compression, you’re gonna get different file size for each version of it. And when you have a low a low optimized file, it may not look as good, it might be a little grainier than the one that’s got maximum, but the file size is going to be much smaller. So it’s sort of a fine balance that you’ve got that you’ve got to play there to optimize those images and still make sure that they look good. So again, compressing the images.
Chrissy Rey 8:06
And if you don’t have Photoshop, and you just want to upload some images and compress them, there is a tool called TinyPNG, it’s tinypng.com. And you can upload images, I think it’s up to five megabytes to tiny PNG, and it’ll optimize it, and then you can download it again. And the images don’t just have to be PNGs, you can upload JPGs, PNGs, And I believe you can also upload WebP files. So it’ll let you download any of those.
Chrissy Rey 8:34
And if you’re using WordPress, then there are plugins like Imagify, which is the one that I use, and they can automatically optimize your images as you upload them. So if you’re downloading images from stock photo websites, like I use Adobe Stock, or Pexels, or Unsplash. A lot of times those are going to be megabytes large, using a tool like TinyPNG or Imagify in WordPress can reduce the file size by up to like 70%, which is a pretty big savings. So make sure you’re using them.
Chrissy Rey 9:06
Now another thing you can do to optimize for your website is something called “lazy loading.” And this is a technique that is also known as on demand loading. And it uses an attribute on the HTML tag that loads the image on the webpage, to tell the browser to only load the image when it’s going to appear on the screen. So, sounds very technical, but it well, it is kind of technical, but it doesn’t have to be. But the the point of lazy loading is the images that are lower down on the page. So let’s say you’ve got a page that’s you know, three or four screen screen heights tall, then the images that are going to load are only going to be the ones that are currently in that viewport currently on the screen. So if you’ve got, you know, five images at the top of the page, then the other 20 images lower on the page. don’t load until you scroll down to them. And the reason I was saying that doesn’t have to be technical is because some website builders do have this feature built into them. And if you’re using WordPress in particular, then you can use plugins like WP Rocket and Perfmatters, which are both performance optimization plugins to enable this functionality in WordPress. So keep that in mind.
Chrissy Rey 10:22
Alright, let’s shift gears a little bit now and focus a little bit on SEO search engine optimization. So the first thing I want to talk about with that with optimizing your images is using something called alternative text or “alt” text, you might have heard that before. And this is an attribute on the image tag. So I mentioned the image tag earlier for lazy loading. This is another attribute that gets attached to that image tag in HTML. And it is going to be a short description that tells search engines what your image is about. It doesn’t just tell search engines though, it also tells screen readers what the image is about. So it’s important not just for search engine optimization, but also for making your website accessible. You should always put a alt text or an alternative text on every image that you upload. And this is especially important, if the image includes any text in it. The text in the alt text should reflect what is actually in the image. So any, well any relevant text. So if it’s if it’s a image or picture that’s got some text that isn’t meant to be read, you can just say that there’s text on the screen on the image. And anyway, that you don’t necessarily need to write out everything that’s on there. If the image, the point of the image isn’t to have the text there. So anyway, the the point of this is that you want to use alternative texts, that would be something like, if it’s a plate of chocolate chip cookies, the alternative text could say chocolate chip cookies on a plate or plate of chocolate chip cookies, instead of saying image1234.jpg. So again, the alternative text should reflect what is actually in the image.
Chrissy Rey 12:01
And another thing, it’s it’s not super, super important, but it is helpful. But I like to when possible, give my images file names that reflect what’s in them. I don’t know if any search engines worry about this, I this is something that all the SEO experts, or at least some of the SEO experts do recommend is making your images SEO friendly. So for example, instead of using the file name that’s generated by the camera, or by the stock photo place that you’re downloading it from, like DSC1001.jpg, use something like summer-beach-sunset.jpg, for your file name.
Chrissy Rey 12:42
Alright, I know that was a lot. But I hope that you found it very useful. I do want you to remember that making these small changes, and they’re pretty small, they can make a really big difference in your website’s performance and search engine optimization ranking.
Chrissy Rey 12:58
And by the way, if you’re curious about checking the PageSpeed, that I mentioned earlier, PageSpeed is an actual measurement that is used by Google, you can actually check your page speed using a website called PageSpeed.web.dev. It’s called PageSpeed Insights. And it is a Google tool. It’s free. And it’s gonna spit out a lot of really technical information. So it may be a little bit over your head if you’re just getting started with websites, but I do have a masterclass on doing website audits and optimizing your website and mini course on optimizing your website for performance so you can check those out at websitesuccessacademy.com.
Chrissy Rey 13:39
If you found this episode helpful, please leave a review, share it with someone else who could use it. And for a list of all the tools that I mentioned today, make sure you check out the show notes and as always go to websitesuccessacademy.com to learn some of the techniques that I talked about in this episode. Until next time, I’m Chrissy Rey, and this is Website Success. Thanks for tuning in.