Download - Images | Color
![Page 1: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/1.jpg)
IMAGES | COLOR
![Page 2: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/2.jpg)
Optimizing
Optimizing images - right balance between file size and picture quality.
Source : http://www.yourhtmlsource.com/optimisation/imageoptimisation.html#minimalism
![Page 3: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/3.jpg)
Ways to optimize
Areas where bytes can be shaved off your graphics:
Bit depth (number of colors) Resolution (72px) Dimension, don’t make images any
larger than they need to be
![Page 4: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/4.jpg)
Gif 32 Colors 6K
Gif 32 Colors 11K
![Page 5: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/5.jpg)
Ways to optimize
Areas where bytes can be shaved off your graphics:
Reuse and recycle, use same image repeatedly - browser uses cached image
Designing for compression Gif - flat colors, don’t design with gradient
color blends when a flat color will suffice. JPEG - soft transitions and no hard edges,
purposefully blur images
![Page 6: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/6.jpg)
GifJPEG
![Page 7: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/7.jpg)
Gif JPEG
![Page 8: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/8.jpg)
Ways to optimize
One of best ways to optimize –do not use unnecessary image.
Always look for ways to lessen your graphics
![Page 9: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/9.jpg)
File Formats (Bitmap)
GIF—Graphic Interchange Format (Bitmap)
JPEG—Joint Photographic Experts Group (Bitmap)
PNG—Portable Network Graphic (Bitmap)
![Page 10: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/10.jpg)
Compression | Lossy & Lossless Compression scheme (JPEG, GIF, PNG) helps
reduce file size.
Lossy: Makes file size smaller – eliminates information.
Pixels you begin with will not be the same pixels you end up with.
JPEG is a lossy compression scheme.
![Page 11: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/11.jpg)
JPEG - Quality: HighFile size : 19K
JPEG - Quality: LowFile size : 8K
![Page 12: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/12.jpg)
Compression | Lossy & Lossless Lossless compression allows the
exact original data to be reconstructed from the compressed data.
PNG and Gif are Lossless compression schemes.
![Page 13: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/13.jpg)
File Formats
GIF Lossless, 256 colors, transparency “LZW” for Lempel- Ziv-Welch compression uses
repetition in data. Pixels of identical color, compressed to one data description.
Flat color compress better than textures.
JPEG Lossy (variable quality), millions of colors
PNG Lossless, variable number of colors, W3C standard
![Page 14: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/14.jpg)
GIF - Colors: 256File size : 44K
GIF - Colors: 16File size : 17K
GIF - Colors: 2File size : 7K
![Page 15: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/15.jpg)
GIF Lossless, 256 colors, transparency
JPEG Lossy (variable quality), millions of colors
PNG Lossless, variable number of colors,
transparency
File Formats
![Page 16: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/16.jpg)
File formats
GIF images - most appropriate for: images with flat colors and hard edges when transparency is needed when animation is needed
JPEGs best for photographs or images with smooth color blends.
PNG files any image type of image good substitute for the GIF format alpha transparency
![Page 17: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/17.jpg)
Tips: Working with images
Save a master copy of your file as .psd.
From the master, save optimized images as jpeg, gif, or png.
If image is to be viewed on a computer screen – resolution is 72 px.
![Page 18: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/18.jpg)
Tips: Working with images
For web images always use the Save for Web and Devices command.
Always resize images with Photoshop or some other imaging program - do not resize with width and height HTML tags.
![Page 19: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/19.jpg)
GIF FILE FORMAT Source: Robbins, J.N. (2007), Learning Web Design, O’Reilly.
![Page 20: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/20.jpg)
GIF
GIF offers transparency and the ability to contain simple animations.
GIF compression good at compressing flat colors.
Good for logos, line art, graphics containing text, icons, etc.
![Page 21: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/21.jpg)
GIF
GIF files - indexed color images that contain 8-bit color information.
8-bit means GIFs can hold up to 256 colors—maximum number that 8 bits of information can define is (2*2*2*2*2*2*2*2=256).
Lower bit depths result in fewer colors and also reduce file size.
![Page 22: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/22.jpg)
GIF
Gif - indexed color colors in the image stored in a color table
(also called a color map). pixel in the image contains a numeric
reference (or “index”) to a position in the color table.
![Page 23: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/23.jpg)
Color Table
![Page 24: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/24.jpg)
Gif
Source images (scans, illustrations, photos, etc.) start out in RGB format, must converted to indexed color to be saved as a GIF.
Images from RGB to indexed mode, colors reduced to a palette of 256 colors or fewer.
In Photoshop, conversion takes place when you save or export GIF.
![Page 25: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/25.jpg)
Gif compression
EXAMPLE : Encounter a row of 20 identical green pixels, it stores shorthand notation that means “20 green pixels”
Next time it encounters 20 green pixels, it uses the shorthand notation.
Encounters row with gradation, must store a description for every pixel, requiring more data.
![Page 26: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/26.jpg)
Color table
Standard palettes to define colors in 8-bit indexed color.
Exact - custom palette out of the actual colors in the image if the image already contains fewer than 256 colors.
Adaptive - custom palette using the most frequently used pixel colors in the image.
Perceptual - priority to colors for which the human eye has greater sensitivity.
Selective - gives preference to areas of broad color and the preservation of web-safe colors.
![Page 27: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/27.jpg)
Interlacing
Interlacing - image display in a series of passes.
Use for large image with slow connections speeds.
![Page 28: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/28.jpg)
Animation
Another feature built into the GIF file format is the ability to display simple animations.
![Page 29: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/29.jpg)
JPEG FILE FORMAT Source: Robbins, J.N. (2007), Learning Web Design, O’Reilly.
![Page 30: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/30.jpg)
JPEGs
JPEGs don’t use color palettes like GIFs.
24-bit images capable of displaying colors from the millions of colors in the RGB Truecolor space.
Ideal for photographs—they have all the colors you’ll ever need.
![Page 31: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/31.jpg)
JPEGs
Compression scheme is lossy High levels of JPEG compression result
in artifacts
![Page 32: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/32.jpg)
JPEGs
More you compress the image (for a smaller file size), the more the image quality suffers.
Conversely, when you maximize quality, you also end up with larger files.
![Page 33: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/33.jpg)
Progressive JPEG
Progressive JPEG - display in a series of passes (like interlaced GIFs), starting with a low-resolution version that gets clearer with each pass.
Viewers gets an idea of the image before it downloads completely.
Making a JPEG progressive usually reduces its file size slightly.
![Page 34: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/34.jpg)
PNG FILE FORMAT Source: Robbins, J.N. (2007), Learning Web Design, O’Reilly.
![Page 35: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/35.jpg)
PNGs
Features: Contain
8-bit indexed, 24-bit RGB, 16-bit grayscale, and even 48-bit color images
Lossless compression scheme Simple on/off transparency (like GIF) Multiple levels of transparency Progressive display (similar to GIF
interlacing)
![Page 36: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/36.jpg)
PNGs
PNG designed to replace GIF for online purposes and TIFF for image storage and printing.
![Page 37: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/37.jpg)
PNG - 8
8-bit indexed color images Store 8-bit indexed images with a
maximum of 256 colors. Can be saved at 1-, 2-, and 4-bit depths
as well.
![Page 38: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/38.jpg)
PNG |RGB/Truecolor (24- and 48-bit) Each channel (red, green, and blue) can
be defined by 8- or 16-bit information, resulting in 24- or 48-bit RGB images.
24-bit RGB PNGs are identified as PNG-24.
However, JPEG offers smaller file sizes with acceptable image quality for RGB images.
![Page 39: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/39.jpg)
PNG Transparency
Contain transparent areas that let the background image or color show through - binary transparency
Contain multiple levels of transparency, commonly referred to as alpha-channel transparency - alpha transparency
![Page 40: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/40.jpg)
Binary transparency
Pixel colors for GIFs and PNG-8s are stored in an indexed color table.
Transparency is separate color, occupying a position in the color table.
Slot in color table that is set to transparent is indicated by a checker pattern.
Pixels in that position will be completely transparent.
![Page 41: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/41.jpg)
Transparent
![Page 42: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/42.jpg)
Alpha transparency
RGB images (JPEGs and PNG-24) store color in separate channels (red, green, and blue).
PNG-24 files add another channel, called the alpha channel, to store transparency information.
Pixel may display one of 256 values or 256 levels of transparency.
![Page 43: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/43.jpg)
PNG Progressive display (interlacing) Image displays in a series of seven
passes.
PNGs fill in both horizontally and vertically.
Interlacing adds to the file size, turn interlacing display off.
![Page 44: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/44.jpg)
When to use PNGs
Use 8-bit PNG for GIFs, may have a smaller file size than a GIF
PNG does support 24-bit color images but lossless compression nearly always results in larger file.
JPEG is still the best choice for photographic and continuous tone images.
Use PNG for multiple levels of transparency.
![Page 45: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/45.jpg)
Recommendation
Work in RGB Mode regardless of the final format of your file.
Image-editing work in RGB mode (grayscale is fine for non-color images).
![Page 46: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/46.jpg)
What format to use
![Page 47: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/47.jpg)
Halo
Halos result of anti-aliased edges that have been blended with a color other than the background color of a page.
Problem for transparency, whether GIF or PNG-8.
![Page 48: Images | Color](https://reader033.vdocuments.us/reader033/viewer/2022042703/5681464a550346895db35d2e/html5/thumbnails/48.jpg)
Halo
Matte color feature easy to blend the edges of the graphic to a target background color.