Get the Buildawebsitetonight.com RSS feed by clicking this button

Preparing Photos for your Website

Working with images on your website can be one of the more confusing aspects of managing your own website. But don't despair - I'll explain everything in an easy-to-understand way to remove the mystery and confusion :-)

Ensuring your photos look good and do not slow down the loading time for your webpage are the two primary concerns of website owners - both of these issues are dependent on how you prepare your photos first.

Think of it this way - in this example let's pretend:

you need a photo of your staff for your website, which needs to be 400pixels wide x 300 pixels high once uploaded
you take a photo with your digital camera on the highest setting ("highest" is good, right?)
you download the image to your computer
this photo is rich with millions of colours and complex pixels, and weighs around 2-4Megabytes
if it was printed out at this stage, it could possibly measure about 4 feet x 3 feet, or 1.25x1metres if that makes more sense to you
if you were to turn this photo on its side, it would be quite thick - say, for example, 1 metre.

To try to put an image of THAT SIZE on a website is like trying to make an elephant fit in a toaster ... it just ain't gonna work :-)

Can't I simply RESIZE the image by grabbing the corners??

Some people think that by 'dragging' the corner of the image to reduce its size will do the trick - but unfortunately, you still have an image about 1 foot or 1 metre thick, which is still way too heavy for a web page.

There are several things we can do to make this image "internet-ready", or "web-ready":

first we have to reduce the dimensions to bring it down to the right size for the web page, 400x300pixels (or px)
whichever program you use for images, change the Dimensions to 400 x 300 pixels
we now Save it (File/Save As in most programs) with the ".jpg" extension for photos & images (.gif if it's a line drawing)
once we have saved the image in its new size, it will be automatically THINNER and perfect to be uploaded.

Two things to remember when working with images for your web site :

the dimension is the size of the image (i.e. the width and height) and
the file size of the image (the weight) in megabytes (MB - the biggest) or kilobytes (KB - the smallest).

Why do the Photos on My Website Load Slowly?

Now that I've explained how HEAVY a photo can be, are you starting to understand how 3, 4 or 5 of these on a page might take forever to 'appear' or download onto the page?

That's right - it's the sheer weight of the image and the massive amount of millions of pixels which are all trying to be seen and heard.

At this point I'll mention that you have around 3 SECONDS to grab the attention of your website visitor. One slow image download AND THEY'RE GONE! CLICK! OFF TO ANOTHER WEBSITE!

For the internet it is accepted practice to have an image around 20-40kb in WEIGHT, which is like one sheet of typing paper compared to a phone book - similar shape (dimensions) but VERY different in depth (weight).

Which web page would load fastest? The one with 5 phone books attached, weighing a ton each, or the 5 sheets of typing paper?

That's right, the lightest ones are best.

Don't despair - all is not lost - we can simply save the images to smaller dimensions and their weight will be adjusted accordingly.

Factoid: A 20KB file will take a split second to load on most computer internet connections - whereas a 3MB file can take more than one minute for each photo/image (for those using broadband, anyone using slower connection will have excruciating waiting times for your image to appear). Can you now see that if you have a few photos each weighing a few MEGAbytes that it can dramatically slow down the loading of your page? Excellent!

So - how do we change a huge juicy image from 2MB (2,000KB) photo to a 20-40KB photo?

You can use your own software - If you have your own image editing software on your computer, simply use this to change the dimensions. It might be called 'size' or something similar in your program. I use ImageWell on Mac, and have used Paint(dot)Net for Windows.

You can use online software - If you don't have image editing software, there are some great places online where you can edit/resize your image. As my client, you'll be provided with links and instructions to get your images trim, taut and terrific! If you're not my client that's ok too - I've created a video to show you how I do this :-)

Click the image below to watch the quick video

Preparing Images for Your Website by Teena Hughes

Prefer to watch on Youtube?

Is there an easy way to take photos suitable for the web?

Excellent question! And the answer is a big "Yes!"

If you're going to be using your camera to take a few shots for the internet, change the settings from HIGH QUALITY digital photos to MEDIUM QUALITY. Each camera is different of course, but this this will a big step in the right direction.

Take a few photos on Medium quality, then change to LOW QUALITY and take a few more photos. Once you download them, look at the quality on your computer and decide which one is best for you. For my own Kodak camera, I use the Medium quality and I'm very happy with the quality of the photos that produces.

Can I use Google images?

The answer to this is, "No. No. No. Never. Nada. Nix. Nope, don't do it!"

OK that might sound a bit harsh, but in reality when you do a search for images on Google all you're doing is looking at all the images which have been uploaded by people like you - artists, business people, organisations, photographers, moms at home etc etc.

Many of these folk took their own photo or paid someone to take the photos for them, before uploading. These images are copyright to the person who owns the photo.

If you COPY an image you found on Google, you are in fact stealing someone else's hard work. On the rare occasion you may find a ROYALTY FREE No-Cost or Low-Cost image bank in a google image search, where it's ok to copy their images.

In reality though never copy an image from Google unless you have visited the originating website and checked the page for COPYRIGHT information and statements or clauses allowing others the right to copy.

If you DON'T find this - DON'T copy. It's as simple as that.

I've had people steal/use my photos - I found them quite by accident, and I had to issue a Cease and Desist Order in each case. Each of the culprits thought it was just fine to steal photos of artwork I had created and pass it off on their own website as their own work. That's really not nice, now is it? Yes they removed my photos and apologised, but it was a nuisance to have to chase them up.

Links to Low Cost Royalty Free Image Libraries

We can recommend the following online "stock photo" libraries which are a great resource for getting professional quality photos for your website. Photos on these sites cost as little as US$2. You will typically only require the lowest resolution (least expensive) version of the photo for use on the web.

Big Stock Photo - www.bigstockphoto.com
iStock Photo - www.istockphoto.com

There are also great free stock photo websites, for example these two which I've used with success in the past:

www.MorgueFile.com
www.123RF.com

Please read ALL the instructions on these websites and double check whether or not you need to give the photographer credit on your webpage.