One of the questions a new blogger usually asks is, “How do I optimize images in WordPress?”
This is especially true if you are a photographer. Naturally, a photographer will likely incorporate a good amount of imagery on his/her blog.
Food, Fashion, Lifestyle, and even more so, Travel Blogs will rely on a good deal of Imagery as well. Photos tell stories, and when you’re talking about a specific destination, people want to see and experience what you experienced.
Photos are great! The problem, they are not so great when you are talking about acceptable page load times. After all, a slow website is bad for SEO, Google doesn’t like slow. Even more so, visitors to your website don’t like slow either.
Learning how to optimize images in WordPress is key to maintaining a successful blog. If your blog is slow then you are probably wondering, what can I do to speed up it up? Are my images holding me back? What can I do about it?
Amazing WordPress Recommendations
| SiteGround | WordPress Recommended Host |
| NameCheap | Recommended Domain Registrar |
| WP Rocket | The One Plugin I Purchased – Speed Matters! |
| Online WordPress Classes | CreativeLive WordPress Training Classes |
How do you optimize an image?
When we talk about optimizing an image, we are really talking about file size. How many Kilobytes or god forbid, Megabytes is the image?
According to the WordPress.org Image Size and Quality Guide, a small image should be around 30K where larger high-quality images should be around 60-100K.
Personally, I try to keep the original upload size under 200K and limit the number of images on any one page. If a post is going to be image-heavy then adjust accordingly, shoot for under 100K per image.
It’s important to note, WordPress will automatically create smaller sizes of the original file and use them where appropriate. You never want to leave it up to the web browser to resize your images.
For example, If your original image has a dimension of 1200 px on the long side than WordPress by default will create 3 smaller versions.
- Original file: 1200px
- Default Large size: 1024 px wide.
- Default Medium size: 300 px wide.
- Default Thumbnail: 150px wide (square)
Note: Some WordPress themes will create many more versions of the original file, sometimes to a detriment. If your WordPress theme creates 17 additional image sizes for each image you upload then that is 17 more files on your server. If you’re using a plugin that prices based on # of images optimized that’s also 17 credits used on ONE IMAGE!
Going back to my original image file, let’s say, straight out of camera, it is 2MB. I want it to be 200KB. To achieve this we need to decrease the dimensions of the image and apply some form of compression.
If the original image from my camera is 5184 × 3456 pixels, but you’re only going to display it at a max width of 1024 pixels than we can decrease the dimensions. We can also apply some level of compression to the image and further reduce the file size.
If applicable and desired, we can also strip the image of EXIF data. EXIF data is information about your camera, lens, exposure settings, and possibly geolocation. This information, though slightly, also increases the size of a file.
So how do you do all these things? In this post, we will discuss two different ways that you can optimize your images for WordPress.
In the first method, we will discuss how to optimize images for WordPress without a plugin. For the second method, we will use some WordPress plugins.
Before we do that however, I want to do a quick overview of the two main types of image compression.
Lossy vs Lossless Compression
Lossy: Lossy means the compressed image is going to show some quality loss but the resulting file size will be much smaller. How bad will the image look? It depends on how much compression is used.
In Lightroom for example, you have a quality slider where 100 is a little compression and 10 is “this image is going to look terrible” but the file size will be small.
Lossless: Lossless means that the optimized image is pixel-by-pixel identical with the original. If you want the quality of your image to remain untouched, then this is the option for you. The downside, we are talking about taking a 616KB image and turning it into a 581KB image. Is that going to make your website fast?
The answer is no! Therefore, when looking at the comparisons below we will be focused on Lossy compression. We are looking for the happy medium where our images still look good to the average person but our files size is relatively small.
“Your slow website is murdering your conversions.” — See Imagery Share on XThe Test Image we will Optimize
Our image in this case has already been resized from 5184 × 3456 pixels to 960 x 640 pixels in Photoshop. This is because some of the programs mentioned here do not include the ability to alter the image dimensions.
Still, in the case of Lightroom and Photoshop, I show you how to input these settings at export as this is an important part of exporting/optimizing your images.
How to Optimize Images for WordPress without a Plugin
For me, this is always the preferred way. If you are a photographer, you are likely already in Lightroom or Photoshop and working with a RAW file.
You have to export the image as a JPEG anyway. Why not just make it part of your workflow? It just makes sense to create some export presets that are the perfect size for web use.
The advantage of using Lightroom or Photoshop is two-fold.
One, you are always in complete control. You know exactly what is happening. You have complete control over the settings. You know the what, how, why, and when for each image.
Two, you don’t have to use a plugin! I have a love/hate relationship with WordPress plugins. With each additional plugin, you risk security breaches, site crashes, and slower performance.
Furthermore, you often have to pay to use a plugin. You might get some free credits each month but ultimately they want your money.
You already own Lightroom and Photoshop, let’s put these programs to work! Alternatively, you can also use an online option like JPEGmini.
How to Optimize Images for WordPress using Lightroom
For this, we are going to create a Lightroom preset for exporting your images ready for the web. For me and my workflow, Lightroom has become my preferred method for image optimization.
File >> Export
The only tabs we are concerned about are File Settings, Image Sizing, and Metadata. Do note, if you choose to use the Output Sharpening tab, it does slightly increase file size.
Step 1.) Under File Settings, for Image Format: JPEG, Quality: 60 / Alternatively, Set Limit File Size to 100K, this disables the quality slider as it will choose the best quality while keeping the file size under the specified amount. Colorspace: sRGB.
Step 2.) Under Image Sizing, Resize to Fit: select Long Edge, then choose max-width in pixels. Personally, I use 960px. Don’t worry about resolution as it’s only important when printing.
Step 3.) For Metadata: Copyright Only. Feel free to include more but I personally do not.
Lightroom Image Optimization Results
At Image Quality 60 we took a 616KB image and made it 149KB, that’s a savings of 75.81%. One of the most obvious changes is the blue arch area just right of Elsa. Look closely and you can see some additional noise but would the average visitor notice?
For Limit File Size 100K we took a 616KB image and made it 83KB, that’s a savings of 86.53%. Going further, we have made significant savings here. Again, look just right of Elsa to see the most noticeable change. Yes, as a photographer, you probably see the additional noise even on Elsa’s face.
Still, would the average person notice? When the choice is page load speed vs quality I think you have to choose speed. People aren’t staying on your website otherwise.
How to Optimize Images for WordPress using Photoshop
Let’s look at the steps we would take in Photoshop. As with anything in Photoshop, there are a lot of ways to accomplish the same thing. Additionally, your menus may appear slightly different depending on your version of photoshop, etc.
If you are using a newer version of Photoshop you may have “Quick Export as JPG”, “Export As” as well as “Save for Web (Legacy)“. We will be using Save for Web Legacy but the process and settings are similar for each method.
File >> Save for Web OR File >> Export >> Save for Web (Legacy)
Step 1.) Choose JPEG
Step 2.) Set Quality to 60, make sure Optimized is checked as well as Convert to sRGB.
Step 3.) Set Metadata to copyright.
Step 4.) Set the Image Size. For my purposes 960 px on the long side. For this image, the long side is width so I input 960 in width and make sure the link icon is active to maintain original image proportions.
Note: In the bottom left corner under the preview image you should see the new file size based on your settings. In the image below it’s 147.8K. If you want it to be smaller lower the Quality.
Photoshop Image Optimization Results
Photoshop took our original 616KB image and turned it into a 149KB image quality 60. This is identical to the result we got in Lightroom and results in a savings of 75.81%. The quality is near identical as well. Again, looking to the right of Elsa you can see some slight noise in the Arch.
To my knowledge, Photoshop does not have a limit file size option. Still, I wanted to compare the results of a similar file size produced by Photoshop.
To do so I lowered the image quality to 41. Below the preview image, I could see that this change would result in a file size of 82KB. Remember, our Lightroom file size was 83KB.
The above comparison is the image quality 41 compared to the original file. The below comparison is the 83KB Lightroom file compared to the 82KB Photoshop file.
How to Optimize Images for WordPress using JPEGmini
Photoshop and Lightroom are not our only options when we want to optimize images for WordPress without a plugin. There are really a lot of options but the one I hear a lot about in blogging circles is JPEGmini. So, I figured I would give it a try.
JPEGmini is a desktop application and comes in 2 versions, Pro and Pro Suite. Pro is basically the stand-alone desktop application. The Pro Suite version includes the stand-alone app plus Lightroom, Photoshop, and Capture One Plug-ins. JPEGmini Pro also has a Free Trial that allows you to optimize up to 200 images.
Step 1.) Drag the image to be optimized into the Drop Photo/Folders Here area. That’s it! Do note, the default settings overwrite the original file with the optimized version.
For my test, I used the Free Trial Version. I made no changes to the settings and just uploaded our original image file and let JPEGmini do its thing. Here are the results.
JPEGmini Image Optimization Results
Not bad, right? I can still see some minor noise in the arch to the right of Elsa but I’m really looking for it. The image looks pretty darn good but the file size is still 168KB.
Remember, our Lightroom and Photoshop exports at Image Quality 60 were both 149KB so just slightly smaller. Overall, with JPEGmini, we saved 72.73% in space.
How to Optimize Images for WordPress using an Online Image Compressor
So far we have been using desktop applications to optimize our images for WordPress. What about online image optimizers? How do they stack up? For this test, I decided to use two popular online image compressors, Kraken, and TinyPNG.
Again, I will be using our original image and the default settings for each program. I’m just going to drag the image into the box and let the magic take over.
How to Use Kraken
Step 1.) Below is the Kraken interface, simply click to upload or drag your image into the box. Do note, Kraken does not give you the option to resize your image unless you upgrade to PRO. You will have to resize your image to the desired dimensions first.
Step 2.) Once the file is optimized the results will display below with the option to download the new file.
Kraken Image Optimization Results
Kraken took our original 616KB file and reduced it to 210KB, a savings of 65.91% with the default settings. I’m not really digging the results, however. Even at 210KB, I think it looks no better or maybe even worse than our image quality 60 Lightroom export.
Of course, I’ll remind you this was all with the default settings. Kraken allows you to adjust image quality on a scale of 1-100, similar to Lightroom. Still, even at 210KB, I’m not happy with the results, moving on.
How to use TinyPNG
Step 1.) TinyPNG is stupid easy too. Simply drag your image into the box and voila, image optimized. Similar to Kraken I do not see any option to change the dimensions of the image in the Free version. So yeah, you would have to resize your image to the desired dimensions first.
Step 2.) Download the optimized image.
TinyPNG Image Optimization Results
TinyPNG took our original image of 616KB file and reduced it to 99KB, a savings of 83.93% with the default settings. That’s pretty significant but the loss in quality is also more noticeable. Similar to the Lightroom and Photoshop files under 100K you can see more visible noise in the arch as well as on and around Elsa’s face, dress, etc.
How to Optimize Images in WordPress using a Plugin
No doubt, there are some unique advantages to using a plugin. The convenience of just uploading your files and having a plugin do all the lifting is pretty nice. You can even have the plugin resize your files to the exact dimensions you specify.
The downside, we went over this but I’ll mention it again. The process is taxing, every image seems like it takes forever to load. Then there’s the whole, how many plugins are too many? Remember, each additional plugin you add to the mix increases the risk of security breaches, site crashes, and slow performance.
But let’s get on with it. The Plugin we will be testing is ShortPixel. I hear a lot of people mention it in Facebook Groups, etc. Many bloggers seem to like it for image optimization so let’s put it to the test.
Note: ShortPixel is a freemium plugin. You get 100 free credits/month and have to purchase more when you run out. You might think, 100 credits is a lot but remember, WordPress creates 3 additional copies of each image you upload. You have the original but also, large, medium, and thumbnail. Themes and plugins can increase this amount by a lot. I’ve seen themes create as many as 20 additional sizes! Credits go fast, trust me.
How To Set Up ShortPixel On Your WordPress Site
Step 1) Install and activate the ShortPixel plugin
Like any WordPress plugin, simply go to Plugins >> Add New and type “ShortPixel” in the search box, upper right corner. Activate the plugin.
Step 2) Request your ShortPixel API key
Once the plugin is activated you will need to get an API key. You should see a notification but if not go to settings >> shortpixel
From here, simply enter your email address. The API key will be mailed to you. Return to settings >> shortpixel and enter the key. Then hit validate.
How To Configure ShortPixel Settings
The main thing you need to decide here is if you are going to choose Lossy, or Glossy. If the goal is a faster website Lossless is not enough. I ran our sample image through Lossless just to demonstrate, we went from a 616KB file to a 581KB file. That’s not enough to bother.
ShortPixel offers a lot of other settings too. Most notable, “Resize Large Images” to a maximum width/height in pixels, and convert PNG to JPEG. I’m only scraping at the surface but this is not a ShortPixel review. We are most interested in image compression results. Let’s get to those!
ShortPixel Image Optimization Results
Lossy, took our original photo and turned it into a 54KB file, a whopping savings of 91.23%! Glossy turned our original image file into a 119KB file, a respectable savings of 80.84%. Comparison results below.
The Lossy Compression above is pretty aggressive and we can’t pretend the image quality isn’t impacted. The savings is tremendous however and unless your trying to run an online art gallery, maybe the savings is worth it.
The Glossy Compression above is not quite as hard handed as the Lossy Compression. Perhaps this is something you can stomach a little easier. I know how photographers are, we are all pixel peepers to some degree.
Final Thoughts on Image Optimization
I know what you are doing. You are sliding the slider back and forth obsessively and trying to decide which program gives you the best result for the least file size. You don’t want to sacrifice quality but at the same time, you know page load speed is important.
Is one of these programs better than the other? Does ShortPixel provide better quality relative to filesize, than Lightroom or some other program? OK fine! Let’s do one last comparison, Lightroom vs ShortPixel.
For this test, my goal was to optimize the Lightroom Photo until it was close in file size to the 119KB ShortPixel Glossy optimized image. The closest I could get was 121KB, so yeah, really close! What do you think? Is there much of a difference?
Lightroom vs ShortPixel Image Optimization
My thoughts, No! There is not a significant difference. Not enough for me or you to be racking our brain over. Therefore, for me, and you, it should come down to workflow.
For my workflow, it makes sense to just optimize all my images for the web from Lightroom. Typically, I’m working with a Raw file and have multiple custom presets for exporting to JPEG. One such export is, Save for Website.
Again, I also really like the “Limit File Size” option in Lightroom. It allows me to set a max file size I’m willing to accept. That way, for posts that have few images I can go for quality. But, if the post is really image heavy then I can set the Limit File Size option to something like 100KB.
Best Books on WordPress and Blogging
Join the Tribe
I hope you found this post helpful, please leave a comment and tell us how you optimize your images for WordPress.
Also, if you want to join an amazing tribe of photographers, artists, and other creatives. Check out our Facebook group, NFT Photography Community.
Also, don’t forget to jump on the email list to get some free Photoshop Overlays and my weekly email. I want to talk with you about inspiration, photography, blogging and just staying motivated.
Leave A Comment