Digital Images

Digital ImagesDigital Images

22

Analog versus bitmap Analog versus bitmap imagesimages The visual world is analog, which is to say that real-The visual world is analog, which is to say that real-

world images is a continuous spectrum of colors. world images is a continuous spectrum of colors. An analog image embodies an infinite number of An analog image embodies an infinite number of details. details.

Infinity is uncomfortably large to a computer. A Infinity is uncomfortably large to a computer. A computer-stored image is split into little bits of light. computer-stored image is split into little bits of light.

A bitmap is a matrix of colored dots.A bitmap is a matrix of colored dots. This should help illustrate the nature of a bitmap.. This should help illustrate the nature of a bitmap..

44

Bitmaps, Pixels & Bitmaps, Pixels & ColorsColors The colored dots that make up a bitmap are properly called The colored dots that make up a bitmap are properly called

"pixels"."pixels". Web pages are measured in Pixels but not in inches, picas.Web pages are measured in Pixels but not in inches, picas. In addition to providing your eyes with infinitely small details, In addition to providing your eyes with infinitely small details,

the analog world presents it with images having the potential the analog world presents it with images having the potential for an infinite number of possible colors. for an infinite number of possible colors.

Color is represented on a computer by using varying amounts Color is represented on a computer by using varying amounts of of redred, , greengreen and and blueblue light. These are the primary colors of light. These are the primary colors of what's called "additive" color - by adding percentages of red, what's called "additive" color - by adding percentages of red, green and blue, green and blue, any colorany color can be created. can be created.

In the simplest sort of bitmapped image, each pixel is In the simplest sort of bitmapped image, each pixel is represented by three numbers to store the amounts of red, represented by three numbers to store the amounts of red, green and blue light that define the color of the pixel in green and blue light that define the color of the pixel in question.question.

55

True Color BitmapTrue Color Bitmap

The smallest useful object for storing numbers on a The smallest useful object for storing numbers on a computer is a byte. computer is a byte.

In this sort of bitmap, each pixel requires one byte In this sort of bitmap, each pixel requires one byte for each color index for a total of three bytes per for each color index for a total of three bytes per pixel. pixel.

As a byte represents eight bits, each pixel requires As a byte represents eight bits, each pixel requires 24 bits to store all its color information. 24 bits to store all its color information.

This defines the maximum number of discrete This defines the maximum number of discrete colors this sort of bitmap can represent as 2colors this sort of bitmap can represent as 22424, or , or 16,777,216. 16,777,216.

Such graphics are referred to as Such graphics are referred to as “True Color"“True Color" images, or just as "24-bit" graphics. images, or just as "24-bit" graphics.

66

Size consideration in a Size consideration in a true-colored bitmap imagetrue-colored bitmap image The lowest resolution for a monitor The lowest resolution for a monitor

displaying a Windows desktop is 640 by 480 displaying a Windows desktop is 640 by 480 pixels. pixels.

In a bitmap of this resolution, then, there In a bitmap of this resolution, then, there would be three bytes per pixel, for a total of would be three bytes per pixel, for a total of 640 x 480 x 3 bytes, or about 900 kilobytes. 640 x 480 x 3 bytes, or about 900 kilobytes.

Bitmapped graphics are huge entities, and Bitmapped graphics are huge entities, and they become huger still as they get better they become huger still as they get better looking.looking.

77

Bit-Depth = Color-Bit-Depth = Color-DepthDepth Number of Colors = 2^(Bit-depth)Number of Colors = 2^(Bit-depth) Bit-depth is the number of bits.Bit-depth is the number of bits.

– It is also called It is also called ““Color resolutionColor resolution””..

Bit depthBit depth Color resolutionColor resolution CalcuationCalcuation

1-bit1-bit 2 colors2 colors 2^1 = 22^1 = 2




8-bits8-bits 256 colors256 colors 2^8 = 2562^8 = 256

16-bits16-bits 65,536 colors65,536 colors 2^16 = 655362^16 = 65536

