We are visual creatures. Our brains can perceive images very quickly and easily and no wonder why we always hear that the first impression is important. When we see an image, there is only a short period of time that we use to gather information about that image and what it presents, to form opinions and emotions about it. Words come afterwards. This is why all modern websites use so many images to present their ideas or products. When a user comes to a website, they will briefly scan the images and try to find all the information they need. The most important information should be connected to images. Otherwise, the user will leave. Let's imagine for a moment you own a pastry shop and your website contains a bunch of inviting, high-quality photos of your products. We would be hooked immediately and probably buy more than we need!
So now we know why it's important to have relevant, high-quality images. But, sadly, that's not enough. In order for people to see those great images, they actually have to see them as soon as possible. Otherwise... Yeah, they leave. And we don't get to buy a cookie... Or three.
We just have to think of a way to deliver all of the images fast, and in a way that won't leave the user frustrated.
We've all heard about JPEG, PNG, GIF, SVG formats but sometimes it's not quite clear which one to use in a certain situation. And choosing the right format may be critical for the performance of your website, so we should take some time to list and compare the most used formats.
JPEG format was developed by the Joint Photographic Experts Group (thus the name JPEG). And, in this case, we wouldn't be wrong if we judged the format by its title. This format is best used for complex images that contain millions of colors such as photographs. JPEG is a highly compressed format which basically means that we can have a great looking image with lots of color that's actually small in size. But it's also a lossy format, which means that JPEG images lose information (and hence quality) every time you modify them (this is a bit of an oversimplification but it's generally true). They discard color variations based on the level of compression you choose, and thus become pixelated or blurred, and manifest compression artifacts. This is why they are not very efficient if we need to present blocks of a few solid colors, text, or simple elements with sharp edges, such as logos. But since this format offers us a great looking, colorful image that's also small in size, it's often a good choice for the web.
No matter how you pronounce it (although it's obviously /ˈɡɪf/), this format offers us a small-sized, simple image with a fixed number of colors - up to 256. Since it has such a small number of colors, it's very inefficient for photographs or images with gradient colors, but it is good for displaying simple line art and logos. It also offers a possibility for images with a transparent background, as well as simple animated images.
The PNG format was developed to replace or at least improve the GIF format. When it comes to simple line art type or images with not too many colors, it offers a better looking and smaller image than GIF. It can also render high-quality images with millions of colors, like photographs, but since the PNG format is actually a lossless compression, it produces very large images, and that's not very suitable for web. One good feature of the PNG format is alpha transparency, which means we can have areas of image fully or partially transparent.
SVG (or Scalable Vector Graphics) as the name suggests, are vector based graphics which produce files that are small in size and can be scaled without any loss in quality or increase in size. These features make them perfect for the web, for displaying icons and even logos.
Which format you choose depends on the image you need to present on your website. As a rule of thumb, if you have an image with transparent areas, use PNG over GIF (unless you need an animated GIF), simply because they are smaller and look better. PNG is better than JPEG for crisp images with a limited number of colors, line drawings, images with text, solid color images, and iconic graphics at a small file size. If you have a million-color photograph, then you should stick to JPEG because their size makes them more suitable and a common choice for web. And for icons and simple vector-based logos, you could also use SVG. But whichever format you choose, don't forget to optimize images.
Now that we've chosen the appropriate format of our images, we need to deliver them quickly without having to compromise on image quality.
There are a few ways to optimize images and assure their fast delivery. One could be serving images through a content delivery network (CDN). A CDN makes use of caching to deliver stored content (cached images in our case) from a server that is closest to the user. Another way is image preloading which basically means we can force the browser to download and cache the images for later use early on in the page loading process. Image optimization can also be automated using task managers such as Gulp or Grunt, which should be implemented in our web development or deployment process. This enables us to add images to our project without worrying about optimization, since these task runners will do all the work when needed. Here we just mentioned some of the ways to optimize images for web. But since it's such an important topic for website performance, we believe it deserves an article of its own, so we'll work on that separately.
Right now, we'll take a look a the two encoding strategies which are usually used for the images delivered on websites:
A non-interlaced image is loaded from top to bottom, line by line, as more of the image information arrives from network. On the other hand, an interlaced image is loaded straight away, but at first it's low quality, pixelated or blurred, but it gradually sharpens and improves in quality as additional image information loads.
Three formats are typically used to display progressively rendered images: JPEG, PNG, GIF. To create an interlaced image is quite easy, just change the settings when saving the document.
Interlaced images are encoded and decoded using an algorithm that basically traverses or scans the image multiple times, from the blurry to the refined state. On the first scan it fills a certain number of lines, then on consecutive scans the skipped lines are filled in, thus producing the effect of coming into focus.
GIF and JPEG are displayed by loading either odd or even horizontal lines first, and then loading the other horizontal lines on the next scan. PNG files are often progressively rendered both horizontally and vertically, which means that the image is recognizable even earlier in the loading process. This comes at a small price, though. Interlacing often results in files being larger in size, especially when it comes to PNG, which are about 20% larger when interlaced, which increases the loading time. However, progressive JPEG can be much better optimized and are actually smaller in size when interlaced, if their size is above 10k before interlacing.
Why would you choose progressive or interlaced images? They seem faster. Even though you don't get to see a refined image straight away, you get a hint of what the picture actually represents. The whole process may not be faster, but it is perceived as faster, it feels faster, and that is usually enough to make users happy. Especially those browsing on mobile phones or slow internet connections.
Another thing to consider is the way in which images load on mobile phones when doing responsive design. If you use a non-interlaced image, you'll get a nasty, white gap until the image is loaded, and all the text below the image will jump up and down as the image loads. All that is avoided by using an interlaced image (with fixed dimensions), as the image and the surrounding elements are in their place right from the beginning.
Since the algorithm used for interlacing has to go over the image data multiple times, and all that is done on the client browser, it results in more CPU processing. And if we compare it to a non-interlaced image, each scan takes the same amount of CPU as the entire non-interlaced image would take to render. Again, this isn't something to worry about when it comes to desktops or laptops, but if you want your website to load perfectly on smartphones, a thing to remember is that it could affect battery life and image loading time.
Those who are against interlaced images would say that they are confusing. You can't really say when the image is finished loading. At some point you might think the image is blurry and the website you're browsing is simply not professional enough. Since nobody wants to look at ugly pictures, you'd just leave without knowing that the most beautiful cake... errr... product you were searching for, was just 2 seconds away.
As with most things in life, there are pros and cons of using interlaced images and no single answer. However, whether you choose non-interlaced or interlaced images could depend on what kind of website you run. If you, for example, run an ecommerce website, where images are the most important part of the website, it is good to use interlaced images and let the users know the images are on their way and they won't have any problem waiting for them to fully load. A blank space, however, will make them wonder if there is anything there at all and they probably won't stick around long enough to find out.
We've all experienced the nightmare of entering a websites that takes forever to load. The usual suspect that almost always ends up guilty, are images. Whether they are large in size or the internet connection is simply not fast enough, the problem persists and should be addressed. The first step of the solution is to choose the appropriate image format. The next step is to decide how to deliver them.
Interlaced images could be of great help in solving the problem. They offer the user information that the image exists and a preview of what the image is actually about. And although, in some cases, they are not smaller in size than non-interlaced images, they provide the illusion of faster loading. Illusion or not, faster loading is always a good thing. The difference is especially noticeable on smartphones. So, if you care about your users that use smartphones for browsing, and you should because this is the era of smartphones after all, you could consider this approach.
If you want to learn more, check out our Product Design Services
