Size Matters

PLS Warning

Because of the nature of this article, the page is intentionally heavy and slow to render!

Images and diagrams are a great way to increase interest in a webpage adding both aesthetically and contextually to the content you create. Used correctly images give a richness and natural break to large bodies of text. We have added many new content types that give you the option to create much more appealing pages. You will, of course, want to use the best images you can so your pages look great. Having great looking imagery though does not always have to mean having large file sizes too.

Why is it important?

When we think about our content and how best to present it to our audience we must consider some things, for example;

  • What is the best way to convey this information?
  • How can I make it compelling and informative?
  • Will this page have a negative impact on mine other peoples pages?

These are a few simple questions we should all be asking ourselves before we begin work on a new page (or indeed adding to an existing page!). When thinking about the sort of negative impact, an image could make think about how fast the page will load and if the amount of images outweighs the supporting text. 

Full span images

If the page you are working on requires imagery that goes from one side of the content to the other, then you should aim to either create your image be to at minimum 1920 pixels wide. The height can be any value. However, we would recommend;


1920 x 1080

a 21:9,16:9 or 4:3 aspect ratio is the recommended with a minimum horizontal width of 1920 pixels for use on our site. you can resize your images to make them bigger to fit this recommendation however you may lose detail. need more information about aspect ratios? check out https://en.wikipedia.org/wiki/aspect_ratio_(image) for an excellent overview.

An example of optimising a Jpg photo for web

one thing we have not talked about so far is the format of the image. what do i mean when i say this? jpg, for example, is a standard file type we often see when dealing with images, especially photos. jpg or jpeg is what we refer to as a 'lossy' file type. lossy is referring to how the compression works and makes the file smaller as a function of decreasing the quality of the picture.

take a look at this image (below). it's a professional photo in high resolution (8192x5462) of the inside of a cathedral; we have some great photography like this appearing on our site.

Uncompressed 8k image This is the unedited Jpg at full resolution and uncompressed.

Now if we take this photo without doing anything to it and putting it on our site, it is almost 10MB in size! To put that in context as a good rule of thumb we try and keep all of our pages less 512KB, so they load fast for our users. Consider a mobile user visits a page with our 10MB image on it. The page will take a while to load which isn't a great experience. Now consider if we added more than one image to the page. Maybe we used two, or three.

With a little effort (about 30 seconds of your time to do this) you can reduce the file size from 9933KB of the original to 119KB with negligible loss in quality. That's a 99% reduction in the file size.

Using Photoshops 'save for web,' I achieved the following using 1% blur and just reducing the quality of the file and decreasing the resolution to the suggested 1920x1080.

Resized to 1920x1080

...

Uncompressed test image resized to 1920x1080

Uncompressed test image resized to 1920x1080 at 2.8MB File Size

View it
...

90%

90% Quality 1% Blur 1.6MB File Size

View it
...

80%

80% Quality 1% Blur 833KB File Size

View it
...

70%

70% Quality 1% Blur 646KB File Size

View it
...

60%

60% Quality 1% Blur 514KB File Size

View it
...

50%

50% Quality 1% Blur 372KB File Size

View it
...

40%

40% Quality 1% Blur 300KB File Size

View it
...

30%

30% Quality 1% Blur 250KB File Size

View it
...

20%

20% Quality 1% Blur 211KB File Size

View it
...

10%

10% Quality 1% Blur 162KB File Size

View it
...

5%

5% Quality 1% Blur 135KB File Size

View it
...

1%

1% Quality 1% Blur 119KB File Size

View it

If you do not already have Photoshop installed on your machine or experience of how to use Photoshop to optimise your images, please contact IT support to have it installed and Staff Development and book on to training.

Think about images in terms of Width, Height and File size will help to understand better how they will show to various user demographics in the first instance. Be sure to check the file size of an image before uploading it to T4 for use on your page to avoid not having the page approved for publishing and delaying your content appearing on the site.

"But does it matter? Optimising images for the web isn't my job".
I'm afraid yes it does, and well it's 2018 this is nothing new and it sort of is. If you use T4 to create and edit pages, then it is your job. One typical comment I do get a lot is "it's a waste of time". Understandably we are all busy, but in WebTech especially things do not remain the same. Allow me to offer you irrefutable proof.

Firstly I will make a couple of assumptions and that you will be familiar with the basics of file sized and the difference in KB and MB etc.

A default page with no content weights in at 1.1MB that includes a standard 200KB header image

Diagram showing Width Height and file weight of an image Diagram showing the relationship of filesize to image Width and Height.

So let T = 1126 as a constant

