Unit 19 – Digital graphics for interactive media In this assignment I am going to be giving a broad explanation on the basics of Digital Graphics. I will be covering Pixels, Raster images, Vector images, Bit depth, Colour space, Image capture and Image optimization. Pixels: Pixels in images represent tiny squares that make up the image by having certain colours or shades. The highest resolution is 4,096 x 3,112 which means in total there are 12,746,752 pixels on that in particular screen. As you lower the number of pixels the quality of the image will also decrease, by this I mean the image will appear slightly more blurred and edges could appear slightly jagged. If you save your images as a bitmap file then it will be stored with all of these pixels set to one colour, whereas if you save your image as a vector then it will be stored as a series of commands that the computer will use to then create the image. http://tinyurl.com/6jngkhf Vector image: Vector images are made up from shapes, lines and a series of coordinates. Instead of being stored as pixels, vector images are stored as a series of commands, this allows the user to reshape and resize the image without any quality loss. Vector – Good quality even when zoomed in as it uses the co ordinates to redraw the shape to the correct resolution. Bitmap – Loss of quality due to stretched pixels.
Raster image: Raster images start off as vector images and are then later rasterised, turning it into a format like BMP or PNG. When a raster image is viewed, the pixels usually smooth out visually for the user, who sees a photograph or drawing. When blown up, the pixels in a raster image become apparent. Bit Depth: Bit depth is the number of bits used to represent the colour of a single pixel in a bitmapped image or video frame buffer. This concept is also known as bits per pixel (bpp), particularly when specified along with the number of bits used. Higher colour depth gives a broader range of distinct colours.
On the right is a perfect example of how images change as you higher the bit depth. In the first picture there are only 2 shades of grey and just meet each other with a clear line at the meeting point, whereas in the last image there are 256 different shades which makes the image look like its blending into itself from dark to light without lots of obvious change points. Image found on: http://luminousnepal.com/files/Bit%20depth%20in%20greyscale.jpg Colour space: There are two main types of colour space, RGB and CMYK. RGB is most commonly used on computer monitors and scanners, whereas CMYK is used more commonly in printers. The main difference between the two is that CMYK gives out a wider variety of colours and more vibrant colours, and requires a more advanced monitor. RGB is used on pc monitors as it is easy to format with all screens. RGB – Red, Green and Blue CMYK – Cyan, Magenta, Yellow and Black Image optimisation: An Image Optimizer lets you easily optimize your gifs, animated gifs, jpgs, and pngs, so they load as fast as possible on your site. Furthermore, you can easily convert from one image type to another. The main reason to optimise an image is so that the user can put there image on a website without pixilation, also for the image to take up a smaller amount of space, therefore loading quicker. Image found on: http://pelfusion.com/tools/17excellentimageoptimizationtools/
Original image, 556.841 bytes. Optimised image, same quality, 41.006 bytes.