Communicating Quantitative Information Is a picture worth 1000 words? Digital images. Number bases Standards, Compression Will [your] images last? Homework:

Slides:



Advertisements
Similar presentations
Digital Color 24-bit Color Indexed Color Image file compression
Advertisements

Information Representation
A Digital Imaging Primer Nick Dvoracek Instructional Resources Center University of Wisconsin Oshkosh.
The Binary Numbering Systems
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,
ETT 429 Spring 2007 Digital Photography/Scanners.
Copyright 2003 Monash University IMS5401 Web-based Information Systems Topic 2: Elements of the Web (d) Digital representation.
Image Representation CS105. Data Representation Text representation – ASCII character set – Unicode – Data compression Images!
 Wisegeek.com defines Data Compression as:  “Data compression is a general term for a group of technologies that encode large files in order to shrink.
File Formats The most common image file formats, the most important for cameras, printing, scanning, and internet use, are JPG, TIF, PNG, and GIF.
Image and Sound Editing Raed S. Rasheed Image Image. Digital image. – Raster images. – Vector Images. – Stereo Images. – Image File Formats Lossless.
CS110: Computers and the Internet Color and Image Representation.
1 Internet Graphics. 2 Representing Images  Raster Image: Images consist of “dots” of color, not lines  Pixel: Picture element-tiny rectangle  Resolution:
Prepared by George Holt Digital Photography BITMAP GRAPHIC ESSENTIALS.
WEB GRAPHICS. The Pixel Computer displays are comprised of rows and columns of pixels. Pixels are indivisible. Some common screen resolutions are:, 600.
Digital Images The digital representation of visual information.
CS 1308 Computer Literacy and the Internet. Creating Digital Pictures  A traditional photograph is an analog representation of an image.  Digitizing.
Color Names All standards-compliant browsers should handle these color names These color names can be used with the CSS properties of color and background-color.
Images and the Web web graphics. web graphics: constraints Due to the constraints imposed by varying degrees of Internet bandwidth, designing images for.
1 Ethics of Computing MONT 113G, Spring 2012 Session 11 Graphics on the Web Limits of Computer Science.
File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.
Dean Pentcheff NHMLAC MBPC/Crustacea 17 April 2006.
COMP Bitmapped and Vector Graphics Pages Using Qwizdom.
TOPIC 4 INTRODUCTION TO MEDIA COMPUTATION: DIGITAL PICTURES Notes adapted from Introduction to Computing and Programming with Java: A Multimedia Approach.
Creating Web Documents: Images, files, etc. Web graphics Paint Shop Pro for conversions File management, Ws-ftp demonstration (Return to HTML next week)
THE COLORS OF LIGHT RED, GREEN and BLUE
Graphics/Image Data Types
Getting the Basics Graphics for the Web McIntyre, Period 2 Kellogg, Period 5.
Chapter 11 Fluency with Information Technology 4 th edition by Lawrence Snyder (slides by Deborah Woodall : 1.
Copyright © 2003 Pearson Education, Inc. Slide 4-1 Created by, Stephanie Ludi, Rochester Institute of Technology—NY Basic Web Page Construction Graphics.
Text, Images, Video and Sound CS 1 Introduction to Computers and Computer Technology Rick Graziani Spring 2015.
1 Perception, Illusion and VR HNRS 299, Spring 2008 Lecture 14 Introduction to Computer Graphics.
Data Representation CS280 – 09/13/05. Binary (from a Hacker’s dictionary) A base-2 numbering system with only two digits, 0 and 1, which is perfectly.
© 1999 Rochester Institute of Technology Introduction to Digital Imaging.
HTML presentation Graphics H format H data compression H size H creating or finding H publishing.
Images The Science of Images What is an Image on the computer? The Psychology of Images What do we use images for? What effect color has on our mood and.
Multimedia in Web Images. A Picture Tells A Thousand Words Forms of Images Photograph Painting Symbol Logo Flag Map Diagram Functions Provide facts Explain.
Common file formats  Lesson Objective: Understanding common file formats and their differences.  Learning Outcome:  Describe the type of files which.
1 Ethics of Computing MONT 113G, Spring 2012 Session 10 HTML Tables Graphics on the Web.
Introduction to Interactive Media 03: The Nature of Digital Media.
Image formats. Basic terminologies… Pixels: Pixels are the building blocks of every digital image. a pixel is a single point in a graphic image. Resolutions:
Image Representation. Digital Cameras Scanned Film & Photographs Digitized TV Signals Computer Graphics Radar & Sonar Medical Imaging Devices (X-Ray,
Graphics An image is made up of tiny dots called pixels (“picture elements”) The resolution determines the.
1 COMS 161 Introduction to Computing Title: The Digital Domain Date: September 6, 2004 Lecture Number: 6.
Chapter 1 Data Storage © 2007 Pearson Addison-Wesley. All rights reserved.
Data Representation Robin Burke IT 130. Outline Data Representation Binary Numbers Image types.
Lecture 7: Intro to Computer Graphics. Remember…… DIGITAL - Digital means discrete. DIGITAL - Digital means discrete. Digital representation is comprised.
Color and Images. Color The natural colors we see and the colors we see on computer monitors are different. CMYK -natural RGB -monitor.
Mirjana Devetakovic, M.Sc. CAAD - Images Beograd, 2011.
File Types. Terms Multimedia- the integration of text, sound, video and/or animation into a document Letters, brochures, newsletters, web pages or presentations.
 By Bob “The Bird” Fiske & Anita “The Snail” Cost.
Image File Formats. What is an Image File Format? Image file formats are standard way of organizing and storing of image files. Image files are composed.
Chapter 1 Data Storage © 2007 Pearson Addison-Wesley. All rights reserved.
HTTP transaction with Graphics HTML file + two graphics files.
TOPIC 4 INTRODUCTION TO MEDIA COMPUTATION: DIGITAL PICTURES Notes adapted from Introduction to Computing and Programming with Java: A Multimedia Approach.
Graphics and Image Data Representations 1. Q1 How images are represented in a computer system? 2.
Information in Computers. Remember Computers Execute algorithms Need to be told what to do And to whom to do it.
Software Design and Development Storing Data Part 2 Text, sound and video Computing Science.
Everything is a number Everything in a computer memory and on storages is a number. Number  Number Characters  Number by ASCII code Sounds  Number.
Sampling, Quantization, Color Models & Indexed Color
Binary Representation in Audio and Images
Computer Science Higher
How to Convert Pictures into Numbers
Chapter 3 Graphics and Image Data Representations
Digital Image Formation
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
Representing Images 2.6 – Data Representation.
Chapter 2 Data Representation.
Multimedia System Image
Basic Concepts of Digital Imaging
Presentation transcript:

Communicating Quantitative Information Is a picture worth 1000 words? Digital images. Number bases Standards, Compression Will [your] images last? Homework: (Post project proposal). Work on Project. Postings. Vote on Election Day.

Digital images Basic encoding –Is a picture worth 1000 words? Standards –bmp, gif, jpg Preservation issue –will the files last on storage medium –will there be appropriate software to display and manipulate the image

Basic encoding Divide image into picture elements (pixels) For each pixel (cell in the grid), record color –Different color spaces: palette-based RGB (redness, greenness, blueness) YUV (Y=brightness, U and V together are hue and saturation) other

Digital cameras marketing More pixels (increased resolution) means that pictures can be 'blown up' more without showing pixelations If you are NOT planning to make poster size pictures, you don't need more than 3megalpel? 5 megalpel? cameras now competing on features like modes

Palette based Think of painter's palette Can only use those colors If no match: –painter mixes up something (creates a new color on palette) –computer software dithers produces spots of different colors that, hopefully, our eyes mix together to see desired color.

The software constructs palette when saving this image using a format with limited palette

Image file Simple bit mapped, palette –(may include the palette, with general representation of the colors) –string of numbers, one for each pixel, indicating how that pixel is to be painted

Contrast Painter (in smock) starts with palette Computer software (PhotoShop, Paint Shop Pro, etc. doing conversions) can construct the best palette for a given photo

Encoding Image file is all numbers!! Actually, all bits (sequences of 1s and 0s) Suppose, palette is black and white –0 could stand for white –1 could stand for black Suppose, palette holds 4 colors –00, 01, 10, 11 represent 4 distinct colors Suppose, palette holds 256 colors – , , … There are 256 distinct patterns of 8 1s and 0s.

Quick exercise How many different patterns can be made using 0s and 1s, 3 bits long? Make a list 000

General formula Space N bits can hold 2 N distinct patterns 1 bit can hold 2 distinct patterns (represent 2 colors) bits can hold 4 distinct patterns (represent 4 colors) bits can hold 8 distinct patterns bits can hold 2 8

Image [file] size Say image is 300 by 400 pixels (300 wide, 400 high) Each pixel is 8 bits (so the picture can have 256 colors—not especially big) Say there is no compression (will get to this later) Size is 300 * 400 * 8 bits – bits

1000 words (Plain text file, not Word document) How big is a word? Assume it averages out to 6 letters. How many bits does a letter require? –In the standard encoding, 8 bits words occupies 1000* 6 * 8 = bits

Is a picture worth 1000 words? Answer: it better because it costs/takes considerably more space. compression reduces image sizes, but only so much

What is a K? Kilobyte of data –Byte is 8 bits of information: a piece of memory holding 8 slots, each a 1 or a 0. Kilo –Sometimes means 1000 –Sometimes means 1024 (2 raised to the 10 th power = 2*2*2*2*2*2*2*2*2*2

For purple hat

Compression 519 * 653 * 200 is This is roughly 100 times either 677 * 1000 is * 1024 is So… purple hat image is compressed (encoded) to take advantage of similar line sections of color. The gif format does this.

Digital camera Uses a (large) palette Records a number for what will be each pixel There may be settings for color depth (amount of bits ~ numbers of colors) and resolution (size of pixel)

Standards (briefly) gif: uses common strings, so repeated patterns do get compressed –compression is lossless. Can restore full detail. –restricted to 256 colors –Good for line art jpg: uses common areas, but in a different color space and a different way (approximates changes in 8 by 8 blocks). For example, detects common levels of brightness. –compression is lossy. Cannot restore full detail. –can hold millions of colors: 8 bits for each of YUV. –Good for photographs

Number bases Refresher: we use the decimal system: base 10 –10 distinct symbols: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 –Base system first column on the left is the ones/unit place (10 0 ) second column starting from the left is the 10s place (10 1 ) third column is the 100 th place (10 2 ) and so on…

Base 2 Binary number system –have 2 symbols: 0 and 1. These are called bits! –Base system first column on the left is the ones/unit place (2 0 ) second column is the 2-place (2 1 ) third column is the 4-place (2 2 ) and so on Fewer symbols (simpler circuitry), longer strings of symbols needed

Warning bit is either a 0 or a 1. Abbreviation b byte is 8 bits. Abbreviation B k may mean 1000 or 1024 (a power of 2) Mega-bit, Mega-byte, Mega-pel bits, bytes or pixels… Gigabyte:

Base 16 Hexadecimal – 16 symbols: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. –first column is the 1s place –second column is the 16 th place –third column is the 256 th place –and so on.

Exercise Write your age in –decimal –binary –hexadecimal How many 16s are there (probably just 1)? What is left over?

Use of Hexadecimal RGB colors –Each of red, green, blue is allocated 8 bits takes up 2 hexadecimal digits (bad term) –Deep red is FF0000 –Deep blue is 0000FF –white is FFFFFF –black is

Will digital images last Depends on storage medium. Hard disks can fail. CDs and DVDs can get damaged. Memory sticks fairly robust, but ends can get damaged (and they can get lost) software: Need software that 'knows' the standard used for the picture –Software for display, manipulation, printing

Sound Sound files also come in different formats. –wav (different parameters) –mpeg –ogg Browsers recognize different formats Same issue regarding archiving –Storage needs to remain –Software to manipulate and play needs to be available New formats still under development.

HTML5 fragment hithard.ogg hithard.mp3

Video Video (animation) is sequence of still images shown in rapid succession. LARGE data files Compression possible per frame and from frame to frame. Multiple compression schemes exist and still others under development.

HTML5 fragment sfire3.mp4 sfire3.theora.ogv sfire3.webmvp8.webm Your browser does not accept the video tag.

Homework Project I Postings –Posting topic: problems in archiving digital images –Old issue: major patent dispute concerning gif