Exploring Computer Science - Lesson 3-4 Web Graphics Exploring Computer Science - Lesson 3-4

Objectives The student will be able to: Identify the standard image resolution for the web (72 dpi). Resize and crop images for the web. Identify and differentiate between the various image formats used in web sites: jpg, gif, png. Create an html page that includes images.

Pixels Computer based images are comprised of thousands of tiny dots of color called pixels. These are the small dots you see if you put your face too close to your television or computer screen. Each digital image is comprised of thousands or millions of individual pixels, each with its own color. When these groups of pixels are viewed as a whole, we see the entire image. Most computer monitors have display sizes of 800x600 pixels, 1024x768 pixels, or 1280x1024 pixels.

Screen resolution Screen resolution refers to the number of pixels a screen can display within a given area. Screen resolution is usually expressed in pixels per linear inch of screen. Most standard computer displays have resolutions that vary from 72 to 96 pixels per inch (ppi), depending on how the monitor and display card are configured

Resolution It is important to remember that for computer graphics, a higher resolution (pixels/inch) does not mean a higher quality image. It simply means a bigger image on the screen. What is important is the total size, in pixels, of the image.

Graphic File Types There are many different file types associated with graphics, however, only a few types are suitable for web use. The most widely supported web image formats are jpeg, gif, and png.

JPEG (Joint Photographic Experts Group) The jpeg image format allows up to 16 million colors and is the best choice for image with many colors or color gradations (especially photographs). Jpeg is a “lossy” format which means that each time the image is saved and compressed, image information is lost and quality is degraded. Jpeg images allow for various levels of compression. Low compression means high image quality, but large file size. High compression means lower image quality, but smaller file size.

GIF (Graphic Information Format) Gif is a “lossless” image format, meaning that the quality of the image is not degraded through compression. The limitation of gif images is that the color palette includes only 256 colors. The gif format is a good choice for simpler graphics with a smaller number of solid colors.

GIF (Graphic Information Format) The gif format also allows for transparent backgrounds, which allows the background color of the web page to show behind the graphic. Gif is also the only option for putting animation online (unless you want to use Flash or other vector-based animation formats, which typically cost more)

PNG (Progressive Network Graphics) A newer image format that provides a combination of many features of both jpeg and gif. The PNG format allows for use of millions of colors as well as providing the ability to have transparent backgrounds. The one drawback to PNG’s is that the format is not supported by all web browsers, particularly older browsers.

Other file formats Computer graphics may also be present in a number of other different formats such as .bmp, .tiff, and .eps. These formats have their particular uses, such as for print graphics, but are not suitable for display on the web. It is best if you convert the graphic to a gif, PNG or jpg.

Resizing Images Before you can use your images on your web page, you must first resize them to the exact number of pixels in which they will appear on the page.

Resizing Images A digital image can look huge when viewed on a computer monitor. The file size can also be very large. Resizing the image not only helps it fit on the screen, but also reduces the time it takes to load the web page. Rule of thumb: Resize an image to fit within a normal browser window so site visitors won’t have to scroll to see the entire photo.

Resizing in Photoshop Image Menu > Image Size

Resizing in Photoshop Image Menu > Image Size When the image size window opens, change the resolution to 72 if necessary. It is important to do this first. Next, change the pixel width dimension to 450. It is not necessary to change other settings. When constrain proportions remain selected, the image will retain its aspect ratio. Also make sure resample image is ticked. Click on the OK button.

Resizing in Photoshop Almost all images need sharpening when reduced in size. Filter > Sharpen > Sharpen Save your work: File > Save for the Web. It is at this step in the process that you’ll be able to set the compression level of the image and watch the effects in the window. Also can use File > Save As and select JPEG.

Cropping While the resize image function is a useful function, sometimes you will want more control over how the size of the image is reduced. The crop function allows you to cut out a portion of the image or change the image dimensions without distorting the image. Cropping doesn't mean 'chopping' out important bits of context or history of an image. Rather, think of cropping as the act of cutting away unnecessary or unwanted portions of an image to help focus the viewers attention and help tell a story.

Cropping To crop a picture select the cropping tool from the icons on the left. Sweep the area you want to keep and click on the √ at the top

Images for Your web Page Find at least 2 images that you wish to add to your web page. These images must match the topic of your web page. Save the original versions of the files in a safe place. We will use them again later. Using Photoshop resize the images for use on you web page.

Adding Images to Your Web Page The HTML tag to add image to a wed page is the <img> TAG. The format for the tag is: <img src=“xxxx.jpg”/> The image file must be in the same folder as the HTML file.

Options Go to w3schools.com and find the image tag In your journals describe what the following attributes do and what you would set the value to: alt= height= width= title=

Add Images Add 2 images to your web page. Try out the attributes to see if you can use them correctly. Show me your web page for a grade when complete.