Category: Graphics

N5 – Graphic Formats (Revision)

Graphic Formats

JPEG (.jpg) Lossy compression

  • 24 bit colour.
  • Allows the user to select an appropriate level of compression.
  • JPEG is a good compression format for high-quality images and images where quality is unimportant (e.g. thumbnails).

PNG (.png) Lossless compression

  • Intended to improve upon GIF format.
  • 24 bit colour.
  • Allows user to set alpha level for improved transparency.

GIF (.gif) Lossless compression • Restricted to 8 bit colour.

  • Several images can be stored in one GIF file, allowing for animation.
  • Allows a specific colour in an image to be made transparent.
  • GIF is a good compression format for images with areas of flat colour, images that have few colours, animated images or images that require transparency.

Graphic file size calculations

To calculate the file size (in bits) of a bitmap graphic file the basic formula is:

number of pixels in image x bit depth

  • Bit depth or colour depth is the number of bits that were used to store the colour of each pixel.
    • 8 bit – 256 colours
    • 16 bit – 65536 colours (High Colour)
    • 24 bit – 16777216 colours (True Colour)
  • DPI (dots per inch) the number of pixels in a physical inch of paper.

Example 1
Calculate the file size of a 400 x 400 pixel graphic with a colour depth of 24.

400 x 400 = 160000 pixels in the image
160000 x 24 = 3840000 bits
3840000 / 8 = 480000 bytes
480000 / 1024 = 468.75 KB

Example 2
Calculate the file size of a 300 x 200 graphic with 256 colours.
256 colours means a colour depth of 8 (because 2^8 = 256)

300 x 200 = 60000 pixels in the image
60000 x 8 = 480000 bits
480000 / 8 = 60000 bytes
60000 / 1024 = 58.6 KB

Example 3
Calculate the file size of a 6’ x 5’ image, scanned at 200dpi, with 16 bit colour.

6 x 5 x 200 x 200 = 1200000 pixels in image
1200000 x 16 = 19200000 bits
19200000 / 8 = 2400000 bytes
2400000 / 1024 = 2343.75 KB
2343.75 / 1024 = 2.3 MB

National 5 – Media Types (Revision)

Standard file formats:

  • Text:
    • txt – only text stored no formatting
    • rtf – Rich Text Format, text and formatting stored, new standard allow for the storing of embedded images.
  • Audio:
    • wav – uncompressed audio
    • mp3 – compressed audio
  • Graphics:
    • jpeg – used for photographs due to strong compression
    • bmp – uncompressed
    • gif – used for animations and drawings, few colours
    • png – compressed with partial transparency.
  • Video:
    • mp4 – compressed
    • avi – uncompressed
  • Pdf: Portable Document Format – used to retain the look and format of a document across difference platforms. Document always looks the same regardless of screen size, fonts etc.

Factors affecting file size and quality

  • Resolution – the number of pixels used to make up the picture.
  • Colour Depth – the number of possible colours used to make up a pixel. The more possible colours the greater the file size.
  • Sampling Rate – in sound files the number of recordings taken per second., the greater the sample rate the higher the quality and file size.

 

Calculation of file size for colour bitmap.

Horizontal Pixels = image width x resolution(DPI)

Vertical Pixels = image height x resolution(DPI)

Number of pixels = Horizontal Pixels x Vertical Pixels

File Size = Number of pixels x colour depth (in bits)

Example 1

N5G

This is enlarged but is 1 inch by 1 inch.

In that case there are 72 x 1 x 72 x 1 = 5184 pixels

Example 2
Bitmap with a resolution of 600×600 pixels in 8 bit colour.
Storage requirements

600 x 600 x 1 bytes = 360000
It is 1 byte as it is 8 bits per pixel
360000/1024 = 351.6 kilobytes

Example 3
Calculate the number of pixels in 4 inch by 5 inch photograph scanned which has a resolution of 600 dots per inch.

Pixels = 4 x 600 x 5 x 600 = 7,200,000 bits
7,200,000 / 8 = 90000 bytes
90000 bytes / 1024 = 878.9 Kb

Vector Graphics
It is possible to edit each object separately, for example, change the shape, colour, size and position.
Even if an object in a vector graphic is quite large, it doesn’t need a lot of computer memory. Therefore the file size of a vector graphic is often very small.
Vector graphics are scalable when you resize them, they do not lose quality.

Need for compression – reduces the file size so that the web page loads more quickly. Reducing bit depth has the same impact. Quality of the image is affected.

Higher – Media Types (Revision)

Compression

  • Appropriate use of compression can reduce file sizes.
  • Small file sizes can be transmitted and processed more quickly.

For example, a whole webpage can be compressed, reducing the amount of data which has to be sent to the client computer and therefore reducing the load time. The browser will decompress the page before displaying it.

Individual media elements audio, graphics and video within the webpage could also be compressed in order to reduce the size further.

  • Lossless compression reduces file sizes without removing any data.
  • Lossy compression reduces file sizes by removing some data.

Audio Formats

MP3 (.mp3) Lossy compression

  • Removes the very high or low frequencies that humans cannot hear.
  • When two similar sounds (but different volume) occur at the same time, removing the quieter one.
  • User can choose the level of compression.
  • A full compression MP3 compresses data to around 10% of the original size, with relatively little loss of quality.

Audio File Size Calculations

To calculate the file size (in bits) of an uncompressed audio file the basic formula is:

sample frequency (Hz) x sample depth (bits) x length (seconds) x number of channels

  • Sample frequency is the number of times per second that a sample of the original sound was taken.
    1 Hz = once every second. 1 KHz = 1000 times every second.
  • Sample depth is the number of bits that were used to store each sample.
  • Length of sound should always be converted into seconds if necessary.
  • Number of channels is typically 1 (mono) or 2 (stereo), although it could be more for a surround sound file.

