How To Prepare Images And Photographs For The Web

The images you choose to use on your site are extremely important as they will say a lot about you as a business. Make sure that you choose images that are both eye-catching and of decent quality.

The key to good web images is to keep them as small as possible. Remember - the bigger your images are, the longer they will take to load when someone looks at your website. Images are good to add visual interest to your site, but if you add too many it may start to look cluttered.

Image-editing software

There are many image-editing software packages available, and almost all of them will be sufficient for basic editing of images for your website.

Probably the most popular choice is Adobe Photoshop now available in both the full professional version and a cut-down version (Photoshop Elements) for home users. There are also many free image-editing programs available on the web which have almost identical functions to Photoshop.

In this guide we will show you how to use both Photoshop and GIMP, which is a free program available for download from http://www.gimp.org/.

File types

For photographs, and graphics with gradients (smooth blends of colours), we recommend that you save your images as JPEG files these files are compressed so they will be relatively small in size, whilst still retaining the smooth colours without distorting.

For images with flat solid colours, such as an icon or text graphic, you should save as GIF files These are better for crisp or blocky graphics because they are smaller in file size than JPEGs, but will make photographs look grainy.

For more information on file types and resolution see Saving for web.

Cropping

Sometimes you will need to trim an image down to focus on a particular subject or remove unwanted detail around the edges of a photograph. Most imaging software will have tools for you to do this.

In Photoshop

1. Open the file you wish to edit by choosing Open in the File toolbar at the top of the window and selecting your image in the file browser.

2. Select the Crop icon in the palette on the left, or press C on your keyboard.

3. Click and drag from a point on the image to create a rectangle. This is will be the section that you want to keep.

4. Dont worry if its not right first time you can resize the rectangle by clicking and dragging the corners before you are ready to crop.

5. To crop the image, double-click the rectangle you have made.

In GIMP

1. Open the file you wish to edit by choosing Open in the File toolbar at the top of the window and selecting your image in the file browser.

2. Select the scalpel icon (Crop or Resize an image)in the palette on the left, or press shift + C on your keyboard.

3. Click and drag from a point on the image to create a rectangle. This is will be the section that you want to keep.

4. Dont worry if its not right first time you can resize the rectangle by clicking and dragging the corners before you are ready to crop, or specifying the width and height in the Crop & Resize box.

5. To crop the image, double-click the rectangle you have made.

Cropping to size

Sometimes you will need to change the proportions of your image. In order to prevent your image stretching when you change either the width or height, you will need to crop it to size instead of resizing an image (that is already in proportion) - shown below.

For example, you have an image that is 250px high and 300px wide. You need the image to be square to use as a thumbnail for your website, so you\'ll need to lose that extra 50px from the width.

In Photoshop

1. Select the \'Crop\' tool from the tool palette on the left or press \'C\' on your keyboard.

2. Before using the crop tool on the image, type the required proportions of your new image in the options bar across the top of your window. e.g. width: 250px, height: 250px. Make sure you write \'px\' for pixels after the number so that Photoshop doesn\'t think you\'re talking about centimetres.

3. Click and drag the crop tool on the image as you would normally. You will notice that the box has set proportions so you cannot change the shape of your rectangle as you drag - only the size.

4. Double-click the rectangle you have made to crop the image. As long as you set the proportions correctly beforehand, your image will be cropped and resized to the dimensions you need so you can save from here without further resizing.

In GIMP

1. Select the scalpel icon (Crop or Resize an image)in the palette on the left, or press shift + C on your keyboard.

