Simple image optimization tips in order to increase your site’s speed

So, your website is ready, your revisions are done, and all is well with the world. Over time, however, many site owners notice that their site starts to get slower.

In our experience, what tends to be a major cause of these things is not often a plugin conflict, or bad code – it’s images. Images are usually the largest files that exist on webpages, and so they take the longest for the user to download and render them. This, in turn, will make everything else load slower as well. By simply going through the images you’ve uploaded since the site launched and optimizing them, and being sure to optimize all future images in these ways, that alone can help dramatically with keeping your site fast and making sure pages load quickly

Watch those dimensions!

Many site owners will upload photos straight from Shutterstock and similar sites, in their complete and full file size, and slap those straight on their webpages as-is.
This is actually not recommended. Most of the time, these images are significantly larger in dimensions than they need to be. To optimize the file size, simply shrinking the image down can make a huge difference.

I’ve seen many site owners upload 5000px, or even 7000px wide images, and that is completely unnecessary. Even for background images, most of the time, you don’t need them to be any wider than 1920px. Many sites, such as Wix’s or Airbnb’s homepage, have a background image no larger than 1920x1080p, and it looks perfectly fine even on hi-res 4K displays.

You can use PhotoShop or other image programs to do this, but in this case, I’m going to show you how to use a free, cross-platform program called GIMP to accomplish this. This program is completely free, and it works on both Windows and Mac.

First, head to the GIMP download page on their website, and press the “Download Directly” button. Once it’s installed, open the program, and drag-and-drop a stock image of yours onto its interface.

For this guide, I’m going to be using this free image from Unsplash from the user Jason Blackeye. The image is about 1.54MB upon downloading.

Once you see the image loaded into GIMP, head to the top and go to Image > Scale Image. See here:

Clicking that should open the Scale Image window that looks like this:

Set ‘Width’ to be no more than 1920px. Click out of the field, and the Height should adjust itself automatically to keep its ratio.

Click ‘Scale’.

From there, go to File > Export As, like so:

When the Export Image window comes up, rename the image if you want, and then click ‘Export’. If any further windows come up with settings to adjust, just click through to ‘Export’ with all of the defaults in place.

In this case, the file size should be at about 200kb, which is many times better than it was before. But we’re still not quite done yet.

Use TinyPNG

Tinypng.com is an amazing resource that we use almost every day. All you do is you drag and drop your images onto the website, and it compresses them to be significantly smaller in file size, all without making them look any worse. I’ve put hundreds of photos through this site and I have never once seen them come out looking worse, even when it shrinks their file size by as much as 90% in some cases. My advice is to never upload an image to your WordPress site without first running it through TinyPNG.

In the case of the above image, running that through TinyPNG cut its size almost in half, down to just 105kb, all without degrading the quality in any meaningful way. This is now a perfectly acceptable size for a background or full-width image on a page. Doing this with every single image you upload to your site should keep page load times quick and smooth.

Do the same with videos!

If your site has videos, especially auto-playing ones like background videos, you’ll need to be sure to keep those file sizes in check too. To do that, simply use videosmaller.com and upload your video there. In many cases, I have seen this site reduce the video file size by as much as 10 times, so I wouldn’t go without using this site for your videos.

In this case, I’m going to use a free 18MB 1080p video from Pixabay.
I’m going to leave ‘Use low compression level’ un-checked, and scale the video to a width of 1280px. (That should still look fine on HD displays. If that doesn’t turn out good enough, however, 1600px width should also be acceptable.) Also check ‘Remove audio from video’ if applicable. Then, click ‘Upload Video’.

Be cautious of the ad there. In some cases, it can appear to look a little like a button. Be sure to click the real ‘Upload Video’ button at the bottom, and not some ‘Start Now’ type button in an ad.

This takes a few minutes, so maybe get some coffee in the meantime. When you get back, it should be finished, and in this case, it lowered the file size from 18MB to about 2.66MB. Which, is still a pretty large file to load onto a webpage, but that’s about as good as it’ll get with video, and it’s significantly better than making visitors load almost 20MB on page load.

Keeping all of these things in mind, this should take out one of the largest roadblocks when it comes to site optimization over the course of time, and keep your site going as fast as it can.

Leave a Reply

Your email address will not be published. Required fields are marked *