Use quote marks to find an "exact phrase"

Print version

print icon

23: Images

Scope of this lesson

This lesson is limited to what you need to know to use your existing images in a web page. Creating and manipulating the images is beyond the scope of this course.

About images for the web


Images are comprised of pixels, just like your monitor screen. Therefore an image a certain number of pixels wide, by a certain number high, will display at a certain size depending upon the resolution of the screen. Forget about other measurements; when it comes to web images it's all about pixels! Any image manipulation program, and many image viewers, will indicate the pixel dimensions (and zoom level) of the image you are viewing.

Resolution and file size

You should use images that have the lowest file size consistent with acceptable image quality. Low resolution is quite ok on the web – it still looks good and helps the page load more quickly. And it's less to upload to and store on your web server. A rogue high-resoluton image that makes its way onto the server can take as much space as dozens or hundreds of low-res images.

If you're going to have images on your website, then you'll need at least a basic working knowledge of image optimisation (minimising the file size of your images).

Image size

Size your images to the exact dimensions you would like them to be on the webpage, pixel for pixel. Apart from any 'hero' images, aim to make the images on each page all the same size and/or proportions.

Types of images

The image types described below are those most suited for use on a website. screenshot of root directory Both PNGs and JPGs can be compressed to a low file size for website use.

Best suited for images with a limited range of colours and areas of a single colour, such as logos and other illustrations. It allows for transparency. This file format has largely replaced the 'gif' format, which generally does the same job but not as well. The image to the right is a png – notice how it has large areas of white and few colours compared to a photo.
There are two versions of png: png8 and png24. The former is limited to 256 colours. The latter has unlimited colours and offers better quality transparency, but with a larger file size.
jpg (or jpeg)
For images with many colours and few areas of a single colour, such as photos.
Scalable Vector Graphics is a very different kind of image format. It is beyond the scope of this course, but you should be aware of it and learn about it as your skills develop.

CSS for images

The CSS selector for images is 'img'. The CSS styling format is the same as for other elements, as shown below.

img {
  property: value;
  property: value;
  property: value;
.imageclass {
  float: right;
  border-width: 2px;
  border-color: black;

Image effects with CSS filters

CSS 'filters' allow you to apply some Photoshop-like effects to your images. For example, the ruleset below applies a sepia tone to all images (you can see the result at bottom right). The value in brackets sets the strength of the filter.

img {
  filter: sepia(100%);

Here are the available filter types. The CSS Tricks site has all you need to know on this topic.

Here is an example of each filter.

photo of hoop pine
photo of hoop pine
photo of hoop pine
photo of hoop pine
photo of hoop pine
photo of hoop pine
photo of hoop pine
photo of hoop pine
photo of hoop pine
photo of hoop pine

Default CSS for your images

Your CSS should include some default settings for your images. You will learn about this in Lesson 25.