Before Image (983kb)

Did that image above take a while to load? Considering the speed of most internet connections nowadays, the answer is probably no, but as you can see below the image, it takes up nearly a full megabyte of storage. According to TechRepublic, the average internet speed in the United States is 50.2 Mbps (megabits per second). Megabits per second is a unit used to measure internet speeds, including both download speeds and upload speeds. The higher Mbps you have, the more bits you can upload to and download from the internet.

Similarly, MBps measures upload and download internet speed just like Mbps, but MBps is measured in megabytes (MB) rather than megabits. Since there are eight megabits in a megabyte, all you need to do to find your MBps is to take your Mbps value and divide by eight.

According to The Wave, a file that is 1MB (such as our image above) can be downloaded in one second if the internet speed is at least 6Mbps. If you live in the United States, then you do not need to worry about the image taking longer than that to load, since the city with the slowest internet speed is Sylva, North Carolina, with an average internet speed of 6.5Mbps.

My internet’s upload and download speeds.

I went to Speedtest to see how my internet speed is faring. My download speed is quite high, and based on the chart provided by The Wave, I would be able to download an HD film in about eight minutes. My upload speed, however, is much lower, and according to the same chart (ignoring that it’s specifically for donwload times), if I wanted to re-upload the same movie to YouTube, it would take roughly three hours.

Optimizing Your Images for Better Performance

After Image (211kb)

Now that you know a little bit about internet speeds and why they’re important, let’s discuss how to optimize your image’s file size so it can take up as little of your internet’s speed as possible. As you can see above, this image is practically identical to the one you see at the top of this post. The best part? It takes up nearly one-fifth of the space that the prior image takes. That means even if my internet speed was a measly 1Mbps, this image would still load in under three seconds.

How did I get this image to remain largely the same, yet take up so much less space? There are a few ways to achieve this, but if you have an image editor, you should be good to go.

Using an Image Editor to Optimize Your Image

In order to optimize my image, I used Affinity Photo, but you can use Photoshop if you have it, or really any other image editing software. Once you have that all set up, all you really need to do is mess around in your export settings.

Export Settings (Before Optimization)
Export Settings (After Optimization)

These are our two export windows in Affinity Photo. The first window shows the default settings, which gives an estimated file size of 1.06 MB, while the second window shows the export settings after they have been messed with, thus giving a file size of 211 kB.

Before focusing on settings, we first need to decide which format we want to export our image. The three main options for exporting an image are PNG, JPG and GIF. While PNGs are more for logos and GIFs only support animated images, JPGs are the best option for photographs and images with multiple colors. It also resulted in the lowest file size among the three.

After that, I only changed three settings in order to optimize the image: Quality, Progressive, and Embedding metadata. The Affinity support page describes these three settings below:

Quality: sets the resulting quality of the exported image. Higher quality may result in significantly larger file sizes.

Progressive: when selected, the exported image is progressively compressed for optimized viewing when downloading.

Embed metadata: If this option is off, all original metadata is removed; use this for privacy reasons or to reduce the file size (for web use).

Adjusting the quality made by far the most significant impact on file size, whereas enabling progression and turning off the metadata removed a few kilobytes here and there.

Differences in the image
Before Image – After Image

If you look at the images above, you can see the absolute slightest change in pixel quality. Because the quality on the image was bumped from 100 to 70 and progression was enable for the optimized image, the amount of pixels the optimize image projects is going to be smaller in turn. The image is thus considered “lossy,” meaning the compressed (optimized) image will not be exactly the same as its original counterpart. These differences (such as quality and color) are not noticeable unless you look at them very closely.

Optimizing your images is very important, especially if you plan on having multiple images on your webpage. The less time it takes for pages to load on your site, the longer people will want to stay on the site. While the changes to optimized images may be noticeable if given a good look, sacrificing the original look of the image for a smoother, faster web experience is much more worth it.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: