+ 5 Things you need to know about images* *Images for the web.

Slides:

Advertisements

Similar presentations

Introduction to Computer Graphics Raster Vs. Vector COMMUNICATION TECHNOLOGY.

Advertisements

Web Design Vocab 3 PNG, JPG, GIF, MP3, MPEG.

Iframes & Images Using HTML.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.

Image characteristics

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.

Graphics in the web Digital Media: Communication and Design

Introduction to Computer Graphics

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.

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

Working with Images John Frost Director of Education.

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.

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.

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)

File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.

Module Code: CU0001NI Technical Information on Digital Images Week -2.

Lecture 4 - Introduction to Computer Graphics

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.

Graphics and Animation Multimedia Projects Part 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.

Information Processes and Technology Multimedia: Graphics.

Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 3 This presentation © 2004, MacAvon Media Productions Introduction to Computer Graphics.

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.

GRAPHICS. Topic Outline What is graphic. Resolution. Types of graphics. Using graphic in multimedia applications.

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

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

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

Unit 1: Task 1 By Abbie Llewellyn. Vector Graphic Software (Corel Draw) Computer graphics can be classified into two different categories: raster graphics.

Digital Imaging 101 Ann Ware

Graphics & Images What File Format Do I Use?. Graphics & Images …..are visual images presented on some form of media (drawings, print, web, digital video)

Multimedia. What is a graphic?  A graphic can be a: Chart Drawing Painting Photograph Logo Navigation button Diagram.

Lesson 5.  To locate free resources that you can use for image editing  Determine the optimum image file size  Decide on the best image file format.

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

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.

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

Raster Graphics 2.01 Investigate graphic image design.

Editing Images for the Web. Optimization/Compression Graphics optimization is important for fast web page display.

Digital Images are represented by manipulating this…

Graphics Concepts Presentation

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

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

8 Graphics Digital Media I. What is a graphic? A graphic can be a:  Chart  Drawing  Painting  Photograph  Logo  Navigation button  Diagram.

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.

Slide 1 Graphics (Characteristics 1) Images have various characteristics that affect performance Size (number of pixels) – Large images can be several.

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

Image File Formats Which one is right for me?. The Only Three Image Formats Your Will Ever Need: Names Jpg “Joint Photographic Experts Group” Png “Portable.

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.

Digital Imaging 101 Ann Ware.

Exploring Computer Science - Lesson 3-4

Digital Illustration Chapter 6 File format.

Exploring Computer Science - Lesson 3-4

Introduction to raster graphics

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.

Exploring Computer Science - Lesson 3-4

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

Digital Images.

Graphics and Animation

Chapter 3:- Graphics Eyad Alshareef Eyad Alshareef.

1.01 Investigate graphic types and file formats.

Introduction to Computer Graphics

Graphics Basic Concepts.

Graphics (Characteristics 1)

Web Design and Development

Multimedia Graphics.

Lecture 4 - Introduction to Computer Graphics

Lesson 7—Part 1 Working with Graphics

2.01 Investigate graphic image design.

Presentation transcript:

+ 5 Things you need to know about images* *Images for the web

+ 1. PNG is the best* *most modern, robust, and web-friendly format. PNG: Portable Network Graphic Most advanced compression algorithm Combines the best features of GIF and JPEG

+ 2. GIF and JPEG are very different GIF: Graphics Interchange Format Limited to 256 colors Great for shapes, diagrams, and charts Small files size, but crisp edges, uses Run-length encoding JPEG (.jpg): Joint Photographic Expert Group millions of colors (photo-realistic) Still the standard for digital photography Compression leads to loss of quality.

+ 3. Actual Image Size vs. Displayed Size The stored image file has an actual size Width X Height. people.jpg might be 4000px by 3000px and 12MB HTML and CSS can change the displayed size people.jpg could be as small as 0.2MB if it were resized to 400px wide File size matters because of mobile web browsing.

+ 4. Scaling-up small images leads to loss of quality A 100px wide image will look terrible if it is scale up. See example PNG, GIF, and JPEG cannot be scaled up without loss of quality Keep the original (large) image just in case you need a larger version in the future. SVG: Scalable Vector Graphic is the 4th format widely used on the web. Images are stored as geometric functions instead of as pixels.

+ 5. Aspect ratio is really important for photos If you scale an image (especially a photograph), be sure to scale the width and height proportionally. Common aspect ratios: 4:3 old-fashioned computer monitors 3:2 old-fashioned 33mm film : (8:5)golden ratio, common for artwork 16:9 modern wide-screen photos