Image Optimisation – Kilobytes, Pixel Size, Compression & Scaling

It’s well-known in the digital marketing world that visuals, infographics, photos, and other forms of imagery may significantly improve the aesthetic of a website, regardless of the industry you work in or the items or services you’re trying to sell.

The images also improve the text that’s already on the page, giving it a more appealing look and making it seem well worth a visit. However, the larger the photos are, the longer they’ll take to load, slowing your page speed to a crawl.

Below I will discuss how image size, file size in kilobytes, compression and scaling should all be considered when optimising your site images for SEO.

Image Pixel Dimensions

Image size means two things, firstly the physical number of pixels that the “Full Size” image uses, the below image for example has the dimensions of 500 pixels by 500 pixels (that was a cold new years day in 2016 fishing my local canal).

Size in Kilobytes

Secondly is the actual file size in Kilobytes, the image of me with the fish is 27.5kb in size. 

These two different descriptions of file size are super important when optimising images.

The bigger the pixel dimensions generally equals a larger size in Kilobytes. This is important when it comes to site speed because the higher the number of Kilobytes an image has equates to the amount of data which your web browser needs to download in order to display the image on your screen. More data being downloaded means slower site load speed.

Fishy
Image Dimensions: 500px X 500px - 27.5kb

Image Scaling

Image scaling can be an issue, website designers often use larger resolution images to create a clearer picture and then “scale it down” to a smaller size when displaying it on the screen. So for example an image with 1920px X 1080px (1080p HD quality) is a high resolution yet could be scaled down to 500px X 281px, a huge reduction in the space the image takes up on the screen yet the file size in Kilobytes remains the same as if it were in HD format.

To illustrate this I have embedded a photo into this blog post (below) and set it’s dimensions on screen to be 500px X 281px, however if you right click on the image and open it in a new browser window (or click to load it in a lightbox window) you will see that it is actually much larger than displayed in this blog post. The size of this example in Kilobytes is a whopping 716kb.

Example Image
Full Size Image 1920px x 1080px, 716kb

This is a huge problem and one of the most common issues found on websites, the browser is downloading a larger amount of “data” than it needs to in this case. To fix this, in this example the image should be edited in a photo editing package (such as Adobe Photoshop) the pixel dimensions resized and then saved off and reuploaded to your website.

Here is the same image above, scaled and resized in photoshop, notice the size in kilobytes is down to just 57.4kb, a saving of 658.6kb in data being downloaded.

500px x 281px, 57.4kb

Image Compression

Image Compression is another thing to consider when optimising images for your website. Compression is the process of reducing the size in bytes of a graphics file without substantially altering its quality. The decrease in file size allows for the storage of more photographs on a given amount of disk space. It also helps to speed up the transfer of pictures over the Internet or when visiting Web sites.

There are several different ways to compress pictures. The JPEG and GIF file formats are the most popular ones for online usage. The JPEG approach is more frequently employed for photographs, whereas the GIF technique is commonly used for line art and other graphics with simple geometric forms.

Examples:

Taking an image of the same pixel dimensions (900px X 600px) and saving them as JPEG and Gif Formats.
JPEG High Quality
JPEG - 484kb, 900px X 600px
GIF High Quality
GIF - 296kb, 900px X 600px

Notice that the kilobyte size in the Gif version of these two images is much lower (296kb for the gif and 484kb for the jpg), however if you look closely, take the DJ in the background for example you will see that the Gif is much lower quality than the JPG version.

This is where choosing the format of the image depending on its purpose and subject matter becomes important.

Using Photoshop "Save As Web" to compress images.

Adobe Photoshop is a great tool for optimising images for your website, the save for web function in Photoshop helps to reduce file sizes of photos by compressing them, however there is a reduction in overall image quality. The below screen shots show 4 examples of different “image quality” settings and how they effect the overall file size of the same photo in Kilobytes.

Example 1: 100% quality = 486.8kb

Example 2: 80% quality = 197.8kb

Example 3: 40% quality = 60.1kb

As you can see, the save for web web tool can save you a lot with regards the kilobytes of an image.

How Does That Look When Used On a Website?

Below are examples of this Jpeg image at 100% quality and 40% quality and for the hell of it 1% quality. (Click to enlarge)
JPEG High Quality
100% Quality - 484kb
40& Quality JPG
40% Quality - 50.8kb
1 % Quality
1% Quality - 24.5kb

There is a definite reduction in quality between 100% and 1%, but is 40% much worse than 100%?? This is a great question and something that must be considered, how much compression can you “get away with”. The difference visually between 100% and 40% may be small however the kilobyte file size is greatly reduced from a huge 484kb down to a more acceptable 50.8kb. However if images are compressed too much they start to look unprofessional like the 1% quality example as an extreme.

There is also “lossy” and “lossless compression” which can make a huge difference, this blog post by Keycdn.com explains this in a much more thorough way than I ever could.

Summary

The load speed of a website is extremely important for SEO, especially as the majority of web searches are now performed using a mobile devices. One of the major things which slow websites down is the images used on the pages. Paying close attention to image pixel size, kilobytes, scale and compression can help you to speed up the pages on your website. Helping to optimise your imagery for SEO and speeding up the load times.

Ironically, due to the subject matter of this post and the example images I’ve used this post will likely load fairly slowly!

If you would like to discuss your SEO, image optimisation or site speed please feel free to contact me directly via my web form or call 07581 073 926 for a FREE consultation.

Please share my content...

I appreciate your time, thank you for reading my content, if you don’t mind it would help me out if you would consider sharing it on your social accounts.

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Read my most recent blog articles...

How to rank nationally with SEO
AndyMorley

How To Rank Nationally With SEO

Organic traffic is highly important to any website or business, organic being totally FREE (unless you’re paying an SEO consultant for managing your SEO) it gives you a fantastic opportunity to grow your business and promote your products and services.

Read More »
Top 13 WordPress Plugins for 2022
AndyMorley

Top 13 WordPress Plugins for 2022

These top 13 plugins for WordPress can be used by professional website designers and those wishing to build their own websites, they are easy to use and most of them are also FREE (although they do have paid for premium versions).

Read More »