44212: Web-site Development Optimising Images for Web-pages Ian Perry Room:C49 Extension:7287

Slides:

Advertisements

Similar presentations

Raster graphics. Colour depth 01 1 bit pr pixel = 2 combinations (2 1 ): 2 bits pr pixel = 4 combinations (2 2 ): bits pr pixel = 16 combinations(2.

Advertisements

Tutorial 3 Designing a Web Page.

Graphics in the web Digital Media: Communication and Design

Part A Multimedia Production Rico Yu. Part A Multimedia Production Ch.1 Text Ch.2 Graphics Ch.3 Sound Ch.4 Animations Ch.5 Video.

Nat 4/5 - Software Design and Development – Low Level Operations - 1 National 4/5 – Computing Science Information Systems Design and Development Media.

Introduction to Graphic Arts Technology PRINT Versus WEB.

An Introduction to Scanning and Storing Photographs and Graphics Bryn Jones Aug 2002

Prepared by George Holt Digital Photography BITMAP GRAPHIC ESSENTIALS.

1 Bitmap Graphics It is represented by a dot pattern in which each dot is called a pixel. Each pixel can be in any one of the colors available and the.

Images and the Web web graphics. web graphics: constraints Due to the constraints imposed by varying degrees of Internet bandwidth, designing images for.

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

Dean Pentcheff NHMLAC MBPC/Crustacea 17 April 2006.

COMP Bitmapped and Vector Graphics Pages Using Qwizdom.

Online News Graphics and Flash. Why use graphics 1. Attract attention Large pictures attract attention better than small ones Suitable for covers in print,

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.

Getting the Basics Graphics for the Web McIntyre, Period 2 Kellogg, Period 5.

Presentation Design: Graphics. More About Color “Bit depth” of colors -- This is based on the smallest unit of information that a computer understands.

Copyright © 2003 Pearson Education, Inc. Slide 4-1 Created by, Stephanie Ludi, Rochester Institute of Technology—NY Basic Web Page Construction Graphics.

1 Perception, Illusion and VR HNRS 299, Spring 2008 Lecture 14 Introduction to Computer Graphics.

Department of Information Technology Chapter 8 - Creating Hypertext links Lecturer: Ms Melinda Chung.

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

Image Representation. Objectives  Bitmaps: resolution, colour depth and simple bitmap file calculations.  Vector graphics: drawing list – objects and.

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

Image formats. Basic terminologies… Pixels: Pixels are the building blocks of every digital image. a pixel is a single point in a graphic image. Resolutions:

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.

Marr CollegeHigher ComputingSlide 1 Higher Computing: COMPUTER SYSTEMS Part 1: Data Representation – 6 hours.

Nov 111 Example Program DemoMouseInk.java. Nov 112 Example Program DemoMouseUnistrokes.java.

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.

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

Types of Graphics  Vector Individual scalable objects defined by mathematical equations  Bitmap Pixels (tiny, single-colored square) in a grid Most.

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

Representation of Images You need to know: (k) explain the representation of an image as a series of pixels represented in binary (l) explain the need.

Graphics An image is made up of tiny dots called pixels (“picture elements”) The resolution determines the.

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

Web Graphics. Web graphics Bandwidth is king Graphics must load quickly Graphics must be optimized All other components except for text, gif and jpg are.

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

Digital Images are represented by manipulating this…

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.

Information Technology Images: Types, Resolution and Techniques.

The Web. Web Servers and File Transfer Protocol (FTP)

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

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

Image Editing Vocabulary Words Pioneer Library System Norman Public Library Nancy Rimassa, Trainer Thanks to Wikipedia ( help.

WEB GRAPHICS EXPLORING COMPUTER SCIENCE - LESSON 3-4.

Graphics and Image Data Representations 1. Q1 How images are represented in a computer system? 2.

Software Design and Development Storing Data Part 2 Text, sound and video Computing Science.

ITEC2110, Digital Media Chapter 3 Digital Image Processing 1 GGC -- ITEC Digital Media.

2.01 Understand Digital Raster Graphics

2.01 Understand Digital Raster Graphics

DIGITAL MEDIA FOUNDATIONS

Data Representation.

Binary Representation in Audio and Images

Computer Science Higher

2.01 Understand Digital Raster Graphics

Graphics Bitmap Vector

Raster Images CPSC 1030.

Look at Me Mod 4 Lesson 3 Graphics Module 4- Build a Game.

Chapter 3:- Graphics Eyad Alshareef Eyad Alshareef.

An Introduction to Scanning and Storing Photographs and Graphics

Data Representation.

Representing Images 2.6 – Data Representation.

2.01 Understand Digital Raster Graphics

2.01 Understand Digital Raster Graphics

Color and Images.

Multimedia System Image

2.01 Investigate graphic image design.

Presentation transcript:

44212: Web-site Development Optimising Images for Web-pages Ian Perry Room:C49 Extension:7287

Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 2 Why Optimise Images?  Because they are often much bigger than they need to be! and can be modified without any (much?) visible difference for the user.  What makes an Image BIG? Physical Dimensions (Height & Width) Resolution (Number of Pixels) Colour Depth (No. of Colours) Compression Method (Lossless or Lossy)

Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 3 Physical Dimensions  i.e. Height & Width: 1 x 1 cm 6Kb 3 x 3 cm 28Kb 5.5 x 5.5 cm 66Kb  Increasing Physical Dimensions results in an exponential increase in File Size.

Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 4 Screen Resolution Standards StandardResolutionNo. of PixelsScreen Size? VGA640x480307,20014” SVGA800x600480,00015” or 17” SVGA1024x768786,43217” or 19” XGA1152x864995,32817”, 19” or 21” Vesa1280x10241,310,72019” or 21” Vesa1600x12001,920,00021” +  The most popular screen resolution is ‘currently’ SVGA (1024x768), however, there are; still a LOT of SVGA (800x600) users out there. an increasing number of users with XGA (1152x864) or Vesa (1280x1024).

Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 5 Resolution  i.e. Number of Pixels per Inch (PpI): 360 x 360 Pixels 3 x 3 cm, 28Kb 300 PpI 720 x 720 Pixels 3 x 3 cm, 69Kb 600 PpI 1441 x 1441 Pixels 3 x 3 cm, 169Kb 1200 PpI  ‘Normal’ Printer Resolution is 200 to 300 DpI.  ‘Normal’ Screen Resolution is only 72 to 96 PpI.

Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 6 Bits & Colours BitsColours BitsColours 1665, ,777, ,294,967,296 64Lots!  256 Bit colour is considered the minimum for any Multi-media application.

Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 7 Colour Depth  i.e. No. of Colours (displayed simultaneously): 591 x 591 Pixels 300 PpI, 5 x 5 cm 8 Bit = 1028Kb16 Bit = 2051Kb 591 x 591 Pixels 300PpI, 5 x 5 cm  There is a direct relationship between the No. of Bits and the File Size.

Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 8 Web Safe Colours?  Only 216 Colours? 8 Bits can generate 256 different Colours, but there are only 216 Web Safe Colours.  HEXadecimal Colour Codes: General Format: #RRGGBB 16 Permissible Values: 0 to 9 & A to F

Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 9 Web Safe Colour Examples  To be Web-safe only use combinations of: 00, 33, 66, 99, CC & FF.  E.g.: # (black) #FFFFFF (white) #FF0000 (red) #00FF00 (green) #0000FF (blue) # (grey) #FF00FF (fuchsia) #00FFFF (cyan) #FFFF00 (yellow) #00FF00 (lime)

Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 10 Compression  A Simple Method Suppose we have a 6 x 4 grid of pixels; some of which are white & some of which are black. WWWWWW WBBBBW WBBBBW WWWWWW Simple Bit-map = 24 Bits Compressed File = 10 Bits However, if we look for sequences of the same colour? W7B4W2B4W7

Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 11 Two Types of Compression  Lossless Compression The previous slide is an example of lossless compression, where an exact copy of the original file can be re-created from the compressed file. Can be used to compress any type of file.  Lossy Compression Some information is lost when compression takes place, which can not be recovered when the file is decompressed. Ok for most image files, but can not be used to compress files such as computer software packages or documents. Any loss of data from such files would not be acceptable.

Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 12 Why Do We Need To Bother?  Because people DO NOT like waiting! As a rule of thumb, let us assume that each 2.5Kb of data takes around 1 second to ‘arrive’.  The text in an HTML file is relatively small, for the screen space it can occupy: A 5Kb text file will fill your computer screen, in just 2 seconds.  Image files, on the other hand, are not so space efficient: This small Image is 2.636Kb =>

Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 13 Image Types?  Lots of Image file formats:.bmp,.eps,.gif,.pcx,.png,.jpg,.tif,.wmf, etc.  Two main Image Types for the Web: each with their own advantages & disadvantages.  GIF - Graphics Interchange Format: simple graphics files (max 256 colours).  JPG (or JPEG) - Joint Photographic Experts Group : complex graphics files (millions of colours).

Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 14 GIF Files  Graphics Interchange Format: simple graphics files. max 256 colours. nominally lossless compression.  Suitability? Anything that has big blocks of solid colours, e.g.: Logos Background Images

Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 15 JPG Files  Joint Photographic Experts Group: complex graphics files. millions of colours. lossy compression.  Suitability? Image files with lots of subtle colour changes, shading, etc., e.g.: Photographs

Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 16 GIF vs. JPG (Simple Image) 2Kb GIF 20Kb JPG (0%) 14Kb JPG (30%) 12Kb JPG (50%)

Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 17 GIF vs. JPG (Photograph) GIF 24Kb JPG 16Kb

Ian Perry44212: Web-site Development: Optimising Images for Web-pagesSlide 18 So what?  Need to optimise all images we use on our Web-pages in order to keep download times ‘acceptable’, e.g.: 100Kb of data (i.e. an HTML file and associated images) may take around 20 Seconds to ‘arrive’.  To do this: keep the Physical Dimensions of images small. design for a 1024x768 pixel screen size. reduce Image Resolution to 72 or 96 PpI. use the ‘best’ image File Type.