24-bits24-bits 16,777,215 colors16,777,215 colors 2^24 = 16.7 2^24 = 16.7 millionmillion

88

8-bit and 24-bit photos8-bit and 24-bit photos

Can you see the difference?Can you see the difference?

99

Color PalettesColor Palettes

Photorealistic images look best if they're stored in a Photorealistic images look best if they're stored in a format which allows them to be reproduced with as format which allows them to be reproduced with as many of the 16,777,216 colours in a computer. many of the 16,777,216 colours in a computer. However, the resulting file size may be prohibitively However, the resulting file size may be prohibitively large, especially when non-lossy formats are used. large, especially when non-lossy formats are used.

For practical purposes, the next step down from a file For practical purposes, the next step down from a file which can store images having a maximum of which can store images having a maximum of 16,777,216 colours, is one which can store images 16,777,216 colours, is one which can store images having a maximum of 256 colours. having a maximum of 256 colours.

Such files are referred to as using "Such files are referred to as using "palette-colourpalette-colour“. “. The colours in a palette-colour file are derived from a The colours in a palette-colour file are derived from a potential palette of 16,777,216 colours, but no more potential palette of 16,777,216 colours, but no more than 256 of them can be used in any one image. than 256 of them can be used in any one image.

1010

The Web PaletteThe Web Palette

Color in Browser Color in Browser –– 24-bit color displays 24-bit color displays on an 8-bit monitor display.on an 8-bit monitor display.

Need a common palette (Web Palette) Need a common palette (Web Palette) for browser, guarantees the image will for browser, guarantees the image will look the same on different platforms.look the same on different platforms.

If the browser is in 24-bit display, the If the browser is in 24-bit display, the palette does not affect the images.palette does not affect the images.

Web Palette consists of 216 colorsWeb Palette consists of 216 colors Also called: Web-safe Palette, Non-Also called: Web-safe Palette, Non-

dithering Palette, 6x6x6 cube.dithering Palette, 6x6x6 cube.

1111

Define RGB ValuesDefine RGB Values

DecimalDecimal– Ranging from 0 to 255.Ranging from 0 to 255.– 51-51-255 means red value is 51, green value is 51-51-255 means red value is 51, green value is

51, blue value is 255.51, blue value is 255. HexadecimalHexadecimal

– Base-16 number systemBase-16 number system– Only six characters to describe RGB color.Only six characters to describe RGB color.– 51-51-255 is 3333FF.51-51-255 is 3333FF.

PercentagePercentage– 51-51-51 is 20%-20%-100%51-51-51 is 20%-20%-100%– 00,33,66,99,CC,FF 00,33,66,99,CC,FF –– 0%,20%,40%,60%,80%,100% 0%,20%,40%,60%,80%,100%– Some old Macintosh programs use it.Some old Macintosh programs use it.

1212

Vector GraphicsVector Graphics

In addition to bitmap graphics, there are In addition to bitmap graphics, there are vector vector graphicsgraphics. .

Vector graphics define pictures as collections of lines, Vector graphics define pictures as collections of lines, ellipses, triangles, polygons and other basic graphic ellipses, triangles, polygons and other basic graphic "primitives." "primitives."

Vector graphics are limited to storing mechanical artVector graphics are limited to storing mechanical art– they cannot handle photo realistic subject. they cannot handle photo realistic subject.

Vector graphic formats include Vector graphic formats include – Encapsulated PostScript files, which use the extension EPS, Encapsulated PostScript files, which use the extension EPS, – Corel Draw files, which use the extension CDR,Corel Draw files, which use the extension CDR,– AutoCAD drawings, which use the extension DXF. AutoCAD drawings, which use the extension DXF.

1313

Vector GraphicsVector Graphics

Scaling vector graphicsScaling vector graphics

1414

Bitmap vs. Vector Bitmap vs. Vector GraphicsGraphics

Vector graphicsVector graphics– Describe object Describe object

