1 / 48

Images | Color

Images | Color. Optimizing. Optimizing images - right balance between file size and picture quality. Source : http://www.yourhtmlsource.com/optimisation/imageoptimisation.html#minimalism. Ways to optimize. Areas where bytes can be shaved off your graphics: Bit depth (number of colors)

dalia
Download Presentation

Images | Color

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Images | Color

  2. Optimizing • Optimizing images - right balance between file size and picture quality. Source : http://www.yourhtmlsource.com/optimisation/imageoptimisation.html#minimalism

  3. 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

  4. Gif 32 Colors 11K Gif 32 Colors 6K

  5. 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

  6. Gif JPEG

  7. Gif JPEG

  8. Ways to optimize • One of best ways to optimize –do not use unnecessary image. • Always look for ways to lessen your graphics

  9. File Formats (Bitmap) • GIF—Graphic Interchange Format (Bitmap) • JPEG—Joint Photographic Experts Group (Bitmap) • PNG—Portable Network Graphic (Bitmap)

  10. Compression | Lossy & Lossless • Compression scheme (JPEG, GIF, PNG) helps reduce file size. • Lossy:Makes filesize smaller – eliminates information. • Pixels you begin with will not be the same pixels you end up with. • JPEG is a lossy compression scheme.

  11. JPEG - Quality: High File size : 19K JPEG - Quality: Low File size : 8K

  12. Compression | Lossy & Lossless • Lossless compression allows the exact original data to be reconstructed from the compressed data. • PNG and Gif are Lossless compression schemes.

  13. 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

  14. GIF - Colors: 256 File size : 44K GIF - Colors: 16 File size : 17K GIF - Colors: 2 File size : 7K

  15. File Formats • GIF • Lossless, 256 colors, transparency • JPEG • Lossy (variable quality), millions of colors • PNG • Lossless, variable number of colors, transparency

  16. 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

  17. 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.

  18. 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.

  19. Gif file format Source: Robbins, J.N. (2007), Learning Web Design, O’Reilly.

  20. 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.

  21. 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.

  22. 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.

  23. Color Table

  24. 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.

  25. 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.

  26. 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.

  27. Interlacing • Interlacing - image display in a series of passes. • Use for large image with slow connections speeds.

  28. Animation • Another feature built into the GIF file format is the ability to display simple animations.

  29. JPEG File format Source: Robbins, J.N. (2007), Learning Web Design, O’Reilly.

  30. 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.

  31. JPEGs • Compression scheme is lossy • High levels of JPEG compression result in artifacts

  32. 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.

  33. 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.

  34. PNG file format Source: Robbins, J.N. (2007), Learning Web Design, O’Reilly.

  35. 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)

  36. PNGs • PNG designed to replace GIF for online purposes and TIFF for image storage and printing.

  37. 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.

  38. 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.

  39. 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

  40. 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.

  41. Transparent

  42. 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.

  43. 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.

  44. 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.

  45. 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).

  46. What format to use

  47. 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.

  48. Halo • Matte color feature easy to blend the edges of the graphic to a target background color.

More Related