Web Graphics By Chris Harding. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF.

Slides:

Advertisements

Similar presentations

Introduction to Computer Graphics Raster Vs. Vector COMMUNICATION TECHNOLOGY.

Advertisements

Unit 30- Digital Graphics THEORY P2 and D2

CS 128/ES Lecture 7a1 Data – How (Much of) It Is Stored.

Sound and Sight Audio and Image Editing Basics C. Candace Chou University of St. Thomas.

1 Introducing Macromedia Flash MX – Lesson 1 Flash MX adds content and animation to Web pages Flash MX movies use vector graphics to reduce size and download.

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.

Ann Ware Digital Imaging 101. Digital Image Categories BITMAPVECTOR A bitmap is an image created with pixels (small squares of color) The number of pixels.

Graphic File Formats. Objectives Understand the difference between two major categories of computer graphic images Investigate the differences between.

Image Compression CSC CSC Computing with Images2 How do we use fewer bytes to encode the same or similar information? Reduce redundancy Take.

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.

Introduction to Computer Graphics Raster Vs. Vector TGJ 2OI St. Christopher C.S.S. 4 Introduction to Computer Graphics.ppt.

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

Comparison of image compression algorithms ECE-533 Paula Aguilera.

Dr Jimmy Lam CAD for Fashion and Textiles

Graphic Images 101. Painted on a grid Drawn mathematically.

Zinnia Bell. RAWimages are image files that have not yet processed, they contain minimally processed data from the image sensor of either a image scanner,

Graphics Ms. Brewer Spring Bellwork Edmodo – log on! Quiz? Take it if you need to! Policies and Procedures Powerpoint in Shared Folder! Get to Know.

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.

Web Graphics Image File Formats Image optimization Accessibility issues Using images and colors on the web.

File Formats About graphic file formats And image compression.

All About File Formats Mr. Butler John Jay High School Department of Technology.

SOFTWARE TYPES Word processing Page layout Paint Draw.

THE THEORY & CONCEPTS Lesson 1 – Part 1. What is Graphic Design It’s a CREATIVE PROCESS Undertaken in order to convey a specific message/s I can’t teach.

Common file formats  Lesson Objective: Understanding common file formats and their differences.  Learning Outcome:  Describe the type of files which.

Data Compression. Compression? Compression refers to the ways in which the amount of data needed to store an image or other file can be reduced. This.

Digital Image Formats: An Explanation Guilford County SciVis V

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

10 | Graphics COM 366 Web Design & Production. Native file format –Format native to software program –psd > PhotoShop default Preserves layers –Use “Save.

File Formats and Vector Graphics. File Types Images and data are stored in files. Each software application uses different native file types and file.

Multimedia File FormatsGraphics JPG, GIF, TIF, PSD, WMF, BMP, PNG, RAW.

Image Compression CSC CSC Computing with Images2 Image Compression Goal: reduce redundancy –Encode the same information using fewer bits.

Digital Imaging 101 Ann Ware. Digital Image Categories BITMAP  A vector is created by using a series of mathematically defined lines and curves rather.

Digital Imaging 101 Ann Ware

Chapter 3 Image Files © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,

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

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.

Color and Images. Color The natural colors we see and the colors we see on computer monitors are different. ______ -natural ______ -monitor.

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.

Graphics Concepts Presentation

Introduction to Images & Graphics JMA260. Objectives Images introduction Photoshop.

Digital File Formats By Ali Aslam. JPEG JPEG Stands for Joint Photographic Experts Group. JPEG uses a lossy compression routine. Lossy compression means.

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

Graphics Theory. Learning Objectives Learn about use of graphics & their importance Identify what makes a good graphic & why Recognise different graphic.

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.

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

Digital Image Formats: An Explanation Guilford County SciVis V

13 June – Session : Graphics Different types of Graphics for the web Features of image editing software Good practice for image editing.

Efficient Game Graphics From Flash MX 2004 Game Design Demystified.

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

Digital Imaging 101 Ann Ware.

Chapter 3 Image Files © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,

Web Graphics By Chris Harding.

Sci Vis I Exam Review Unit 6 File Formats.

JPG vs GIF vs PNG What is the difference?

Chapter 3 Image Files © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.

"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.

A computer display is made up of small squares, called pixels.

Image File Size and File Compression

Digital Image Formats: An Explanation

1.01 Investigate graphic types and file formats.

ИНФОРМАТИКА И РАЧУНАРСТВО Наставна тема: РАЧУНАРСКА ГРАФИКА

Creating Digital Graphics

Presentation transcript:

Web Graphics By Chris Harding

Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF

Software  Fireworks (Part of Macromedia Suite)  Photoshop  Paint Shop Pro  Microsoft Paint

Web Graphics  Should be kept small. Around 100K mark  Large graphics take time to download  Lots of small graphics can make a sight look good  But cause long page loading times

Types of Web Graphics  BMP  PNG  JPEG  GIF

Vector Graphics/Pixel  Vector:  Mathematical formula  Smooth edges  Bitmap/Rasterised:  Pixelated

Transparent Image  Can be JPEG or GIF  Best done with GIF  Can select one colour to be transparent or background  Best results make Background one colour (like pink!)  Select background for transparent layer

Compression  Compacting information  Lossless  Lossy  Lossless  All information retained  Lossy  Information is lost

Compression: Lossless (1/3)  Selected information is retained  Example:  aabbbccdddddee  2a3b2c5d2e

Compression: Lossless (2/3)  PSD: 6.9 MB  BMP: 1.37 MB

Compression: Lossless (3/3)  GIF: 86KB

Compression: Lossy (1/2)  Image information  Entropy – data kept  Redundancy – data removed

Compression: Lossy (2/2)  Original: 453KB ● JPEG: 4KB

Compression Methods  RLE (Run Length Encoding)  Lossless: common Windows file formats.  LZW (Lemple-Zif-Welch)  Lossless: TIFF, PDF, GIF, and PostScript.  Most useful for large areas of single color.  JPEG (Joint Photographic Experts Group)  Lossy: JPEG, TIFF, PDF and PostScript.  Continuous-tone images ie photographs  ZIP  Lossless: PDF and TIFF.  Most effective for large areas of single color.

File>Save as... what?! (1/2) Original 2.9 MBs JPEG 275 KBs GIF 161KBs

File>Save as... what?! (2/2) Original 372 KBs JPEG 13 KBs GIF 7KBs

Animated GIF  Number of different frames  Saved in one file (can be very large)  Play once or looped

Animated GIF  Made up of 7 frames  4 frames below  Looped file

Web Graphics with CSS  Use CSS with images to create visual effects Add round border to tables Roll over images Menu items  Practical tutorial on this topic next week

Summary  Software  Vector Graphics and Pixel Based  Compression Lossless Lossy  GIF vs. JPEG for different uses  Introduce Animated GIF