A couple of months ago I wrote about optimizing photos for WordPress. Since then I have been testing various options and am quite pleased with the results.
When I started testing, my goal was to make photos look as good as possible on retina/high definition screens such as iPhone and iPad devices.
The procedure I outline below accomplishes this. However, I was surprised to see a great side benefit: optimizing photos for WordPress actually improved my test website’s performance because the retina/high def images were actually smaller!
Here are the basic steps I now take when optimizing images for WordPress
Before I start editing the image, I checked my theme’s optimal image sizes.
You can find the default image settings in your WordPress dashboard, under Settings > Media. But it’s also important to check the image sizes for your specific theme. The location of this info depends on your theme. I found my client’s Genesis theme image sizes by looking in the WP dashboard under Genesis > Theme Settings.
Tip: if you need to add new custom image sizes for a Genesis theme, here’s an excellent tutorial.
For other themes, you’ll likely see image sizes in the theme settings or in the theme documentation. If you’re stuck, contact the developer.
It’s important to know the theme’s image sizes so you can upload your images at exactly those dimensions. If your images are too large, you risk compromising your website performance with excess data (unless you use something like WP-Smush or EWWW to compress images). Or they might get cropped unexpectedly and hide important content. If your images are too small, they will not look as good as they can – even on standard definition screens.
Here’s the simple steps I take right now when optimizing photos for WordPress. You might need to modify it depending on your image editing software (e.g. I use Adobe Photoshop).
First, I determine the optimal image size (described above).
I get the exact size dimensions used for my WordPress theme. I don’t let the theme crop and re-size the image.
Second, I double the dimensions.
For example, if the theme’s featured image size is 358 x 200, I want a photo cropped (at high resolution) to 716 x 400.
Third, I save the image as a low quality JPG.
To get the best quality possible at the lowest compression setting, I experiment with JPG settings in Photoshop. I’m careful not to get it too pixelated. I just want the quality as low as possible with only a few artifacts or rough edges in the image. The thing to keep in mind here is that it is not as important to keep the image as sharp as you would if you were saving it at actual size.
Fourth, I use the WP Retina 2x WordPress plugin.
This plugin takes the high definition (doubled) image I created and automatically creates retina/high def images optimized for my website, and then delivers optimized images for each device used to browse the site. You can read more about it on Meow Apps’ WP Retina 2x FAQ page.
I’ve tested this simple procedure on a client site and when viewed on my iPad mini, I can see a remarkable difference in quality. For some of the images, I followed this procedure, but others I just uploaded at actual size without WP Retina 2x intervention. Wow! The retina optimized images are so much better.
Optimizing photos for WordPress does take a few extra minutes, but once you get in the habit – and when you see the difference – it will become part of your routine.
Feel free to add your experience or suggestions in the Comments below.
About Steady Digital
We provide a WordPress maintenance plan to ease concerns like:
- Is my website performing at peak performance so visitors get the best experience possible?
- Do I have regular backups of my website in case something happens to my web server?
- What if my website gets hacked?
- How can I get up-to-date, professional training so I can use my website better?
- Who can I trust to do the updates that are beyond my technical or creative abilities?
Tired of trying to maintain your own website? A WordPress maintenance plan might be the solution for you.
