How to Make Images Load Faster on Your Website | 2023 Image Compression Tutorial
Ever wish images on your site would load faster for you (and your site visitors)? Start leveraging image compression to boost your site’s overall page load speed and to encourage visitors to stay on your site instead of hopping onto a competitor’s. Here's the short version of how to compress images for your website using TinyPNG (a great free image compression tool!).
Simply upload the image you want to compress and the website will automatically do it for you. The display screen even shows you the image file size before and after you compressed it, so you know exactly how much smaller the new file is.
Once you’ve compressed the image using TinyPNG, you can download it to your desktop or a shared drive folder, then move it to WordPress’s media library so you can start using it.
Don’t forget to fill out the meta information for the new compressed image, though! These fields are necessary for SEO, since Google’s crawlers will scan the meta text on the image as they rank whatever page you add it to on your website.
_____________________________________________________________________________________
🔎 Happy with your website’s page load speed but want to improve it in other ways? Check out our blog for a guide on how to perform a website audit: https://technologytherapy.com/website...
🌐 Need some guidance on what pages and features to include on your business’s website? Take this on-demand training session: https://technologytherapy.com/product...
🛒 Grow your ecommerce expertise when you take this on-demand training course: https://technologytherapy.com/product...
_____________________________________________________________________________________
🖨️ Transcript 🖨️
Here is a really easy way to compress an image for your website. So we are going to be working with this image, this David Yurman image. We can come over here and see that this is 160 KB, which is really actually not that bad, we want to make sure that our images are below 500k, any image that we are putting on our website. So this actually would be a perfectly fine size image to put on the website. But I bet we can get even smaller with this really, really cool tool that we use on the Internet called TinyPNG.
So what this does is it compresses an image for you. And it's really, really easy. So what we're gonna do is, we're just going to click in here, it's going to bring up our downloads folder, or whatever folder you send it to, we're going to select our image here, hit open, you see it's going to compress in DC, it's already done. And what's really cool about TinyPNG is it tells you right down here and right over here, how much compression it has accomplished. So it has taken this file from 156.9 kilobytes to 45.2, which is so fantastic.
So now what we're going to do is “download all” right here, open this file, we can see that we've got that right here. So now what we're going to do is we're going to come over to our WordPress Dashboard, the back end of our WordPress website, we're going to come down this left sidebar here to media. And we're going to hit the media button right there. We get to the Media Library. Let this load for a second. This is where your images for your website live and to a certain extent your video as well. So we're going to come up here and we are going to click the “Add New” button next to media library. Then we are going to “select files”, we're going to put that image with “2” over in the at the end of it in this box.
Alright, so now we've got an image uploaded to our WordPress media library. So now we're going to come in here and click this image. And over here we have some options to add a little bit of meta information to this image. What a meta information is, is the image information parsed by robots on the internet, so search engine robots crawling your website for Google or Bing or Yahoo to reflect what they find in search results. Or in the case of alternative text (or alt text), this is what screen readers will read for people who are visually impaired. Also, if your image breaks, this alternative text is what will show on the screen, so you want to have something pretty descriptive here. So you also always want to have for SEO purposes a title here. So we're going to call this David Yurman. Then for alt text, we want to, like I said we want to be a little bit more descriptive here. So let's put model on here. So then, we will just exit out of here because our changes save automatically. If you want to come back in here and our changes are still there. All right. So that is how you compress an image and save it to the WordPress media library and fill out its meta information.