"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.

Slides:



Advertisements
Similar presentations
Chapter 3 Capturing and Editing Digital Images “Computers and Creativity” Richard D. Webster, COSC 109 Instructor Office: 7800 York Road, Room 422 | Phone:
Advertisements

Dan Sadler Montgomery County Department of Information Systems & Telecommunications - GIS Team (DIST-GIS) Map Gallery.
COS 125 Day 13. Agenda Assignment 3 Due Assignment 4 Posted –Due March 24 Left to do –6 Assignments (9 total) About one per week –3 Quizzes –Capstone.
DECO1001: Optimising for the Web Format Colour File Size.
Images.
Graphics in the web Digital Media: Communication and Design
Welcome to a New Quarter Class Rules and Responsibilities What will be learning? 106-Static and Dynamic Visualization 105-Synthesize Data for SciVis Video-Real.
Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler ITS Training Services 224 B Computer Building University Park, PA 16802
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,
Internet as a resource tutorial – part steps, 3 different actions 1. Search content 2. Use Text 3. Use Images.
GRAPHICS/IMAGES INFSCI Source: Learning Web Design by Jennifer Niederst RobbinsJennifer Niederst Robbins Creating Images:  Scanning  Be aware.
File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.
Presentation Design: Graphics. More About Color “Bit depth” of colors -- This is based on the smallest unit of information that a computer understands.
Digital Image Formats: An Explanation Guilford County SciVis V
Chapter 3 Capturing and Editing Digital Images 1.
_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition1  Wiley and the.
10 | Graphics COM 366 Web Design & Production. Native file format –Format native to software program –psd > PhotoShop default Preserves layers –Use “Save.
Types of Graphics  Vector Individual scalable objects defined by mathematical equations  Bitmap Pixels (tiny, single-colored square) in a grid Most.
Graphic Format Factors
Things to Remember When working with digital images.
Pixels Minute University Richard Fisher 2/4/2002 Richard Fisher2 PixelsPixels  Picture Element  A single point in an electronic image  The.
Web Graphics. Web graphics Bandwidth is king Graphics must load quickly Graphics must be optimized All other components except for text, gif and jpg are.
Introduction to Images & Graphics JMA260. Objectives Images introduction Photoshop.
1 After completing this lesson, you will be able to: Comprehend the basics of Web graphics. View and manipulate Web graphics in a graphics program. Describe.
Digital Image Formats: An Explanation Guilford County SciVis V
CHAPTER 21: IMAGES. IMAGE SOURCES 3 options: Create your own images Find images Hire someone to make images.
ITEC2110, Digital Media Chapter 3 Digital Image Processing 1 GGC -- ITEC Digital Media.
ITEC2110, Digital Media Chapter 2 Fundamentals of Digital Imaging 1 GGC -- ITEC Digital Media.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
BITMAPPED IMAGES & VECTOR DRAWN GRAPHICS
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Common Bitmap Image File Types
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Understanding Web Graphics
OVERVIEW Objectives Follow a design document to prepare images for inclusion in a Web page Run a batch process to prepare multiple images in one step Use.
Web Graphics 101 Web Image File Formats Image Optimization
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Digital Photo editing with Photoshop
Image Formats.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
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.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
File Formats.
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
Choosing the right image format
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
Digital Images.
Image File Size and File Compression
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
Chapter 3:- Graphics Eyad Alshareef Eyad Alshareef.
Digital Image Formats: An Explanation
Chapter 3 Capturing and Editing Digital Images
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
Web Design Designing for the Unknown.
Photoshop: Creating and Preparing Images for the Web
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Graphic File Format Skill Area
Web Programming– UFCFB Lecture 7
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
CSC/FAR 020, Computer Graphics, November 9, 2009
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
Presentation transcript:

"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.

Chapter 3 Capturing and Editing Digital Images Part 7 Output Images for Web

In this lecture, you will learn: the characteristics, pros, and cons of the common file formats for Web images how to choose image file format for Web what dithering means

Common File Formats for Web Images JPEG GIF PNG

JPEG best with: JPEG supports 24-bit color (millions of colors) continuous-tone images with a broad color range subtle color and brightness variations e.g., photographs and images with gradients. JPEG supports 24-bit color (millions of colors) JPEG compression: lossy (it loses image data in order to make the file size smaller)

JPEG Does not work well with: Highly compressed JPEG images: solid colors contrast image contrast edges Highly compressed JPEG images: blur the image detail show a visible artifact around the high contrast edges

JPEG Compression Artifacts Original Highly compressed JPEG Note the ugly artifacts at the intersection between 2 colors. The solid colors are not solid colors anymore.

GIF most effective for images with solid colors such as illustrations, logos, and line art Up to 8-bit color (256 colors) supports background transparency animated GIF

Color Reduction GIF uses a palette of up to 256 colors to represent the image Need to reduce the colors if the original image has more than 256 colors Advantage: Smaller file size after reducing number of colors (i.e., reducing bit-depth or color-depth) (Recall that reducing bit-depth or color depth can reduce file size.)

Color Reduction Determine which colors are in the palette. Options available in Photoshop Perceptual Selective Adaptive Restrictive Custom

Example: Original TIF (file size: 406 KB)

Example: GIF 256 colors, no dither (file size: 28 KB)

Example: GIF 256 colors, no dithering (file size: 28 KB) Note the stripes in the gradient areas. This is due to not enough colors.

Color Reduction Undesirable effects stripes in smooth gradient areas some colors are altered (remapped to a different colors on the palette) Use dithering to reduce the undesirable effects

Dithering A technique to simulate colors that are outside of the palette by using a pattern of like colored pixels.

Example: GIF 256 colors, with dithering (file size: 34 KB) The stripes in the gradient areas are less noticeable.

Without and With Dithering Reduce the stripes effect Smooth out the color transition

Without and With Dithering Some colors are not solid anymore, but with dithering

PNG PNG-8 PNG-24 up to 256 colors (8-bit) 24-bit colors lossless compression larger file size than JPEG but without the ugly JPEG compression artifacts

Worksheet: JPEG versus GIF versus PNG Also try out the worksheet: Worksheet: JPEG versus GIF versus PNG 1. Hands-on to optimize files in JPEG, GIF, and PNG formats and to adjust the compression settings to achieve the balance between the file size and overall image quality. 2. Learn the type of images that each of these file formats is most effective at compressing.

Review Questions Note to instructor: Depending on your preference, you may want to go over the review questions at the end of this lecture as an instant review or at the beginning of next lecture to refresh students' memory of this lecture.

Review Question What kind of images are GIF files most appropriate for? A. big areas of solid colors B. continuous tone photographs C. lots of gradients A

Review Question What kind of images are JPEG files most appropriate for? A. big areas of solid colors B. continuous tone photographs C. lots of gradients B and C

Review Question Which file format(s) can be created as an animated sequence? A. JPEG B. PNG C. GIF C

Review Question Which file format(s) can have transparency? A. JPEG B. PNG C. GIF B and C

Review Question Saving an image with more than 256 colors into a GIF may have the undesirable effects as discussed in the lecture. So why or when would you want to save an image as a GIF? reduce file size create an animated gif background transparency (although PNG can have transparency)

Review Question In general, a PNG-24 file has a larger file size than a JPEG. So why or when would you want to save an image as a PNG instead of a JPEG? lossless compression (so you can keep it for further editing) no ugly JPEG artifacts an image that has contrast edges and solid colors (which JPEG does not work well with)