Tips and tricks to help you
Grow your business online
Are you more of a visual learner?
Here's a video version of this post.
5 steps to optimize your website images
You want to stand out because it looks amazing, but if you’re using poor-quality images or images that are too large and make your site load slowly, you won’t make a great impression on your visitor.
There are 5 things I’m going to walk you through so that you know how to properly optimize your photos for use on your website.
What I mean by “optimize” is the process of getting your images ready for the web by using the right format, dimension, size, and resolution. All this while making them as small as possible.
1. Start with a high-quality image
If you start with an image that’s too small and scale it up it will appear fuzzy and look really bad, so start with the largest size possible and only size them down.
If you’re working with a professional photographer’s images or using stock photography, you’ll most likely be working with a really big file. This is great because remember, you can always make a large image smaller, but not the other way around.
2. Resize your images
About that big file though… if you upload it to your website as-is, it will slow down the time it takes to load your page. And the longer your page takes to load the more it hurts your ranking in search engines.
It also doesn’t make for a good user experience because remember people are impatient when it comes to the online world. If your website takes a long time to load, they’ll quickly click away.
So you need to resize your images to only be as large as you need them to be.
Most of the time, images downloaded from stock photo sites are 300dpi (or dots per inch) which is a great size for use when printing, but for the web, they need to be saved at 72dpi.
For images that run the full width of the screen (like in your hero banner or in the background of a section), I recommend using images that are 1920 pixels wide.
For all other images, stick to a width of 1200 pixels.
3. Use the right file format
Most of the time, you’ll want to save your images as JPGs for use on your website. JPGs are great for photographs.
If you have any graphics with large areas of flat color, like illustrations and infographics, you’ll want to save these as PNGs. PNGs also allow for transparency, so these are great for logos or any graphics that you may want to overlay an image or background color.
Here’s more information about image formats and which to use when.
4. Name your file correctly
When naming your image files, don’t simply leave them how they came out of your camera, like image1.jpg, for example. Instead, describe what the photo is about in plain language and use your keywords if applicable.
So if your image is of a chocolate cake, name it chocolate-cake.jpg, not IMG208.jpg.
Also, only use lowercase letters, numbers, and hyphens when naming your image files.
5. Add an alt tag
Because search engines can’t see the images that are on your page, you need to let them know what the image is about. Again, describe what the photo is of using natural language while including your keywords if it makes sense.
Adding alt tags is an easy way to improve accessibility and your user experience which in turn helps with your SEO.
Optimizing your images may feel like just one more thing you need to do when it comes to creating your website, but the benefits make it totally worth it.
Your images will look better, your website will load more quickly, and it will help to boost your search engine ranking.
Now if you’re wondering, how do you know what images to use on your website in the first place, learn how to find great images for your website.
Hi, I'm Alli McAuley.
I help passionate entrepreneurs, like you, create a standout brand and website so you can run a successful business online.
My ultimate goal?
To make change happen for other go-getters in pursuit of living their dream life by doing what they love.