sign in sign up
<<
Home , Raster graphics, Vector graphics

Web and File Formats

Chapter 8 Types of Graphics

• Raster – Made up of • Pixels are tiny squares of arranged on a rectangular grid like tiles in a mosaic • Human eye reads pixels as a seamless image • Vector – Composed of simple lines defined by math equations – Logos, text banners, and 3D Web buttons are often Graphic File Formats

• GIF – Graphic Interchange Format • JPEG – Joint Photographic Experts Group • BMP – • PNG – Portable Network Graphics GIF

• File Extension: • Advantages: – Small file size downloads quickly – Good for line drawings and simple graphics – Only image that can be transparent or animated • Disadvantages – Only supports a maximum of 256 – Limited number of colors makes it not appropriate for photographs JPEG

• File Extension: jpg or • Advantages: – Supports millions of colors – Color support makes it good for photos • Disadvantages – Files have a higher quality therefore they are larger in size and take longer to download BMP

• File Extension: bmp • Advantages: – Supports millions of colors • Disadvantages – Very large files download slowly – Generally not used for web pages PNG

• File Extension: png • Advantages: – Supports more colors than GIF but downloads quickly – Features better support of than GIF • Disadvantages – Not supported by many browsers Interesting Format Info

• GIF is pronounced with a hard “g” as in the word graphic • JPEG is pronounced “jay-peg” • Both formats are based on pixels • Most images on web are (jpeg and gif) • If vector graphic is saved as jpg or gif, it is converted to pixels Pixels and File Size

• The more pixels in an image the higher the resolution and the less “pixelated” • The more pixels -- the larger the size • If image size increases so does download time • Download time is measured in kbps

Compression

• Reduction of storage space by changing format • Images are usually compressed to aid in quicker downloading • Compression reduces file size, removes color , and reduces quality Types of Compression

• Lossless – File loses no data when compressed – Does not gain download time – GIF and PNG are automatically lossless • Lossy Compression – Removes data from a graphic file so it is significantly smaller and downloads quickly in a web browser – Does not restore data – Restored image has reduced image quality – JPEG fles use lossy compression Download Times

• Displayed in dreamweaver on the status bar in lower right corner of document – (stop and look at it) • Used to find how images affect download time

Reducing Download Time

• Use Photoshop • Make two versions of image – One in full color – One in reduced color • Reduced is a placeholder • Placeholder is shown on page while full color downloads Converting Graphic Formats

• Can use any program – Photoshop – Paint Shop – – Picasso • Photo is opened and saved as a different file – Converted image may not look like original

Quiz

• Define: raster, vector, gif, jpg, bmp, png, lossy compression and lossless compression • What is the difference between a raster and vector graphic • Why should time be considered in downloads? • When making a new web site, what issues are considered when choosing an image Section 8.2 Graphics • Two ways to obtain a graphic – Premade graphics and insert into web page – Use tools to create graphics Premade Graphics

• Online – Go to search engine (i.e. Google) – Click on images link – Type in name of image searching for – Select an image and right click and save picture as Creating Graphics

• Monitors display 72 dpi or 96 dpi

Scan image

– Drawn by hand – Typed up – Hard copy of picture – Scanner converts image into a grid – Size of grid is abased on resolution stated in dpi () – 500 dpi gives 500 pixels for every linear inch of original image Digital picture

– Download image from camera to computer – Resolution of 640 X 480 is acceptable for cameras when picture is meant for web only – Must be opened in image editing software and modified for web

Image Editing Programs

• Software used to crate raster or vector graphics • Raster graphics created with: – – Macromedia fireworks – I Photo – Corel Paint Shop Pro • Vector graphics created with – – PhotoDraw – Macromedia Freehand

Graphics and Ethics

• Copyright law – Apply whether or not Inline Graphic

• Browsers request graphic files and insert them into a page • Alternate text identifies the graphic • Split view vs. Design view (Dreamweaver) – To look at the code for inserting an image Modifying Graphics

• Photoshop • Fireworks • Corel Paint Shop • Mac iPhoto Modifying Graphics

• Cropping removes portion of image • Resizing changes size and appearance on screen • Can drag size handles, only corner handles will retain the aspect ratio • Aspect ratio is the relationship of the images height and width

Modifying Graphics with Properties Inspector • Size and height are in inspector • Change those numbers – they may not retain aspect ratio • Edit image in DW – Quality is lower – Original file remains the same and image is distorted • Bold values – width or height is larger or smaller than saved image • To restore the original size: – click W or H to the left of the numeric value box Resampling

• Resizing changes appearance but not pixels in file • Resampling changes pixels in graphic to match the new screen area occupied by images altered size • Look at page 232 the yellow caution • Page 232-235 practice the exercises using one of our images on our web page Image

• Graphic with clickable hotspots • Hotspot gives a graphic link • Look at page 237 Hotspot tools • Complete 238-239 using graphic in our web page Web Photo Album with Fireworks • Photo album is a collection of images • Thumbnail small image that links to a larger version of the same image • When a photoalbum is created thumbnails are created • Complete pp. 240-242