Why you should optimize images for the web

Images are an integral part of almost every website and contribute to visitors having a better user experience. Large photos are in vogue today, but higher resolutions mean larger file sizes, which leads to slower web page loading. In most cases – the effect of a slow website decreases the wanted user experience, and the main cause for a slow website are its large images. Thus, to speed-up the loading of your web pages – you should optimize your images, i.e. decrease their file size. In this article we will elaborate on the most common image compression methods that are usually done by a plugin or script.

HTTP Archive affirmed that images make up around 25% of a total webpage’s load. So when you decide to optimize your website, images and the video files are one of the first things you should consider. They are as important as the JavaScript code and third-party utilities (e.g. bots, analytics). Even though the image optimization process is not a complex one to be implemented, a lot of website owners ignore it.

The question is – are there other benefits from optimized images on your website? The answer is yes – there are multiple benefits when the images are optimized for better performance and here we are listing them:

• Improving Website Load speed. Page load speed is the time needed for a web page to load completely. It depends on many factors, including your website hosting, website layout and design. The websites having less than 2 seconds load speed are favored among the users. Knowing that the images affect most of the website’s weight, their optimization will highly improve your website speed. It will provide your website visitors a smooth experience, thus more users would interact with your services.
• Improving SEO rank. With optimized images – your site will rank higher in search engine results. Large files slow down websites and search engines hate slow sites. Google is also likely to crawl and index optimized images faster for Google image search. To check Google image search traffic you can use a Google Analytics plugin.
• Boosting Conversions. If the goal of your website redesign (or part of it) is to increase conversions and grow your business, you have to optimize the image for web. According to Kissmetrics research, 79% of buyers that are not glad with the website speed – won’t buy on that site again. By providing a user-friendly site speed, you will help customers find items they’re looking for in a flawless way. It will increase customer loyalty and make them more likely to convert and return to the site for more purchases. A happy customer is not a myth, definitely not for those websites which are providing a great user experience.
• Reducing Bounce Rate. You can achieve this by optimizing your website images, improving your page load speed, and thus, providing a better overall user experience. If your page is loading fast on all devices, a user will regularly visit it. It has been proven that users are more likely to leave those websites which are slow. The web pages which load in 2.5 seconds experience 25% bounce rate. Your page load speed also increases the returning rate, meaning a customer who gets a faster experience on your site would probably buy from you again. Therefore, user satisfaction depends on page load speed, which can be improved by optimizing the web images.

• Using less bandwidth which is preferable for most browsers and network devices.
• Lower storage space on your server (depends on how many images you optimize).
• Faster Backup creation, lower image sizes will also ease the website backup.

The main goal of image optimization is to find the balance between the low file size and good image quality. There are several ways to do image optimization; a popular way is to compress images before uploading them to the web. Compression can be done by a tool such as ImageOptim, or by using plugins.

File Types and Image Compression

The basic two things to consider are the file format and type of compression you use. By using a proper file format and compression method – you can lower your image size by up to 5 times. Before making image compression, you should choose the best file type. You’ll have to try different file formats to see what works best. For website usage you can choose among these file formats:

• JPEG – supports 24 bits per dot, eight for brightness, blue and red. Because of this, JPEG is called the "real" format, which shows the image in the most accurate way. It uses lossy and lossless optimization.
• PNG – produces high-quality images, but also has a larger file size. Was created as a lossless image format, although it can also be lossy. (PNG files are necessary if the image has transparent parts, but if it does not, it is better to use JPG).
• WEBP – file format developed by Google; it supports both lossless and lossy compression. It can reduce the image file size up to 35% more than JPEG and PNG, still keeping its quality.
• SVG – two-dimensional vector format, developed by W3C (WWW Consortium). SVG files can include vector shapes, raster (bitmap) and text. This format offers lossless compression.

Now we will explain briefly two types of compression you can use – lossy and lossless.

When speaking about lossless compression, it means that the image size is reduced while its quality remains the same. This will always be true, no matter how many times you compress and decompress an image – the amount of data within the image, as well as its original quality will always remain the same.

