Slides badge

Optimising website graphics

Learning Intentions

  • Understand how to optimise website graphics

  • 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 which? 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

  1. Why is it important to reduce the file sizes of graphics on websites?
  2. On average, how many files does a standard webpage download to the client's computer?
  3. State and explain three methods of optimising graphics for the web
  4. How can resizing an image be effective at reducing the file size?

Optimising image files

Presentation Overview
Close
JB
Optimising website graphics
© 2020 - 2024 J Balfour
09:50 | 29-04-2024
Join Live Session
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Widget Screen
Canvas Controls
Random Selector
Timer
Volume Meter
Binary Converter
Python Editor
Show Knox 90
Provide Feedback
Help
!
Keywords
    DragonDocs Management
    Random selector
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      Dark Mode
      Bold Text
      ×
      All slideshow files