WRA 210: 10/7/13 IMAGES

TODAY’S AGENDA Reminder about Module 8 - test your links!Module 8 Overview of hierarchies, naming How images work on the web Photoshop tutorials Module 9 activity Module 9

RECAP List the file/folder naming best practices Describe the hierarchy of a web server What is the purpose of an index page? How do you open a specific server file? Difference between absolute and relative links / paths? How will you name and store Module 9 files?

IMAGES AND HTML FILES Key: images are NOT embedded in HTML Images and HTML files are separate objects HTML files reference image files and display them according to our parameters Ever seen a "broken" image?

SEE FOR YOURSELF Copy and paste into your address bar o anahuge.gif anahuge.gif o See how images are their own files? Check out this PW alum's site o View the source and find an tag o See what's happening there? Copy and past the path to the image into your address bar. Broken images occur when image file is missing, can't be found by the browser

THE TAG Used to reference an image file Doesn't have a closing tag Required Attributes: o src -> absolute or relative path to the image file o alt -> text to display if image broken, screen readers Optional Attributes: o height -> define the height of the image (in pixels) o width -> define the width of the image (in pixels) o tip: leave undefined, use CSS instead (more later)

THE TAG Example: <img src=" alt="This is an image we're using" /> Try this out using Mozilla ThimbleMozilla Thimble Spaces and line breaks for readability src attribute can be local or remote

PREPARING IMAGES FOR THE WEB resizing (dimensions) resizing (compression, file size) selecting file type

IMAGES SIZES: PRINT VS. WEB Image Resolution o the amount of data in an image file o similar distinction: DVDs played on HD televisions o sharp images require more information Comparison o image saved at raw resolutionimage resized and compressed for web image saved at image resized and compressed for web

IMAGE FILE TYPES Many ways to save images 3 formats widely supported by browsers o GIF files o JPG files o PNG files Important to determine which format is right for your needs Important to save PSDs of original designs

IMAGE FILE TYPE:.GIF Graphic Interchange Format Deprecated, used less often Heavy compression, ideal for few colors Supports animation

IMAGE FILE TYPE:.JPG Joint Photographic Experts Group Optimal for photographs Reduces size by eliminating unused colors Text included in images often looks awful

IMAGE FILE TYPE:.PNG Portable Network Graphics Designed to replace.gif (open-source) More versatile, works well with different types of content and colors Supports transparency (big deal!) Example: demonstrating transparencydemonstrating transparency

MODULE 9: IMAGES FOR THE WEB Resize the image you brought o 250 pixels wide, proportional height o saved as web-optimized jpeg file Create a header image for your portfolio o Use type and layer effects o Save original, layered file as a PNG o Save copy as web-optimized PNG w/ transparency Save all files to the web o Original and resized photos, header PSD and PNG

PHOTOSHOP TUTORIALS Cropping Image resizing Layer styles Marquee tool Save for Web and Devices - YouTube video Save for Web and DevicesYouTube video

FOR NEXT TIME Finish Module 9Module 9 Read/watch: o HTML Lists HTML Lists o HTML Nested Lists HTML Nested Lists o HTML Tables HTML Tables o Why we used to use to build layouts but don't anymore Why we used to use to build layouts but don't anymore o HTML tags: reading #1, reading #2reading #1reading #2 o HTML comments: reading #1, reading #2reading #1reading #2 Play! Consider trying experimenting with the stuff you're reading about