Users don’t need to know the exact time your website takes to load, but their patience is ever-diminishing. Few are ready to wait beyond a handful of seconds. In fact, 47% of Internet users expect your website to load in under two seconds. In this post, you will find some techniques for optimizing images.
Despite customer expectations, site sizes continue to increase. According to HTTP Archive, the median desktop website size is 2431 KB, and the median mobile site isn’t much smaller — 2381 KB. What’s more, images take up half of these numbers (1231 KB for desktop and 1268 KB for mobile) with 28 and 27 requests on average.
Considering these figures, optimizing images for the website’s should be at the top of your priorities list, whether you’re after a higher Google search rank or a better user experience. To help you with the optimizing images mission, we’ll take you through three critical steps, including format selection, size compression, and image uploader adoption.
Table of Contents
Choose the Right File Format
The website size is a critical factor for loading time and user experience. Selecting the most suitable format for images can go a long way in keeping the data volume manageable. While GIF is the obvious choice for simple animations, static photos and graphics provide a much wider selection. But only three formats are best suited for web use for optimizing images. You can choose among:
- PNG. While the largest, this file format is ideal for saving graphics with transparent background. It is usually used for logos and other design elements. However, only lossless compression is possible for PNGs, so there isn’t much room for saving your storage space and accelerating page loading time.
- JPEG. The most widespread format comes with lossy compression capabilities. You should experiment until you find the ideal combination of minimal quality loss and size for every file. If you play your cards right, no one will be able to tell the difference, and users will be happy with how fast your website is.
- WebP. The latest addition to the image file format selection offers a maximum compression rate without losing quality. According to WebP Compression Study, WebP files are 25-34% smaller than JPEG images of similar quality. However, as a Google innovation, WebP files aren’t supported on Apple devices, so you might need another set of images for visitors using Safari.
Once you decide on one of the formats, use it for all visual content on the website. It should replace TIFF, MBP, BAT and other file formats already uploaded.
Resize and Compress
Whether you take photos or source them via photobanks, their original dimensions can be anywhere between 3000 px and 5000 px with a file size of over 10 MB to match. That’s enough to print out a poster-sized image, which is unnecessary for a website. Therefore, once you’ve converted the image into the desired format, resize it to fit the site layout. In most cases, there’s no need for images over 800 x 1200 px. You can perform resizing using any image processing software suite.
Once the photo has the desired dimensions, compression is required. For PNG files, removing unnecessary metadata is your only recourse. Unfortunately, the lossless approach won’t slice many bytes off the file size. For JPEG and WebP formats, lossy compression offers significant size reduction that depends on the selected quality. In most cases, saving 70% to 80% of the initial file will generate a quality visual while reducing the file size by 20% to 50%. Performing this simple manipulation with all images has the potential to decrease your website size by up to 25%.
Lazy load is also a neat trick you can utilize to accelerate the loading time. Instead of making users wait for the whole page to load, only the images above the fold, directly in the visitor’s line of sight, are loaded first. The rest is loaded whenever the user scrolls down to look at the next section. Alternatively, you can set your website to load the lower-quality images first to let the users get a general idea of the visual before the high-quality version is ready. Both approaches aren’t ideal, but they provide much-needed time-saving solutions for heavyweight sites.
Use CDN for Distribution and Automatic Optimization
As visual content is dominant online, content delivery networks (CDNs) become invaluable for web apps, online stores, and even business sites. Instead of storing all visual data on your server, CDNs cache the data across multiple locations worldwide. They deliver it to users at a fraction of the time. Aside from speeding up the website’s loading time, CDNs can also save your server space and free up the bandwidth.
Advanced uploaders also take over image optimization. Instead of resizing and compressing every image manually, you can set the preferred parameters and let the uploader take care of the rest. Automated tools will ensure size and proportions consistency that’s hard to achieve through manual editing. Besides, some CDNs support responsive delivery. It means you don’t have to resize the graphics for all screen sizes, the smart software will take care of it.
Final Thoughts
If you want your customers and Google to love your website, reducing loading time is critical. You can achieve maximum acceleration by optimizing images and visual content, animations, and graphics. It comes down to selecting the appropriate format, shrinking image dimensions, and optimizing the file size. You can perform all these tasks manually at first. But as the volume of visual content snowballs, setting up a CDN with automated image optimization becomes an invaluable investment.
