Whether you are selling something, providing services, providing social media or just have information online, that content and presence can only be successful if users engage with it. Happy users generally means a successful website.
Images help build engagement because the brain receives and processes visual stimuli quicker than text, humans are programmed to react better to pictures.
Below are some common websites with and without images:
- Posts with photos receive over 50% more likes on Facebook.
- Articles with images get 94% more total views
- 63% of people think the quality of a product image is more important than the product information
No matter what the purpose of the website, having plain text and no images is simply not very interesting or engaging.
This has lead to bigger images being served over the last 5 years. The graph below (based on data from http://httparchive.org) shows despite the number of images remaining almost the same, the size of images has nearly tripled as content owners try to make websites as engaging as possible and take advantage of new higher resolution screens.
A happy user does not wait
As well as rich content, website performance has also been shown to improve user engagement. The requirement for good performance is the polar opposite of serving high resolution images.
Image performance can be broken down into two main areas, speed over the network and speed to display on screen.
We also have browser solutions such as responsive images, lazy loading & responsive & server side design (RESS) to avoid loading hidden images.
The golden rule of improving download time of images is to reduce the bytes. This includes:
- Reduce the size to fit the dimensions on the screen
- Reduce the quality to a suitable level for the web
- Selecting the right format
- Applying chroma subsampling
If the user is on a poor connection such as 3g, you may want to be more aggressive with some of the optimizations. For example, you may choose to send low resolution images instead.
Once the image has been delivered to the device, it needs to be processed (decoded) and painted to screen. Not all devices are created equal and varying levels of memory and graphical processing power can play a big part in how long the image takes to paint. All of the techniques above help reduce the memory footprint of an image and can speed up painting times.
Beautiful images + good performance = happy users = successful website
Delivering the right image used to be simple. Now we have thousands of devices with different screen sizes to think about, different network connectivity and even browser specific image formats. This is far removed from 10 years ago when CRT displays and the singing sound of a 56k modem accompanied nearly all users browsing the web.
In order to keep users happy you cannot remove images, so you must deliver and display them as quickly as possible to avoid your website having an image problem.
Web Performance Evangelist