You may have heard "Content is King," but according to several marketing gurus, images are considered the equally powerful queen. A considerable portion (around 60%) of the internet content consists of images as they play a key role in the visual appearance. Adding images on your website increases the beauty, creates connections, and tells the stories to the readers. We believe that images give life to your website.
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 essential. When we see a picture, there is only a short time that we use to gather information about that image and what it presents, to form opinions and emotions about it. Words come afterward. This is why all modern websites use so many images to offer their ideas or products.
The importance of Images
When users visit a website or open an app, they 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. For people to see those great images, they have to see them as soon as possible. Otherwise, yeah, they leave.
Why selecting the Image Format is important?
We've all heard about JPEG, PNG, GIF, SVG formats, and some other formats of the uploaded images that can help you rank your content high on Google. The web developers are now focused on the optimization of these images.
These days, most of the users access the web through smartphones. They do have limited internet data, and the internet speed is also slower than the dedicated networks.
Google gives a higher rank to the websites which are lighter in size, and this explains why the websites having more loading time have to suffer from low rankings. The optimized images (images with smaller size and appropriate format) on your websites can help you get more traffic, sales, and conversion.
Uploading the inappropriate/wrong format leads to more loading time. The incorrect formats have some extra capabilities, including transparency, additional information, and extra colors, which can spoil the images. The visual presentation of a website also depends on the file format, and selecting the wrong format can affect the way images appear on your website.
Difference between Images File format (JPG. PNG, GIF, SVG)
The development and maintenance of perfect design practices depend on knowing the right image format to use on and off the internet. While specific image formats look perfect on the internet, understanding the simple strengths and limitations of these image formats will improve the belief that you can select the right format in any case.
The following are the five main types of image formats.
1. JPG / JPEG (Joint Photographic Experts Group )
This format is best used for complex images that contain millions of colors, such as photographs. JPEG is a highly compressed format, which implies that we can have a great looking image with lots of colors that's small in size. This format offers us a great looking, colorful image that's also small in size, it's often a good choice for the web.
There is no support for transparency in JPG files. So, if you want to use a transparent background for blending your image with the color or texture in the background on your website, JPG images are not a perfect option.
It is a lossy format, which means that JPEG images lose information (and hence quality) every time you modify them. 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.
What is the difference between JPEG and JPG
There is no particular difference among these two formats, and these file extensions are all nearly the same except a different number of characters included in each file extension.
Advantage of JPG file
JPEG image with a resolution and quality relatively close to its BMP or PNG version may be smaller in size. This helps to make the quality more appropriate to store, distribute, and use online. This feature makes this format SEO-friendly. The compression level of a specific digital image can be changed by users. They can consider the right combination or balance between file size and picture quality.
2. PNG (Portable Network Graphics)
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.
The PNG format has alpha transparency, which allows us to have areas of image fully or partially transparent. This feature this image format perfect for logos.
But since the PNG format is actually a lossless compression, it produces very large images, and that's not very suitable for the web.
Advantages of PNG
The PNG format files do not lose the quality or information due to T lossless compression feature. PNG can support a large number of colors. They have to ability to add to the meta-data of file.
3. GIF (Graphics Interchange Format)
This format enables you to send the images by connecting with any connection with low bandwidth. This format is a great choice for limited color images that must be small in size. Full-color images stored in a GIF format will yield higher levels of compression with a noticeable quality loss.
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. They are great for making banners that are built to keep the text on top of pictures or colors.
This file format also supports multiple frames and lossless compression, which can help in producing simple animations. The users can use the series of frames and combine them in a specific order to create the animations.
Advantages of GIF
These files can load quickly due to the relatively smaller file size. The emotions and movements can be expressed easily through this format. The loss in quality while compression is minimal. All the major browsers can view these files.
4. SVG (Scalable Vector Graphics)
This format is derived from the curves and shapes that are driven mathematically and not from pixels, 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.
This format is used for the creation of full-resolution images that look good on any zoom level, screen size, and resolution. The beautiful graphics for desktop, smartphones, and tablet graphics can be viewed through the SVG file format.
Advantages of SVG
SVGs typically have smaller file sizes, particularly if you customize them for the internet and offer them gzipped. The users can save the HTTP requests by using the SVG code inside HTML markup. The SVG images can be animated.
5. WebP - new image file format
This image format, created by Google, is considered the best and most efficient format for images. The lossy and lossless compression is minimum, and the images can be created in small size. Due to the small size of uploaded images, they have a better loading time than other image formats comparatively.
The format can minimize image file size by close to 35% lower than PNG and JPEG images while maintaining high quality. WebP image compression mechanism is based on pixel projection from its surrounding area. This enables the pixels to be replicated several times across a single image, and the unnecessary data to be deleted from each section.
Particularly in comparison to PNG and JPEG formats, storing only data that varies in each section decreases storage capacity.
Why use the WebP format?
The small size of the files provides you better loading time, and Google is still in love with fast-loading websites. This factor plays a key role in the SEO of a website. Transparent images are used for logos and branding, and WebP format supports transparency. The compressed images do not lose quality.
Which Image Format to Choose?
It 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 small file sizes.
· 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 the web.
· For icons and simple vector-based logos, you could also use SVG.
But whichever format you choose, don't forget to optimize images.
How to Optimize the images
There are a few ways to optimize images and assure their fast delivery.
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. Use the Image preloading, which includes forcing 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.
Encoding required to deliver the Images
The following are two encoding strategies which are usually used for the images delivered on websites:
Non-interlaced (in case of the JPEG format they are called baseline JPEG) Interlaced (in case of the JPEG format, they are called progressive JPEG).
A non-interlaced image is loaded from top to bottom, line by line, as more of the image information arrives from the network. On the other hand, an interlaced image is loaded straight away, but at first, it's low quality, pixelated, or blurred. Still, it gradually sharpens and improves in quality as additional image information loads.
Interlaced Image Formats and their Importance
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.
Interlacing often results in files being larger, 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 smaller in size when interlaced, if their size is above 10k before interlacing.
Why Interlace the 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 represents. The whole process may not be faster, but it is perceived as more rapid, it feels faster, and that is usually enough to make users happy.
Another thing to consider is how 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 of 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.
Are there any Drawbacks of Interlacing?
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.
When 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.
To Interlace or not Interlace?
Whether you choose non-interlaced or interlaced images depends on what kind of website you run. If you, for example, run an eCommerce website, where images are the essential part of the site, it is good to use interlaced images and let the users know the photos are on their way.
They won't have any problem waiting for them to load fully. 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.
Conclusion
We've all experienced the nightmare of entering a website/app that takes forever to load. The usual suspect that almost always ends up guilty is the 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, speedier 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.
We are Creitive, digital product agency. Read more about our Product Design services.