In contrast, lossy compression is a type of compression in which, with each compression and decompression of the image file, its quality decreases and the data it displays becomes worse and worse. The biggest advantage of lossy compression is that it can greatly reduce image files (an image with size 4 megabytes can be reduced to 500 kilobytes).

What type of compression to use and when? Depending on the amount of detail involved in a particular image to be retained, you can use one of these two compression methods. If you want to store photos as they are (i.e. you want to keep in its original quality and size) – you’ll prefer lossless compression.

Image Optimization options

Manual Compression – you can try multiple file formats and use the 'Optimize image for web’ option that many photo editors have, e.g. Adobe Photoshop. You can experiment to find the desired ratio between the file size and quality. If an image on your website loads slowly, it is a sign that you should either reduce its resolution, increase the compression, or maybe both. Another tool that could help you is the TinyPNG – it's a web service that can further compress the size of PNG and JPEG images. The good thing with this service is that it can optimize up to 20 images at once.

ImageOptim tool – It's an app for MacOS for quick image compression – just drag and drop image files there and original files are replaced by optimized ones. It has multiple preferences of optimization that can be set up as well. It's free and has no file amount limit. It is widely used by many design tems, including ours at Adchitects.

Using ‘srcset’ attributes – thanks to this – the original, usually large image size can be divided into smaller ones. With these attributes – the mobile devices don't have to use an original 1920px wide photo, but 720px instead, which is completely sufficient for them, and the weight of such a file is evidently smaller.

Automatic Optimization for CMS-s (Content Management Systems). Different CMS-s possess various plugins that automatically optimize photos when uploading to the server. The most popular plugins for this purpose are: ShortPixel image optimize, Imagify image optimize, EWWW etc. Before choosing the desired plugin, we recommend you to read its documentation to know how they work (some of them can cause problems). Unfortunately these plugins are usually paid (there are free trial versions, with limited number of images to compress). Image compression is very demanding on the server's CPU and most server providers do not allow automatic compression of uploaded images; the plugins do it on their external servers by requiring payment for this service.

Lazy Loading – another method for speeding up image loading is the so-called lazy loading. This technique serves to optimize the content that is firstly visible to the visitor, while delaying the download and display of content below the bottom edge of the screen. Lazy load works on the following principle: the web browser loads content without images or videos, and that content is immediately preloaded. Downloading and displaying additional images and videos will be delayed until the visitor scrolls and views that part of the page. Lazy loading is a key functionality that every website should have. It prevents all images from being downloaded as soon as you firstly access the site; it can spread out the downloads when you need them.

Include the images in the Sitemap. The sitemap helps web browsers find new content, so it's a good idea to include images in your sitemap. This will allow images to appear faster in Google's image search results, which account for about 10% of total search traffic.

Content-heavy websites that utilize multiple images to showcase their products can greatly improve their accessibility thanks to image compression and file size optimization measures. Pictured is the custom e-commerce SENECA fashion brand website, created by Adchitects.

Adchitect's optimized approach – works not only with images

At Adchitects, we build websites in accordance with the most innovative web design standards. Our work is never truly over, as we take clients' website maintenance to heart, constantly improving, and optimizing; with a goal of making them as accessible as possible. Part of it all is making sure all the images are sufficiently compressed and optimized. We also offer holistic website content analysis aimed at improving load times and accessibility, which utilizes the same image-compression-oriented methods.

When your digital product is finally done, and you choose the right format and optimize the images for the best performance, your content will load faster, and visitors and web browsers will like it and will reward you for it. So remember – always upload images at a reasonable image dimension and file load. Both of these factors are very important for image optimization, and any comprehensive image optimize method will likely lower your site's bounce rate and early exits.

By optimizing website images as a website owner, you will keep website load times as short as possible. An important aspect of a good approach to design means to know when to use a JPEG, a PNG, a WebP, or an SVG, in order to significantly reduce file sizes and make visiting your website a smooth experience.