Website, Meet Image - pt II

Website, Meet Image - pt II
High Monkey profile picture

By High Monkey, Our random thoughts collected

Categories: Content Management & Strategy,  Design,  Usability,  Learn

Meticulously made, user-tested websites are really something to behold. But even the most well-designed website can be brought to it's knees by a colossal image. No amount of user experience design can compensate for poor page load times or lagging features that are caused by large image file sizes. A restaurant can have a great atmosphere and awesome food, but if the hostess says you'll have to wait 2 hours to be seated, you're finding somewhere else to eat. Even more, you might go somewhere that has worse food for the sake of convenience. In other words, timely web pages make a big difference. Slow loading images are time and time again cited as the main reason for high bounce rates on websites, even a half of a second change in page load time can drastically change site engagement. Moreover, Google's algorithm that determines their search results bumps sites further down the list that have slow load times that might negatively effect user experience. So, how do you optimize your images to make sure that they aren't slowing your site down? Now that we have a baseline understanding of images from part 1, it's time to learn how to keep our file sizes in check. There are 2 major problems that you can avoid to make sure images don't destroy a website near you...

1. Image is too big

First of all, what is a large image file size for the web? It's a complicated question but in general terms, the answer tends to be "a lot smaller than you think." If you are looking at MB's, you're not even close. Most of the time, a manageable splash image on a landing page will come in somewhere around 750 KB or lower. Icons tend to come in closer to 50 KB and lower. These are probably conservative examples. On the current iteration of the Highmonkey website, our largest image is 514 KB, and our largest icon measures in at 8 KB. So, how do we keep these file sizes low?

The Fix

First and foremost, make sure you are using the right file type for the right image. Using the wrong file type can make your file much larger than it needs to be. For more on this be sure to reference part 1 of our Images series, and as a general rule don't use .bmp or .tiff files on your website. If you have a designated pixel dimension for your photo (make sure you get one if you don't) there is an easy solution to your problem. Once you are sure you are using the right file type, your next step is making sure that your image is compressed. Photoshop is a great tool for (among other things) image compression, and can be helpful when you want to decrease the file size of your image. There are a plethora of options available when exporting images in Photoshop that allow you to compress for the web, and while we aren't going to get deep in to them in this article, Adobe has resources available online that can be helpful.

Not looking to pay for Adobe Creative Cloud? There are some options online for people that don't want to break the bank to compress their images as well. Optimizilla is my personal favorite, but there are plenty others. Just search "online image compression tool" in google and you can browse and find one that floats your boat.

2. Too many images

Your file sizes are all manageable, but for some reason your website is still clocking in load times of 3-4 seconds, or more...what's wrong? Another problem could be the amount of images on your page. Even if a file size is small, multiple small files begin to stack up, and can be an undertaking for pages to load at a reasonable pace.

The Fix

Cut down on your images, think 5 or less per page. If it is absolutely necessary to have a large amount of images on the page your developer might also have some solutions. Using lower resolution preview image tiles that open up full hi-res "light boxes" are good solutions for photo galleries, and lazy loading or image caching are also options for pages with a large quantity of images. Those are just a few of options, but at the end of the day your developer will know the best solution for your specific problem.

At the end of the day, keeping your images in check will make sure that your website functions at a high level. Content is great, but if it bogs down your website to the point that it effects your load time, then nobody will get to see it. Now that we know for sure your images aren't hurting your website, the next step is use images to elevate it!  How do we make sure that our images our enhancing the content on our pages instead of detracting from them? We'll dive in to what makes a great website photo in our next blog post, coming soon...