In web design, even small decisions can have a big impact. The way in which your web designer compresses and saves JPEG images is a case in point. What’s at stake is an improvement in user experience. The explanation of the technical stuff gives Donald Rumsfeld a small but important walk-on part, so keep an eye out for his sneaky appearance here.
Types of JPEG image files
There are two primary types of JPEGs: baseline and progressive. Progressive JPEGs were in favour in the internet’s early days. Then people moved using to baseline JPEGs; these are probably the most common form of JPEGs you’ll find out in the wild today. In the last few years, designers have started saving images as progressive JPEGs, but the practice isn’t universal.
First let’s explain the difference between the two formats. We need to think in terms of delivery and what happens as the each image is streamed into the browser and starts to be displayed. The flow of pixels is constrained by internet speed and computing power so, unless you are particularly fortunate, images will be displayed in your browser with some degree of delay. They won’t just jump into view, as happens when looking at files you’ve already downloaded or captured with your tablet’s camera. The flow of pixels is constrained and their arrival in your browser is slowed down. Your web designer’s choice of JPEG format will determine what happens next.
The differences between the two
This slowing down of an image’s arrival in the browser is something that you will see. The bigger the image file, the longer your browser will take to finish the rendering process.
A baseline JPEG will hose perfect lines of pixels line by line (left to right, top to bottom) until the image is complete. Everything is nice and sharp, but the image is gradually built up from top to bottom. Think of a rug being woven, emerging from the machinery line by line – then speed that up.
With a progressive JPEG the whole rectangle is visible from the start. But unlike baseline JPEGs where each pixel is sharp from the very beginning, progressive JPEGs build up to their final clarity in successive bursts of additional information across the full width and height of the image. Initially everything is blurred and, although you can tell what the image is, it’s disappointing not to see much detail. But the detail does arrive eventually. To see this in action, run a search on Google and cycle through the images that it displays. You can see large images becoming increasingly sharp as additional information is added (progressively) into the image.
Both formats are capable of containing the same high degree of detail – and their file sizes are not markedly different – but it’s what you see as the images are being delivered that makes the difference.
The Rumsfeld factor
One of Donald Rumsfeld’s best quotes was the following:
There are known knowns. These are things we know that we know. There are known unknowns. That is to say, there are things that we know we don’t know. But there are also unknown unknowns. There are things we don’t know we don’t know.
We meet this in web design when the designer codes a page (containing images) which is to be delivered to devices where screen width is unknown. It might be a wide desktop monitor or a tablet or a smartphone (held in either portrait or landscape orientation). The tradition of adding an image’s pixel width and height can’t work in all of these situations. Indeed, it must be avoided. Instead, we instruct the browser to display an image’s width as a proportion of the space available. We might tell the browser to use 100% of the width of the page, column or block, or just 50%. We may apply padding and/or a margin around the edges of each image - and so on. We would then force the browser to respect each image’s original aspect ratio by adding the magic
height: auto; instruction. These bits of careful coding deal with the Rumsfeldian known unknowns and guarantee that each image occupies the proportion of page space we want, whilst not loosing the original proportion between its width and height.
Dealing with these unknowns can introduce a less than ideal experience for the user. Until text reflow has completed and everything has finished loading, the bottom of a page that contains images can be changing its position to an annoying degree.
When JPEGs don’t have their height specified in code, a baseline JPEG will have an increasing pixel height, pushing text below it further down as it does so. In contrast, our trusty progressive JPEG has already calculated the height it needs to occupy, so text below it is not required to reflow as more detail is added.
|Baseline||Hoses perfect (‘finished’) pixels line by line, left to right, top to bottom.||Each pixel is perfect and each new line builds up the perfect image. No blurring.|
|Progressive||Blasts the complete rectangular image into the browser in one go, but the first version is blurred. Subsequent versions of the same image refine the quality with progressive ‘blasts’ until the delivery is complete.||Progressive JPEGs first appear to be blurred.|
Progressive JPEGs win
Although both types of JPEG image look the same after they have finished being displayed, it’s arguable that the progressive version makes for a better user experience. Because their heights are probably known in advance of their display being completed, the height of the page is also known. This means that as pages continue to load their content lower down the page moves about less.
There’s not a big difference in JPEG file size between these two versions. There might be a difference of a few kilobytes per image, with progressives being just that bit smaller, but the reduction of page ‘jiggle’ makes for an altogether better experience.
Choosing between baseline and progressive is a matter of checking a box in Photoshop, so there’s no labour in making the decision. It’s at the delivery end of things where the difference shows.