Preparing Photos for your Website

Working with images on your website can be one of the more difficult aspects of maintaining your own website.

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

There are two major "size" considerations when working with images for your web site (1) the dimension size of the image (i.e. the width and height) and (2) the file size of the image in megabytes (MB) or kilobytes (KB).

Why do the Photos on My Website Load Slowly?

Lets start with file size. If you start with a photograph from your digital camera which you have downloaded onto your computer the file size will typically be between 1-3 megabytes (MB). In website terms this is a very large file for a photograph.

Most photos on the web are between 20-100 kilobytes (KB) - (note that 1-3MB is equal to 1,000-3,000 KB). A 20KB file will take a split second to load on most customer's internet connections - whereas a 3MB file can take more than one minute. You can see that if you have a few megabytes of photos on a page it can dramatically slow down the loading of your page.

So how do we go from say a 2MB (2,000KB) photo to a 30KB photo?

It is actually very easy - always ensure that you upload your photos using the "Images Manager" in your web site Administration System (when logged into your Admin System click on "Content Manager" and then on "Images Manager" - there is an online video and tutorial on using the Images Manager available by clicking here when logged into your Admin System).

By always using the Images Manager to upload and resize your photos you will ensure the photos are the best size in both dimension and in file size. When you click on "Save Image to Server" the photo will automatically be saved at 72dpi (the best resolution for viewing photos on a computer screen) and will be saved at the smallest possible file size (this is called "file compression" - all unneccesary information is taken out of the file).

What is a Pixel?

Now to the dimensions of your photo. Computer images are made up of a lot of little colored dots. They're known as picture elements or "pixels" for short. So when we refer to pixels, we're talking little colored dots.

Every image on a computer is made of pixels. This means that you can also denote an image by number of pixels. For example, the image in the top left of this article is 242 pixels wide by 113 pixels high.

How do I know that? I have an expensive graphics program that tells me so. How would you know? Easy - right mouse click on any image that is displayed on a web page. Select Properties - look closely and you'll see that the image's width and height are displayed.

So why all this talk about pixels?

Well if you have worked on web pages much you may have found a few different ways to "downsize" a photo. When you downsize a photo using the "Image Properties" window in the Pages Editor you are not actually reducing the dimensions of the photo file - you are simply "squishing down" the photo on the web page. "Squishing down" the photo will often result in a jagged appearance as the pixels are forced to merge.

The best way to resize your photos for your web pages is using the Images Manager. After you upload a photo using the Images Manager you'll see the dimensions of the photo you have uploaded are displayed in pixels. You can easily downsize the photo by selecting a percentage to downsize or by typing in a different pixel dimension. The downsizing will always keep the photo in proportion. Click "Save Image to Server" and your photo will be ready to go onto your web page.


You may save your image to the server and find that it is too small. If you try to resize it back up using the Images Manager you will see that the photo will appear blurry - this is because of the "compression" we referred to above. The compression takes out all of the extra information and so when you try to make the photo larger there is no information and the Images Manager has to "guess" what color pixels to use!

It is always best to simply delete the photo from the Images Manager list and re-upload the original from your computer and then re-size it again until you have the size you want. Once you have done a few you will get to know the best size for your application.

In short, using the Images Manager to upload and re-size your photos will give you the best quality and the fasted loading photos for your website.

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


Please ensure that you have the correct and up to date copyright permissions before using any images on your website.

Articles Archive
	Responsive Website Design Convert Your Site to Responsive SEO for Google Search Engine Optimisation Facebook for Business What is Cloud Computing? Optimise Google Places Listing Using DIY Website Templates Google AdWords vs Organic SEO Deep Link your Web Pages Web Marketing using Twitter Preparing Images for the Web What is Reciprocal Linking? Where Is Your Domain Name? Adding Google Maps to website Using Web Page Templates Successful Small Business Sites Do it Yourself Websites My Email Setup Options Domain Name Registration