WebI mages B itmapor V ector WebI mages
Web
I m a g e s
Because web design is screen based, graphic files that are used on the web are different than graphic files used for printing purposes. The biggest difference is resolution. Typical screen resolution is 72 DPI (Dots Per Inch), using a higher DPI will not change it's appearance on screen; it will only make your image larger. Images created specifically for print (magazines, ads, brochures, etc.) typically should use a resolution of 300 DPI. Think of it this way, a printer creates an image using different color dots. The closer the dots are placed together the higher the quality will appear. Have you ever printed an image that looked grainy? If you were to look closely you could actually see the dots that the printer made. When your resolution is 300 DPI, the dots are close enough Example of image on screen at 72dpi together that everything blends and your print appears to have a photographic quality.
Example of image printed at 72dpi
This lecture will continue to classify the elements of a web image. These ideas were taken from Designing Web Graphics by Lynda Weinman.
Web
I m a g e s
B i t m a p
o r
V e c t o r
Bitmapped Graphics- Graphics that are pixel based, as opposed to object oriented. Bitmapped graphics are what the computer can display because it's a pixel-based medium, whereas object-oriented (vector) graphics can be viewed in high resolution once they are sent to a printer. Graphics on the Web are bitmapped because they are viewed from a computer-screen-based delivery system. Vector Graphics- A graphic image composed of autonomous objects such as lines, circles, ellipses, and boxes that can be moved independently. Object-oriented graphics are based on math instructions instead of pixel locations. This type of graphic is often used for printbased design because it can be printed at a higher resolution than a computer screen. Common bitmap formats include PSD, PICT, BMP, or TIFF. Common vector formats include Illustrator, QuarkXPress, FreeHand, EPS, and PostScript. Because these image formats are large and take too long to download, they are not used for the Web. Instead we use formats such as GIF, JPEG, and PNG, which are all bitmap formats or "raster graphics". A vector format uses mathematical instruction so an image will take up
the same amount of memory whether it is scaled big or small. Whereas, every pixel in a bitmap image takes up a set amount of memory, so reducing an image also reduces the amount of memory used. A vector graphic will also scale according to the output device used without increasing the amount disk space that it takes up. For example it doesn't matter if you use a printer that prints at 300 DPI or a printer that prints at 2,400 DPI, the file will print at whatever resolution the printing device allows. Unfortunately this is not the case with bitmap files, which are usually large. Scaling a bitmap image affects its size as well as losses quality. Vector graphics are more suited for line art, illustrations, type, and flat-style artwork whereas bitmaps are better suited for continuous tone images (photographs, blurry images, soft edges, glows, and drop shadows).
Bitmap- stored as a series of values
Vector-stored as mathematical instructions
Web
I m a g e s
L o s s l e s s
o r
L o s s y
Compression is what allows the file size of a web graphic to remain so small. Unfortunately with compression comes loss of quality. GIF files use Lossless Compression, a data compression technique that reduces the size of a file without sacrificing any of the original data. In lossless compression the expanded or restored file is an exact replica of the original file before it was compressed. Lossless compression will not cause any image degradation, however because a GIF file uses index colors, which only contain 256 colors, or less, this will cause degradation. JPEG files, which can be saved at a variety of compression levels use Lossy Compression, a data compression technique in which some data is deliberately discarded in order to achieve massive reductions in the size of the compressed file.
P N G
PNG uses a lossless compression. It does not loss any quality because it is compressed using various pre-compression filters and then is decompressed when viewed. PNG files can be stored at various bit depths using different storing methods. Remember GIFs can only be stored at 8-bit or lower and JPEGs must me stored at 24-bit and no lower. PNG can be stored at 8-bit, 24-bit, or 32-bit. It can also store a value that represents the gamma (gamma measures the contrast that affects the midtones of an image) of the system that the image was created on. Therefore the displaying system can use this value, if know. PNG is one of the most flexible web formats available but because they are difficult to program for developers, they are not widely supported by browsers and software.
Web
I m a g e s
R G B
v s .
C M Y K
Red, green and blue are the three projected colors of light, which mix together optically to create the color of a pixel. These three colors mixed together create a color space called RGB. Because web design is screen based you will be using mainly RGB. Print designers most commonly use a color space called CMYK, which is made up of cyan, magenta, yellow, and black. These are the four printing inks that are used to mix the colors in your design.
CMYK- colors are subtractive (multiple colors creates black). For printing.
RGB- colors are additive (multiple colors creates white). To be viewed on screen.
D i g i t a l
W a t e r m a r k s
A watermark refers to special printed paper that guarantees proof of authenticity and ownership. An example of this would be a dollar bill, which has information embedded into the paper stock to prevent counterfeiting. Technology allows us to create digital watermarks, which has a similar concept. It can embed copyright notification, ownership, audience, & usage information. Digital watermarks are not visible until loaded into a computer that can read it (Photoshop can read watermarks).
©
I m a g e s
Because web design is screen based, graphic files that are used on the web are different than graphic files used for printing purposes. The biggest difference is resolution. Typical screen resolution is 72 DPI (Dots Per Inch), using a higher DPI will not change it's appearance on screen; it will only make your image larger. Images created specifically for print (magazines, ads, brochures, etc.) typically should use a resolution of 300 DPI. Think of it this way, a printer creates an image using different color dots. The closer the dots are placed together the higher the quality will appear. Have you ever printed an image that looked grainy? If you were to look closely you could actually see the dots that the printer made. When your resolution is 300 DPI, the dots are close enough Example of image on screen at 72dpi together that everything blends and your print appears to have a photographic quality.
Example of image printed at 72dpi
This lecture will continue to classify the elements of a web image. These ideas were taken from Designing Web Graphics by Lynda Weinman.
Web
I m a g e s
B i t m a p
o r
V e c t o r
Bitmapped Graphics- Graphics that are pixel based, as opposed to object oriented. Bitmapped graphics are what the computer can display because it's a pixel-based medium, whereas object-oriented (vector) graphics can be viewed in high resolution once they are sent to a printer. Graphics on the Web are bitmapped because they are viewed from a computer-screen-based delivery system. Vector Graphics- A graphic image composed of autonomous objects such as lines, circles, ellipses, and boxes that can be moved independently. Object-oriented graphics are based on math instructions instead of pixel locations. This type of graphic is often used for printbased design because it can be printed at a higher resolution than a computer screen. Common bitmap formats include PSD, PICT, BMP, or TIFF. Common vector formats include Illustrator, QuarkXPress, FreeHand, EPS, and PostScript. Because these image formats are large and take too long to download, they are not used for the Web. Instead we use formats such as GIF, JPEG, and PNG, which are all bitmap formats or "raster graphics". A vector format uses mathematical instruction so an image will take up
the same amount of memory whether it is scaled big or small. Whereas, every pixel in a bitmap image takes up a set amount of memory, so reducing an image also reduces the amount of memory used. A vector graphic will also scale according to the output device used without increasing the amount disk space that it takes up. For example it doesn't matter if you use a printer that prints at 300 DPI or a printer that prints at 2,400 DPI, the file will print at whatever resolution the printing device allows. Unfortunately this is not the case with bitmap files, which are usually large. Scaling a bitmap image affects its size as well as losses quality. Vector graphics are more suited for line art, illustrations, type, and flat-style artwork whereas bitmaps are better suited for continuous tone images (photographs, blurry images, soft edges, glows, and drop shadows).
Bitmap- stored as a series of values
Vector-stored as mathematical instructions
Web
I m a g e s
L o s s l e s s
o r
L o s s y
Compression is what allows the file size of a web graphic to remain so small. Unfortunately with compression comes loss of quality. GIF files use Lossless Compression, a data compression technique that reduces the size of a file without sacrificing any of the original data. In lossless compression the expanded or restored file is an exact replica of the original file before it was compressed. Lossless compression will not cause any image degradation, however because a GIF file uses index colors, which only contain 256 colors, or less, this will cause degradation. JPEG files, which can be saved at a variety of compression levels use Lossy Compression, a data compression technique in which some data is deliberately discarded in order to achieve massive reductions in the size of the compressed file.
P N G
PNG uses a lossless compression. It does not loss any quality because it is compressed using various pre-compression filters and then is decompressed when viewed. PNG files can be stored at various bit depths using different storing methods. Remember GIFs can only be stored at 8-bit or lower and JPEGs must me stored at 24-bit and no lower. PNG can be stored at 8-bit, 24-bit, or 32-bit. It can also store a value that represents the gamma (gamma measures the contrast that affects the midtones of an image) of the system that the image was created on. Therefore the displaying system can use this value, if know. PNG is one of the most flexible web formats available but because they are difficult to program for developers, they are not widely supported by browsers and software.
Web
I m a g e s
R G B
v s .
C M Y K
Red, green and blue are the three projected colors of light, which mix together optically to create the color of a pixel. These three colors mixed together create a color space called RGB. Because web design is screen based you will be using mainly RGB. Print designers most commonly use a color space called CMYK, which is made up of cyan, magenta, yellow, and black. These are the four printing inks that are used to mix the colors in your design.
CMYK- colors are subtractive (multiple colors creates black). For printing.
RGB- colors are additive (multiple colors creates white). To be viewed on screen.
D i g i t a l
W a t e r m a r k s
A watermark refers to special printed paper that guarantees proof of authenticity and ownership. An example of this would be a dollar bill, which has information embedded into the paper stock to prevent counterfeiting. Technology allows us to create digital watermarks, which has a similar concept. It can embed copyright notification, ownership, audience, & usage information. Digital watermarks are not visible until loaded into a computer that can read it (Photoshop can read watermarks).
©
