Graphics on the Web CS575 Spring 2006 Dr.Abbot Student: Andre Liv.

Slides:

Advertisements

Similar presentations

Raster Graphics 2.01 Investigate graphic image design.

Advertisements

Multimedia for the Web: Creating Digital Excitement Multimedia Element -- Graphics.

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.

Nice Calm Scene. (You’ll need it.). Skills Getting files off of the camera or scanner Getting files off of the camera or scanner Archiving Archiving Choosing.

SVG Scalable Vector Graphics. What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines.

WHAT IS SVG?. SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines the graphics in XML format SVG.

Graphics in the web Digital Media: Communication and Design

Image Representation CS105. Data Representation Text representation – ASCII character set – Unicode – Data compression Images!

Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler ITS Training Services 224 B Computer Building University Park, PA 16802

Manipulating Images Image A visual representation of something that is seen in real life. It can be two-dimensional or three-dimensional A visual representation.

File Types, Sizes & Dots Per Inch (dpi) Best practices applied to Photoshop file formats when creating media-specific documents. Bit Depth is the number.

Dr Jimmy Lam CAD for Fashion and Textiles

Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative.

GRAPHICS/IMAGES INFSCI Source: Learning Web Design by Jennifer Niederst RobbinsJennifer Niederst Robbins Creating Images:  Scanning  Be aware.

File Formats About graphic file formats And image compression.

HTML Boot Camp: Rules and Images

THE COLORS OF LIGHT RED, GREEN and BLUE

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.

Digital Image: Representation & Processing (2/2) Lecture-3

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.

1 Ethics of Computing MONT 113G, Spring 2012 Session 10 HTML Tables Graphics on the Web.

SVG – Scaleable Vector Graphics DBI – Representation and Management of Data on the Internet.

Information Processes and Technology Multimedia: Graphics.

Computer Images Can store color info about each pixel, but makes file BIG Compression for Web 15.

Lecture 16 Image Document Formats. Bitmap vs. Vector Images Bitmaps do not generally.

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.

Web graphics Discussion Session August 16, 2000 Discussion Session August 16, 2000.

2D Graphics Theory & Principles. Single Point Smallest addressable area on screen or digital image.

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.

Things to Remember When working with digital images.

Image formats Characteristics © Adolf Knoll, National Library of the Czech Republic.

Using the Sony DSC-P52 Camera Sunday, December 06, 2015.

Images. Digital Images Rectangular arrays of pixel data Pixel - picture element, smallest addressable part of the frame buffer. Color depth - the depth.

Mirjana Devetakovic, M.Sc. CAAD - Images Beograd, 2011.

Raster Graphics 2.01 Investigate graphic image design.

Digital Images are represented by manipulating this…

Graphics Concepts Presentation

WWW, Web Design, Multimedia Winny Wang Image Types.

Digital Image Editing Presented by John Hohn. File Formats JPEG – Joint Photographic Experts Group PNP – Portable Network Graphics GIF – Graphic Interchange.

Digital Graphics for Computer Games Pixels Types of Digital Graphics (Raster and Vector) Compression.

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.

Image File Formats Harrow Computer Club – Wed, 1 Dec 2010 Bob Watson MA CMath MIMA MBCS.

Photoshop Basics: Extended Instructor: Vicki Weidler Assistant: Joaquin Obieta.

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.

Computer Graphics Lesson 2 July 12, 2005 Image Formats What are some formats you are familiar with? There are 4 basic image format types: Uncompressed.

2.01 Understand Digital Raster Graphics

File Formats Different applications (programs) store data in different formats. Applications support some file formats and not others. Open…, Save…, Save.

Common Bitmap Image File Types

2.01 Understand Digital Raster Graphics

2.01 Understand Digital Raster Graphics

Scalable vector graphics

Sci Vis I Exam Review Unit 6 File Formats.

2.01 Investigate graphic image design.

Raster Images CPSC 1030.

Image File Size and File Compression

1.01 Investigate graphic types and file formats.

Web Design and Development

2.01 Understand Digital Raster Graphics

2.01 Investigate graphic image design.

Graphic File Format Skill Area

2.01 Understand Digital Raster Graphics

2.01 Investigate graphic image design.

Introduction to Image Analysis and Processing

2.01 Investigate graphic image design.

Presentation transcript:

Graphics on the Web CS575 Spring 2006 Dr.Abbot Student: Andre Liv

Graphics Electronic images/pictures made up of thousands of tiny colored dots called "pixels."

Color "depth" Pixels 1 bit – Black & white (0 or 255) 8 bit – Color or Gray Scale 24 bits – RGB (8 bits/color) Most browsers displays 256 colors

Web formats JPEG GIF PNG SVG WebCGM And more (tiff, bmp, ppm ….)

Which format? Quality Size Type of graphics

Examples

JPEG Joint Photographic Experts Group – 16,777,215 colors – photographic images – Transparency none – Lossy / lossless compression – 1990, Eric Hamilton – ISO/CCITT

Compression method DCT for “lossy’’ compression Predictive for “lossless’’ compression

DCT Encoder

DCT Decoder

Predictive method

GIF Graphics Interchange Format – Bob Berry and team at Compuserve – 1987, updated in 1989 – images with fewer, flatter colors (256 colors) – Transparency (one color may optionally be 100% transparent) – Interlaced GIF – Lossless compression (LZW)

GIF Spec

Continued..

PNG Same as GIF but Alpha channel Gamma correction 2 dimensional Interlacing capabilities Compress better than GIF Use Huffman coding Supported by new Web Browsers only

SVG Scalable Vector Graphics vector-based graphics for the Web applications in XML text-based graphics language high-quality graphics on the Web (animation)

Advantages of SVG SVG files can be read and modified by a large range of tools (e.g. notepad) SVG files are smaller and more compressible than JPEG and GIF images SVG images are scalable SVG images can be printed with high quality at any resolution SVG images are zoomable. Any part of the image can be zoomed without degradation Text in SVG is selectable and searchable (excellent for making maps) SVG works with Java technology SVG is an open standard SVG files are pure XML

SVG file

Simple Animated SVG <rect fill="#AFBCC7" stroke="#646464" stroke-width="5px" x="100px" y="100px" width="100px" height="100px"> <animateTransform attributeType="XML" attributeName="transform" type="rotate" from="0,150,150" to="360,150,150" begin="0s" dur="5s" repeatCount="indefinite"/>

GIF 89a Same features as GIF 87a Support multiple images

WEB 3D?