binary recap color images
Download
Skip this Video
Download Presentation
Binary Recap Color & Images

Loading in 2 Seconds...

play fullscreen
1 / 18

Binary Recap Color & Images - PowerPoint PPT Presentation


  • 92 Views
  • Uploaded on

CS110: Computer Science and the Internet. Binary Recap Color & Images. Homework 2 http :// cs.wellesley.edu /~cs110/assignments/ assignmentPageLayout / index.shtml Clarification Project http:// cs.wellesley.edu /~cs110/students/ accounts.html. Binary is Magic!. ASCII code.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Binary Recap Color & Images' - maina


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide2

Homework 2

http://cs.wellesley.edu/~cs110/assignments/assignmentPageLayout/index.shtml

  • Clarification
  • Project
  • http://cs.wellesley.edu/~cs110/students/accounts.html
ascii code
ASCII code

ASCII code allows 256 “characters” to be represented

UTF-8 encodes more than 1 million characters from the Unicode character set

Line-endings

slide6

Standard Colors

All standards-compliant browsers should handle these color names

These color names can be used with the CSS properties of color and background-color:

For other colors, it’s safest to use a numericalrepresentation…

slide7

RGB Color

Human retina: 3 kinds of color-sensitive photoreceptors, traditionally called red, green, and blue cones

Visible colors can be created by adding different amounts of the three primary colors, red, green, and blue

Color monitors display colors by adding different amounts of red, green, and blue light

RGB color components are usually defined on a scale from 0 to 255

Over 16 million colors can be represented this way!

Two ways to specify turquoise using rgb in CSS:

color: rgb(64,224,208);

color: rgb(25%,88%,82%);

Try this game:

http://www.scottkim.com/newmedia/colormergb.html

slide8

Hexadecimal Notation

Numbers in the range 0-255 are represented in base 16, using two “digits” that each have 16 possible values, drawn from 0..9, A..F

decimal

hexadecimal

  • Converting decimal to hexadecimal:
  • Left digit: divide by 16, convert quotient to 0..9,A..F
  • Right digit: convert remainder to 0..9,A..F
  • Converting hexadecimal to decimal:
  • Convert left digit to 0..15, multiply by 16
  • Convert right digit to 0..15, add to (1)
  • Example: A716 16710
  • A16 is 1010, 10*16 = 160
  • 716 = 710 160+7 = 167
  • Example: 20110 C916
  • 201/16 = 1210 C16
  • remainder is 910 916
slide10

Hexadecimal Colors

# 94 00 D3

RGB

Using hexadecimal colors in CSS:

blockquote {

color: #9400D3;

background-color: #E6E6FA;

}

slide11

Is there a website we can use to input color codes and see what they are?

  • http://html-color-codes.info
digital images

38 pixels high

44 pixels wide

Digital Images

Images are often represented in a computer as a 2-dimensional (2D) array of pixels

slide13

Image Representation

RGB color for each pixel is stored in 24 bits (3 bytes)

How much memory is needed to store a 300x500 pixel image?

  • Problem: large image files can take a long time to download!
  • Example: On a 300 kbps (300k bits per second) cable modem, a 450 kB image takes about 12 seconds to download
  • Solutions:
  • Downsampleimages to make them smaller (fewer pixels)
  • Compress the images, using “lossless” compression (no information is lost) or “lossy” compression (less important information is lost) techniques
slide15

Indexed Color

image

image contents

color palette

  • How large is a file that stores a 300x500 pixel indexed color image with 4 colors, and its color palette?
  • 300x500 pixels, with 2 bits per pixel (why?)
  • 300 x 500 x 2 = 300,000 bits
  • (2) 4 colors, with 24 bits per color
  • 4 x 24 = 96 bits
  •  ~37.5kB (compared to the 450kB uncompressed file!)

2 bits per pixel

24 bits per color

slide16

Indexed Color

  • How large is a file that stores a 300x500 pixel indexed color image with 16 colors, and its color palette?
  • What is the number of bits used to store the image pixels?
  • (2) What is the number of bits used to store the color palette?
  • Total file size (in bytes):

“bits per pixel” is also called the “bit depth”

bit depth must be large enough to store all the colors

slide17

GIF Indexed Color

The GIF file format is an indexed color format that allows 256 colors (out of a possible 16 million colors!)

  • Computing the file size for a GIF image, in bytes:
  • number of bytes to store the image pixels:
  • (width * height * bit-depth) / 8
  • (2) number of bytes to store the color palette: num_colors * 3
  • (3) total number of bytes*:
  • (width * height * bit-depth) / 8 + 3 * num_colors
  • (4) divide by 1,000 or 1,000,000 to convert to kilobytes or megabytes
slide18

Other Image Formats

JPEG: wellesley.jpg

- millions of colors, compressed, nice for photos, does not allow transparency

PNG: cs110-logo.png

- millions of colors, compressed, nice for line art and graphics, allows 8-bit transparency

GIF: palette.gif

- limited to 256 colors, nice for line art and graphics, allows 1-bit transparency, supports animation

Generate all formats and compare with Pixlr!

ad