From our work above let us also assume that a compressed 1920x1080 jpg weighs in at 120KB average (this is a big assumption, but for argument's sake and simple math lets say that) and that an uncompressed one image is 2876KB (2.8 MB)


Let J0 = 120 
Let J1 = 2876
Let Jq  =  9933
Let Jn = the number of images on the page

We know that across our site (excluding course finder which would skew this average) the average number of words on a page is 371. What I have done then is create 371 of lorem ipsum to simulate more accurate representation of content and saved that as a raw text file with simple <p> tags between the three paragraphs. Those 371 words of content equate to 2.59KB of data which we round to 3 in our equation.


Let C = 3

The final part of the puzzle we need is the transfer speed. In May 2018 the UK average was 46.2 Mbps (Source: http://www.trustedreviews.com/news/uk-broadband-speed-average-2018-3470469).

Thus so we are working in the same units we convert Mbps to KB/s using.


1Mbps = 125KB/s
46.2x125 = 5775

Hence the average UK broadband connection to the router in a home could in ideal conditions download 5775KB of date per second.


Let S0 = 5775

To be complete let us also do the same for mobile connections, both 3G and 4G, this is a little more complicated since the theoretical transfer rates compared to real-world transfer rates vary a considerable amount. To compensate for this, I have gathered the data for four UK mobile providers and averaged their results for both 3G and 4G. (Source: https://opensignal.com/reports/2017/04/uk/state-of-the-mobile-network)

We know the theoretical maximum transfer rate for 3G is 10Mbps or 1250KB/s


6.5 + 5.98 + 4.32 + 4.76 / 4 = 5.39Mbps
5.39 x 125 = 674KB/s (rounded up)

Now let's do the same for 4G which we know as a theoretical maximum rate of 35Mbps or 4375KB/s


23.4 + 31.77 + 15.42 + 18.17 / 4 = 22.19Mbps
22.19 x 125 = 2774KB/s (rounded up)

Let S1 = 674
Let S2 = 2774

With this information, we can now model accurately the download time of statistically average (to us) page on our site in the UK on with zero or greater images. So let's put together a simple equation to see that in action and let's say there are no images on the page and the average 371 words.

We take the template size, plus the content size and add that to the number of images on the page divided by the download speed to get a time in seconds. There would also be of course a negligible value associated with the additional markup required to embed the image, but for the sake of brevity, I am omitting that here as it would make no tangible difference.


((T + C) + (Jn x J1)) / S0 
So;
((1126+3) + (0 x 120)) / 5775 = 0.02

Here we see a page load speed of way under a second. For reference, We aim to keep the site average for load speed under 3 seconds.

Let's try the same exercise with the original 10MB image and see how long that will take to load on broadband, 3G and 4G.


((1126+3) + (1 x 9933)) / 5775
So;
((T + C) + (1 x Jq)) / S0  = 1.9 seconds
((T + C) + (1 x Jq)) / S1 = 16.4 seconds
((T + C) + (1 x Jq)) / S2 =  3.98 seconds

Right away you can see here that on a 3G connection that page would take over 16 seconds to download! Let's see how that would look with the average number of images on a page compressed (The site average is 6)


So;
((T + C) + (6 x Jq)) / S0 = 10.5 seconds
((T + C) + (6 x Jq)) / S1 = 91 seconds
((T + C) + (6 x Jq)) / S2 = 22 seconds

Very quickly we see the download speeds get out of control. Understandably these are extreme examples. We have had pages with over 100MB of images on them very recently.

Ok so let's rerun the formula this time substituting in J1 for Jq and see how merely resizing the image changes things on an average page.


So;
((T + C) + (6 x J1)) / S0 = 3.2 seconds
((T + C) + (6 x J1)) / S1 = 27 seconds
((T + C) + (6 x J1)) / S2 = 6.6 seconds

In replacing J2 with J1, we see a noticeable drop in page load speed. These are still significantly higher than can be expected, however, substitute in J0 which is our optimised jpeg discussed above.


So;
((T + C) + (6 x J0)) / S0 = 0.2 seconds
((T + C) + (6 x J0)) / S1 = 1.85 seconds
((T + C) + (6 x J0)) / S2 = 0.45 seconds

I think you will agree this is a remarkable increase in page load speed. Those are increases in speed  expressed as a percentage change in this example by the following;


BB 10.5 to 0.2 = 193%
3G 91 to 1.85 = 192%
4G 22 to 0.45 = 198%

From seeing the reduction in page load speed compared to the amount of effort required to do so there is little argument as to why one would not do so. There are few examples where there is cause for uncompressed photography to be used inline if this were required for whatever reason a more sensible solution would be to link to the larger file regardless, negating the argument. I believe this article to cover the rationale behind the limit on file sizes in T4 and highlight the ease with which we can achieve a faster more user-friendly website.

TL;DR

  • Max allowed image File Size in T4 is 600KB (This does not mean you should not make them smaller!)
  • Think Width x Height x File Size
  • There is NO reason why images on our site should be megabytes in size.
  • Optimise ALL images this is YOUR responsibility!
  • Call IT support get Photoshop installed
  • Book on Photoshop training with Staff Development or Chat with the Webteam
  • Use the tools provided to check if you are unsure, ignorance is not an excuse.
  • Save as the dimensions you need!
  • Compress images for the web

Resources

I am aware the formula could be condensed however I have kept it as such to allow readers to plug in varying amounts of content or different template values to more accurately represent their circumstances.