Web images which are too big
First a couple of obvious facts:
- A mobile phone network can be many times slower that the internet connection you get at home.
- The amount of space available on a mobile phone is considerably less than on a typical laptop, and far less than on a large desktop monitor.
With both of those statements being true, would you think it reasonable for someone on their mobile phone to have to download huge amounts of code and large image files, when the phone can only display small images?
Of course not. But it happens... a LOT!
A real life example
I was recently asked to take a look at why a specific website wouldn’t work at all on a mobile phone.
It turned out that a 20 meg video was being used as a background for all screen sizes. The video looked great on a laptop and large monitor over a fast broadband connection, but for a phone it was not a good idea. It couldn’t cope and the page wouldn’t display.
To ignore network speed is a bad idea!
The length of time that a web page takes to download will of course be determined by your network speed.
Network speed is an indication of how much data can be transfered in a given amount of time, and in most cases the mobile network speed is considerable slower than broadband.
Therefore it is understandable why the same web page will take longer to download onto a phone over a mobile network compared to a laptop or desktop connect to the internet through a broadband modem.
It is for this reason that we design web pages to be responsive, not only from the perspective of how they display on mobile devices, but also to minimise the amount of data that a mobile phone needs to download before the web page can be viewed and interacted with.
If done incorrectly, although the web page can
look correct, if the phone is having to download a lot of unecessary data in the in the background, it can make for a poor and frustrating experience. This will be a problem caused not by the phone, but the web designer who built the website.
Slow websites are badly designed websites
Optimised Web Images
Here is a pretty uninteresting photo of condensation on a window pane, which I took on my Samsung phone.
The actual image I have used for displaying within this article will vary depending on the screen width of the device you're using. I have actually used 4 versions.
Why? Because the data size of the jpg file I have selected for mobile is about a 6th of the size of file for larger screens, and I have chosen a number of suitable images for various mid-range screen sizes, with the objective that they will load quickly and maintain visual quality.
Here are links to each of those images, but be warned that the original image is pretty big.
- photo-S.jpg = 500 x 281 (21kb)
- photo-M.jpg = 600 x 338 (41kb)
- photo-L.jpg = 900 x 506 (77kb)
- photo-XL.jpg = 1400 x 788 (155kb)
- Original file = 5312 x 2988 (3854kb)
Okay, so I have just explained why I have used 4 versions of one image suitable for this purpose. But it might be the case that for some designs the aspect ratios of some images might also need to be different.
If you take a close look at the selection of screens in the image below, you might notice that unless I had created specific background images for each screen size, more of the motorcycle could become hidden behind the white content area. That would be even less desirable if the background image contained someone’s face and half of it was hidden! Also note that I used entirely different images for mobile and the portrait orientation of the tablet.
The landscape orientation of the tablet uses yet another specifically sized image. In all there are 6 separate background images used for the page shown, but the device will only need to download the version appropriate for the screen size. This is achieved using media queries.
Displaying the correct images with media queries
Media queries can be used to automatically detect the screen width and select the appropriate images and page elements that the web designer will have decided on for that screen size.
Without going into too much detail and making this post into a tutorial about media queries, I’ll put it into plain English. For the purpose of explanation, let’s say I decide that:
- screens up to a width of 479 pixels should use image version A,
- up to 767 pixels use version B,
- up to 820 pixels AND portrait orientation use version C,
- up to 991 pixels use version D,
- up to 1440 pixels used version E,
- and 1441 upwards use version F
Each of those maximum widths represents breakpoints which I have mentioned earlier, and once we have a way of controlling which image we use for which screen size, each image can be designed so that the main subject in each image remains visible within the design of the page for each screen size and orientation. This usually takes some testing, tweaking and bit of patience before the final versions are reached.
What are pixelated images
If we use images which are too small, we might benefit from an image which will be quick to download, but if the intended display is much larger than the image would display naturally, the stretching of that small image will cause it to be pixelated.
In other words the individual coloured pixels (little digital dots which make up an image on a computer) will all be stretched and all image clarity and definition will be lost as shown below.
Is it worth the extra effort?
I believe so. I could of course cut corners and go for a one size fits all approach like so many web designers do, especially those working to a tight budget or using website builders, where using a mouse pointer to re-size an image inside a template is all that seems important.
They probably don’t realise that a 1000kb jpeg file is still a 1000kb jpeg file, whether it is displaying at 300x200 pixels or 900x600 pixels, and will still take as much bandwidth to download and display. The actual image file needs to be different, not just the display dimensions.
But also note that many people, especially those who use DIY website builders such as WordPress and Wix, will take photos with their phones and use them on their websites with no optimisation. Note that my original image of condensation on a window pane is more than 24 times the size of the largest image I actually used on this web page. The only reason I might ever use an original image like that would be demostrate the image quality of the camera. But I'm not!
I use PhotoShop to process my images because it offers me a range of tools besides the ability to change images size. But there are some decent image optimistion tools out there which you might want to try in preference to uploading excessively large images. These include Image Optimizer, Optimizzilla, Kraken.io and Imagify. WordPress also provide access to a plug-in called EWWW Image Optimizer
So file size, display size, aspect ratio and image content should all be considered, and although it takes more effort in the design stage, serving up the images best suited to their needs will worthwhile.
And finally, besides making pages easier and less frustrating to use based on design, layout and speed, also note that a slow loading web page might also struggle to perform well in search engine results. I cover this in more detail in a separate article on the importance of page speed.
After launching this post I followed my usual process and visited Google's Pagespeed Insights tool to see how the new page scores out of 100 based on load time, page stability, etc. The results were rather good... 99/100 both mobile and desktop, which kind of validates the points I have covered in this article.
Other Web Design Posts
- Do I need a website if I have a Facebook page?
- Has your website become constipated?
- Selecting images for web pages
- Customers, Personas and User Stories
- Websites That Add Value
- Page Speed and Website Builders
- The Importance of Page Speed
- Web Design Pricing Transparency
- Website Builders
- Responsive Websites
- Do I need a mobile friendly website?
About the author: Having begun building websites back in 1996, Daron Harvey has been professionally involved in website design, UX and eCommerce best practices for over 26 years, including management of large multi-lingual global websites. Following the global pandemic Daron founded Targa Web Services, specialising in Website Design, Search Engine Optimisation, User Experience (UX/UI), etc.