When you’re building a website there are many things you need to add – one of these is images. Images of your team, products and projects are a great addition, however they can have large files that slow your website down – something that’s never fun for your visitors. If they have to sit and wait for your website to load, they may leave and go somewhere else.
That’s why optimising your images before you add them to your website is essential. I’m going to run through 3 simple steps you need to take before uploading your images.
1. Resize your images
Make sure your images are the right size for the screen they’ll be viewed on.
Think about which devices they’re going to be seen on. Since we’re talking about optimising for websites, most people are viewing these using a computer or mobile devices such as smartphones and tablets.
Most computer monitors have a resolution (size) from 1200 to 1920px wide. So you’ll need to make sure your images are large enough for this screen size. For example, if you have an image that is 400px wide and you want to add it to your website as a full-width image it’s going to get stretched out and become very pixelated to fill in that space, so it won’t look good.
Another example is if you have a very large 4200px wide image and you add it to your website, it’s going to take way too long to load, or you might not even be able to load the image because of its size. Before you start adding images to your site make sure they’re the appropriate size and are going to fit in the required space.
Let me give you some examples of the sizes I use for my websites:
- Full-width image (header image): 1280px wide
- 2 images next to each other (2 columns): 620px wide
- 3 images in a row (3 columns): 420px wide
How do I resize my images?
2. Save your images in the right format
There are two formats that are considered the best for website images: JPEG and PNG.
JPEG files are great for photos. They’re smaller than PNG files so they load much faster.
PNG files are great for graphic images such as logos, especially if you need a transparent background. They have larger files and take longer to load, so remember to only use them when you have to.
3. Compress the Image
What does it mean to compress an image? It basically means removing anything the image doesn’t need while maintaining the quality. By resizing and compressing the image, you’re ensuring that your images won’t slow down your website.
How do I compress an image file?
There are some great tools out there that help you compress images. TinyPng is a free online tool that compresses your JPEG and PNG image files. You simply add your image and then download the file.
Optimising images for your website doesn’t need to be scary. Just remember the 3 steps:
- Ensure it’s the right size for the screen
- Ensure you save it in the right format
- Ensure you compress the image file so that it is the smallest possible size but still of high quality
If you can do this to all of your images before uploading them to your website, visitors and search engines (like Google) will thank you.
Leisa is a branding and web design expert and one of our Digital Solutions advisors. Learn more about the Digital Solutions program and how it can help your business here.
Looking for more website building and optimisation advice? Book in for a free 15-minute consultation with Leisa here.