1 / 19

Web Image Essentials: Formats, Sizes, and Optimization Tips

Learn about creating web images with proper formats, colors, sizes, and optimization techniques. Explore different image formats, color depths, and strategies for enhancing image load speed, transparency, and animations. Discover tips for selecting, editing, and optimizing web images for the best online viewing experience.

gary-norris
Download Presentation

Web Image Essentials: Formats, Sizes, and Optimization Tips

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. COS 125 Day 13

  2. Agenda • Assignment 3 Due • Assignment 4 Posted • Due March 25 • Left to do • 6 Assignments (9 total) • About one per week • 2 Quizzes • Capstone projects • Exam #3 will first week of April • Castro Chaps 1-10? • Today we will look at creating and using images • Examples • http://perleybrook.umfk.maine.edu/samples/imagesplay.htm • http://perleybrook.umfk.maine.edu/samples/bk.htm

  3. Factors to Consider for Web Image • Format • Color • Size/resolution • Speed • Transparency • Animation

  4. Formats • 3 Possibilities • GIF • Version 87a • Older • Version 89a • Transparency and animations • Interlaced or non-interlaced • JPEG • Compressed (variable) • PNG • Optimized or non-optimized palette • Interlaced or non-interlaced

  5. Color • Depth • 24 bit • 16,777,216 possible colors • “true color” • Photo quality • 16 bit • 65,536 colors • 8 bit • 256 colors

  6. Browser Colors • Most Browser cheat! • Lock palette to 256 specifics colors • Because of difference in O/S only 216 colors are Web Safe • http://www.cookwood.com/html/colors/websafecolors.html • Non web safe colors may be dithered or shifted

  7. Size and Resolution • Pixels • Monitors are 70-90 pixels per inch • Printers are >200 ppi • 800 X 600 image • 10X7.5 inches on monitor • 4X3 inches (or less) on printer • The more pixels on a printer means greater detail • The more pixels on a monitor means larger size • Standard SVGA monitors are 800X600 16 bit • XGA monitors are 1024X768 24 bit or better

  8. Speed • How fast can the picture be displayed? • Factors • Size of graphic file • Size of graphic • Color depth • Compression • Interlacing • Sneak peek

  9. How to make graphic load faster • Use the right image format • For Photo realistic use jpeg • Lossy compression • Use Gaussian blur and re-compress • < 256 colors (logos, text, cartoons) • Gif using LZW compression • PNG • Only covert images to web format after all editing is done

  10. Transparency • Only for GIF and PNG • “remove” one color from image • Remove Background to make image non-rectangular • Remove color in image to create special effects

  11. Animations • Animated Gifs • Flash • Both work with frames • Like cartoons • Series of images with slight changes between each image

  12. Where to get images • Buy or download • Scan existing images • Blake library • Digital camera • Blake library • Create using image editing program • Goggle image search

  13. Paint Shop Pro • File >New • Set image size • Set depth • Set background • transparent

  14. Paint Shop Pro • Resizing Images • Image >> resize • Don’t make larger! • Lose detail • If image is twice as big • File is 4 times larger • 4 time slower • Better to use image resizing in XHTML

  15. Creating Transparent GIFS • Save image as GIF • Colors>> Set palette transparency • Set dialog as shown • Select color • Save

  16. Paint Shop Pro • Reduce Color Depth • Colors>>decrease color depth • Make image file smaller • Show images Progressively • Save as • options

  17. Playing with photos • Compressing Images • Image>>blur>>Gaussian blur • Save as jpeg • Select options • Set compression as desired

  18. Creating animated Gifs • Create frames • Slight change between each image • Save as series of images • Image1.gif, image2.gif etc • File>>run animation shop • File>>animation wizard • Add images in order

  19. Gee Whiz Tip of the Day • Creating “Tile”able images for backgrounds • Images must blend on top edge to bottom edge • Images must blend left edge to right • Gradient effects • Use long narrow stripes • Textures • Create squares (100x100) • Cut into four (50X50) • Swap corners • Blend middle

More Related