By 
Introduction
We’ve just rolled out some changes to Site Editor which we hope will save editors a lot of time and effort adding images to pages.
There are also some changes behind the scenes which make images load more efficiently on the page, making the website a little faster.
Uploading photos the new way
When you upload an image to Site Editor, you no longer need to worry about whether it’s exactly 3:2, or 1920px by 1280px, or whether it’s 200kB. Just choose an image and upload it. Site Editor makes sure the final image is the right size and shape.
And importantly… don’t worry, this won’t affect any photos you’ve uploaded in the past!
We would ask that you try to limit your original photos to no more than a few megabytes. We’ve found that a good size is somewhere around 2 to 3MB, but double or even triple that is fine. Most jpeg images you’ll have access to shouldn’t be much more than this.
Check the focal point of the photo
There is one thing to look out for though. If you choose an image that’s in portrait orientation where the focus isn’t vertically in the middle of the photo, you may need to do some cropping before you upload.
Site Editor always crops to the middle of the image, so for example if you upload an image like this…
Site Editor will crop it vertically in the middle of the photo. So it will end up with a 3:2 landscape photo looking like this…
That’s unlikely to be the crop you’d have chosen if you did this by hand. So in these cases you will need to do some cropping in some image processing software before you upload your image.
Lazy loading
Another thing we’ve done behind the scenes is improve the efficiency of how images get loaded. Something which should help improve the user experience of our website.
We now load our images in the browser bit by bit. You’ll see it in action if you go to a fairly long Kent web page with plenty of images and very quickly scroll down the page. You might briefly see images appear in a blurry way, and then appear normally. This is the browser loading a very low quality, low file size image first. Then when the user can see the image it loads up the full-size version.
This is what’s called lazy loading. It doesn’t mean the full-size image only appears if it feels like it. It actually appears right on cue, as soon as it’s visible in your browser window. When a photo is further down the page, it’ll still be the low-quality blurry image. It’s just that you can’t see it.
Why lazy loading matters
Normally browsers aren’t very clever, and they load up all the images on a page at once. If you have a lot of high quality images further down a page this means the browser is trying to load up images that people can’t even see yet. They may never see them, possibly because they get fed up waiting for the images at the top of the page to load!
Lazy loading means the browser only has to load up all the low quality images. This won’t take much time because the file sizes are so tiny. Then when someone actually scrolls down the page and gets to see a photo… pop! The higher quality image loads up.
If you’re on a fast connection this might not be a huge problem. But most people will at some point/usually get a poor connection on their phone, or for various reasons they may never have access to a fast connection.
Lazy loading in different browsers
Of course, not all browsers work the same way. (This is what makes web development ‘fun’.) Google Chrome uses its own clever built-in system for lazy loading. For other browsers this kind of thing is still in development, or not on the horizon at all, so we need to use slightly different approaches. For older browsers we need yet more approaches. And for very old browsers (for example IE8 and older) none of this lazy loading will work at all. Our philosophy is that we aim to produce a usable website for all browsers, and the more modern a browser, the richer the experience becomes.
Using the right image
When you upload a photo to your page, another thing happens behind the scenes: we generate several different versions of the same photo. So there’s a large 1920px by 1280px image, but there’s also a smaller one at 800px wide. This is lower quality and a smaller file size, but it’s still good enough for us to use for phones and tablets.
So how does a phone or tablet know to use the 800px photo and not the 1920px one?
Well, we have to tell it! (Using some HTML code called srcset and sizes attributes.)
When the page loads, the browser knows how wide it is, and it uses the list of images we’ve given it to choose the appropriate one. Again, this makes everything much more efficient for the end user, who now a) doesn’t have to wait for all the images on a page to load; b) when they do appear, they will get a smaller image if they’re on a phone.
It’s all about giving users just enough for what they need to get the site to load up quickly.
Summary
We recently made three big changes to how images are uploaded to the website, and how users view them.
The first change was to get Site Editor to do some of the work that editors used to have to do to get an image in the right orientation and file size.
The second change is called lazy loading. It should make the website run a bit faster and more smoothly for users by delaying when an image is loaded until the moment someone can actually see it.
The third change is to make sure the correct version of an image is loaded up on different screen sizes. There’s no point loading up a really large image on a phone, for example.
If you’d like to know more about lazy loading, here’s some links I found useful:
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video
https://web.dev/native-lazy-loading/
If you’d like to know more about the HTML srcset and sizes attributes, these posts are really handy:
https://medium.com/@woutervanderzee/responsive-images-with-srcset-and-sizes-fc434845e948