Choosing the right image format

Slides:



Advertisements
Similar presentations
Unit 30- Digital Graphics THEORY P2 and D2
Advertisements

Web Design Vocab 3 PNG, JPG, GIF, MP3, MPEG.
Images.
2.01 Understand Digital Raster Graphics
Graphics in the web Digital Media: Communication and Design
File Formats By Jack Turner. Raster (Bitmap) Raster or bitmap is a dot matrix data structure, containing columns of dots and rows, of a graphics image.
Russell Taylor Week 3. Image File Formats - TIF, JPG, PNG, GIF - which to use? The three most common and important image file formats for for printing,
Comparison of image compression algorithms ECE-533 Paula Aguilera.
Graphics Ms. Brewer Spring Bellwork Edmodo – log on! Quiz? Take it if you need to! Policies and Procedures Powerpoint in Shared Folder! Get to Know.
1 Creating Web Graphics Outline 2.1 Graphics Types 2.2 Vector Graphics 2.3Bitmapped Graphics 2.4Graphics for the Web 2.5 GIF (Graphics Interchange Format)
INFSCI  “Users pay close attention to photos and other images that contain relevant information, but ignore fluffy pictures used to “jazz up” webpages.”
Task 01 – Explain how different types of graphical images relate to file formats, file conversions, formats and compression. Emily Riley.
File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.
Image Storage Bitmapped Graphics – in which an image is represented as a collection of dots Vector Graphics – in which an image is represented as a set.
Common file formats  Lesson Objective: Understanding common file formats and their differences.  Learning Outcome:  Describe the type of files which.
Graphics and Images Communicating Information : Documents and Publications.
By Millie and Ellece. D IFFERENT T YPES OF G RAPHICS Bitmap Formats JPEG GIF PNG PSD TIFF.
Image File Types Module 4: Working with Images LESSON 5.
Types of Graphics  Vector Individual scalable objects defined by mathematical equations  Bitmap Pixels (tiny, single-colored square) in a grid Most.
Multimedia File FormatsGraphics JPG, GIF, TIF, PSD, WMF, BMP, PNG, RAW.
Things to Remember When working with digital images.
File Size and File Formats. Digital cameras often save images in one of several formats: JPGBMPTIFFRAWOthers Most of these are unsuitable for use on the.
Module 4- Build a Game Understanding Pictures Compression – Making things smaller.
Using the Sony DSC-P52 Camera Sunday, December 06, 2015.
Images. Digital Images Rectangular arrays of pixel data Pixel - picture element, smallest addressable part of the frame buffer. Color depth - the depth.
Raster Graphics 2.01 Investigate graphic image design.
Digital File Formats By Ali Aslam. JPEG JPEG Stands for Joint Photographic Experts Group. JPEG uses a lossy compression routine. Lossy compression means.
Lesson 2: Introduction to Digital Imaging Digital Photography MITSAA IAP 2003 Rob Zehner.
GIF vs. JPEG GIF and JPEG (JPG) image formats are different. You should know which to use when. Here are some examples.
GRAPHICS. PURPOSE OF GRAPHICS IN WEB DESIGN Graphics add visual/aesthetic appeal to the information on the web page, helping to maintain viewer interest.
Image File Formats Which one is right for me?. The Only Three Image Formats Your Will Ever Need: Names Jpg “Joint Photographic Experts Group” Png “Portable.
Photoshop Basics: Extended Instructor: Vicki Weidler Assistant: Joaquin Obieta.
Module 4- Build a Game Look at Me Mod 4 Lesson 3 Graphics.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
2.01 Understand Digital Raster Graphics
Common Bitmap Image File Types
2.01 Understand Digital Raster Graphics
Understanding Web Graphics
Exploring Computer Science - Lesson 3-4
Exploring Computer Science - Lesson 3-4
2.01 Understand Digital Raster Graphics
Image Formats.
Computer Graphics Different Images File.
Photo Editing for PowerPoint & the Web
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
File Formats.
2.01 Investigate graphic image design.
JPG vs GIF vs PNG What is the difference?
Raster Images CPSC 1030.
Exploring Computer Science - Lesson 3-4
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
Photo Editing for PowerPoint & the Web
A computer display is made up of small squares, called pixels.
Digital Images.
Image File Size and File Compression
Look at Me Mod 4 Lesson 3 Graphics Module 4- Build a Game.
Digital Image Formats: An Explanation
1.01 Investigate graphic types and file formats.
An Introduction to Scanning and Storing Photographs and Graphics
2.01 Understand Digital Raster Graphics
MED 2001 Advanced Media Production
Photoshop: Creating and Preparing Images for the Web
2.01 Investigate graphic image design.
Graphic File Format Skill Area
2.01 Understand Digital Raster Graphics
chapter 29: Creating Web Graphics
2.01 Investigate graphic image design.
2.01 Investigate graphic image design.
Creating Digital Graphics
Presentation transcript:

Choosing the right image format

What will be briefing looking at: - Introduction - Strengths & Weaknesses and comparison between file formats: The GIF Format The JFIF/JPG/JPEG Format The TIFF Format The PNG Format

Image File Formats: Pro and Cons

Image File Formats: Pro and Cons GIF: PROS: suitable for logos, flat areas of color with well defined regions suitable for icons with few colors support for transparency suitable for small animations CONS Cannot do alpha transparency Outline of solid colour if on gradient background

Gif Vs JPEG Compression Image File Formats: Gif Vs JPEG Compression

Image File Formats: Pro and Cons JPG/JPEG: PROS: suitable for images, high details & quality pictures uses lossy compression it is the most used graphic file format used in design and photography industry – it is likely to see nature photos in JPG file format it is good when you are willing to drop quality from a picture for the sake of file size CONS: it does not support transparency it is not suitable for logos and icons because it doesn’t have transparency and it can generate a bigger file size for small resolution images.

Artifacts on JPEG Format Image File Formats: Artifacts on JPEG Format Quality:  100 Size (bytes): 83,261 Compression ratio: 2.6:1 Comment: Extremely minor artifacts Quality: 50 Size (bytes): 15,138 Compression ratio: 15:1 Comment: Initial signs of subimage artifacts Quality: 25 Size (bytes): 9,553 Compression ratio: 23:1 Comment: Stronger artifacts; loss of high frequency information Quality: 1 Size (bytes): 1,523 Compression ratio: 144:1 Comment: Extreme loss of color and detail; the leaves are nearly unrecognizable

Artifacts on JPEG Format Image File Formats: Artifacts on JPEG Format

Image File Formats: Pro and Cons PNG: PROS: 24bit color / 8bit color(256 colors) suitable for flat areas of colors, logos, transparent or semitransparent images suitable for icons it has alpha channel transparency which is more advance than GIF’s transparency proposed as replacement of GIF by World Wide Web Consortium CONS: it is wise to avoid using PNG with big photos and images with details because of the big generated file size in different situations it has bigger file sizes than JPG

Image File Formats: Pro and Cons PNG Vs GIF Vs JPG: Use PNG if you need 100 % Quality and See through effects Use GIFs if the image is blocks of colour or needs animating JPGs are used for photographs or anything with lots of colour

We hope you enjoyed this presentation and that now you know something more about these graphic formats. Thank you for watching it!