How to Optimize an Image for WordPress
There is a right way of how to optimize an image for WordPress websites, so that all of your images load superfast.
LEARN WHY Wealthy Affiliate IS MY #1 RECOMMENDATION
This practice will even further enhance your loading speeds from my previous training. (To view training, click on the link at the end of this post)
First I’d like to share with you a simple habit I always use that either too many people aren’t aware of, overlook, or simply take for granted.
More...
It will make a big difference in your image optimization which will transfer to much faster loading speeds for your websites.
I always pre-compress all of my images before I upload them to my Media Library in my WordPress Dashboard.
Ever since I’ve been doing this, the difference in my page speeds has been night and day.
There are affiliate links within this post. What this means is that if you decide to purchase anything through one of my links, I'll be rewarded with a small commission at absolutely no extra cost to you. This small commission helps me run and maintain my website.
When An Image Opt Program Isn't Enough
You may say “Well, I have the EWWW Image Optimizer activated, that takes care of it.”
The answer is the EWWW Image Optimizer or any similar plugin that offers “lossy compression” is not the answer.
Believe me, I used to think this was true as well. But having used the EWWW Image Optimizer or an equivalent lossy compression plugin by simply having it activated and letting it do its job was never enough.
I have learned this through hard experience. My go-to platform Thrive Themes has a feature called Lossy Compression (inside Thrive Options) that when turned and left on, is supposed to automatically pre-compress all the images you upload through Thrive onto your Media Library.
However, I have learned the hard way that simply running it through this Thrive plugin (or any plugin) is far from ideal. These pre-compressed images through a plugin will still slow down your site. It is simply not enough.
The only solution will be to manually pre-optimize all of your images.
Ever since I’ve been manually pre-compressing my images, my pages have been loading superfast. In addition to taking this extra pre-compression step, you can do additional editing within the Media Library.
I cover everything else on optimizing your site speed in my evergreen training. Simply click the link near the bottom of this post.
How to Optimize an Image for WordPress: Find Free Compression Programs
My personal favorite compression program (and the one that I currently use regularly) is Optimizilla and it FREE. However, there are several other image optimization programs out there that are FREE.
The free versions of Kraken.io, TinyPng, and Squoosh all work very well. At one time or another, I have used all of them.
Kraken.io, Squoosh, and TinyPng will pre-compress your images and do a great job before you upload them into your Media Library. In addition to these three, there are a few other great free programs that you can find if you simply Google them.
All of these image optimization programs also have paid for premium versions, but you won’t need any of them. Therefore I would only recommend that you use the Free versions for all of them.
You should find that FREE version will be more than enough to get the job done!
How to Optimize an Image for WordPress: Here's What I Do
Ideally, in terms of dimensions I want my final image to be the exact size as it will appear on your web page or post. Or at the very least, I will want it to be close in size to the actual size it will be on your web page.
Next I make sure ALL of my images are pre-compressed, I always aim to have every one of my images pre-compressed to less than 100kb after uploading them.
Most of the time I will get the majority of them to less than 50kb. This is ideal and in the end what you want to achieve.
Use PNG Files for Super Sharp Images or Transparent Backgrounds Only
PNG files are great if you need a super sharp image or one with a transparent background. However, most of the time you won’t need them, as PNG files are much larger files. By adding several PNG files to your blog post or web page, you will find that the aggregate size of the images will cause a highly detrimental effect.
Loading many PNG images in any blog post or page will significantly slow down loading times on your site.
That’s why I first convert all of my images to.jpeg if they are .png’s almost all of the time (unless I need a super sharp image or one with a transparent background). The way that I accomplish this is by using Canva.
If I can best avoid it, I will try not to use too many GIF’s. GIF’s are files that take up a lot of memory. I only will use GIF’s sparingly within my posts and pages for special effects.
Note that it is perfectly acceptable to embed the custom HTML code for displaying videos on any post or page. The videos live elsewhere on other platforms such as You Tube and Vimeo and will not take up any memory.
How to Optimize an Image for WordPress: Fitting All the Pieces Together
Let’s now fit all the pieces together in order to summarize the process of how to optimize an image for WordPress.
Here is my 10 Step Pre-Compression Blueprint:
Once these 10 Steps to my Pre-compression Blueprint are completed, you can then add those images to your website. And you can add them with the knowledge and comfort that you will have completely optimized images.
As I mentioned, pre-compressing all of your images first before uploading to your Media Library is only one important component to get your page speeds loading superfast.
By adding this 10 step pre-compression blueprint, in addition to following all of the steps in my full comprehensive evergreen training, in short order your Site Speeds will be BLAZING!
How to Make My Site Load Faster
I hope this short post on this important technique of how to optimize an image for WordPress will help you to drastically increase your page speed load times both in desktop and mobile.
And decreasing page speed load times you will greatly increase the quality of the user experience.
Once you see its effects, you will never want to look back!
If you enjoyed this post on image optimization for WordPress, please feel free to make any comments below.
When you say “preoptimize,” if you put all your pictures in your media library before you put them in your post, won’t my Kraken plugin do all the optimizing they need?
I just disabled my Smush plugin, since I have Kraken. When I select a pic from the media library, it says it is already optimized. Both plugins say the same thing. I don’t know how to optimize it before putting it in the media library unless I use tinypng, and that is too slow.
Could you clarify, please?
Thanks for your comment Fran. Like any plugin, your Kraken optimizer isn’t doing enough optimization. The best thing to do is to manually optimize each image 1-by-1 first, and then load them into the Media Library. Make sure all of your images are <100kb.