relationships; relationships; can be scaled can be scaled to any desired to any desired size without size without pixellationpixellation

1515

Bitmap vs. Vector Bitmap vs. Vector graphicsgraphics

1616

Bitmap and Vector Bitmap and Vector graphics file formatgraphics file format Vector-basedVector-based files are more suitable for files are more suitable for

illustrations that require precise illustrations that require precise measurements.measurements.– File names for vector-based images usually File names for vector-based images usually

consist of extensions such as consist of extensions such as *.EPS*.EPS, , *.AI*.AI, , *CDR*CDR, , or or *.DWG*.DWG..

Bitmap-basedBitmap-based files are more suitable for files are more suitable for photo-realistic images that require complex photo-realistic images that require complex color variations. color variations. – File names for bitmap-based images usually File names for bitmap-based images usually

consist of extensions such as consist of extensions such as *.PSD*.PSD, , *.JPG*.JPG, , *GIF*GIF, , *.TIF*.TIF, or , or *.BMP*.BMP..

1717

Optimizing Web Optimizing Web GraphicsGraphics According to the compression method used, graphic According to the compression method used, graphic

file formats can be regarded as being of three types. file formats can be regarded as being of three types. – Compression works by finding areas in your graphics which Compression works by finding areas in your graphics which

are all the same color and replacing them with notes which are all the same color and replacing them with notes which say, in effect "this area is all the same color." say, in effect "this area is all the same color."

The first type stores graphics The first type stores graphics uncompresseduncompressed. . – The final file size will typically be a bit larger than the size of The final file size will typically be a bit larger than the size of

the graphic stored in it, allowing for a bit of extra space for the graphic stored in it, allowing for a bit of extra space for internal housekeeping for the file. internal housekeeping for the file.

– Windows BMP (.bmp) files are an example of this sort of Windows BMP (.bmp) files are an example of this sort of format. format.

1818

Lossless CompressionLossless Compression

The second type is called The second type is called "non-lossy“"non-lossy“ oror “lossless”“lossless” compression formats. compression formats. – Whatever gets stored in them will be Whatever gets stored in them will be

identical to what emerges from a lossless identical to what emerges from a lossless file when it's unpacked. file when it's unpacked.

– Most graphic formats use lossless Most graphic formats use lossless compression - the GIF and PCX formats compression - the GIF and PCX formats are among them. are among them.

1919

Lossy CompressionLossy Compression

The third type of bitmapped graphic file formats is The third type of bitmapped graphic file formats is called called "lossy""lossy" compression. compression. – Photorealistic images don't compress well because they Photorealistic images don't compress well because they

have lots of detailshave lots of details– the details are what prevent areas from being all the same the details are what prevent areas from being all the same

color, and as such from responding well to compression. color, and as such from responding well to compression. – In some cases the details represent very subtle color In some cases the details represent very subtle color

variationsvariations– perhaps too subtle to be discernable by your eye, or at perhaps too subtle to be discernable by your eye, or at

least, too subtle to make much of a difference to your least, too subtle to make much of a difference to your perception of the graphic in question. perception of the graphic in question.

2020

Lossy CompressionLossy Compression

Lossy compression seeks to improve upon the Lossy compression seeks to improve upon the compression of the graphics it deals with by throwing compression of the graphics it deals with by throwing away some of the details in your source images to away some of the details in your source images to create more areas which are all the same colour. create more areas which are all the same colour.

Having done so, lossy compression can typically Having done so, lossy compression can typically improve upon the file compression offered by the non-improve upon the file compression offered by the non-lossy formats. lossy formats.

Examples of lossy image file format are JPEG, PIC, and Examples of lossy image file format are JPEG, PIC, and ART.ART.

Lossy compression allows you to specify the amount of Lossy compression allows you to specify the amount of detail to be discarded when a graphic is compressed. detail to be discarded when a graphic is compressed. This level of image degradation is called the “quality This level of image degradation is called the “quality factor“.factor“.

