BLOG
Website, Meet Image - part II
Even a well-intentioned image can end up single-handedly destroying your website. How do you prevent this from happening?
March 7, 2019
Reading time: 5 min
|
Digital Experience Strategy
The original source, High Monkey
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...
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.
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...
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...
Latest Blogs
| Digital Experience Strategy
Welcome to High Monkey's new website!
High Monkey has a brand-new website! See why we redesigned it, how we built it, and what’s new in our smarter, more intuitive digital home.
March 24, 2025
Reading time: 5 min
| Business Process & Collab.
Elevate your productivity with this OneNote Kanban Board strategy
Boost your efficiency with our OneNote Kanban Board strategy. Perfect for anyone looking to streamline their task management and enhance productivity with practical, easy-to-implement tips.
March 23, 2025
Reading time: 7 min
| DIgital Experience Strategy
Discussing Stupid gets a fresh new look for Episode 11
Discover how Discussing Stupid leveled up with a fresh new look in Episode 11—new colors, a refined intro, and a branding update to enhance the experience.
March 18, 2025
Reading time: 5 min
Your success story starts here
Contact us for a free consultation, and let’s work together to build a strategic plan that tackles your challenges and lifts your organization to a new level.