“A picture is worth a thousand words” — and that’s true when you find the right picture. But on the web, there are a few additional things that determine the worthiness of a picture – like “Is that picture bandwidth friendly?” That question is relevant because images and other media files largely contribute to the overall size of the webpage.
The problem with owning an oversized webpage is that it comes with consequences. Google, for instance, might start hating you and your users might leave before they get to see what you have on offer. Ideally, you don’t want either of that to happen. Since rich content like images and videos are the usual culprits, we’re going focus optimizing the images for the web and performance.
How to Optimize Images and Cut Your Page Load Time by 80%
Eliminate and Replace Unnecessary Images
So, what alternative options do you have that can replace images?
Here’s a list:
- Vectors and SVGs: Vector are ideal for images that have geometric shapes. They are resolution independent, and responsive. SVG (Scalable Vector Graphics) is a popular XML based image format that can be further compressed and minified. It’s also supported by all major browsers.
- CSS effects: CSS3 brought in a lot of features such as CSS animations, drop shadows and gradients that you can naturally add to HTML elements. You can use CSS to create assets for modern web pages and like SVGs, they work with all resolutions.
- Web fonts: Web fonts allow you to design beautiful typefaces without relying on an external resource like images. They are performance optimized, and improve overall usability.
Compress Images Without Visual Data Loss
Generally, a high definition image captured on a camera is several megabytes in size. It might be compelling to serve the user the best possible image, but unless you are running an HD image gallery, you shouldn’t. Instead, go for image optimization options that considerably reduce the image size without any significant loss of data. JPEGs PNGs and WebPs are compressible formats. You can manually, or with the help of a script, change the quality of the images so that they are web friendly. Let’s have a look at what compression can do:
This is an image of a landscape that has lots of details in it. The actual size of the image is 511 KB.
Let’s try compressing it using JPEG’s lossy compression algorithm. The quality of the image has been reduced to 70% and consequently, the file size has gone down to 164KB.
As you can see, the details haven’t been lost. Most of your audience won’t notice the difference and that’s a huge win. You can further reduce the size, if you’re going to compress it under 55%, the image might start to appear horrible and distorted. Find a middle ground that works for you and stick to that.
Getting the Image Format Right
There are many image formats available, but the universal ones are PNG, JPEG and GIFs. The criteria for selecting the right format depends on the desired visual result and your requirements. If you need to animate your images, GIFs are the best available choice. GIFs are compressible, but the visual difference is in quality is usually noticeable. If your requirement involves transparency and alpha channels, you should go with PNGs.
But for most other use cases, you can choose JPEGs. They are the images that built for the web because they are easily compressible. You can use image manipulation tools or use a script to programmatically optimize the images (see this wiki page for more information on tools and techniques). Experiment with each format and see which settings work for you. Try altering the palette size, quality, lossy and lossless algorithm to find the best settings and use that for your website.
Apart from the universal file formats, web browsers also support JPEG XR and WebP formats. These formats were created with optimization in mind. The images delivered in WebP format have, on an average, 30% decreased file sizes compared to that of JPEG files of the same quality.
If you’re still not sure, the flowchart below should help you decide the right image format for your project.
Delivering scaled image assets
This is one of the simplest, yet most effective optimizations that gets overlooked by most webmasters. When your image gets rendered in the browser, it doesn’t need to ship with more pixel than its intended size in the browser. Sure, the browser lets you resize the images, and you should realize that you are missing big in terms of page load time.
WordPress, for instance, now supports responsive images by storing various sizes of the same image when the image gets uploaded to the Media library. You can then use the <image> srcset attribute to declare all the versions of the image. The browser downloads the most appropriate image and ignores all the other images in the set.
This reduces the browser’s job of downloading unnecessary bits of image data and resizing the image on our behalf. Here is an example of code that demonstrates <img> tag with srcset and size attributes:
<img srcset=“elva-fairy-320w.jpg 320w,
Asynchronous Loading Images
This post was written by Limor, a technical writer and editor at Agile SEO, a boutique digital marketing agency focused on technology and SaaS markets. She has over 10 years’ experience writing technical articles and documentation for various audiences, including technical on-site content, software documentation, and dev guides. She specializes in big data analytics, computer/network security, middleware, software development and APIs. Connect with her on LinkedIn and Twitter: @LimiMaayan.