By continuing to browse or by clicking "Accept All Cookies & Services," you agree to the storing of first- and third-party cookies on your device to remember registration details, collect statistics to enhance the usability, analyze site usage, delivery content delivered to you and assist in our marketing efforts. Read our Privacy Statement.
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 mean 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.
There are several ways website images can improve engagement:
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 led to bigger images being served over the last 5 years. The graph below (based on data from http://httparchive.org) shows that 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, improved 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 and responsive and 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 image resolution and viewable size in pixels to fit the dimensions on the screen
Reduce the quality to a suitable level for the website
Selecting the right format to allow compression and transferability
Applying chroma subsampling
Reduce the overall size of the file to allow quicker load times
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.
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.
Learn more about managing online images with Akamai Image Manager.