Main navigation

03Optimize your images for the web

One of the factors that might slow down your website is using big photos that are not optimized for the web. No matter if your website is built with WordPress or another platform.

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 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.

Displaying images

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.

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.

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.

Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, we will receive an affiliate commission. Regardless, we only recommend products or services we use personally and believe will add value to our readers. We am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”