1 / 15

Image File Formats for the Web

Image File Formats for the Web. Web Design & Animation II Mr. Huang. IMAGE SELECTION FACTORS. When working with images for a web site, it’s important to determine the following properties in regards to images: quality and file size

palti
Download Presentation

Image File Formats for 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. Image File Formats for the Web Web Design & Animation II Mr. Huang

  2. IMAGE SELECTION FACTORS • When working with images for a web site, it’s important to determine the following properties in regards to images: quality and file size • These 2 properties are dependent on the type of image format that you choose to insert on your web site.

  3. Joint Photographic Experts Group • Format – .jpeg • Purpose – used for photographic images and gradients • Characteristics – no limitation on colors; does not support transparency; can be compressed at various levels • Quality – high (if uncompressed); low (if compressed a lot)

  4. Graphics Interchange Format • Format – .gif • Purpose – used for logos, shapes, cartoons, line drawings, and animations • Characteristics – supports a maximum of 256 colors; supports transparency; can be used for animations; can be compressed • Quality – medium to high

  5. Portable Network Graphics • Format – .png • Purpose – used as an alternative to .gifs for logos, shapes, cartoons, line drawings, and animations • Characteristics – supports 256 colors; supports transparency; can be compressed; default format for new Fireworks graphics • Quality – high

  6. Windows Bitmap • Format – .bmp • Purpose – used for small graphics with a few amount of colors (pixel-based images) • Characteristics – no compression required; supports transparency; introduced by Windows; large file sizes • Quality – medium to high

  7. Photoshop Document • Format – .psd • Purpose – used for graphics created or edited in Adobe software (mainly Photoshop) • Characteristics – can save and edit layers; supports transparency; usually cannot be inserted into web pages • Quality – high

  8. Tagged Image File Format • Format – .tiff • Purpose – used for graphics created or edited in Adobe software; popular for printing industry • Characteristics – can save and edit layers; supports transparency; cannot be inserted into web pages • Quality – high

  9. Optimization • Optimization is when you take an image and save it for the Web in a way that you reduce the file size as much as possible, but also try and maximize the quality of the image as much as possible • Software such as Photoshop and Fireworks have ways for you to preview how your images will look on the web based on different image formats and qualities.

  10. 4-Up • Software such as Photoshop and Fireworks have a 4-up preview option that allows you to see images in 4 different qualities

  11. 4-Up

  12. 4-Up

  13. 4-Up

  14. 4-Up

  15. In Conclusion • Determine the type of desired image (logo, photograph, original drawing, animation) first in order to limit down your choices for the image format that should be placed on the Web • Save your image in different formats and qualities to compare file sizes • Main goal is to have an image with the best possible quality at a respectable file size

More Related