Slides badge

Graphics file formats

Learning Intentions

  • Understand the different format of graphics files

  • Understand the difference between certain formats

Success Criteria

  • I can choose an appropriate graphics file format for a given purpose

Why all the different formats?

  • There are many different file formats that you need to know about for this course
  • Each of these formats was developed for a specific reason
  • As web developers we often need to know what formats to use ourselves, to ensure optimal delivery of the file.

Why all the different formats?

  • The different formats come in all different shapes and sizes.
  • To put it simply, the formats all offer different features but also offer different file sizes

Compression

  • The word compression in a computer science context is all about reducing file sizes. Compression works by looking at parts of a file that can be removed to make the file smaller.
  • In terms of images, sometimes this is simply just reducing the number of representable colours or shades in an image and in other times it involves replacing repetitive data with something that tells the computer to repeat something so many times.

Transparency

  • One of the most common ways to compare image files is whether or not the file type supports transparency.
  • There are two kinds of transparency:

Semi-transparency

Full transparency

Transparency

  • When transparency is not supported in the file format when saved, the transparency is removed.
  • For example, saving an image as a JPG file when it had transparency will remove the transparency from the image.
  • Some file formats support only full transparency whereas other do not support it at all

Semi-transparency

Full transparency

Colour depth

  • Another way of reducing a file size is to reduce the colour depth of it.
  • The colour depth is how many different shades of colours the image can store/represent. 
  • For example, GIF only supports 8-bit colour depth, thus can only represent 256 shades in a single image, whereas JPG supports 24-bit colour depth and therefore can represent 16, 777, 216 colours.
  • The colour depth of certain files is limited by the file type of the file.

PNG

  • Portable Network Graphics (PNG) is one of the most commonly used format on the internet.
  • The main reason for it's wide adoption is that it supports decent compression and also supports good quality
  • PNG files are considerably larger than GIF or JPEG files but support better colour and lower compression, thus better quality.
  • PNG files also offer semi and full transparency

PNG

  • Portable Network Graphics (PNG) is one of the most commonly used format on the internet.
  • The main reason for it's wide adoption is that it supports decent compression and also supports good quality
  • PNG files are considerably larger than GIF or JPEG files but support better colour and lower compression, thus better quality.
  • PNG files also offer semi and full transparency

JPEG

  • Joint Photographics Expert Group (JPEG) is a file type that is designed to compress an image by removing parts that the human eye cannot see
  • It is most commonly used for photographs due to its smaller file size and decent quality
  • Compared with PNG, JPG files are considerably smaller, have similar quality but do not offer any transparency

JPEG

  • Joint Photographics Expert Group (JPEG) is a file type that is designed to compress an image by removing parts that the human eye cannot see
  • It is most commonly used for photographs due to its smaller file size and decent quality
  • Compared with PNG, JPG files are considerably smaller, have similar quality but do not offer any transparency

GIF

  • Graphics Interchange Format (GIF) was developed for transferring images from computer to computer, primarily from a webpage to a client computer.
  • To reduce the file size, GIF only stores 256 different shades of a colour, making it an unsuitable format for photographs.
  • GIF does support full transparency and is ideal for storing logos with very few colours

GIF

  • Graphics Interchange Format (GIF) was developed for transferring images from computer to computer, primarily from a webpage to a client computer.
  • To reduce the file size, GIF only stores 256 different shades of a colour, making it an unsuitable format for photographs.

SVG

  • Scalable Vector Graphics (SVG) is a file type unlike the others.
  • Instead of storing an image per se, SVG stores details about shapes in an image. This is called a vector graphic.
  • As a result of this, SVG is unsuitable for storing photographs and is most commonly associated with logos.
  • SVG code is very similar to HTML:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 300 300">  <polygon points="300,150 256.1,256.1 150,300 43.9,256.1 0,150 43.9,43.9 150,0 256.1,43.9" class="shape-element" fill="rgb(255, 0, 0)" style="stroke-width:3;stroke:rgb(0,0,255)"></polygon></svg>

Animation

  • Animation is a way of making image seem like they are moving by having multiple images running in quick succession
  • GIF and PNG are the two main formats that support animation.

Answer the following questions:

  1. Which format supports only full transparency?
  2. Which format does not support transparency but has very small file sizes?
  3. Which format supports animations and uses high-colour depth?
  4. Which format supports animations and uses low-colour depth?
  5. Which format is a vector graphic type?

Review questions

Presentation Overview
Close
JB
Graphics file formats
© 2020 - 2024 J Balfour
17:07 | 23-05-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:

      ×
      All slideshow files