I have seen this situation especially on fashion blogs, online newspapers, or online magazines. Sometimes when people try to publish something quickly, they upload photos directly from their photo cameras, at very high resolution, photos that weight as much as 4-5 MB.
So, what are the best practices regarding photos?
Don’t upload images bigger than you need
If your content width is 620px then you should resize your images to 620px width before you upload them to your website.
If you want visitors to see a bigger image when they click on it then you can use a 1024px width. Set one of the WordPress thumbnails to be 620px width and use that thumbnail on your page and link to the bigger image.
You probably don’t need images higher than 1024px (that should be enough) but what if you do? Maybe you want to sell photos or prints.
In that case, you might consider uploading images at larger resolutions and use a CDN.
We’ll get more into detail about CDN in a minute.
Optimize before you upload
An optimized image has fewer KB without any visible quality loss.
You can optimize your images with Photoshop. Some people recommend you make your image a bit sharper with Smart Sharpen, Unsharp Mask, High Pass Filter, or whatever tool you like, Photoshop has multiple options. I haven’t seen much of a difference (in KB) after sharpening but I’m not a Photoshop master.
Resize the photo to the resolution you need on your website, use Save for the web, choose JPG, Quality between 60-80%, check Progressive then Save.
I recommend you use JPG, unless you need transparency and need to use PNG.
If you don’t have Photoshop you can use these tools for optimizing:
- Riot (Windows)
- Imageoptim (Mac)
- Jpegmini (online, Mac & Windows)
- Kraken (online)
- Compressor.io (online)
I use Jpegmini myself, even after optimizing with Photoshop I can still shave off another 5-10%.
Or optimize during the upload
If you don’t want to spend time to optimize your photos on your computer before you upload them on your website you can choose to let a WordPress plugin do all the work for you.
There are many WordPress plugins you can use:
- WP Smush – Image Optimization
- ShortPixel Image Optimizer
- Kraken.io Image Optimizer
- Optimus- WordPress Image Optimizer
- EWWW Image Optimizer Cloud
- Imagify Image Optimizer
With these plugins you can optimize images on upload and also bulk optimize the ones you already have uploaded.
I haven’t used them all, only WP Smush and ShortPixel, and I found ShortPixel to be very good, it can shave off some KB even for images previously optimized with Jpegmini.
Another useful plugin is Imsanity.
If you have a multi-author site then you need to control what images people upload. Set a max width, height and quality and when a user uploads an image that is larger, the plugin will automatically scale it down to the configured size.
Now that you have optimized images you can also improve the way these images are being displayed on your website.
If you have a lot of photos on a page, like on a fashion blog, for example, you can take advantage of lazy loading.
That means your images will be loaded only when they’re visible, as the visitor scrolls down.
You can use one of the following WordPress plugins for that:
I can’t tell you which plugin is better, you need to test because there might be incompatibilities with your theme. For example, lazy loading doesn’t work for featured images if you have a Genesis Framework theme.
Also, as I was testing lazy loading on mobile it looked weird, there were blank spaces where photos should have been loaded because photos were not loading as fast as they did on desktop view.
Another thing you can do to speed up loading time is to serve images from a subdomain, like images.domain.com.
You need to create a subdomain from cPanel or whatever control panel you hosting company is offering and then setup WordPress to load media from that subdomain using the WP Original Media Path plugin.
I can write a detailed blog post for people who want to do that (if anyone requests it) but my recommendation is to use a CDN instead. It’s a much more simple solution.
Use a CDN
Cloudflare is super easy and free. You just change your domain nameservers to Cloudflare and activate (check orange cloud for DNS entries) and that’s it, your static files (images, css, js) will load from the Cloudflare CDN.
There are other CDN companies you can use, listed below, but I think Cloudflare is the easiest to implement:
Clean up after yourself
This is something that almost no one does.
Everytime you switch themes you leave behind a trail of unused thumbnails and database entries related to those images.
When switching themes, you can use the AJAX Thumbnail Rebuild plugin to rebuild thumbnails to fit your new theme.
Old thumbnails can be deleted from the server using one of the following plugins:
The unused thumbnails don’t affect your website performance, they just occupy space on your server. But, there are database entries related to those thumbnails and it is a good practice to keep your database as clean as possible.
That’s what we’ll do in the next step – clean up the WordPress database.