A website isn’t only about looks, it’s also about functionality. One aspect of having a functional website that is often overlooked is speed. Today’s world is fast-paced and this is reflected in a website user’s browsing behavior. If the website doesn’t load fast enough you can rest assured the user will just leave. And considering that around 50% of visitors to your site are accessing it through their mobile phone, very often using their data plan, the less heavy your site, the better.
Taking things even further, when your website visitors immediately head toward the exit, this results in a high bounce rate and fewer conversions. The user experience isn’t as good as it could be. Google also takes this into consideration and will give you a lower SEO ranking.
Fortunately, there are steps you can take to make your website faster. Some of them will shave a few kilobytes off your website, but in truth, images are what you have the most control over. A full HD landscape image may look good on your website, but that’s a surefire way to make it slower.
So, here are 4 imagery optimization tricks that will result in a faster website.
1. Choose the right file format
Without getting too technical about the differences between the file formats, it is good to know that the different formats are all best suited for certain types of imagery. You can usually use the following rule of thumb:
- JPEG is best for photographs.
- PNG is usually best for graphic designs or images with transparency.
- SVG is best used for your logo or infographics.
- GIF gives you the possibility to show (simple) animations on your website.
2. Compress your images
It may not always be the best option, but compressing your images using one of the many available tools will make your image size significantly smaller, and the loss in image quality will be minimal. The average website visitor will not be able to see the difference between the original image and the compressed one anyway.
One file format that’s being used often is WebP compression. This format can easily make your image 25% to 70% smaller in size while barely losing quality.
3. Choose the right size for your images
Before uploading your images to your website, it’s important to make sure they are the right size. As a web developer, it’s easy to just drop a HD picture on your website and let HTML or CSS resize the picture to a thumbnail. But this will make your images unnecessarily large. Having your images the right size before you upload them to the website will give you the same result but with a smaller file size and, therefore, a faster website. A small difference in the way you build your website, but a big impact on your website speed.
4. Use a content delivery network
A content delivery network essentially uses a group of servers all over the world on which you can cache your images. This means that for website users, there’s always a server nearby to give a response as quickly as possible. It is very useful to use a content delivery network (CDN) to host your images, especially if your website has users from all over the world. Having a server close by to respond to a user’s request will give a faster response, which leads to a faster loading time.
5. Bonus tip: when optimizing your images, improve the SEO value
If you’re already working on your images, this would be a good time to check their SEO value as well. When you give your image files SEO-friendly names using relevant keywords and make sure that your alt tags are also written in an SEO-friendly manner, you will rank higher on the SEO scale.
In closing
Faster website speeds are beneficial for a number of factors. By improving your imagery, you can have the most impact on this matter. Can your website still be tweaked to get better results?