2121

Quality ComparisonQuality Comparison

BMP65854

GIF15628

JPG100%21162

JPG75%6745

JPG50%4766

JPG25%3407

JPG10%2251

JPG5%1173

2222

GIF FormatGIF Format

GIF – Graphics Interchange FormatGIF – Graphics Interchange Format The GIF format is one of the most commonly used The GIF format is one of the most commonly used

graphic file formats, especially on the Internet. graphic file formats, especially on the Internet. The GIF format is exceedingly useful in that it can The GIF format is exceedingly useful in that it can

contain animations. Its internal structure is such that contain animations. Its internal structure is such that it can store multiple images and the controls to it can store multiple images and the controls to make them appear as real time animationmake them appear as real time animation– animated GIFanimated GIF. .

The GIF format also allows a special color as to be The GIF format also allows a special color as to be specified as "using the background." This results in specified as "using the background." This results in the image looks like transparentthe image looks like transparent– transparent GIFtransparent GIF. .

2323

Animated GIFAnimated GIF

Advantages:Advantages:– No need other software or pluginsNo need other software or plugins– GIF is the standard format on the Web.GIF is the standard format on the Web.– GIF animated tools are available to use.GIF animated tools are available to use.

The file contains layered frames on top The file contains layered frames on top of each other.of each other.

Tips:Tips:– Avoid more than one animated GIF on a Avoid more than one animated GIF on a

page.page.– Avoid animated GIF on text-rich pages.Avoid animated GIF on text-rich pages.– Examine the pause between repetitions.Examine the pause between repetitions.

2424

Animated GIFAnimated GIF

2525


GIF is indexed color image.GIF is indexed color image.– The color of the image is indexed in a palette (a color The color of the image is indexed in a palette (a color

table).table). The GIF format is only capable of supporting a The GIF format is only capable of supporting a

maximum of 256 colors.maximum of 256 colors. This means that you This means that you cannot convert directly from a 24 bit file, such as a cannot convert directly from a 24 bit file, such as a JPEG, to the GIF format.JPEG, to the GIF format.– You need to convert a 24-bit image to Indexed Color mode You need to convert a 24-bit image to Indexed Color mode

first.first.– Reduce the number of colors to a palette of 256 or less.Reduce the number of colors to a palette of 256 or less.– Create an “adaptive” palette – a custom palette generated Create an “adaptive” palette – a custom palette generated

by the most commonly used color in the image.by the most commonly used color in the image.

2626


Some conversion software, such as Graphic Some conversion software, such as Graphic Workshop and xv can dither a true color JPEG Workshop and xv can dither a true color JPEG image down to 256 colors.image down to 256 colors.– Note that reducing a true-color image in this way will Note that reducing a true-color image in this way will

usually leave you with acceptable images, but they will not usually leave you with acceptable images, but they will not be as detailed as the source true-color graphics they were be as detailed as the source true-color graphics they were derived from. derived from.

Note: GIF format was created by CompuServe in Note: GIF format was created by CompuServe in 1987. The most popular format is GIF 89a. 1987. The most popular format is GIF 89a. – GIF87a:GIF87a: supports interlacing and storage of multiple files. supports interlacing and storage of multiple files.– GIF89a:GIF89a: extends the GIF87a specification and adds extends the GIF87a specification and adds

transparency, text comments, and animation of text and transparency, text comments, and animation of text and graphics. graphics.

2727


The internal compression algorithm used by GIF is The internal compression algorithm used by GIF is called the LZW (Lempel-Zev-Welch), which is called the LZW (Lempel-Zev-Welch), which is patented by Unisys Corporation.patented by Unisys Corporation.– It is a “lossless” compression.It is a “lossless” compression.– No image information is lost during compression process.No image information is lost during compression process.– Take advantages of repetition in data streams.Take advantages of repetition in data streams.

