Transcript Understanding Web Graphics

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 MS PAINT
•
EDIT PICTURES > RESIZE
RESIZING IN MS PAINT
•
•
EDIT PICTURE > RESIZE
WHEN THE RESIZE WINDOW OPENS, CHANGE THE PIXEL WIDTH
DIMENSION TO 450. IT IS NOT NECESSARY TO CHANGE OTHER
SETTINGS.
CLICK ON THE OK BUTTON.
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 EDIT
PICTURES > CROP.
• MOVE THE CORNERS CLOSER TO THE IMAGEYOU WANT TO KEEP
AND CLICK OK.
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 MS PAINT 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:
1. alt=
2. height=
3. width=
4. 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.