Video Tutorial :: How To Save Bandwidth Using Photoshop

by derek on February 14, 2008 · 25 comments

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.

Sample Image

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.

Optimized Image

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

Stay In The Loop!

Subscribe to the Derek Semmler dot com feed via RSS or Email to receive notifications when new posts are published. Follow the WordPress ninja on Twitter too!

{ 22 comments… read them below or add one }

Shawn Knight February 15, 2008 at 12:21 am

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 🙂


Matt February 15, 2008 at 12:25 am

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.


derek February 15, 2008 at 12:33 am

@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!


Stephen February 15, 2008 at 12:44 am

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.


Cesar February 15, 2008 at 12:50 am

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?


Eva White February 15, 2008 at 1:31 am

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.


James Mann February 15, 2008 at 4:13 am

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.


Home Recording Studio February 15, 2008 at 7:35 am

As a tutorial, very effective. Good advise too.


Futon-Matt February 15, 2008 at 8:38 am

Nice post, lots of people don’t think anything about throwing a large image file into their sites.


Furniture Store February 15, 2008 at 8:11 pm

Nice post there! Very informative. Thanks


Ling February 15, 2008 at 8:11 pm

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?


Brewster February 16, 2008 at 12:00 pm

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?


derek February 16, 2008 at 4:01 pm

@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.


Kyle February 16, 2008 at 4:43 pm

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!


Eva White February 19, 2008 at 3:17 am

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……


Nicole Price February 19, 2008 at 7:39 am

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.


derek February 19, 2008 at 8:55 am

@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!


Lifestyle February 20, 2008 at 8:35 am

Wow! Thanks Derek! Very intresting video! Useful tutorial!


tomda November 10, 2008 at 6:04 pm

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.


jack@enterprise feedback management December 1, 2008 at 5:23 pm

thats a neat little trick and good for people who share bandwith to know.


Text Effect December 9, 2008 at 12:09 pm

Very informative. Thanks
Text Effects last blog post..20+ Great Photoshop Text Effect Tutorial


Stefanobeck February 16, 2009 at 10:03 am

Good tips, thx
It’s good for people who share bandwith to know.
Stefanobecks last blog post..Immagini frattali: crea con Fractal4d


Leave a Comment

{ 3 trackbacks }

Previous post:

Next post: