Images for the web
Images are like headlines. They draw attention to your site and catch the eye of visitors, inviting them to stop in and stay a while.
We can help you to choose suitable images, but if you'd rather hunt down your own, here are some tips to help.
Preparing your images for the web
Make sure that your images are:
- Relevant - make sure they correspond to the message or emotion you are conveying in the text.
- High quality - one high quality image has more impact than several low-quality pictures.
- A small file size - keep the file size as small as possible.
- Resizing Images - resized to the dimensions that you require.
- Image placement - line up your images on web pages.
- Image format - a suitable format for the web.
- In RGB mode
Taking and choosing your images
Images of people
- Show people in their working environment (e.g. in the lab).
- Don't try to fit everyone into a single shot. Focus on individuals and small groups, showing interactions between people.
- Try to find original ways of showing learning and teaching rather than rows of heads staring at a board.
- Use interesting angles and creative cropping.
- Look for clothing that contrasts with the colours of the room furniture, so that the subjects stand out from the background more.
Images of buildings
- Consider close-ups of architectural details as these can often be more interesting than the whole building.
- Shoot from unusual angles, not just eye level.
Campus shots
- Include people in your shots - it can help with the sense of scale and avoids making the campus look deserted.
- Shoot just after sunrise or just before sunset for the best light. The sun will be low in the sky, providing soft, warm light, and long shadows which help to reveal detail and textures.
- Avoid placing the horizon in the middle of the image. Follow the rule of thirds and place the horizon either one or two thirds into the image.
Back to top
High Quality Images
Always start with a high quality image and resize once only.
Never enlarge a smaller image as it will deteriote and become blurry.
File Size and Resolution
When saving images for the web, make sure that they are compressed. Photographs should be saved as JPG files, and graphics files should be saved as 24-bit PNG files. The only exception to this is very large simple graphics files, whose file size can be significantly reduced by saving as GIF files.
- Smaller files load faster, reduce bandwidth and usually look just as good as high-resolution images.
- Create your images at no more than 72 dpi (dots per inch). Higher dpi won't noticeably improve quality and it will make the image file size larger, slowing load time. Photos taken with a digital camera are often 300 dpi. Compress any digital photos before trying to use them on a web page.
Resizing Images
- Resize your image in your image-editing software (e.g. Photoshop or Fireworks) rather than by changing the width and height tags in the html code.
- If you force them by the code to be smaller than they are, the file size will remain larger than necessary and the image will load more slowly than it should.
- If you make the photos look bigger than they really are, the image quality will be very poor.
- Only resize an image once - otherwise you could end up with a lot of blur.
- Constrain proportions (keep the relationship between the width and height constant) as otherwise you could end up with a distorted image.
When resizing, make sure to constrain proportions (this is making sure the relationship between the width and height) stays constant. Failing to do this distorts an image.
Note: never resize a GIF image. First change the mode to RGB colour and then resize. You can still save your resized image as a GIF, just do not apply resizing while the image is in the GIF mode.
Back to top
Image Placement
If an imaginary grid was placed over your page, the images should line up with the lines of the grid rather than being placed randomly.
There are two types of layout, Symetrical and Asymetrical. Symetrical is usually used for website design (lining up against borders etc.)
This is a symetrical layout.
This is an asymetrical layout.
Back to top
Image format
There are too many image editing programs to cover here, but here are quick guides for two - Adobe Photoshop and Paint.NET (which is on the SOE).
Paint.NET (SOE) - Save as JPG : percentage - Save as PNG : no settings - Save as GIF - play around with settings until correct file size.
If you are using Adobe Photoshop, use Save For Web And Devices in the File menu. JPG files should be saved using the "JPG High" preset, PNGs should be saved using the PNG-24 preset, and GIF files should be saved using the settings that produce files which are as small as possible while not significantly compromising image quality.
Suitable formats for the web are:
- jpg or jpeg - JPEG stands for Joint Photographic Experts Group.
- This format is best used for photos on the web. Do not use this format for logos or graphical images as they will turn out pixelated. When saving as a jpg, adjust the quality to something that looks good but that keeps the file size down.
- gif - GIFF stands for Graphical Interface File Format.
- This type of format is best used for computer-generated images like logos and vector graphics.
- png- PNG Stands for Portable Networks Graphics.
- these can be used in similar situations to .gif (although .png does not have the 256-colour limit) but it compresses more effectively and should result in smaller files. They are very useful if you need an image with a transparent background.
Do not use:
- bmp (bitmap) - saving your image as a bitmap means that you will save the image as a series of dots or pixels.
- eps - Encapsulated PostScript. The eps format is used mainly for print work. If you have an eps file you will need to convert it to a jpeg or gif for use on the web.
- psd - The psd format is a Photoshop file extension. If you have a psd file you will need to convert it to a jpeg or gif for use on the web.
- tiff - Tagged Image File Format - The tiff format usually makes your images a higher resolution, so this file format is unsuitable for the web.
Back to top
Colour Mode
Definition: A common colour mode, RGB, stands for the colours of Red, Green, Blue. Colours on screen are displayed by mixing varying amounts of red, green, and blue light.
In your graphics software these numbers might look like this:
255 RED 255 GREEN 0 BLUE.
A number between 1-255 designates the amount of each RGB colour.
In order for your computer to understand these numbers we translate them into 6 digit hexadecimal numbers or triplets. 255 RED 255 GREEN 0 BLUE becomes FFFF00. The first pair (FF) is the Red, The second pair (FF) is the Green, and 00 is the Blue. FF is the hexadecimal equivalent of 255 and 00 is the hexadecimal equivalent of 0.
RGB is the most common colour mode used when creating graphics, even though graphics to be commercially printed are eventually converted to cmyk mode, the colours used in printing inks.
Keep in mind that RGB refers to an on-screen colour mode.
In creating web pages, the number of RGB values that are recommended for use is considerably reduced - first, by the fact that many displays can handle only 256 colours and, secondly, because PC and Mac Web browsers handle 40 of these 256 colours slightly differently. In order to ensure that your colours will be consistent on both browsers, a palette of the 216 colours common to both PC and Web browsers is recommended. Any colour outside of these will be approximated.
Find out more about browser safe web colours.
Back to top
del.icio.us
digg
reddit
facebook
stumbleupon