With most hosting accounts you are allocated a specific amount of bandwidth – or data transfer – per month. Depending on your host, you may have more than enough bandwidth to handle a large spike in traffic or you may suffer the dreaded notice of account suspension when you exceed your limit.
As an example, I have mentioned before that I have two different hosts right now – one offers me 20GB of bandwidth while the other offers me 50GB of bandwidth. I’ll let you explore which host provides more bandwidth.
If your host is skimpy on the bandwidth, you will need to explore ways to reduce the amount of data being transferred.
The following tutorial will demonstrate how you can use Photoshop – many other popular image editing tools offer similar features – to reduce the size of images being displayed on your website.
For purpose of this demonstration, I have selected an image from a post by Stephen Fung to use as a sample. The image from Stephen’s post has a current size of 34.1Kb – which isn’t bad but could be better.
Take a look at this video tutorial to see how making one simple change in Photoshop can reduce the size of your images by a considerable amount. The primary benefit in taking this step before adding an image to your blog post is to reduce the bandwidth that you are using for each image or post.
After running through the demonstration and saving the new file, we have an image that has a size of 16.6Kb and there really isn’t any noticeable loss in image quality.
With this very easy change to an existing image, we were able to save roughly 18Kb in size on one image.
Depending on the volume of traffic hitting your site – hopefully from a front page digg or a nice wave of StumbleUpon traffic – this can go a long way towards saving yourself some bandwidth on your hosting account and preventing your account from being suspended.
Let me know what you think of this tutorial as this is my first attempt to record a video using my Flip camera.
Photo credit: Stephen Fung
{ 22 comments… read them below or add one }
At first, while watching the video, I kept thinking to myself… “yeah, that’s great, but it’s just one picture, how much bandwidth will you really save?”… then you mentioned the front page Digg / Stumble, and I ate my words 🙂
PNG is technically better, since it supports lossless compression, but PhotoShop, unfortunately, doesn’t do much (if any) compression for PNGs. But, there’s tons of free compression programs out there.
@Shawn :: Right, in many cases it might not be a big deal to save 10-20Kb but throw in 20,000 visits and it begins to add up.
@Matt :: You’re absolutely correct. PNG compression in Photoshop is not good, particularly on any image that has more than a few colors. Thanks for stopping by!
There is noise in the red band, text, and fringes around the blue, but it’s not a big deal considering the context of the picture. I mean, you totally get the point, even if we took it down another few kb’s.
Your mileage may vary with pictures that show different levels of quality with image optimization. For example, if a picture is particularly busy, there might be noise where you really need to see the detail. Some online image upload services or backends will further compress the image so if you’ve already optimized a picture, it may get compressed again when you upload it, further diminishing the quality.
If I know that the image will be optimized on the other end, then I often just crop to the right size, save to med-high quality, and let the online service do the rest as compressing it further again may have some undesireable results.
In the case of wordpress, there is no compression, unless you install a plugin that does that, so saving a few kb’s on an account with a hard bandwidth limit will speed up the load of the page and like Derek said, will minimize the pain of having to call your host to reinstate your account after you’ve been dugg.
Nice video tutorial but how many traffic actually do you get if you reach the front page of Digg? I never reach the front page but I heard that people say that their hosting can’t handle traffic from Digg?
That was very simple. Hey thanks Derek for that easy solution. I have been using photoshop for quite some time now and it never clicked me that I should save it for web so make the size small. I like to put a lot of pictures on my blog as I feel they attract more. And surely I was using a lot of bandwith, but thanks to you that now I will save all my pictures as you have shown in the above video.
I love using Photoshop, it’s such a powerful package but a tad expensive.
I also have been using Xara eXtreme another graphic editing tool that rocks.
Your video was great and easy to follow. The only thing I noticed was that the video was a bit dull. I don’t mean not exciting though. I mean that the lighting could have been a little better which would have made your video a little brighter.
Photoshop is a big program, it would be good to see other videos on it.
As a tutorial, very effective. Good advise too.
Nice post, lots of people don’t think anything about throwing a large image file into their sites.
Nice post there! Very informative. Thanks
What do you think about using photo upload sites like flickr? I mean, it like reduces your bandwidth charges to zero, doesn’t it? Any downsides to it?
Good tutorial Derek – easy to follow. I do think though that software tutorials are better when they are produced with screen capturing software rather than using a camera to film the screen. Where did you get your camera from?
@Stephen :: Absolutely, you need to experiment with the different settings to see what gives you the best balance of image quality for the size of the image.
@Cesar :: It will really depend but last year I had about 20,000 visitors hit this site in a very short time when a post hit digg. That is one reason that I have been so happy with BlueFur hosting as they held up very well.
@Eva :: That is great, I hope it works well for you and that you save yourself some on the bandwidth.
@James :: It was a little dark, as I only have a small desk lamp in my work area and it was about 11:00pm when I decided to create the video. Photoshop is a huge program that I fumble my way around, I’ll have to see if I can do anything else.
@HRS :: Thanks for the feedback!
@Matt :: The way that I look at it is that any little bit can help and that is why I normally follow this step.
@FS :: Thanks!
@Ling :: While linking directly to the images at flickr would reduce the bandwidth, typically it is not recommended to do this because then you all of your traffic is consuming their bandwidth – this is known as hotlinking and is often a violation of the terms of use. The “polite” thing to do as a site owner is save the image from flickr (or wherever) and host it on your own server.
@Brewster :: I thought about that while creating the video but I don’t have any screen capturing software. My Flip camera was purchased at Toys ‘R Us.
I’m glad I found this post. I’ve been trying to convince people of this for as long as I can remember. Besides saving bandwidth there are lots of other benifits.
1) faster load time for users and thus a better experience for the user
2) Less storage space on your server
3) Less energy is needed in the whole transaction between bandwidth, server work, and user rendering therefor it’s better on the environment!
4) Less of a load on your server also might prolong the life of the server which is also eco-friendly.
Nice video!
I want to thank you Derek for your help on saving bandwith. I have started using your tip to save my image for my blog. Thanks once again……
This is very helpful. I have had my site taken offline twice earlier with a few days to spare towards the month end. I know exactly how much difference these few KBs can make.
@Kyle :: Thanks for pointing out all of the additional benefits that can be found in something that seems so simple on the surface!
@Eva :: That is great to hear that you have been able to get some value out of this tip!
@Nicole :: Very true, hope this helps you save that space!
Wow! Thanks Derek! Very intresting video! Useful tutorial!
I have had bandwidth problems before. I am absolutely going to have to try that out. Photoshop sometimes is pretty difficult so thank you so much for the very helpful tutorial.
thats a neat little trick and good for people who share bandwith to know.
-jack
Very informative. Thanks
Text Effects last blog post..20+ Great Photoshop Text Effect Tutorial
Good tips, thx
It’s good for people who share bandwith to know.
Stefanobecks last blog post..Immagini frattali: crea con Fractal4d
{ 3 trackbacks }