Images.

Slides:



Advertisements
Similar presentations
The Web Wizards Guide to HTML Chapter Five Working with Images.
Advertisements

Raster Graphics 2.01 Investigate graphic image design.
Graphics on the Web. Common Image File Types As you may know, the most widely supported web image graphic formats are GIF and JPEG. So the question is.
Web Design Vocab 3 PNG, JPG, GIF, MP3, MPEG.
Image Data Representations and Standards
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,
DECO1001: Optimising for the Web Format Colour File Size.
2.01 Understand Digital Raster Graphics
Graphics in the web Digital Media: Communication and Design
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.
Data starts with width and height of image Then an array of pixel values (colors) The number of elements in this array is width times height Colors can.
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,
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)
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.
Chapter 3 Graphics and Image Data Representations
Graphics/Image Data Types
Digital Image: Representation & Processing (2/2) Lecture-3
Bit-Mapped Graphic Data: Input (Capture) Hardware Multimedia – Section 2.
Web Image Basics Comp 140 December 2. Vector Graphics Can be repositioned or resized – Will not diminish output quality Typically stored in AI, EPS, PICT.
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.
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.
Computer Images Can store color info about each pixel, but makes file BIG Compression for Web 15.
Graphics workshop Library and Information Services University of St Andrews.
10 | Graphics COM 366 Web Design & Production. Native file format –Format native to software program –psd > PhotoShop default Preserves layers –Use “Save.
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.
File Formats and Vector Graphics. File Types Images and data are stored in files. Each software application uses different native file types and file.
Types of Graphics  Vector Individual scalable objects defined by mathematical equations  Bitmap Pixels (tiny, single-colored square) in a grid Most.
Multimedia Basics (1) Hongli Luo CEIT, IPFW. Topics r Image data type r Color Model : m RGB, CMY, CMYK, YUV, YIQ, YCbCr r Analog Video – NTSC, PAL r Digital.
Multimedia. What is a graphic?  A graphic can be a: Chart Drawing Painting Photograph Logo Navigation button Diagram.
Things to Remember When working with digital images.
Images. Digital Images Rectangular arrays of pixel data Pixel - picture element, smallest addressable part of the frame buffer. Color depth - the depth.
FILE TYPES FOR WEB DESIGN 1 HOW SHOULD I SAVE?. GRAPHICS INTERCHANGE FORMAT (GIF) Best used for flat-color, sharp-edged art or text Clip art, logos Compression.
Raster Graphics 2.01 Investigate graphic image design.
Digital Images are represented by manipulating this…
_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition1  Wiley and the.
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.
Web Page Design Mrs. Ricke. Graphics Interchange Format 256 colors only Good for icons, clipart, logos Not good for high quality pictures.
Digital File Formats By Ali Aslam. JPEG JPEG Stands for Joint Photographic Experts Group. JPEG uses a lossy compression routine. Lossy compression means.
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.
HTTP transaction with Graphics HTML file + two graphics files.
Photoshop Basics: Extended Instructor: Vicki Weidler Assistant: Joaquin Obieta.
Graphics and Image Data Representations 1. Q1 How images are represented in a computer system? 2.
CHAPTER 21: IMAGES. IMAGE SOURCES 3 options: Create your own images Find images Hire someone to make images.
© 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
2.01 Understand Digital Raster Graphics
Introduction to raster graphics
Digital Photo editing with Photoshop
Photo Editing for PowerPoint & the Web
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
2.01 Investigate graphic image design.
Raster Images CPSC 1030.
Choosing the right image format
2D Drawing Basics 1.
Photo Editing for PowerPoint & the Web
Saving Images from Fireworks
1.01 Investigate graphic types and file formats.
2.01 Understand Digital Raster Graphics
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
Web Programming– UFCFB Lecture 7
2.01 Investigate graphic image design.
2.01 Investigate graphic image design.
Presentation transcript:

Images

GIF 256 total colors Doesn't work well for highly detailed images Photographs look grainy Indexed color map Array where each slot holds an RGB color Each pixel of image points to a slot Images

GIF Dithering Adaptive palette Reducing colors in an image by creating patterns of available colors that, when viewed together, resemble the original color Black-and-white checkerboard resembles gray Adaptive palette Weights colors in the palette based on frequency Images

GIF 8 bits - 19K 7 bits - 15K 5 bits - 9K 3 bits - 5K Images

GIF Transparent GIF GIF89a Normal GIF Images

GIF GIF interlacing Saves GIF image in several passes Every eighth row starting from the first Pass 2 Every eighth row starting from the fourth Pass 3 Every fourth row starting from the third Pass 4 Remaining rows Display is in same order Missing lines might be information of initial lines Blocky effect Images

JPEG Can store any number of colors Lossy Works well for photographic images Doesn't work well for line art and images with large blocks of color Images

Excellent Compression Excellent Image Quality JPEG GIF - 3K JPEG - 6K Excellent Compression Fair Image Quality JPEG - 19K Good Compression Good Image Quality JPEG - 60K Fair Compression Excellent Image Quality Images

Excellent Compression Excellent Image Quality JPEG JPEG - 4K Excellent Compression Fair Image Quality GIF - 26K JPEG - 12K Good Compression Good Image Quality JPEG - 21K Fair Compression Excellent Image Quality Images

JPEG Progressive JPEG Low to high resolution Images

PNG Portable Network Graphics format Not patented 24-bit color support Platform independence Capability for interlacing and transparency Color maps Images

PNG Compression which works equally well for photographs and logos Header information stored along with image Advanced editing capabilities Images