Question: When should we use GIF?Question: When should we use GIF?– Logos, line art, icons, cartoon-like illustrations.Logos, line art, icons, cartoon-like illustrations.– Majority is flat colors.Majority is flat colors.– GIF is the best choice.GIF is the best choice.

2828

Transparency GIFTransparency GIF

The image can be shapes other The image can be shapes other than rectangles.than rectangles.

One position of the color palette One position of the color palette is designated as is designated as ““TransparentTransparent””..

All pixels of the image that have All pixels of the image that have this particular color index will be this particular color index will be painted as transparent when painted as transparent when viewing.viewing.

2929

Transparency GIFTransparency GIF

Not a transparent GIF

a transparent GIF

3030

JPEG FormatJPEG Format

JPEG – Joint Photographic Experts GroupJPEG – Joint Photographic Experts Group The JPEG format uses "The JPEG format uses "lossylossy" compression to get more graphics into " compression to get more graphics into

a smaller file than would otherwise be possible. a smaller file than would otherwise be possible. There are a number of things that may not be apparent in using There are a number of things that may not be apparent in using

JPEG files, however, and which might make your use of them less JPEG files, however, and which might make your use of them less than optimum. than optimum.

An image written to the JPEG format will be degraded. An image written to the JPEG format will be degraded. The amount of degradation, the "The amount of degradation, the "quality factorquality factor," can usually be set in ," can usually be set in

a graphics software. a graphics software. – If the value is set to 100, almost no degradation will occur when an image If the value is set to 100, almost no degradation will occur when an image

is written to a JPEG file. Of course, the compression of the resulting file is written to a JPEG file. Of course, the compression of the resulting file will not be significant. will not be significant.

– If it is set to a value close to zero, the resulting image will be a very small If it is set to a value close to zero, the resulting image will be a very small file but unrecognizable.file but unrecognizable.

– The default value of 75 is usually a good compromise.The default value of 75 is usually a good compromise.

3131

JPEG FormatJPEG Format

The image degradation caused by the JPEG format is The image degradation caused by the JPEG format is cumulative. As such, if you write an image to a JPEG file, and cumulative. As such, if you write an image to a JPEG file, and then read it from the JPEG file and write it back to the JPEG then read it from the JPEG file and write it back to the JPEG format, it will have suffered two passes of image degradation. format, it will have suffered two passes of image degradation.

It works very, very badly on text, line art or other types of It works very, very badly on text, line art or other types of mechanical graphics, which it will degrade quite noticeably. mechanical graphics, which it will degrade quite noticeably. These sorts of graphics should be stored in another format, These sorts of graphics should be stored in another format, such as GIF, BMP or PNG. such as GIF, BMP or PNG.

Unlike GIF, JPEG does not support transparency or multiple Unlike GIF, JPEG does not support transparency or multiple images. It cannot be used for animation. images. It cannot be used for animation.

When to use JPEG?When to use JPEG?– Ideal for photographic, paintingsIdeal for photographic, paintings– Leave flat graphics to GIFLeave flat graphics to GIF

3232

Photoshop and Corel Photoshop and Corel PhotoPaint Quality PhotoPaint Quality SettingSetting

3333

PNG FormatPNG Format

Portable Network Graphic (PNG) Portable Network Graphic (PNG) which is pronounced as which is pronounced as ““PingPing””..

Alternative to GIF, a lossless Alternative to GIF, a lossless compression scheme is used.compression scheme is used.

Support three image type: true Support three image type: true color, grayscale, palette-based (8-color, grayscale, palette-based (8-bit).bit).– JPEG supports the first 2.JPEG supports the first 2.– GIF supports the 3GIF supports the 3rdrd one. one.

3434


AdvantagesAdvantages– Better CompressionBetter Compression

Deflate is an improved version of the Lempel-Ziv Deflate is an improved version of the Lempel-Ziv compression algorithm.compression algorithm.

– Improve InterlacingImprove Interlacing Display image quicker than Interlaced GIF.Display image quicker than Interlaced GIF.

