Digital photography compression has never been more important. The majority of online traffic is moving to mobile devices which presents a new and interesting challenge.
Despite mobile networks getting faster with 3G, 4G and now even 5G coverage, bulky data-intensive web pages are not user-friendly.
Users demand responsive content so you need to ensure that any website photography and videos are optimised. Photography needs to be compressed to the point where images load quickly and retain reasonable quality. This is a simple sliding scale: smaller file size = faster loading time but at the cost of visual quality while larger file size = slower loading time but better visual quality.
You want your images to sit somewhere in the middle. How do you achieve that? Read on to find out more…
Photography Designed for Google
While thinking about the content and filesize of a webpage, you also need to keep in mind how that webpage is found. Google assesses your site by analysing its content but it can’t interpret photography. Google and other search engines need text to properly analyse a page.
Google ranks faster websites higher. For a fast site, it is essential to be on good hosting but it is also necessary to monitor the total size of the page. Keeping page file sizes as small as possible without being detrimental to the content is key. Having lots of photographs can increase the size of the page but also increases its visual appeal.
What industry are you in?
Industries that are focused on glossy visuals – fashion, design studios, architects etc – will have to be extra careful when applying photography compression. Their audience expects higher quality production and as such might tend to notice badly or overly compressed images.
A picture tells a thousand words
First, take into account the page size – how much content is on the page and how heavily does it need optimising? You can quickly cut megabytes off the size of a webpage by uploading your images at the correct resolution.
The average screen resolution for desktop computers is 1024×768 however it is a good idea to work to the HDTV standard of 1920x1080px for very high-resolution photography.
You can find out the exact screen resolutions of visitors to your website if you use Google Analytics. Create a report by clicking on Audience > Technology > Browser & OS, this will display a browser usage report. In the Primary Dimension section which is under the graph and above the table click Screen Resolutions. You will now see the screen resolution of the people visiting your website. It’s worthwhile reviewing the Behaviour columns to see what users on certain screen resolutions do. This will highlight screen resolutions where visitors view fewer pages, have a higher bounce rate or spend less time on the site. If there are areas of concern you can check how your website photography looks on specific screen resolutions to see if improvements could be made.
Images higher than 1920×1080 will increase file sizes despite heavy compression. All images should be optimised for the size they are going to appear on the page. If your site width is set to 1100px, any images designed to fit in that space should be no larger than 1100px and so on.
It is a good idea to have an understanding of these three key formats for photography on the web.
JPG: best format for photographs. No transparency. Compresses well.
PNG: ideal format for using transparency within images, good for simple logos, icons and graphics.
GIF: the only format to offer animation, also good for icons and very basic graphics
How to Save Photographs for Web
Compression becomes noticeable quickest in areas with gradients that have little to no texture (clear skies, freshly painted walls) or around hard edges of detail (trees against a clear sky, people’s eyes and hair). Compression should ideally be applied while checking the details for each image. Overly compressed or down-scaled images can spoil the user experience. Below is a 1100px example showing before and after heavy image compression: