1 / 10

Week 3: Image Formats

Week 3: Image Formats. Introduction. This week we will learn about the different image formats used on the web and when is the correct situation for using each file type . This will be followed by an introduction to the save for web tool and slicing tools in P hotoshop. Introduction.

damisi
Download Presentation

Week 3: Image Formats

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. Week 3: Image Formats

  2. Introduction • This week we will learn about the different image formats used on the web and when is the correct situation for using each file type. • This will be followed by an introduction to the save for web tool and slicing tools in Photoshop.

  3. Introduction • There are three main file types we’ll want to focus on for saving images optimized for the web, they are: • GIF, JPG and PNG. • Each file type has its own strengths and weaknesses and it is very important to know and keep these in mind when saving an image to be used on a website.

  4. JPEG • JPEG (Joint Photographic Experts Group). • JPEGs are a "lossy" format. That is, when you save an image as a JPEG file it is compressed, meaning not all of the information in the original image is preserved. • JPEG removes some of the information to keep the file size small. Thus, it follows that there is of course a quality loss. • JPEG is intended to be used for photos, game screenshots, stills from a movie, etc. • In these type of images are no well-defined lines or sharp contrasts between coloursetc

  5. JPEG ‘artifacts’ • The term JPEG "artifacts” refers to imperfections that are result of JPEG compression. • Notice how the sharpness has all but disappeared and the color "leaks" into the surrounding area. Wherever there are sharp details or color changes like in the above image, you will notice artifacts.

  6. When to use JPEG • JPGs are going to be your best bet when working with photographs or graphics containing complex effects like shadows, gradients, etc.

  7. PNG • PNG (Portable Network Graphics).  • PNG is the image format to use for line art, text, screenshots of operating system windows, general web graphics and "comic strip" style art. • PNG is a lossless format, meaning it won't distort or alter the original image this allows fine lines and other details to be reproduced accurately. • Photoshop gives you two options when working with PNGs: PNG-8 and PNG-24. • PNG-8 is great for simple graphics, text etc while PNG-24 on the other hand, provides a much higher quality image. • PNG-24s retain the original Photoshop files image quality and are great for images with gradients or other areas with a high number of distinct colors. • PNG-24s can also handle transparencies! • 24 bit PNG result in a file size often larger than a JPEG of the same image, but the image will be an accurate reproduction of the original.

  8. PNG

  9. GIF • GIF (Graphic Interchange Format) • In almost all instances, GIF is obsolete and should not be used. Where you have a GIF file, a PNG would do just the same and be noticeably smaller due to superior compression methods. • The only real exception to the use of GIF is for simple animations. • The GIF format is widely integrated into popular web browsers, and animated GIFs, although considered annoying by many, are featured on a large number of sites. • No other image format has the combined animation abilities and widespread browser integration.

  10. Animated GIF

More Related