Optimizing images is not a single button click. With today’s technology camera’s are taking images over 30MB in data. That is huge in size and correlates to around 3000 pixels wide or larger. Now think about the size of your computer screen. Unless you are using a big screen tv (yes it is possible, I have used one before) most computer screens are around 1800 pixels wide. That is almost half the size of your image. So what does all this mean? How do you optimize your image and keep it looking sharp? Follow along with these step by step instructions and you will be on your way to Rocking your SEO.
My image optimization process is a 3 step process. The first thing you will need is Adobe Photoshop CC. It cost $10 a month but is well worth the money. This program is amazing and does way more than image optimizing but for this post I will only be talking about image optimizing within Adobe. The second thing you will need is Wp Smush. With WP Smush you will only need the free version. Now lets get started.
Resizing using Adobe
Before you ever upload an image to your blog it should be resized to the exact width you want it. The reason this needs to happen is because even though you scaled the image inside your post down your website still has to load that large image first then scale it. This causes two issues. First you have a large image that needs to load which takes time and kills page speed. Second after it finally loads that image it has to do another process to shrink it. By resizing your image you have shortened your page load time by seconds. I know this is one of those things you think how do I know what size I want. Typically all images are the same width in all post on your site. This makes for cohesion and looks great.
Here is how to resize the image:
We will start with an image I found online. You can download it here.
First step is to open the image in Adobe Photoshop.
Now that we have the image loaded we can resize it.
- In the top menu click Image.
- Then click the 6th option Image Size. Or using windows you can press Alt + Ctrl + I.
- This will open the image size pop up shown below.
As you can see in the above image this picture is 39.9 MB at full size. That’s HUGE! But with a little magic we can get this image under 300kb.
- Click on where it says width in the pop up.
- Set the width to the size you need on your Blog. In this example my images are 600px wide so that is what I will be using.
- When you change the width the height should change automatically, if not then you will need to click the vertical chain linking the width and height and redo this step.
- Click ok and your image is resized. Don’t worry if it is really small now. That is the difference in size. Simply press Ctrl + to zoom in.
Look at the Image Size now. Just with resizing the image we have went from 39.9MB to 743.6KB. Now you can see why resizing is the most important step in this process. Resizing the image has decreased our image size by 98.2%. However we aren’t done yet. Let’s take it even further.
Image Compression Using Adobe
Image compression strips the image of any unused meta data such as colors, dates, times etc. It is similar to compressing your website. Be careful when compressing an image because if you compress it too much you will end up with a grainy or pixelated image.
How to compress an image
- In the top menu click file.
- Click on the 11th option Save As.
- In the pop up box click on save as copy. (This will insure you do not overwrite your original)
- Click save.
- If your file type is jpg you will have this dialog box.
- In the dialog box change quality to 7 and format to Baseline optimized. This will ensure the best quality with the lowest size.
- As you can see after those 2 steps we are now at 115.3kb, a decrease of approximately 99.7% .
If your file format is png you will have this format.
- Under Compression click slowest.
- Then click save.
So just using Adobe Photoshop we have gone from a 39.9 MB image size to a 115.3kb image size. This was a 99.7%. But I like to really push the limits and see just how far we can go. Is it possible to reach a 99.9% reduction? This takes us to our final step.
Uploading Using WP Smush
The final step in the process is using the WP Smush plugin to run another compression on the image. Visit the WordPress Plugin Directory to install and activate it. Once activated go to settings and make sure the Automatic Smushing is turned on.
Now every time you upload an image WP Smush will compress it one final time. So lets see what it will bring our image down to. Do you think we can get to a 99.9% reduction?
Lets look at the data. On the right side you will see our lizard image had an exact width of 600px and a file size of 77kb. That is as just about a 99.9% size reduction in only 3 simple steps. And as you can see in the image below we didn’t lose much of any sharpness or detail. The image is still crisp and clear.
This post has 11 images it has to load. Even with all of these images I am still able to fully load this page in under 3 seconds. This would not be possible if I did not optimize all the images.
You are now on your way to rocking your SEO and increasing your page speed. You have now mastered the Image Optimizing process and shrinking images 99.8% or more. Have questions or need help feel free to reach out to me. Don’t have time to do all the image optimizing on your site? Contact us for a quote.