1 / 33

Graphics on the Web

Graphics on the Web. How much do you want to know??. Terry Griffin. Prerequisites. Bits Bytes. Graphics on the Web. Everyone places pictures on the web. Some people place pictures on the web. At least a few individuals place pictures on the web. Graphics on the Web.

elda
Download Presentation

Graphics on the Web

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. Graphics on the Web How much do you want to know?? Terry Griffin

  2. Prerequisites • Bits • Bytes

  3. Graphics on the Web • Everyone places pictures on the web. • Somepeople place pictures on the web. • At least a few individuals place pictures on the web

  4. Graphics on the Web • Why should you care? • Adds a dimension to your web site • If you are going to make a web page, then you should do it right 

  5. What are graphics?? • Images • Logos • Backgrounds • Any colorful enhancement of a web page Overview

  6. Overview

  7. Concerns • Download time • Blurry pictures • Squished pictures • Placement and organization (another talk)

  8. Picture Size (which picture – file is bigger??) Terminology

  9. Bit Depth Terminology

  10. Bit Depth Terminology

  11. Bit Depth • 24 bits = 224 = 16777216 (millions of colors) • 16 bits = 216 = 65536 • 8 bits = 28 = 256 • 8 bits = 28 = 256 (shades of gray) • 1 bit = 2 colors (black / white) Terminology

  12. Pictures are made of Pixels • What’s aPixel? • Smallest piece of a picture. • Represents a single color • More pixels = better clarity Terminology

  13. Pixels

  14. Pixels R G B 255 0 0 R G B 204 0 204

  15. Compression • Reduces the size (disk space) of an image. • Typically by reducing bit depth. • Usually not noticeable Terminology 198 kilobytes 68 kilobytes

  16. Compression • Lossy Compression • Reduces file size by “removing” pieces of the picture • Actually just condenses the picture, not reversible • Usually not noticeable by the human eye • Lossless Compression • Reduces file size, but retains the original image information • Relies on the repetitive nature of particular images • Reversible Terminology

  17. Picture Formats Bmp Gif Jpg Png And many more….

  18. Picture Formats • JPEG/JPG (Joint Photographic Experts Group ) • JPG is a lossy compression technique that is designed to compress color and grayscale continuous-tone images. • The information that is discarded in the compression is information that the human eye cannot detect. • JPG images support 16 million colors and are best suited for photographs and complex graphics. • The user typically has to compromise on either the quality of the image or the size of the file. • JPG does not work well on line drawings, lettering or simple graphics because there is not a lot of the image that can be thrown out in the lossy process, so the image loses clarity and sharpness. Busy slide #1

  19. Picture Formats • GIF (Graphics Interchange Format ) • Unlike JPG, the GIF format is a lossless compression technique and it supports only 256 colors. • GIF is better than JPG for images with only a few distinct colors, such as line drawings, black and white images and small text that is only a few pixels high. • With an animation editor, GIF images can be put together for animated images. • GIF also supports transparency, where the background color can be set to transparent in order to let the color on the underlying Web page to show through. Busy slide #2

  20. Picture Formats PNG(Portable Network Graphics) • Not supported by all browsers. • PNG developed as a patent-free answer to the GIF format, also an improvement on the GIF technique. • An image in a lossless PNG file can be 5%-25% more compressed than a GIF file of the same image. • PNG builds on the idea of transparency in GIF images and allows the control of the degree of transparency, known as opacity. Saving, restoring and re-saving a PNG image will not degrade its quality. • PNG does not support animation like GIF does. Busy slide #3

  21. Making a choice • This 200 x 200 pixel image saved as: • Gif = 40 kbytes • Jpg = 117 kbytes • ???

  22. Choice • This 1024 x 768 pixel image saved as: • Gif = 258 kbytes • Jpg = 60 kbytes • ???

  23. More Terms... • Crop

  24. More Terms... • Resize

  25. More Terms... • Skew

  26. More Terms... • Dither

  27. Why does all this matter?? • Over-compressed or skewed images have a poor look. • Under-compressed images download slow.

  28. What’s the bottom line?? • Save photographs as jpg. • Save images (graphs, charts, formulas, etc.) as gif. • Edit in gif, not jpeg. • Don’t force an image to be something it’s not!!

  29. Web Examples • Example 1 • Example 2 • Example 3

More Related