Web Graphics and File Formats Chapter 8 Types of Graphics • Raster – Made up of pixels • Pixels are tiny squares of color 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 vector graphics Graphic File Formats • GIF – Graphic Interchange Format • JPEG – Joint Photographic Experts Group • BMP – Bitmap • PNG – Portable Network Graphics GIF • File Extension: gif • 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 colors – Limited number of colors makes it not appropriate for photographs JPEG • File Extension: jpg or jpeg • 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 transparency 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 raster graphics (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 information, 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 color image is a placeholder • Placeholder is shown on page while full color downloads Converting Graphic Formats • Can use any image editing program – Photoshop – Paint Shop – Corel – 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 file format 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 (dots per inch) – 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: – Adobe Photoshop – Macromedia fireworks – I Photo – Corel Paint Shop Pro • Vector graphics created with – Adobe Illustrator – 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 Map • 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 .