1,234
edits
Changes
Created page with '= Lecture = Textbook chapter: 3 Images are one of the first multimedia element used on webpages when the web was taking off. But despite the apparent simplicity there is plenty…'
= Lecture =
Textbook chapter: 3
Images are one of the first multimedia element used on webpages when the web was taking off. But despite the apparent simplicity there is plenty of technical details to learn about them. It's not as simple as "there is an image" vs "there is no image". We will look at various factors that affect the use of images on the web, and ...............
== Image Types ==
=== Raster/Bitmap vs Vector ===
Roughly speaking raster image contents are described in the file format as "put pixel of this colour here"; vector image contents are described as "draw line of this colour from this relative coordinate to that relative coordinate". As a result a vector image can usually be sized very large without quality loss. If you size up a bitmap even with a modern tool with a smart resizing algorithm the result will look fuzzy, and progressively worse the larger the size.
See for example the Seneca Freedom toaster artwork: it was created as vector graphics (in Adobe Illustrator) and the very large printed version looks very clear and sharp. To make a bitmap of that resolution would be almost impossible given the physical size of the printout and the desired resolution.
Vector images are usually used by professionals. Regular people don't have access to software even to view vector graphics. Vector graphics can be converted to bitmaps for distribution.
A vector graphic can also be actually just a bitmap - for example if the entire image is defined as single points rather than lines and curves. Such a vector graphic is basically a bitmap in a vector format, without any benefits of vector graphics. You typically see SVG icons like this, this has evolved because SVG implementations have been traditionally quite incompatible with each other.
=== Compression of Raster Images ===
Some formats are completely uncomressed - a typical example is .bmp where the colour of every single pixel in the image is stored. This wouldn't be a problem if you had 10 or 100 or even 10000 pixels but a typical resolution today is 1920x1080, which is 2073600 (over two million) points. So for practical use of large images compression is needed. This is true not only on the web but in regular software as well, imagine a 10 slide Powerpoint presentation that was 100MB in size read from a slow flash drive.
Textbook chapter: 3
Images are one of the first multimedia element used on webpages when the web was taking off. But despite the apparent simplicity there is plenty of technical details to learn about them. It's not as simple as "there is an image" vs "there is no image". We will look at various factors that affect the use of images on the web, and ...............
== Image Types ==
=== Raster/Bitmap vs Vector ===
Roughly speaking raster image contents are described in the file format as "put pixel of this colour here"; vector image contents are described as "draw line of this colour from this relative coordinate to that relative coordinate". As a result a vector image can usually be sized very large without quality loss. If you size up a bitmap even with a modern tool with a smart resizing algorithm the result will look fuzzy, and progressively worse the larger the size.
See for example the Seneca Freedom toaster artwork: it was created as vector graphics (in Adobe Illustrator) and the very large printed version looks very clear and sharp. To make a bitmap of that resolution would be almost impossible given the physical size of the printout and the desired resolution.
Vector images are usually used by professionals. Regular people don't have access to software even to view vector graphics. Vector graphics can be converted to bitmaps for distribution.
A vector graphic can also be actually just a bitmap - for example if the entire image is defined as single points rather than lines and curves. Such a vector graphic is basically a bitmap in a vector format, without any benefits of vector graphics. You typically see SVG icons like this, this has evolved because SVG implementations have been traditionally quite incompatible with each other.
=== Compression of Raster Images ===
Some formats are completely uncomressed - a typical example is .bmp where the colour of every single pixel in the image is stored. This wouldn't be a problem if you had 10 or 100 or even 10000 pixels but a typical resolution today is 1920x1080, which is 2073600 (over two million) points. So for practical use of large images compression is needed. This is true not only on the web but in regular software as well, imagine a 10 slide Powerpoint presentation that was 100MB in size read from a slow flash drive.
