How to Compress Images & Make Your Site 25%+ Faster

Introduction

It's a fact: slow websites kill conversions.

Did you know that around 47% of online web visitors expect websites to load in under two seconds? Furthermore, 40% will even abandon a website that takes more than three seconds.

What does this mean? If your website takes more than three seconds to load, you'll end up losing almost half of your potential visitors before they even see your website.

Your website's load time even impacts the visitors who stayed on your website. In fact, slow load times can deter the visitors who stuck around the first time from coming back. In one survey, just under 80% of consumers said they would not return to a website with poor performance.

Did you know that, if Amazon's website was one second slower, it would cost them an estimated $1.6 BILLION in sales? And that was in 2012! (source)

At this point, it should be obvious that page load time plays a huge factor in whether or not your website converts visitors into customers, affecting your bottom line. But how can we make a website load faster?

Resizing and Compressing Images.

While there are many strategies to optimize your website's load speed, one of the biggest and most impactful strategies to make it load faster is by resizing and compressing your images. In this guide, we'll show you the tools and strategies we use to resize and compress our images, and test our page's load times. But first, let's take a look at how compression actually helps your load time.

How to Resize and Compress Images

When a visitor clicks on a website, their browser (Chrome, Safari, Firefox, etc) requests the website files from the web server. Website files includes the HTML code, CSS, JavaScript, and all the images and multimedia on the website. When the visitor's browser finishes "downloading" the files from the server, the browser compiles the files into a finished website, which the visitor can see and interact with.

HTML, CSS, and JavaScript files are usually pretty small (with some exceptions) in comparison to images and videos, which can often be in excess of 1.0 megabytes. Images tend to make up the majority of a website's size.

For example, here's the Carbon Creative homepage. Take a look at the Total Page Size bar (the top one)

As you can see, over half of the page's total file size (1.27 megabytes at the time of writing) is comprised of images.

Images are often times the largest chunk of a web page, so compressing them first will reduce your page size drastically, and as a result, your page's load speed.

Before we show you how we resize and compress our images, let's distinguish the difference between resizing and compressing images, and why we do both.

How to Resize Images

Resizing images is the process or action of changing the image's dimensions, which results in a smaller file size.

Let's assume that your smartphone takes photos, and these photos are 6,000 pixels wide by 4,000 pixels high. You want to upload a photo directly from your camera to your website. Your visitors use a desktop computer and a smartphone to view your website.

Your visitors' desktop computers have screens that are 2,560 pixels wide, and their smartphone screens are 1,170 pixels wide. If your image is 6,000 pixels wide, it's exceeding the maximum width that your visitors will even be able to see by at least 3,440 pixels.

So why do we need those 3,440 pixels if they can't be displayed? After all, loading a huge image when visitors can't perceive a difference is wasteful and contributes to load time. Can't we just reduce the amount of pixels in the image?

That's where image resizing comes in.

By resizing the image to the maximum expected width your viewers will be viewing your content on, you can trim out the unnecessary pixels and data in the image that visitors won't see. We recommend using images that don't exceed 2,560 pixels wide or high, whichever is the highest of the two.

Let's get into how you can resize images.

How to Resize Images on MacOS

If you've got a Mac, you can easily resize your images using the built-in Preview application.

• Download an image, or find one on your computer, then double click it to open it in Preview.

• Click on "Tools" in the menu bar, then click "Adjust Size," the fourth option from the top.

• In the dropdown to the right of Width and Height, make sure Pixels is selected. It might say inches.
• Next, make sure the padlock is locked, and you can see a bar connecting Width and Height, If the padlock is unlocked, it will distort your image, rather than scaling it proportionally.
• After that, change the higher of the two numbers (if it's a vertical image, height, and if it's a horizontal image, width) to a maximum number of 2,560. Your window should look similar to this:

• Click OK.
• Save the image by holding Command + S or doing File > Save.

How to Resize Images on Windows

If you've got a relatively recent PC with Windows 10, resizing images is also easy.

• Download an image, or find one on our computer, then double click to open in the default Photos app.
• In the top left of the screen, click the ellipses (...) and choose the "Resize" option.
  

• Next, click "Define Custom Dimensions," which is the last item in the list of options.
  

• You should see a window that looks like this:
  

• First, check the box that says "Maintain aspect ratio" if it is not already checked. Otherwise, your image will end up distorted. Next, set Quality to 80% or higher. Finally, change the largest dimension to a maximum value of 2,560.
• Then, click Save Resized Copy. We usually keep the same name for our images, adding "-Resized" to the end to make sure we've got the right image. For example: "New-Website-Image-Resized."

We're not finished yet! We still need to compress our image.

How to Compress Images

Next, we need to compress the image we just resized. When resizing images, extra junk gets added into the file that we don't need, so we always compress the image after resizing.

Compressing, in essence, just gets rid of unnecessary junk that doesn't pertain to the actual image itself. If you're interested, you can read more about image compression on this Wikipedia page.

We use a website called Compressor.io to compress our images. Open up a new tab in your browser, then go to Compressor.

Click on "Select Files," then find the image you just resized -- for Mac users, it will have the same file name as the original image, and for Windows users, we want to grab the file that has "-resized" at the end (if you followed the same naming convention we use.)

When you upload the file, it will automatically begin compressing. After it's finished, it should look something like this:

You can see how much you saved by looking at the bottom orange bar, where in this example we saved 2.23 Megabytes. Holy cow!

Next, click the download button on the image row to download the resized image.

Note: Compressor.io sends the compressed image to your downloads folder with the same filename you uploaded it as. It might append a (1) or a (2) to the file if there was already an image with the same name in your downloads folder. When uploading the compressed file to your website, use the most recent version of the file.

All done! Just upload to your site.

Now that you've compressed and resized your image successfully, you can upload the final version to your website and rest easy knowing that you're getting the fastest load time possible for that particular image. If you're building a site from scratch, we recommend doing this as you build the site. If you're optimizing an existing site, you'll need to do this for all images on your website.

Conclusion

Optimizing images is one of the many ways you can increase your website's speed. However, it's often difficult to imagine just how much of an impact it can have on overall performance. In any case, there are plenty of tools you can use to optimize your images.

From our own testing, we found that image compression can improve loading times around 10% in most cases. However, this is the lowest end scenario, because we saw even better results, all the way up to a 25% performance increase. As we know, every second can have a huge impact on your bottom line.

Your mileage may vary, depending on how many images your pages include, what you resize them to, and the optimization tools you use.

Do you have any questions about image optimization, or want to build a new website with us? Steelman Digital is the best web designer in Oklahoma City, and we're here to help. Don't hesitate to drop us a line by clicking here!