– True Color and TransparencyTrue Color and Transparency Support 16-bit (Grey scale) or 48-bit (True Color)Support 16-bit (Grey scale) or 48-bit (True Color) 16-bit for alpha channel (Transparency).16-bit for alpha channel (Transparency).

– Gamma storageGamma storage Store the gamma setting of the platform of the creator.Store the gamma setting of the platform of the creator.

DisadvantagesDisadvantages– Not support by old browsers (Netscape 2,3,4 and IE Not support by old browsers (Netscape 2,3,4 and IE

2,3,4)2,3,4)

3535


PNG's 2D interlacing (left) compared with GIF's 1D interlacing PNG's 2D interlacing (left) compared with GIF's 1D interlacing (right) (right)

3636

Format ComparisonFormat Comparison

FormatFormat Compression RatioCompression Ratio

GIFGIF 4:1 4:1 –– 10:1 10:1

JPEG (HQ)JPEG (HQ) 10:1 10:1 –– 20:1 (no loss 20:1 (no loss image)image)

JPEG (LQ)JPEG (LQ) 60:1 60:1 –– 100:1 (previews) 100:1 (previews)

PNGPNG 10-30% smaller than GIF10-30% smaller than GIF

3737

Format ComparisonFormat Comparison

3838

Other FormatsOther Formats

JPEG 2000JPEG 2000 –– New JPEG specification, New JPEG specification, lossy to lossless compression, wavelet lossy to lossless compression, wavelet transform, superior compression.transform, superior compression.

ARTART –– built-in color reduction, dither, built-in color reduction, dither, gamma correction.gamma correction.

WaveletWavelet –– transform an image as a transform an image as a frequency representation, like waves.frequency representation, like waves.

BravoBravo –– multi-platform 2D engine of multi-platform 2D engine of AdobeAdobe’’s graphic format.s graphic format.

FlashPixFlashPix –– developed by Kodak, HP, ... developed by Kodak, HP, ...

3939

Anti-aliasingAnti-aliasing

Use anti-aliasing technique to create Use anti-aliasing technique to create professional-looking graphics for the professional-looking graphics for the WebWeb

Slightly blur on the image edges to Slightly blur on the image edges to make the transitions between color make the transitions between color smoother.smoother.

Aliased edges are stair-stepped.Aliased edges are stair-stepped.AliasedText

Anti-AliasedText

4040

Optimizing Web Optimizing Web Graphics Graphics –– Tips for Tips for small filessmall files

Minimize the dimension and maximum crop.Minimize the dimension and maximum crop. Reduce the number of color used.Reduce the number of color used. Choose the color from the non-dithering Choose the color from the non-dithering

palette.palette. Use aliased fonts, anti-aliasing increase Use aliased fonts, anti-aliasing increase

size.size. Use flat color, avoid gradation color.Use flat color, avoid gradation color. Reduce to 72dpi in the final step.Reduce to 72dpi in the final step. Use multiple small images, other than a Use multiple small images, other than a

large image.large image.

4141

Web Graphics TipsWeb Graphics Tips

Edit an existing GIF imageEdit an existing GIF image– Open GIF in the editing toolOpen GIF in the editing tool– Change it to RGB modeChange it to RGB mode– Edit the imageEdit the image– Change it back to indexed imageChange it back to indexed image– Save and export to GIF formatSave and export to GIF format

Resizing tipsResizing tips– Convert to RGB before resizingConvert to RGB before resizing– DonDon’’t enlarge the imaget enlarge the image– Incrementally resize the image smaller.Incrementally resize the image smaller.

4242

Graphical ToolsGraphical Tools

Fireworks Fireworks –– by by macromedia Photoshop / Imageready Photoshop / Imageready –– by by

adobe PhotoImpact PhotoImpact –– by by Ulead Paint Shop Pro Paint Shop Pro –– by by Jasc ProJPEG / PhotoGIF ProJPEG / PhotoGIF –– by by BoxTop

Digital Images

Documents

Transcript of Digital Images