Sizing Images for Your Website

Efficiency is key for an effective website. You want your website experience to get users from point A to point B as efficiently as possible. You want your site to load quickly. However, with modern, image-heavy designs, websites can have a tendency to get bogged down with beautiful images, making everything load slowly across the entire website.

When a website loads, any resource it has to pull from the server takes time to bring up in a browser. Certain browsers use your computer’s RAM to try and compensate load times from your own cached copy (your computer saves copies of websites it visits to your computer to load faster the next time), but if there’s large images on the website you’re looking at, you can get stuck looking at 5 – 30 second wait times. Very rarely will a user sit though that experience to try and visit your website. You need your images to be sized appropriately to function on the web.

Your computer will likely have basic image editing built into it in programs like Microsoft Paint or Preview on a Mac. You can just look at the image size, and play with those different numbers to get your file size down.

If possible, every image needs to be less than 1MB. The dimensions of the image (2000 px by 800 px, or whatever it is) aren’t necessarily tied to the file size itself, but could have an affect in certain circumstances. BEFORE you upload the images to your website, make sure they are small enough to load quickly in a browser. Think through the application of each image – a slider image? Probably needs to be 1500 px wide at least. Product image? Probably no more than 500×500.

Slow loading websites are just as ineffective as not having a website at all. We’ve seen sites take over 20 seconds to load, contributing to an incredibly high bounce rate. Users are significantly less likely to use your website effectively if they can’t interact with it efficiently.

Be sure that you get your images as small as possible to still be effective. And don’t forget about different screen sizes. You may only need 100px for that banner image on a phone, but on a desktop, that image won’t cut it.