Calculate the file size of a mono voice recording captured at 24KHz with a sample depth of 8 bits, lasting for 15 seconds.

24000 x 8 x 15 x 1 = 2880000 bits
2880000 / 8 = 360000 bytes
360000 / 1024 = 351.56 KB

Graphic Formats

JPEG (.jpg) Lossy compression

  • 24 bit colour.
  • Allows the user to select an appropriate level of compression.
  • JPEG is a good compression format for high-quality images and images where quality is unimportant (e.g. thumbnails).

PNG (.png) Lossless compression

  • Intended to improve upon GIF format.
  • 24 bit colour.
  • Allows user to set alpha level for improved transparency.

GIF (.gif) Lossless compression • Restricted to 8 bit colour.

  • Uses LZW algorithm to compress data.
  • Several images can be stored in one GIF file, allowing for animation.
  • Allows a specific colour in an image to be made transparent.
  • GIF is a good compression format for images with areas of flat colour, images that have few colours, animated images or images that require transparency.

 

RLE (Run Length Encoding) is a lossless compression algorithm.

  • It works by taking runs of the same colour and storing them as two numbers: how many pixels and colour code of this run of pixels.
  • RLE works best for images with large blocks of the same colour.
  • If an image has many different colours (e.g. a photo) RLE could potentially end up increasing the file size!

LZW (Lempel Ziv Welch) is a lossless compression method which is more effective than RLE.

  • It works by looking for repeated patterns of bits within data, stores them in a dictionary, then replaces them with references to the dictionary.

Indexed colour involves storing the actual RGB codes used by the image in a separate colour palette, in order to reduce file size. This can be used as a compression technique where the bit depth of the graphic is less than 24.

Graphic file size calculations

To calculate the file size (in bits) of a bitmap graphic file the basic formula is:

number of pixels in image x bit depth

  • Bit depth or colour depth is the number of bits that were used to store the colour of each pixel.

Example 1
Calculate the file size of a 400 x 400 pixel graphic with a colour depth of 24.

400 x 400 = 160000 pixels in the image
160000 x 24 = 3840000 bits
3840000 / 8 = 480000 bytes
480000 / 1024 = 468.75 KB

Example 2
Calculate the file size of a 300 x 200 graphic with 256 colours.
256 colours means a colour depth of 8 (because 28 = 256)

300 x 200 = 60000 pixels in the image
60000 x 8 = 480000 bits
480000 / 8 = 60000 bytes
60000 / 1024 = 58.6 KB

Example 3
Calculate the file size of a 6’ x 5’ image, scanned at 200dpi, with 16 bit colour.

6 x 5 x 200 x 200 = 1200000 pixels in image
1200000 x 16 = 19200000 bits
19200000 / 8 = 2400000 bytes
2400000 / 1024 = 2343.75 KB
2343.75 / 1024 = 2.3 MB

Video Formats

MPEG (.mp4) Lossy compression

  • The level of compression can be determined by the user.
  • Key frames (individual still images) are compressed and stored as JPEGs – generally only one full frame in every 8 to 24 frames needs to be stored.
  • Any data that stays the same beyond the key frame does not need to be stored. Changes to the image in each subsequent frame are then stored.

AVI (.avi) No compression built-in

  • Limited to 320 x 240 resolution
  • Limited to 30 frames per second
  • Can take up a large amount of storage space and can be quite RAM intensive.

Video file size calculations

To calculate the file size (in bits) of an uncompressed video file the basic formula is:

number of pixels in frame x bit depth x frame rate (fps) x length of video (in seconds)

A video is simply a series of bitmap images, so this rule simply multiplies the size of one image by the number of images in the video.

Calculate the file size of a 300 x 250 pixel video, using 16 bit colour, 30 frames per second and lasting 30 seconds.

300 x 250 = 75000 pixels
75000 x 16 = 1200000 bits for 1 image
1200000 x 30 = 36000000 bits for 1 second of video
36000000 x 30 = 1080000000 bits for entire video
/8 = 135000000 bytes
/1024 = 131835.94 KB
/1024 = 128.75 MB

Thank you to C O’Toole & A Madill from Braidhurst High School for allowing me to edit and publish this here.

Creating the binary background

I’ve changed my background from a stock internet photo to one I created myself.

First of all I wrote a little python program that generated a random 0 or 1

1
2
3
4
5
6
7
 
import random
message=""
for item in range(3000):
    number=random.randint(0,1)
    message=message + str(number)

print(message)

 

blueBinaryI then took a screenshot of the resulting console window and cropped it with IrfanView. I made a negative of the image and swapped the RGB colours before saving it as a PNG file.

I then uploaded the file and set it as a time background, it needs a little crop as it’s a couple of pixels too wide on one edge.

I’m sure you can think of a way that you could use this technique to create even better backgrounds with patterns or hidden messages.

Higher – GCHQ’s Christmas Card and RLE

So I was reading the BBC news website which has an article on GCHQ’s Christmas card.

GCHQ

This led me to wonder what is was as I hadn’t seen one before, it turns out it is a nonogram or picross. Then it suddenly hit me, this is a form of run length encoding, that we will be covering later in the course. It’s just that in this case the encoding is only for black squares. Anyway I just wanted to share it now while it was topical.

3G JPEG Investigation

Today the class carried out an investigation into the JPEG image compression technique.  The pupils were tasked with finding out.

  • Why we use JPEG compression on images?
  • How does JPEG compression work?
  • What is JPEG good at?
  • What is JPEG bad at?
  • When would we use JPEG compression?

The Pupils had to report on a powerpoint slide and include an example of a good and bad use of JPEG.

Read more