How to Optimize Images for your Website Using Google's Page Speed Insights
Home »
First things first, let’s head on over to
GoogleDevelopers.google.com/speed/pagespeed/insights
When you get there, you’ll have a chance to enter in a URL. I went ahead and analyzed, for this particular case, Alyssa Turner Photography.
On mobile, we’ve got a 45/100.
On desktop we’ve got a 45/100.
What developers at Google.com is telling us that we should fix optimize images here.
It gives us some compression resizing, compression resizing some are too compressed. Telling us here that we have close to a megabyte of images on the homepage, for mobile. We could reduce it by 62% and it would load the website up considerably faster.
Now, scroll right down to the bottom.
You will find a ‘download optimized images javascripts and CSS resources’ for this page. Okay, so go ahead and click on this.
What it will do is download a zip file to your computer that we can utilize.
So, I’m going to do Alyssa Turner Photography. I’m going to go ahead and save this onto the desktop. As that loads and becomes a part of the computer here we can actually go ahead and open this up, and take a look.
So, when we open up this file, we’ll see CSS. Sometimes if you don’t have a CSS issue, it won’t correct it for you. But then, you also have images and then you have a manifest file, which we’re not going to mess with here. But here we can see the images that we have on the actual homepage.
So, we can take a look at these and test out, and see how we can get these, and make sure that these are going to look proper. So, to do this I’m going to go ahead and login to the back end of AlyssaTurnerPhotography.com.
So I here I am in the backend. We’re using Divi and this is the editor here. And we can see this is the background image for the main image of the page. I’m going to go ahead and make sure we like the video, or like the image. I’m going to go ahead and save this.
Take this image here and this is the image as it loads up, and I’m going to go ahead and save image as. And I’m going to go ahead and use that same folder, and I’m going to create a new folder here,
and I’m going to make it current.
And that way in case I decided to revert back to the image I can go ahead and do this here. So, this is DallasFamilyPhoto.jpg here.
Now, if we go back over here, what I can do is upload an image and I’ll go ahead and upload a file.
Select the file. This particular case, I’m going to be doing the new images here. There’s this DallasFamilyPhoto is the one that we have.
So, notice here this is 2.17 kilobytes, it’s 1800 x 1200.
In fact if we go back here and look here at this one we have 284 kilobytes.
We’re not getting that much out of it. If we look here at DallasFamily 217, I only squeeze not that much here. But it did compress it a little bit, and that little bit can make a difference here. So we’ll go ahead and upload the new one, the new version of it.
It’s going to be the exact same file name and we’ll go ahead and set that up here.
As soon as that loads, we will set that as the background image. We’ll go ahead and save.
I want to go over here to terms and services and look and see if it degraded the quality of the image. I don’t see any quality degradation of the image. So let’s go ahead and move forward with one of the other images on the site.
Go into this image right here, and I’m going to go ahead and save it.
So, on this image here, this is the image it’s the home1.jpg. If you notice now it’s 92 kilobyte and in the current state.
The one I downloaded is 364 kilobyte. So actually this one here is quite a bit of a difference here in size.
We can go ahead and make sure we load up the new version of it, and open it up here.
And we’ll go ahead and add that to the location, and see where we are with the speed as of now.
Go ahead and save it.
And update.
If we look here this is the old version of it,
and if I go ahead and reload it the image looks exactly the same.
I don’t see any quality degradation there.
As we move along to the next one, we can go down to and do this for each one of these images.
To see what we can squeeze out of this right here.
Making sure to save the previous image as it is in its original format.
Then we can upload these to be able to compare those to what they were.
And if we need to revert back, if the quality for some reason tends to drop, then we can improve that.
Another thing you can do is, with one file, look at the current I had was, one of the images was addi77.
And that’s not really optimized for what we’re trying to accomplish here. I went ahead and renamed it to DallasSeniorPhotos, so the exact same image.
Of course it’s going to be smaller, it’s about half the size.
As I reload that now, we have a chance to optimize the file names for these images. As we’re going through these step by step.
So, the end result here is you can see that we have upped it from a 45 to a 61.
And now the desktop here is at 71.
Now, we still have some images that this is going to need optimizing.
But this one right here, for some reason, even though we’ve optimized it and got it down. It still rendering a little bit high.
Although, if we wanted to go back and further tweak this particular one. We could do that one manually using something like Photoshop or Lightroom.
The logo I don’t want to mess with, it’s such a low amount here, but we’ve got above a 60.
60 is really the threshold that we want to keep that at, and we’re able to achieve that.
The other thing it provided for me was the CSS file, that I do not want to mess with either.
If you do want to do that, you can do some testing with, that if you’re advanced and want to test. As it did give us a CSS file to replace the style with CSS. But I’m not going to mess with that today. We’re above a 61, we’ve definitely improved the speed of the site.
The same thing can happen when you’re looking at individual blog post. You can post a blog post and then run the analytics, run the speed test tool. Then download the other versions and then have Google compress it for you. You want to make sure that it’s not compromising the quality of the image, then go from there.
So, that is how you use Google to optimize images on your website. Do you have a question for me? Comment below AND I’LL HOOK YOU UP!