Your Everyday Essentials
For Web Professionals
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.
Make sure that your images are:
Images of people
Images of buildings
High Quality Images
Always start with a high quality image and resize once only. Never enlarge a smaller image as it will deteriorate and become blurry.
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.
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.
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, Symmetrical and Asymmetrical. Symmetrical is usually used for website design (lining up against borders etc.)
This is a symmetrical layout.
This is an asymmetrical layout.
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:
Do not use:
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.
Times Higher Education, Student Experience Survey 2010-2015