A big part of web design relies on the aesthetics of it, and when you focus on the appearance of your website, your images are one of the focal points. Sourcing eye-catching and attractive pictures is the key, but optimising the images on your website is fundamental to improving your site’s performance.
Why you need to optimise the images on your website.
When a computer loads a website, do you know what its process is to present a single webpage? If you’re not entirely sure, then the browser on your desktop or mobile has to download every aspect of the webpage to render it on your screen.
What does this mean for your website?
The larger the materials the longer your users’ browser will take to load your website. This is no good to any one, especially your users. Not only does it impact user experience (UX) on your website, but it will affect your SEO too – Google favours those webpages that load quickly.
It’s not all about the quantity of images.
The significant points above don’t mean that you can’t have all the images that you want, it just means that you need to refine these images and ensure that they aren’t so big that they’re affecting the load speed of your website.
Every image on your site must be downloaded by visitors from your server, so if your visitors have to wait a long time for the website to load, trust us, they will not wait around!
“47% of consumers expect a web page to load in 2 seconds or less.” (source: https://blog.kissmetrics.com/loading-time/)
Still, take it easy on the quantity of images.
The more images you have on your website the more storage on your server you are using. This will only affect your website the more pages, images and blogs you add to your website. Not only could it make your website slow, but it could end up costing you a lot in hosting fees.
You can compress your images.
If you would like to have the images you crave for your website, but they’re quite big file sizes, then you can reduce their size.
You can easily compress images by saving them as a specific file format. Many picture and graphic applications offer various file formats. The most common optimised file formats for the web are JPEG, PNG and GIF.
JPEGs are a trusted option for many websites as they offer many colours, making them ideal for photographs.
PNGs are a great option for specific design features of a website, like screenshots and icons & buttons.
GIFs are an even smaller size, which means a lower quality bitmap image. Today, GIFs are popular for their ability to support animations, so you don’t have to disregard animations if you would like small animation on the site.
Save the image in a smaller size.
So, you have your file format decided, but by adjusting the image to the right or a smaller size, you can minimise the KB, MB or GB file size. The lower the size, the speedier your website will become.
Some of you will know that you can actually reduce the file size without reducing the quality of the image through Photoshop’s ‘Save for Web’ function.
Compress your images with apps.
As with everything, there are apps that you can use to compress your images for your website. The way in which they compress your image is by removing data that isn’t crucial, like additional colours and data of the image.
Some of the image compressor tools include ImageOptim, ImageOptimizer, Optimizilla, Compressor.io and more.
Another compression solution is through downloading a plugin on WordPress. One of the most known is WP Smush.it. It’s a quick, easy and effective way to reducing the file size of all of your uploaded images in your media library.