David Lash DePaul University SNL 262 Web Page Design Notes on gifs.

Slides:



Advertisements
Similar presentations
Web Graphics.
Advertisements

Web Design Vocab 3 PNG, JPG, GIF, MP3, MPEG.
1 Custom Background And Colors Text Formatting and Font Control Using Images Using HTML and JavaScript to Develop Websites.
Images.
AdvWeb-1/12 DePaul University SNL 262 Web Page Design Chapt 10 - Putting Graphics on A Web Page Instructor: David A. Lash.
Guilford County SciVis V106.01
V Obtained from a Guildford County workshop-Summer, 2014.
Welcome to a New Quarter Class Rules and Responsibilities What will be learning? 106-Static and Dynamic Visualization 105-Synthesize Data for SciVis Video-Real.
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
Scanning and Graphics Workshop I Graphics for the Web, Scanning and Introduction to Photoshop.
HYPERTEXT MARKUP LANGUAGE (HTML)
JRN 302: Introduction to Graphics and Visual Communication - File formats, conversion Tuesday, 8/4/15.
BASIC HTML TUTORIAL Amber Brady. HTML tags are keywords surrounded by angle brackets like HTML tags normally come in pairs like and The first tag in a.
Media File Formats Jon Ivins, DMU. Text Files n Two types n 1. Plain text (unformatted) u ASCII Character set is most common u 7 bits are used u This.
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.
1 Ethics of Computing MONT 113G, Spring 2012 Session 11 Graphics on the Web Limits of Computer Science.
Faculty of Sciences and Social Sciences HOPE Website Development Graphics Stewart Blakeway FML 213
File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.
Graphics/Image Data Types
All About File Formats Mr. Butler John Jay High School Department of Technology.
XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement or add additional impact to your message.
1 Perception, Illusion and VR HNRS 299, Spring 2008 Lecture 14 Introduction to Computer Graphics.
Photoshop Software Rasterized, file formats, and printing choices.
2.02G Publishing Animated Videos 2.02 Develop Computer Animations.
1 Lesson 3 Power Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.
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 Web Developer Foundations: Using XHTML Chapter 4 Key Concepts.
Files, File Format Folders Paths, URL Absolute Addresses Relative Addresses © Ms. Masihi.
1 Ethics of Computing MONT 113G, Spring 2012 Session 10 HTML Tables Graphics on the Web.
Images 01/29/04 Resources: Yale Web Style Guide The GIF Controversy Unisys - lzw.
+ 5 Things you need to know about images* *Images for the web.
1 Using HTML and JavaScript to Develop Websites. Using Images.
CHAPTER 4 : MULTIMEDIA DEVELOPMENT 4.2 MULTIMEDIA ELEMENTS IMAGE/graphic/picture.
File Format. Graphics file Format GIF (Graphics Interchange Format) JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics) TIFF (Tag.
File Formats and Vector Graphics. File Types Images and data are stored in files. Each software application uses different native file types and file.
Module 4- Build a Game Look at Me Mod 4 Lesson 3 Graphics.
Graphics & Images What File Format Do I Use?. Graphics & Images …..are visual images presented on some form of media (drawings, print, web, digital video)
Chapter 3 Image Files © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,
Data Representation Robin Burke IT 130. Outline Data Representation Binary Numbers Image types.
Color and Images. Color The natural colors we see and the colors we see on computer monitors are different. CMYK -natural RGB -monitor.
Things to Remember When working with digital images.
Adding Images. XHTML Element ElementAttributeAttribute Value Closing tag AttributeAttribute Value The src attribute supplies the name and location of.
Module 4- Build a Game Understanding Pictures Compression – Making things smaller.
Project Two Adding Web Pages, Links, and Images Define and set a home page Add pages to a Web site Describe Dreamweaver's image accessibility features.
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.
File Types. Terms Multimedia- the integration of text, sound, video and/or animation into a document Letters, brochures, newsletters, web pages or presentations.
Graphic definitions Summary of Chapter 10 of the Non-designer’s web book by Robin Williams and John Tollet. Pages ( ) Miss Mary Victor.
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.
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.
HTTP transaction with Graphics HTML file + two graphics files.
GIF vs. JPEG GIF and JPEG (JPG) image formats are different. You should know which to use when. Here are some examples.
Module 4- Build a Game Look at Me Mod 4 Lesson 3 Graphics.
Web Graphics & Optimization
Web Development A Visual-Spatial Approach
JPG vs GIF vs PNG What is the difference?
A computer display is made up of small squares, called pixels.
Look at Me Mod 4 Lesson 3 Graphics Module 4- Build a Game.
Saving your Animations
Web Design and Development
Photoshop: Creating and Preparing Images for the Web
COMS 161 Introduction to Computing
COMS 161 Introduction to Computing
COMS 161 Introduction to Computing
Color and Images.
Exam Objectives: Identify Design Elements When Preparing Images
Presentation transcript:

David Lash DePaul University SNL 262 Web Page Design Notes on gifs

David Lash 2 How the gif controversy happened zIn 1983 an IEEE paper presented a compression algorithm call LWZ (lempel Ziv Welch). yCompression algorithms at the time valuable for transferring networking data yFrom what I understand, paper did not say their method was patented. zIn CompuServe announced a format to digitize an image called GIF (grafical Interchange Format). yIt used LWZ algorithm but apparently CompuServe did not know about patent zJust a little later Mosaic browser (by UofI Graduate student Marc Ansderson who later founded Netscape) built into it capability to display gif images yFormat became very popular zAround 1995, Unisys started enforcing it patent rights yOften to the surprise of Web Administrators. yLarge sites had to pay hefty royalties, yPeople wrote “hacks” to disable the compression yImages were pulled off. zJuly 2003 LWZ patent expired in US.

David Lash 3 What is digital image? zA format for encoding a way to represent a picture using RGB color format yEach pixel to display needs to have a RGB value yLess colors you display the smaller the image x(since can compress the image more) zGif format specification allows you to describe more than 1 image yThere is a delay to show each image giving an animation effect. (but no sound) yWant to know how to create animated gifs? xTry this site:

David Lash 4 What is digital image? zA format for encoding a way to represent a picture using RGB color format yEach pixel to display needs to have a RGB value yLess colors you display the smaller the image x(since can compress the image more) zGif format specification allows you to discribe more than 1 image yThere is a delay to show each image giving an animation effect. (but no sound)

David Lash 5 How Does Compression Work? zLWZ is a dictionary based system of compression zSuppose you are compressing the following statement: ask not what your country can do for you ask what you can do for your country zYou might build a dictionary that looks like: 1.ask 2.what 3.your 4.country 5.can 6.do 7.for 8.you zYou might therefore encode our sentence as: 1 not zA program can be written to translate to and from that format. zCompression method look for even more patterns and build dictionaries to compress smaller

David Lash 6 Which to use gif or jpg? zTypically might look at image in both formats to see best for your site zTake a look at this site jpggifs High-quality images with lots of colorsUsed for logos, ads with uniform colors > 16 million colorsUp to 256 colors No transparencies or animationTransparencies and annimation