Tip 1: Our 5 Minute Guide To Image Editing
Images can be very memory intensive, causing web pages to open slowly. The file size of an image is made up of 3 components:
1. Actual dimensions (inches/cm/pixels).
It is wasteful scanning an image at 10cm wide if you are only going to display it at 4cm wide. We aim to keep all images on this site to a width of between 150-300 pixels.
2. Resolution measured in dots per inch (dpi).
Most monitors only display images at 72dpi so it is pointless scanning an image at 300dpi for displaying on the web.
3. Colour bit depth (very boring)!
Numerous colour models exist. The only ones you need to use for web design are:
RGB (Red Green Blue) for colour JPEG files.
-
Indexed Colour for colour GIF files.
-
Greyscale for your "black & white" images.
File format
You can save your images in various file formats. The only ones you need to use for web design are JPEG and GIF files. These 2 formats "compress" the size of the file by removing "non-essential" data from the image. Be careful not to compress them too much or the image will appear grainy.
So what are the best settings for this website?
Bring your picture into a bitmap image editing program such as Photoshop or Paint.
"Crop" any unwanted parts of the image.
Look on the menu bar for a command on the lines of "Image Size" - it is probably hidden away inside EDIT or IMAGE. Set the size to the following parameters (see image):
-
Set the resolution to 72dpi.
-
Set the pixel dimensions: Width = min 150 / max 300 pixels (use pixels rather than inches or cm). There should be a check box on the lines of "constrain proportions" or "maintain aspect ratio". If the box is checked, the height of your image will automatically re-size when you enter the width. Make a note of the pixel depth & height - you will need them later.
-
Check the colour model. Look on the menu bar for a command on the lines of "Colour" or "Image Mode" - it is probably hidden away inside EDIT or IMAGE. Select RGB (JPEG) or Indexed Colour (GIF).
Saving your newly edited images
Click on "SAVE AS" and give the file a meaningful name (try to avoid spaces in the title).
In the same window, there should be a drop down list of file formats. Select either JPEG or GIF. If you are asked to enter the compression or quality level, enter MEDIUM.
Save the file to your My Pictures folder / hard drive.
Uploading your pictures to the website "photo page"
Access the website in editing mode by visiting http://www.freewebspace.com/login/ and when prompted, enter our website address and password http://www.buffetbar.freewebspace.com/ (you will need to get the password from the Webmaster via our e-mail address).
Click on the "My Website" tab near the top the screen.
Click the "Edit Page" button alongside the web page where you wish to display your image.
All existing photos will now display along with a little red "edit" button alongside.
Find an empty photo box (near the bottom) and click the red edit button. Follow the instructions to upload the image from your hard disk (“select a photo from my hard drive”). Click the “browse” button to locate the image on your PC.
In the “Photo Size” section, enter the pixel dimensions of your image (you recorded earlier). Alternatively, select “Original”.
In the “Link this Photo” section, select “Don’t link this photo”.
In the “Other Options” section, set the border value to 2 pixels.
Click the UPDATE button (bottom right of window) and a copy of the image will be uploaded to the web server. You can give your picture a title by clicking the red edit box immediately below it. Now type in the text. When you are happy with the appearance, click the SAVE CHANGES button at the top of the window.
Now click the SAVE CHANGES button at the top of the window and log out of the website.
To check that your editing has worked correctly, re-visit the home page at http://www.buffetbar.freewebspace.com/ and click on the appropriate page link down the left side of the screen.
