This is a re-post of something I had on my old blog a long time ago and felt it could stand to be posted again…
I can’t tell you how many times I visit sites and see these humongous images that take forever to load and think, wow, they really need to fix this! And then I almost immediately leave the site. My internet is very fast and if it takes me several seconds to load each photo, then it takes the majority of the population MUCH longer, and I just don’t want to wait. Admittedly I am an impatient person when it comes to that stuff and I just can’t sit there and wait for the site to load before it annoys me and I hit that little X to close the window. But I’m not alone.
Why does this make the store owner lose money?
1. People are impatient. You have a very small window of time to impress a new visitor before you lose their attention span and they leave your site. With slow loading images, most people (including me) will get tired of waiting and leave your site. When people leave your site, they’re obviously not placing an order.
If your images are not properly optimized for use on the web, even though they may load relatively fast for you, it doesn’t mean they are loading that fast for new visitors. We all know that us store owners visit our own sites multiple times a day. Doing that puts all of the photos and images on your site in your browser’s cache. This makes it so that the site loads quickly next time you view it. But for a first time visitor, with none of your images in their browser cache, the page loading time for them is going to be much slower. There is also a large portion of people out there who are still on dial-up or some other less speedy computer or internet connection, and with attention spans getting smaller and smaller these days, you need to take advantage of every second when someone new visits your site to get them to want to buy from you.
2. Larger, not optimized images take up more disk space. Excessive use of disk space can cause you to require a higher plan from your web host, costing you more money. Not only that, when you upload the images to your site or you make backups of your site (which, ahem, you should be doing regularly) it takes longer since there is so much more data.
3. It saves you bandwidth. Bandwidth is one of those things that clients come to me and don’t quite understand what it is. Bandwidth, in terms of web hosting accounts, is the total amount of data that is transferred to and from your account in one month. So if you have 10GB of bandwidth, then your site can transfer up to 10GB worth of data in one calendar month before reaching the limit and getting that infamous “you have exceeded your bandwidth usage” message.
“But I don’t even know how to transfer data to and from my site. Why do I use bandwidth?”
Every time a visitor views your site for the first time, the images and info on the page of your site they’re viewing are actually downloaded to their computer. So, if you have a 2MB image on your homepage, that 2MB image has to be downloaded to each and every new visitor’s computer when they visit your homepage. That adds up! (2MB is HUGE for a website image, by the way.)
“Okay, I get it. I need to fix my photos, but what size/resolution/etc. do I need and how do I fix them?”
Here are some key points:
- “High resolution” is NEVER needed for use online and does NOT make your photos look better on your website. High resolution is used for print media, not online media. 72 dpi is what your monitor displays at, and so that’s all that your photos need to be. Anything beyond that will just make the file larger and take up extra space/bandwidth/time. Just today I saw a whole site filled with images that were 300 dpi (I know this because the photos were downloading so slowly, I grabbed one and opened it in Photoshop to see). I have not once, EVER, used a photo on my site or any client site that was higher than 72 dpi and you won’t ever see my images or images I use on client sites look poor quality (unless they were supplied by the client that way or they uploaded them on their own at a later time).
- Never re-size your images through your cart, blog or site builder system admin, if at all possible. If you upload a large image to your homepage via your cart’s page editor and then click and drag it to re-size it, making it appear smaller does NOT reduce the file size, the dpi or the time it takes to download and should NOT be done. The file is still the same, you’re just scaling it down visually when you do this. Not only that, but it makes the image pixelated and many times, out of proportion. I can’t tell you how many times I’ve seen super skinny kids or ultra fat babies on client sites. It’s because they drag and re-size and don’t quite keep the proportions when doing so.Images should be re-sized to the exact size needed for use on your site and never re-sized once you upload them. This is why it is ultimately the best to have separate thumbnail and large images. Shopping carts will often re-size large images for you to make your thumbnail images, but those thumbnail images will never appear as crisp and clear as the large images since they are being forcefully re-sized by the cart and not done in a proper manner in photo editing software.
- It depends on what shopping cart, blog or other system you use, as well as what your website design is like, but you should really never need photos larger than 800 pixels tall or wide. More than that and people who use small monitors won’t even see the whole image on their screen without scrolling and larger photos = larger file size = losing money.
- Whatever image editing program you use, there are two things you would need to keep an eye on: resolution (dpi or ppi) and image size (in pixels). You can have a really small thumbnail image be high resolution. You can have a really large image be low resolution. The key is to have the photos be 72 dpi (which is considered “low resolution” but is what is appropriate for online use) and no larger than 800 pixels on the longest side for the large images of your site. In some carts, like AlohaShop, the large product image will not be scaled down for you like the thumbnail images are, so you may need the image to be no larger than about 600 pixels wide so it doesn’t mess up your website design or template.
Some extra tips for advanced users:
Any time you re-size your photos down, they will get softer looking. You’re squeezing the data in your image down and it sort of mushes things together on a very small scale and so the images won’t be as crisp and clear. If you use Photoshop, here’s what you can do and what I do. Whenever I re-size an image down, I use the Sharpen tool (or sometimes the Unsharp Mask tool) to sharpen the images and get them back to their crisp selves or look even better. The key is not to do it too much. 99% of the time I Filter > Sharpen, and then click Edit > “Fade Sharpen” and scale it back a little until the photo looks good.
Within your photo editing software, always make sure you’re viewing your image at 100%. This will show you how it will look on your site – the exact size, the clarity, etc. You can then decide if you need to sharpen or size it down more, etc.
If you use Photoshop or Photoshop Elements, the one thing that will directly affect the visual quality of your photos is what “Quality” you save them at. These two programs, and possibly others I am not sure, will prompt you during the save process to specify what you want the jpg file quality to be. 12 is the highest and is NOT necessary for use online. I save mine at 8 or 9 and that’s the max you would need. Lower than 6 or 7 will affect the quality.
And if you need help optimizing photos, we are here. However hopefully this will help you so you can save money and know how to to it right on your own.