Bitmap vs Vector Graphics

Table of contents

Various data representations

Numeric data representation

One can represent numeric data (for instance, number 10) on the computer in several different ways, such as:

• The binary system ("1010") - the system inherent to all computer hardware

• The hexadecimal system ("a") - used by computer programmers

• The decimal system ("10") - used by regular users

Textual data representation

Text is represented on the computer using the so called character encoding tables, such as ASCII, Windows, Unicode, etc). Each character has its numeric value assigned to it - e.g. letter "a" would be represented by "01100001" in the binary system, "97" using the decimal system, and "61" using the hexadecimal system.

Visual data representation

Still images and motion pictures also need to be digitized before they can be processed by the computer. This is done through digital cameras and digital camcorders or by scanning print images using a scanner. To convert analogue video footage, one needs to employ a video card with an A/D converter  (analogue->digital) used to convert, for instance, footage recorded on a tape (VHS or otherwise).

There are two main types of image file formats - bitmap and vector.

Bitmap images (a.k.a raster images) are saved as a map of pixels on the screen with the following information for each pixel:

• its location on the screen (x and y coordinates)

• its color

Its biggest disadvantage is that it cannot be scaled without the decrease in quality. For instance, when you zoom in on a bitmap picture, the size of the individual pixels increases and thus the image becomes pixelated (you start seeing the individual squares (bitmaps) of the image. See the example below which shows what happens to ea raster picture when you zoom in on it (source: Wikipedia):

Vector images are saved completely differently. Instead of having a map of all the pixels with their corresponding colors, vector images contain a series of instructions on what shapes to draw in what color, thickness, transparency, etc. This allows for seamless scaling.

Consider the example below (source: wikipedia):

Imagery on the web

In order to display images on the web, one must save them in one of the following file formats:

Can you tell which of the formats listed above are bitmap and which are vector?

Zoom in on the coat of arms of Trnava below (source: Wikipedia - mouse over the images for full credit) - the one on the left is a PNG file, the other one is an SVG . What do you notice?

Lossy vs. lossless compression

In order to save disk space, image file formats for the web use compression to decrease the file size and thus speed up the displaying of webpages. There are two main types of compression:

• Lossy - where the file size is decreased at the expense of the image quality

• Lossless - where the file size is decreased while maintaining the original image quality

Here is an image which compares lossless vs. lossy compression, with the same source image file saved using lossy compression on the left (JPEG format) and using lossless compression on the right (PNG).  (source: wikipedia):

Tasks:

Task 1a:

Send me an email (netiquette counts) where you will include the following:

• Your favorite color (one of the named HTML colors) and its RGB notation together with its hexadecimal code. Send me also a picture of this color (use the snipping tool for taking a screenshot - Windows+SHIFT+S). You may want to use the HTML Color converter for this.

• What color cartridges (cyan, magenta, yellow, black) would be used to print this color on a color printer? Which one would be used most?

• Translate your name (First name and last name) to binary using the binary translator above and paste your name in the email. How many bytes will it take to save it? How many bits?

• Which is your favorite ALT character? (insert the character itself as well as its keyboard shortcut e.g. "á = ALT+160"). When trying out the ALT characters, make sure you use the numeric keypad on the right-hand side of the keyboard.

Task 1b:

Send me an email (netiquette counts) where you will include the following:

• Attach a picture of your favorite artwork by a Slovak artist from www.webumenia.sk

• Provide a link for an interesting magazine/book/pamphlet you came across in the Bratislava University Library Digitization project (click on the flag at the top right to switch the language to English). Alternatively, you can browse the World Digital Library instead. Include a screenshot of the publication you've chosen - you can take a snippet of the screen by pressing Windows+Shift+S.

• Make sure all text you copied off the web (such as the artist's name) has all formatting removed (CTRL+SHIFT+V pastes text without its formatting, clicking the icon "Remove formatting" removes the formatting from a selection - see the picture below.)

Task 2:

Send me an email (netiquette counts) where you will include the following:

• the coat of arms of the town/village you'd like to visit during the Week without walls trip as an SVG vector image (if not available, send me the flag of the country the place is located in).

• a modification of the SVG file where you change some fill colors using the "Inspect" feature of the web browser — make a change, then take a screenshot with the following keyboard shortcut" Windows+Shift+S, which will trigger the "Snippet Tool" which allows you to select an area of the screen to take a screenshot of and then takes the screen shot and saves it in the clipboard. Then, paste it to your email (CTRL+V). Alternatively, you can use the PrtScrn button (make sure you're not zoomed in too much) and then paste it to Paint where you crop it using the crop tool. Then select all (CTRL+A), copy it (CTRL+C) and paste it into the email.

• a photograph of the place you'd like to go to at the end of the school year during the Week without walls saved using an appropriate format featuring lossy compression - please, identify the the place as well as the file format of the photograph{e.g. JPEG, SVG, GIF.. etc.}.

• a clip art picture of an activity you'd do at the place you'd like to go to for the Week without walls, featuring lossless compression and a transparent background - please, identify the file format.

• an animated diagram describing some process (e.g. Physics, Biology, Chemistry, ...) saved in a format compatible with all web browsers - please, identify the file format.

• a line drawing {can be a graphic, etching or litography, as well) of a specific place you'd like to visit during the Week without walls trip - please, identify the file format.

• a historic map including the place you'd like to visit during the Week without walls. Send me a link to the map as well a snippet of the map showing the place you'd like to visit {see map portals in the bullet list below for this}.

Digitization projects:

• Bratislava University Library Digitization project (click on the Slovak flag at the top right to switch the language to English)

• Web umenia - a digital catalog of artworks by Slovak authors

• Slovakiana - cultural heritage of Slovakia digitized

• World Digital Library - a worldwide digitization project by the Library of Congress, containing thousands of historic manuscripts.

• Arcanum Maps - historic maps digitized - mostly Central Europe

• Old maps online - search engine for historic maps from around the world

Task 3:

Using the Google Image search or the Bing image search, search for three tech-related cartoons - ones that include keyboard shortcuts in them. Memes are permissible as well, but make sure the language is appropriate.

In order to refine the image search, click on the "Tools" button to see additional search options. Under "Type" look for clipart and/or line drawing. This will most likely get you what you are looking for. See the screenshot below.

Post the three cartoons in the following document. Make sure the cartoons aren't in the document already.

Task 7: vectorizing a vector image saved as a bitmap

Sometime it happens that you no longer have the original vector image that you exported to a bitmap and you need to make changes to it. There is a way to vectorize a bitmap image - sophisticated algorithms scan the pixels and look for patterns and for geometric shapes and letters, so that they can try to recreate the original vector image.

Most vectorizing programs/online services are paid-for, but there are a handful that yield satisfying results and let you convert a logo, diagram, map, etc. saved as a bitmap to a vector graphics file format, such as SVG, so that it can be scaled or further edited.

1. Find a bitmap coat of arms of your town or district

2. Upload it to one of the free vectorizing services  - you may want to try all of them and see which brings the best result for the picture you chose to use.

3. Email me both the original bitmap image as well as its vector rendition (for instance SVG).