There’s no denying that images give your website a visual oomph.
But did you know that they make up approximately 21% of your website’s total weight?
Large images contribute to that weight. They take time to load and slow down your website speed. And in 2019, no one has the patience to visit a slow website anymore.
This is why image optimisation is important.
Image optimisation is the process of decreasing the file size of an image while keeping its quality intact.
Benefits of Image Optimisation
Optimising your images benefits your website in many ways:
- More storage space. Optimised images have smaller file sizes, occupying less space on your server.
- Improves website performance. Users prefer websites that load in less than 2 seconds. By optimising your images, you in turn improve website speed and user experience.
- Responsive images work for different browsers/devices. The more browsers/devices your website is compatible with, the more visitors you attract.
- Higher search engine ranking. Page speed is one of the factors Google considers when ranking search results. Because optimised images lead to a faster website, you increase your chances of dominating page one of Google.
How to Optimise Your Images
Now that you understand how image optimisation benefits your site, it’s time to do the nitty gritty work.
Here are image optimisation guidelines:
1. Choose the right file format
Images on the internet have different formats — each with different qualities, sizes, and uses. Not every format works for your website, so be careful in choosing the right one.
JPEG is short for Joint Photographic Experts Group. It’s one of the most commonly used formats on the web as it provides a balance between good quality and small file size.
Short for Portable Network Graphics, PNG is often used for higher quality images and images with transparent backgrounds. Because of its quality, its file size tends to be larger.
GIF is short for Graphics Interchange Format. It only uses 256 colours, which lowers its quality. Because of its small file size, GIF is best used for animated images.
WebP is an image format developed by Google for web graphics. It’s an alternative for JPEG and PNG, reducing image size as much as 30% while still maintaining the same image quality. WebP also supports transparent and animated images.
2. Compress your images
Image compression involves removing or grouping certain parts of an image to reduce its file size.
There are two kinds of image compression methods: lossless and lossy.
In lossless compression, you slightly reduce the file size of an image without affecting its quality. This is done by simply removing unnecessary metadata.
Lossless compression is best used for photography websites — or whenever you need your images to be as clear and crisp as possible.
PNG is one image format that uses lossless compression.
Lossy compression removes more parts of an image — further reducing its file size.
This could end up compromising the image quality. Avoid this by sticking to the right compression percentage. Lossy compression is your best option for improving website speed.
JPEG and GIF are some image formats that support lossy compression.
WebP lossless compression
The WebP format is special. It supports a powerful kind of lossless compression, wherein the quality of an image remains unaffected but its file size is greatly reduced.
Although the resulting file size for WebP lossless compression is slightly larger than lossy-compressed images, the image quality stands out by comparison. This makes this compression type best for web graphics.
3. Resize your images
You may be thinking about uploading a large image into your website, then shrinking its dimensions via source code. This should shrink the image size while retaining quality, right?
Doing this only burdens browsers.
Aside from loading the image — which takes time considering its actual file size — the browser also has to resize it according to the dimensions on the source code.
The result? A slooow website.
Do this instead:
Before uploading your images, resize their dimensions according to your website layout. For example, if your image is sized 2000 x 2000 px but your layout only needs 400 x 400 px, resize the image to the latter dimensions beforehand.
4. Use image optimisation tools
There are a handful of tools that make image optimisation 100% easier. With a few clicks, your images become ready for the web.
Here are some examples:
- JPEG-Optimizer. A web app that allows you to lossy-compress and resize JPEG images. Simply upload your photo, then set the compression level and the new photo width.
- FileOptimizer. A software that conducts lossless compression on a wide array of file formats, including images.
- ImageRecycle. A web app that optimises images and PDFs to make them web-ready.
- EWWW Image Optimizer. A popular WordPress plugin for image optimisation. It optimises all images detected and uploaded in a WordPress website.
- WP Smush. A WordPress plugin that compresses images and automatically resizes them according to the dimensions you provide.
- Adobe Photoshop. The trusted photo editing software is also useful for optimising images. For a website-ready output, select the Save for Web option.
5. Use images only when you need to
Use images only when necessary. The fewer images your website needs to load, the faster and lighter it will be.
For example, replace text images with headers. Draw attention to them by using the H1, H2 tags or an eye-catching font.
Also, double-check your background images.
Background images are large, so they take time to load. Consider using background colours instead — or convert your background image to WebP format.
Add buttons to your website by using CSS icons. Create borders by editing your HTML code.
The images you use for your website make or break its performance. You don’t want to end up losing your customers in the end. But by following these guidelines, there is no way for your website performance to go but up.
Want to boost your website performance even more? Check out Vodien’s hosting packages.