Optimizing the images on your website can be one of the most noticeable improvements in its speed you can make. If your page takes more than half a second to load, your number of users will decline as they leave your site before it ever finished loading.
Did you know many popular tools such as WordPress may not resize your images automatically? If you insert a 3000 pixel wide image in a container 1000 pixels wide, the browser will still download the large image. The browser will then scale that image down to fit into the allotted space. Resizing your image is an absolute must for best optimization.
Let’s take a look at an example JPEG that is 4608×3456 pixels and 4.71 megabytes. Consider a mobile user who is using 3G data (which has a top speed of around 750 kilobytes per second, but often less) This image would take them 6.3 seconds to download!
Just by resizing this image down to a good size for a blog post (500×375) can bring this image’s file size to 97.6 kilobytes, which would only take our same 3G user 130 milliseconds (about a tenth of a second) to download.
Change the Image’s Quality Settings
The most common format for photos, JPEG, is extremely flexible. It has the possibility to encode the same image many different ways. Your goal is to find the happy medium of acceptable image quality to file size.
How It’s Done – Adobe Photoshop
Photoshop isn’t free, but it is by far the most popular software out there for the job.
The easy way to optimize your images is to go to File -> Save for Web. A new dialog will pop up with many options you can choose from. The image file type (shown in blue in this image) is currently set to JPEG which is ideal for the photo we’re optimizing. Be sure this is selected. By default, another format such as GIF may be selected.
There are presets for quality options for your images you can choose here as well. Change the dropdown box next to “Preset” to select “JPEG High”, “JPEG Medium”, or “JPEG Low”. These will each sacrifice more quality for smaller file sizes.
Once you’re happy with the settings, hit the Save button.
With our scaled photo, this brought the size from 97.6 kilobytes to 37 kilobytes!
How It’s Done – GIMP
There are plenty of free alternatives to Photoshop. One of those is GIMP, available from http://gimp.org/
With this tool, you have to set the options manually. Once your image is loaded and resized appropriately, go to File -> Export. From here choose a location and file name and click on Export.
Another window will pop up with the saving possibilities. To get similar results to Photoshop, change the Quality setting to 60. Under Advanced Options, uncheck the Progressive checkbox (unless you want that feature).
Finally, hit Export to save your changes to a file.
With this scaled photo, this brought the size from 97.6 kilobytes to 29.7 kilobytes!!
Can You Tell the Difference?
There are two versions of the same photo below. One is saved at 97% quality, and is 97.6 kilobytes in size. The other is saved at 60% quality, and is 29.7 kilobytes.
They’re remarkably similar, and one is a third of the size. In this example, the quality difference is most noticeable on the white icicles at the bottom. The first photo has more JPEG artifacts around the edges, and it is indeed the lower quality of the two. They’re both still beautiful, and most people would be hard pressed to find anything wrong.
It can seem a little daunting when looking at optimizing your images for your website, but once you get the hang of it, you won’t spend more than 10 seconds on each image. And why wouldn’t you?
From the original full-size photo at 4.71 megabytes down to our scaled and optimized image at 29.7 kilobytes is over a 99.99% savings!
It’s DEFINITELY worth the 10 seconds of your life and saves your mobile users valuable loading time. So they spend more time engaging with your content, and less time looking at loading bars.