You’re knee deep into designing your website. You have written your content and now it’s time to get this website ‘poppin’ with images.
You remember you have taken pictures on your phone with the intention of using them on your website. You access the pictures you took some way or another and you open your media folder and upload.
Or, maybe you have used a fancy camera to take some pictures and now those are on your computer. You open that folder and upload those images straight to your website.
You soon find that your website is slow, your images are a little wonky looking because you haven’t adjusted them to fit where you want them to fit – that’s a whole ‘nother story so I’ll stick to the topic here…
What is image optimization and why is it important?
Image optimization is a rather simple but time-consuming process that requires a lot of diligence on your part. It can get a little frustrating sometimes because there are multiple steps to get your images optimzied.
This optimization process aims at two things:
reducing the size of an image and making the image SEO friendly.
The main objective of optimizing your images is to reduce page load times to improve the user experience. Each image on your website is a separate file that needs to be downloaded by the browser.
The larger the file is, the longer it takes to download. Large images can take a while to load, especially if the visitor’s internet connection is slow, which may cause many people to grow impatient and leave the website.
What’s the problem with uploading images this way you may ask?
One of the biggest complaints from website visitors is about slow websites.
More than 40% of people will leave a website if it takes longer than 3 seconds to load. In 2016, Google reported that 53% of mobile users will leave a website in that same 3 second time period.
Technology advances and consumer behavior make website speed a critical thing to get right in your business and one of the things that is often missed by a small business owner relates to the size of the images that they upload to their website.
It’s very easy to upload a large image to a website that can completely slow down a web page. Remember that picture you took with your phone? Most likely, it’s huge!
Unless you have a setting on your phone that you have adjusted, pictures taken with a phone are larger than they need to be for your website.
When you upload an image directly from a camera or mobile phone, the image is usually at a very high resolution. This can easily result in an image that ranges in size from 2Mb to 20Mb or more.
Great article (although a little lengthy) on best image sizes for your website.
The same issue occurs when an oversized image is used on an area of the website that is set to display an image that is a specific, smaller size. This results in an image that is too large, being resized down to fit.
In both of these situations, the larger image creates a bottleneck when a web page is loaded. In order for someone to browse your web pages, all of the content needs to load in their browser first, unless you have lazy load, which is something that is too much to get into in this blog post.
The content of your page won’t properly display until any of the images have downloaded, which can be slow going unless you have optimized your images.
Depending on the Internet connection of a visitor and the device that they’re using, this could create a really bad experience for them. People who have a bad experience don’t tend to stay on a website for very long.
So how can you avoid a slow website due to large images?
Image Compression Tool
The easiest way is to optimize your images first and also use an image compression tool.
I often share this website with our clients who are adding their own blog posts to their website. It’s called Image Resizer and it’s free and easy to use.
For WordPress websites, there are plugins that can be installed that provide image compression services.
Examples of these include:
ShortPixel
Imagify
Optimole
Image compression tools will automatically compress any images that you upload. This means that they’ll make the images smaller and faster loading, without sacrificing any quality. Many of the tools will also automatically resize images, so that they’ll serve properly scaled images to your visitors.
These tools can only do so much though. You still want to resize your images before uploading them.
We use Imagify on all the websites we design. It works fantastic. I optimize the images for a website based on where I am using them in the design, and Imagify does the rest.
I use Divi to design websites and this is the guide I follow. Although it’s for Divi, the guidelines can be used for any website.
Optimizing your images will improve the speed of your website. A faster website means happier visitors, more leads and ultimately more clients.
Who doesn’t want that!
A handy guide to images sizes for peak website perfomance
Background Images
The ideal size of the background images are 1600 x 900px
Full Width Images
They should be at least 1400 pixels wide for the best results. As per the website image size guidelines.
Half-Width Images
Half-width images should be at least 700px wide for the best quality.
1/3 Width Images
Images should be at least 480px wide for the best quality 1/3 width images.
1/4 Width Images
For the best quality 1/4 width images, they should be at least 360 pixels wide.
Choosing the proper images and making sure they are optimzied is an important aspect of creating a visually appealing and fast-loading website. There is, without a doubt, a learning curve, but if you take some time with your images, you will be amazed with the speed and functionality of your website.
This is not always a perfect science so play around a bit. The most important thing to remember is to NOT load photos directly from your phone, a service like UnSplash or Pixabay, or directly from your camera.
