Small images make fast pages
I'm not here to teach you to be a graphic designer or expert photo manipulator, but the whole point of having a CMS is you can now add stuff to your pages. So, I'm going to attempt as simply as possible to explain the essentials of images on web pages.
 
There are two things which determine the size of an image, it's physical dimensions (6 inches wide by 4 inches high) and it's resolution (how many dots per inch are crammed in - an article which sort of explains resolution may be found here) Depending on the combination of these two will determine how big the image file is stored on your computer in kilobytes or megabytes.
 
I have a very posh digital camera. When I take a picture with it at it's best quality it gives me an image that is over 3000 pixels wide and at a quality of 300dpi. Each image is about 3MB. They look amazing on screen or when printed, but they would be unusable for web pages at that quality.
 
The central channel of this website is about 550 pixels wide so I'm definitely going to need less than that, and for the web you should always use images at 72dpi, plus unless you are confident that the visitors are very patient and willing to wait ages for each individual image to download to their computer so you should strive to keep every image on your site below 100kb - and less if there's lots of images on a single page.
 
So we need to reduce our original huge, detailled image to something that will work on the web. This is called optimising.
 
Here's one I prepared earlier...
 
Image of fruit taken in my garden
 
The original photo is here but be warned, it is 5.3MB of high colour loveliness, and may make you want to eat fruit.
 
There is a lot of software available that can help you do this - you may even have some already (often there is some bundled with your digital camera - but that doesn't neccesarily mean it's any good!) We have some posh software in the office called Adobe Photoshop which is pretty much the industry standard for manipulating photos. Using this software I can 
 
1. reduce the Image Size to 72 dpi
2. reduce the Image Size to 400 pixels wide
3. Use the Save for Web function so that the software will compress my image down to a smaller file size. I'm not going to give a long explanation of how it does this - if you want to know ask me and I'll explain it to you. 
 
However, we have been very impressed with some FREE software called Picasa - from the trusted and respected hands of Google - Download link here - We could achieve equally quick and effective results to our £400 Photoshop.
 
In fact, here's a movie of me using it to reduce my huge fruit image to a small one.
 
 
How would you rate the usefulness of this content?
1 2 3 4 5
Poor Outstanding
Content rating:
1 2 3 4 5
 2 people have rated this content.

30 July 2010
You are at: