Images ET Sum 02 June. Images DPI - Dots per inch (72dpi is screen dpi) Windows vs Macintosh issues 1.Images are darker on Windows (because of the gamma.

Slides:



Advertisements
Similar presentations
Raster Graphics 2.01 Investigate graphic image design.
Advertisements

Raster graphics. Colour depth 01 1 bit pr pixel = 2 combinations (2 1 ): 2 bits pr pixel = 4 combinations (2 2 ): bits pr pixel = 16 combinations(2.
A Digital Imaging Primer Nick Dvoracek Instructional Resources Center University of Wisconsin Oshkosh.
Color COM 366 Web Design & Production. RGB color Amount of light in each channel Closer to 255, whiter color gets Every color has value for red,
Graphics CS 121 Concepts of Computing II. What is a graphic? n A rectangular image. n Stored in a file of its own, or … … embedded in another data file.
DECO1001: Optimising for the Web Format Colour File Size.
Graphics on the Web CS575 Spring 2006 Dr.Abbot Student: Andre Liv.
2.01 Understand Digital Raster Graphics
Graphics in the web Digital Media: Communication and Design
File Formats The most common image file formats, the most important for cameras, printing, scanning, and internet use, are JPG, TIF, PNG, and GIF.
Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler ITS Training Services 224 B Computer Building University Park, PA 16802
File Types, Sizes & Dots Per Inch (dpi) Best practices applied to Photoshop file formats when creating media-specific documents. Bit Depth is the number.
Part A Multimedia Production Rico Yu. Part A Multimedia Production Ch.1 Text Ch.2 Graphics Ch.3 Sound Ch.4 Animations Ch.5 Video.
1 GFI Files Graphics Interchange Format. 2 GIF History  CompuServe developed 1987 Versions 87a, V89a Because there was no standard.
Comparison of image compression algorithms ECE-533 Paula Aguilera.
Web Design and Development for E-Business By Jensen J. Zhao Copyright 2003 Prentice Hall, Inc. Web Design and Development for E-Business Jensen J. Zhao.
GRAPHICS/IMAGES INFSCI Source: Learning Web Design by Jennifer Niederst RobbinsJennifer Niederst Robbins Creating Images:  Scanning  Be aware.
Images and the Web web graphics. web graphics: constraints Due to the constraints imposed by varying degrees of Internet bandwidth, designing images for.
COMP Bitmapped and Vector Graphics Pages Using Qwizdom.
An Introduction to Graphic File Formats.jpg.gif.tiff bmp and.eps and.psd...
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.
Presentation Design: Graphics. More About Color “Bit depth” of colors -- This is based on the smallest unit of information that a computer understands.
1 Perception, Illusion and VR HNRS 299, Spring 2008 Lecture 14 Introduction to Computer Graphics.
Digital Image: Representation & Processing (2/2) Lecture-3
Bit-Mapped Graphic Data: Input (Capture) Hardware Multimedia – Section 2.
Understanding Images on the Computer How do images work and why?
Multimedia Elements II Graphics, Digital Video. UIT - Multimedia Production2 Multimedia Elements Multimedia elements include: Text Graphics Animation.
Image Representation. Objectives  Bitmaps: resolution, colour depth and simple bitmap file calculations.  Vector graphics: drawing list – objects and.
Digital Cameras And Digital Information. How a Camera works Light passes through the lens Shutter opens for an instant Film is exposed to light Film is.
1 Ethics of Computing MONT 113G, Spring 2012 Session 10 HTML Tables Graphics on the Web.
Digital Image Formats: An Explanation Guilford County SciVis V
Raster Graphics. An image is considered to be made up of small picture elements (pixels). Constructing a raster image requires setting the color of each.
Graphics workshop Library and Information Services University of St Andrews.
Web Graphics. Colours and Display Graphics and Modems 28.8kbps = 3.6 KB per second 36 KB takes 10 seconds to load. Pixels and color.
Types of Graphics  Vector Individual scalable objects defined by mathematical equations  Bitmap Pixels (tiny, single-colored square) in a grid Most.
Introduction to Photoshop Altering photos 1 pixel at a time.
Graphics & Images What File Format Do I Use?. Graphics & Images …..are visual images presented on some form of media (drawings, print, web, digital video)
Things to Remember When working with digital images.
Image formats Characteristics © Adolf Knoll, National Library of the Czech Republic.
Raster Graphics 2.01 Investigate graphic image design.
File Types. Terms Multimedia- the integration of text, sound, video and/or animation into a document Letters, brochures, newsletters, web pages or presentations.
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.
Editing Images for the Web. Optimization/Compression Graphics optimization is important for fast web page display.
Digital Images are represented by manipulating this…
Exploring Web Design Chapter 1. Objectives Develop a new perspective of the WWW Learn what makes a website good or bad Discover how to apply objective.
Digital Graphics for Computer Games Pixels Types of Digital Graphics (Raster and Vector) Compression.
Lesson 2: Introduction to Digital Imaging Digital Photography MITSAA IAP 2003 Rob Zehner.
Image File Formats By Dr. Rajeev Srivastava 1. Image File Formats Header and Image data. A typical image file format contains two fields namely Dr. Rajeev.
GIF vs. JPEG GIF and JPEG (JPG) image formats are different. You should know which to use when. Here are some examples.
Image File Formats Harrow Computer Club – Wed, 1 Dec 2010 Bob Watson MA CMath MIMA MBCS.
Digital Image Formats: An Explanation Guilford County SciVis V
Scanner Scanner Introduction: Scanner is an input device. It reads the graphical images or line art or text from the source and converts.
Graphics and Image Data Representations 1. Q1 How images are represented in a computer system? 2.
ITEC2110, Digital Media Chapter 3 Digital Image Processing 1 GGC -- ITEC Digital Media.
Digital Photo editing with Photoshop
Image Formats.
2.01 Investigate graphic image design.
Choosing the right image format
2D Drawing Basics 1.
A computer display is made up of small squares, called pixels.
Digital Image Formats: An Explanation
1.01 Investigate graphic types and file formats.
Representing Images 2.6 – Data Representation.
Web Design and Development
MED 2001 Advanced Media Production
Scan to USB.
2.01 Investigate graphic image design.
Graphic File Format Skill Area
2.01 Investigate graphic image design.
2.01 Investigate graphic image design.
Presentation transcript:

Images ET Sum 02 June

Images DPI - Dots per inch (72dpi is screen dpi) Windows vs Macintosh issues 1.Images are darker on Windows (because of the gamma difference) 2.Images appear larger on the Mac 3.Different standard screen resolutions

The Problem of Representing Video Digitally Break a picture into discrete units. The discrete units are called pixels. For instance the image below is broken into 640 columns and 480 rows. That’s 640x480 = 307,200 pixels in the picture

GIF Extension.gif At most 256 colors (8 bit) LZW Compression (loss less) Good for flat color images with blocks of similar color Transparency GIF Animation

Jpeg File Extension.jpg or.jpeg True color (24-bit) JPEG Compression (lossy) Good for Photorealistic images No Animation, transparency

PNG File extension.png Multiple levels of color support –256 colors (8-bit) with a palette –65,000 level grey scale (16-bit) –True color (48-bit) PKZIP compression (loss less) Text storage (for keywords, comments, copyright, etc.) Transparency (256 levels for 8-bit images, alpha channels for true color images)

Comparison Table GIFJPGPNG No. of Colors256Unlimited AnimationYesNo Loss Less CompressionYesNoYes TransparencyYesNoYes Can Contain CommentsYesNoYes CompressionLZWJPEGPkzip with prefiltering Alpha channelsNo Yes Gamma correctionNo Yes

GIFJPGPNG Browser support All browsersAll current browsers Netscape with a plugin and direct support in IE4 and Netscape 6. Use for images with... Flat colors or animation Photorealistic images Loss-less full color, transparent material Don't use for images with... Photorealistic images Sharp contrast, lines, text Large full color photographic images (because of large size).

Gif 16 colors 15KBJpeg low resolution 11KB

Gif 128 colors 36KBJpeg High, 26KB

Gif, 2KBJpeg Medium resolution, 15KB