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 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. Don’t worry if it’s 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. Don’t worry if it’s 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 dependent 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, you’ve 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, you’ve 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.

You can check best example @ http://surf-invasion.com/veterans-day-images/
*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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s