Understand why we need to optimise graphics for the website
Success Criteria
I can optimise graphics for the web
I can explain why we need to optimise graphics for websites
Downloading images
When a user (client) visits a website, everything on the page needs to be transmitted from the web server to the client's computer.
This is done through several requests. A request is replied to with a response.
A request normally consists of some kind of information about the file and then the contents of the file.
All of this data that is transmitted adds up and makes the viewing of a webpage much slower.
A typical webpage downloads 65 - 75 files each time the page is opened.
But we can optimise images and other files using different techniques, which means that the files are smaller and download faster.
All of this leads to a better user experience
Downloading images
When a user (client) visits a website, everything on the page needs to be transmitted from the web server to the client's computer.
This is done through several requests. A request is replied to with a response.
A request normally consists of some kind of information about the file and then the contents of the file.
All of this data that is transmitted adds up and makes the viewing of a webpage much slower.
A typical webpage downloads 65 - 75 files each time the page is opened.
But we can optimise images and other files using different techniques, which means that the files are smaller and download faster.
All of this leads to a better user experience
To optimise an image file we can:
Reduce the file size through compression
Change the file type
Resize the image to an appropriate size
Reducing colour depth
Use server-side compression
Download multiple images at once
Methods of optimisation
When a user (client) visits a website, everything on the page needs to be transmitted from the web server to the client's computer.
This is done through several requests. A request is replied to with a response.
A request normally consists of some kind of information about the file and then the contents of the file.
All of this data that is transmitted adds up and makes the viewing of a webpage much slower.
A typical webpage downloads 90+ files each time the page is opened.
To optimise an image file we can:
Reduce the file size through compression
Change the file type
Resize the image to an appropriate size
Reducing colour depth
Use server-side compression
Download multiple images at once
But we can optimise images and other files using different techniques, which means that the files are smaller and download faster.
All of this leads to a better user experience
Compression
We spoke about compression earlier in the course and how it can be used to remove parts of a file to reduce the file size.
This is one of the most common ways of reducing file sizes
Certain file types allow you to select how much compression (or quality) the image should have.
File types
We also spoke earlier about using different file types to reduce the file size.
For example, PNG files take considerably more space than JPG files, and, whilst offering better quality, most of the time - particularly for photos - JPG offers good enough quality.
For icons with transparency, GIF is often the best format, since icons tend not to have a huge number of colours in them.
File types
Which image is what? Which one here is the GIF and which one is the JPEG?
GIF
JPEG
Resizing images
When using bitmap graphics in an image (i.e. GIF, JPEG, PNG files) you should ensure that the image file is resized prior to be used on the website.
Look at the code below and note the sizes of the image on the website. It's a waste of resources to download an image file at a resolution of 1680 x 1200 pixels when it's going to downsized to
140 x 100 pixels.
Resizing the image file in advance of uploading it to the server helps fix this issue.
<img src="image1.jpg" width="140" height="100">
Reducing colour depth
Sometimes an image file only uses a few colours or shades. For example, take a logo with only 30 different shades in it.
If the image was saved as a standard JPEG file, it would have 24 bits for each pixel, when it actually only needs 8 bits. This is called the colour depth.
JPEG, amongst other standards, supports reducing the colour depth.
Reducing the colour depth can reduce the file size considerably.
Server side compression
Server-side compression techniques, such as gzip can be used to reduce the file size of an image file before it is sent to the client.
This is often just set up on a server in the settings (directives) of the server
This will also occur every time that a client requests a file
Image maps
Downloading multiple 'images' in one go is possible through something called a sprite map.
A sprite map contains multiple icons or images in the one image file, thus reducing the number of items needing downloaded
Using CSS, it's possible to extract each of these images individually.
Answer the following questions
Why is it important to reduce the file sizes of graphics on websites?
On average, how many files does a standard webpage download to the client's computer?
State and explain three methods of optimising graphics for the web
How can resizing an image be effective at reducing the file size?