2. Click (but don\'t drag) a point on the image to create your crop area

3. A \'crop and resize\' pop-up window will appear where you can enter your required proportions in the \'width\' and \'height\' boxes. Make sure \'px\' is selected so The GIMP knows you want to measure size in pixels.

4. When you change the width and height you will see the cropping area on your image change dimensions too. To change the position of this area within the image, change the values for \'Origin X\' and \'Origin Y\' fields in the crop & resize window.

5. When you\'re happy with the size and position, click \'Crop\' or double-click the rectangle you have made to crop the image.

Resizing

The standard resolution for printed images is 300 dots per inch (dpi) and above, whereas for web images it is just 72 dpi. When you resize your images for web, you should always set the image resolution to 72 dpi, so you can see how big it will really look on screen before you put it on your website.

If you already have images on your website, you can find out how big they are by right-clicking on the image and selecting properties. This will tell you the height and width of the image so you will know what size to make them in the future.

In Photoshop

1. Open the file you wish to edit by choosing Open in the File toolbar at the top of the window and selecting your image in the file browser.

2. Go to Image > Image Size to see the current dimensions of the image.

3. To resize your image, change either the width or the height in pixels. If constrain proportions is enabled (at the bottom) the image will resize both width and height at the same time. It is a good idea to keep this on so that your images will not stretch. See Cropping to size if you need to change the proportions of your image without stretching.

4. Make sure the resolution is set to 72 pixels/inch so you know you are seeing your image at its actual size.

5. Click OK to resize your image.

In GIMP

6. Open the file you wish to edit by choosing Open in the File toolbar at the top of the window and selecting your image in the file browser.

7. Go to Image > Scale Image to see the current dimensions of the image.

8. To resize your image, change either the width or the height in pixels. The linked chain symbol means that if you change one dimension, the other will change as well. It is a good idea to keep this on so that your images will not stretch. See Cropping to size if you need to change the proportions of your image without stretching.

9. Make sure both the X and Y resolution is set to 72 pixels/inch so you know you are seeing your image at its actual size.

10. Click Scale to resize your image.

Note: It is never a good idea make an image larger than it was before. Your image-editing software is forced to guess details in the image and add new pixels, which often results in a blocky or blurry-looking image. This is known as pixellation. Making an image smaller on the other hand, is usually fine.

For this reason, it is good practice to keep your original large file saved in case you need to resize it again.

Saving for web

Remember - the larger your image is, the longer it will take to load. For people with a slower internet connection, a large image can take several minutes to appear.

Image size is not just about how many pixels you have. It is also dependant on the quality of the image, and how many different colours it is made from.

When you save images for use on the web, you will always have to sacrifice a certain amount of image quality in order for it to load in the quickest amount of time.

In Photoshop

1. Once you have finished editing your image, go to File > Save for web

2. You will see a preview of how your image will look once it is saved.

3. Choose your file type from the first drop-down box on the right-hand side of the screen. For more information on choosing a file type for your image see File Types.

4. Choose the quality of your saved image by moving the quality slider* left or right. You can also choose a quality setting from the drop-down menu below the file type (e.g. low, high, maximum etc.). Try to choose the lowest possible quality without affecting the image you see in the preview. If it looks blurry or gritty, youve gone too far.

5. Click save and choose a file name for your image. (save it under a new name so you can keep a copy of your original image)

*Note: When saving a gif, instead of a quality slider you will get a drop-down box where you can choose the amount of colours in your image. The fewer colours you have, the smaller your image will be. In many cases, your gifs may actually look better with fewer colours as it will be more consistent.

In GIMP

1. Once you have finished editing, go to File > Save As (save it under a new name so you can keep a copy of your original image)

2. Click on Select File Type and select whichever one you need. For more information on choosing a file type for your image see File Types.

3. Click save

4. Choose the quality of your saved image by moving the quality slider* left or right. Try to choose the lowest possible quality without affecting the image you see in the preview. If it looks blurry or gritty, youve gone too far. (To see a preview of your saved file, just click Show Preview in image window.

5. Click OK to save your image.

*Note: When saving a gif, you will be asked whether to convert to indexed colour or grayscale. This will depend on whether or not your image has colour. Click export and continue. The GIMP does not give you an option to specify colours or quality of your gif, so skip step 5 and save as normal.

John Brunsdon is a director of UK Web Design and Marketing company Tickbox Marketing (http://www.tickboxmarketing.co.uk). Before setting up Tickbox, John worked for the BBC News website for seven years and is a former national newspaper journalist.

http://www.tickboxmarketing.co.uk

Learn Photoshop
If you want to get a job as a professional graphic designer, it probably essential to learn how to use Adobe Photoshop. This ...

Can I Sell Public Domain Images?
Most government documents (including images) are in the public domain, that is, they are free to be used by the public. For ...

Design Your Webpage With Visitors In Mind - Optimize Your Images To Reduce The Load Time
As you may know all successful web sites are designed with visitors in mind. There are way too many website elements that can...

The Proper Way to Use Images
Most people will agree there is nothing more annoying than going to a site and it taking forever and a day to download all th...

Simplify Your Web Site for Clarity and Ease of Use
There are plenty of web sites out there in which basic elements of design are ignored. The viewer may experience overkill and...

Text Is King!
Are you building your website? If so, STOP! Take a look at what you have done so far. How many images do you have? How much t...

Web Designing Tips
Easy Thats how youd like life to be, right? Especially when youre creating a website on your own. But that doesnt mean you wa...

Are Web Graphics Stealing Your Money?
They might not be wearing a mask and carrying a gun, but if youve got images on your web pages then they could be costing you...

Retirement Signature Frames - The Perfect Retirement Gift!
When most people think of a retirement gift, they think of a watch. Its the tried and true gift that companies give employees...

Designing A Great Website - 7 Tips
If you are thinking of establishing your company name through the World Wide Web, then it is a must to develop a creative web...

Why Do Images Disappear from a Webpage?
In learning webpage design, I encountered many problems that took lots of practice to resolve. Although, I was building web p...

Retirees - 6 Steps To More Fun And Less Pain After Projects And Activities
Youre retired now and have more time for those projects and activities you at least thought you wanted to do. Lately youve no...

Corporate Logos
Logos are symbols or patterns that are generally used to represent companies or brands. Logo is derived from the Greek word l...

How Do I Prepare for Retirement?
When the day finally arrives, will you be ready? What do you need to do? How do you need to prepare? Well, if you are ove...

Targeted Web Site Creation - 9 Steps to Make More Money With Web Site Creation
It is very much possible for making money through web site creation. There is no need of creating sites for other people to m...

Attractive and Creative Web Designing Tips
Websites are an essential eSearch Engine Marketing is primarily conducted in order to boost sales. Here are few tips which wi...

Types Of Web-Designing
As there are different companies, it is essential for a website design company to get the entire information about the area o...

Is A Picture Really Worth a Thousand Words?
The great debate: how much copy you should have on your site, particularly on the home page?Do you subscribe to the idea that...

Planning Your Website for Success
Most people know they need a website in order to publicise and promote their business but very few people know what they want...

The Very Basics of Design
Design is a very subjective thing, therefore, if you ask me how to come up with a first class design for your marketing colla...