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 optimizing 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 year’s 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 optimizing 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 equated to the amount of data that your web browser needs to download to display the image on your screen. More data being downloaded means a slower site load speed.
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 its dimensions on the 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 much larger than displayed in this blog post. The size of this example in Kilobytes is a whopping 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.
Image Compression
Image Compression is another thing to consider when optimizing 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:
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 optimizing 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 screenshots show 4 examples of different “image quality” settings and how they affect 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
How Does That Look When Used On a Website?
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 loading speed of a website is extremely important for SEO, especially as the majority of web searches are now performed using a mobile device. 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 optimize 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.
