图像尺寸和分辨率问题

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.

Network performance

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.

Device performance

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.

Learn more about managing online images with Akamai Image Manager.