1 / 15

Understanding Image File Formats for Web Design and Animation

When designing for the web, selecting the appropriate image file format is crucial for balancing quality and file size. Common formats include JPEG for photographs, GIF for logos and animations, PNG for detailed graphics with transparency, BMP for pixel-based images, PSD for editable Adobe graphics, and TIFF for high-quality prints. Each format has unique characteristics affecting its use and quality. Optimizing images involves choosing the right format and quality settings to minimize file size while maintaining visual integrity. Tools like Photoshop and Fireworks can assist in this process.

palti
Télécharger la présentation

Understanding Image File Formats for Web Design and Animation

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