One of the factors that might slow down your website is using big photos that are unoptimized for the web.
Sometimes when people try to publish something quickly, they upload photos directly from their photo cameras, at very high resolution, pictures that weight as much as 4-5 MB.
An optimized image has fewer kilobytes without any visible quality loss, and you should always optimize pictures without losing quality before or during uploading them to your site.
No matter if your site is WordPress or another platform you can optimize images for the web and make your website load faster.
One advantage of using WordPress is that you have plugins that can optimize images as you upload them to your site and also optimize in bulk existing images.
So, what are the best practices regarding photos?
Don’t lose quality
Follow your website’s objectives. Don’t optimize blindly just because some tool gave you a bad score. Tools don’t know your site goals.
If I had a fashion blog or a shop, I would show beautiful images; I don’t care what YSlow or Pagespeed Insights graded me.
Don’t get hung up on grades and scores, do what’s best for you and your visitors. Best to spend more on CDN to serve bigger, better images, than to over-optimize pictures and have an ugly website.
It might cost you visitors and money.
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 it to the bigger image.
You probably don’t need images higher than 1024px (that should be enough for most blogs) but what if you do?
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 images before you upload
You can optimize your images on your computer 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; I can still shave off another 5-10% even after optimizing with Photoshop first.
Or optimize during the upload
I don’t believe there’s one way that’s the best way to optimize images, if you don’t want to spend the time to optimize your photos on your computer before you upload them, 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 optimize the ones you already have uploaded.
I haven’t used them all, only WP Smush and ShortPixel, and I found ShortPixel to be excellent. It can shave off some KB even for images previously optimized with Photoshop and 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. When a user uploads an image that is larger, the plugin will automatically scale it down to the configured size.
WP Smush Pro also does that.
Displaying images
Now that you have optimized images you can also improve the way you present these images 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 load 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, it looked weird on mobile. There were blank spaces where photos should have been because pictures 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 your 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 straightforward 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
Every time 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:
I recommend Thumbnail Cleaner because it’s fast. But it removes all your thumbnails, not just unused ones. After it deletes, you must use the AJAX Thumbnail Rebuild plugin to rebuild thumbnails that you need.
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.
Leave a Reply