Download HTML5&CSS_CH5_REV

VISUAL QUICKSTART GUIDE
HTML and CSS
Chapter 5: Images
LEARN THE QUICK AND EASY WAY!
8th Edition
VISUAL QUICKSTART GUIDE
Objectives
•
•
•
•
•
•
•
•
•
Create images in GIF, PNG, and JPEG formats.
Add visual interest with transparency.
Find, purchase, and create images for a webpage.
Insert images on a webpage.
Offer alternate text when images don't appear.
Specify image size.
Find an image’s size with a browser or Photoshop.
Scale images with the browser or image editor.
Add icons to a website.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Images
• There are six factors to keep in mind when you
create images for the web:
–
–
–
–
–
–
Format
Download speed
Color
Size (dimensions)
Transparency
Animation
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Format and Download Speed
• Three most widely used formats on the web are GIF,
PNG, and JPEG.
• JPEG format is good for color photographs.
• JPEG is a lossy format, which means some of the
image’s original information will be lost when the
image is saved.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
PNG and GIF
• PNG and GIF formats compress areas of continuous
colors or repetitive patterns better than JPEG.
• PNG and GIF formats are good for saving files that:
– Have large amounts of solid colors and patterns and need
transparency.
• PNG has a better compression algorithm for smaller
file sizes and superior transparency support (alpha
transparency).
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Choosing Image Formats
Save full-color photos as
JPEG or PNG-24
Zip and save logos in PNG8 format
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
The WebP Image Format
• WebP is Google’s image format, named.
– WebP supports both lossy and lossless compression and
can result in significant file-size savings over JPEG and
PNG. It also features alpha transparency, like PNG.
• WebP is still evolving, and browser support is limited
at the time of this writing: Chrome, Opera 12+, and
some Android browsers are the only ones with full
support, and it’s uncertain if other browsers will adopt
it.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Color
• GIF and PNG-8 images have a limited color palette.
– Only 256 colors.
• Fine for logos and icons.
• Save photographs and complex illustrations in JPEG
or PNG-24 format.
– Accommodate more colors in a single image.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Size (Dimensions)
• Digital images are measured in pixels.
– Keep images to within a few hundred pixels wide.
• Dimensions vary depending on the image’s purpose.
– Icons will be smaller, logos a little bigger, and photos, bigger
still. Maximum width of a site is typically 960 pixels wide.
• Images typically print smaller than they appear on a
display.
– Printers print more dots per inch (dpi) than most displays
have pixels per inch (ppi).
– Screen resolution plays into this, too.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Comparing Image Sizes
2048 pixels wide and 1536
pixels tall
400 pixels wide and 300
pixels high
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Transparency
• Transparency can give an image a non-rectangular
outline, blending it in with a background color or
texture behind the image.
– PNG and GIF allow transparency; JPEG does not.
• Index transparency: Pixel can be transparent or not.
– Both GIF and PNG support index transparency.
• Alpha transparency: Controls the degree of a pixel’s
transparency.
– Only PNG supports alpha transparency.
• Images with complex transparent backgrounds look better as
PNGs because edges appear smooth, not jagged.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
PNG-8 and PNG-32
• PNG-8 supports both index and alpha
transparencies, but you’ll need a program like
Fireworks to save an alpha PNG-8.
– Photoshop doesn’t support alpha transparency for PNG-8,
but it does support it for PNG-32.
– One reason most transparent PNGs on the web are PNG32.
• Use PNG-8 or PNG-32 for transparent images. The
latter is required if your image has more than 256
colors.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Photoshop, PNG-24, and PNG32
• PNG-24 and PNG-32 are essentially the same except
the latter supports alpha transparency.
• Photoshop refers to both PNG-24 and PNG-32 as
PNG-24, so it’s common to think PNG-24 has alpha
transparency. In truth, when you select the
Transparency option for a PNG-24 in Photoshop, it
creates a PNG-32 behind the scenes.
• The term “PNG-24” is often used when speaking of
alpha transparent images, even though it isn’t
technically accurate.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Image Transparency
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Animation
• Animated images can be saved as GIFs, but not as
JPEGs or PNGs.
– Using images for animation is becoming uncommon, except
for GIFs on site’s like Tumblr.
– Animation is generally created using CSS Animations,
JavaScript, HTML5 Canvas, SVG (the dark horse of the
bunch), and Flash.
– Flash animations on the web are becoming rare due to iOS’s
lacks Flash support and the increased capability and support
for other technologies.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Getting Images
• Ways to get images:
–
–
–
–
Buy or download ready-made images.
Digitize photographs or hand-drawn images with a scanner.
Use a digital camera.
Draw images from scratch in an image editing program like
Adobe Photoshop.
• Once you’ve got them in your computer, you can
adapt them for use on the web.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
To Get Images
• Use Google to find images on the web.
– Even free images on the web have some restrictions.
• Stock photography and images can be bought for a
reasonable price.
– Purchased images can be used for most purposes, except
reselling.
– Read any disclaimers or licenses carefully.
• Create images with scanners and digital cameras.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Creative Commons Licenses
• Creative Commons: Non-profit that developed
Creative Commons license.
• Creative Commons license: System of copyright
templates that let artists share their work in specified
ways without giving up all rights over their work.
– Many artists use Creative Commons licenses.
– Flickr asks users to designate a Creative Commons license
for each photo they upload.
– Google can do a restricted search based on usage rights.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Choosing an Image Editor
• Most modern image editors have special tools for
creating web images.
– Photoshop is the industry standard.
– Adobe Fireworks is a very powerful program.
– Alternatives include Paint.NET for PCs and Acorn or
Pixelmator for Mac.
– Online editors, like Photoshop.com and Aviary.com, are
becoming more capable.
• Basic strategies for optimizing images for the web are
the same regardless of the software you choose.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Saving Your Images
• Saving images is a
balancing act
between visual
quality and file size.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Photoshop’s Save for Web
Command
• Visually compares
original image with up
to three versions.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
To Use Photoshop’s Save for
Web Command
• Open Photoshop and create image or open existing
image.
• Choose File > Save for Web. Save For Web dialog
appears.
• Click one of the following tabs:
– Optimized tab to see one optimized version.
– 2-Up tab to see one optimized version with the original.
– 4-Up tab to see three.
• Click an optimized version, if necessary.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
To Use Photoshop’s Save for
Web Command
• Choose desired format:
– Save images created on a computer in PNG-8 or GIF format.
– Save images with continuous tones in JPEG or PNG-24
format.
• Adjust additional settings until smallest file with
acceptable quality is reached.
• Click Save, choose directory, and name new file.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Inserting Images on a Page
• Images on a webpage
appear automatically,
as long as the browser
is set up to view them.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
To Insert an Image on a Page
• Place the cursor in the HTML code where the image
will appear.
• Type <img src="image.url”
– Where image.url indicates location of image file on server.
• Type a space and then the final />.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Offering Alternate Text
• Alt attribute adds
descriptive text that will
appear if the image
does not appear.
• To offer alternate text:
– Within the img tag, after
the src attribute and
value, type alt=".
– Type the alternate text.
– Type ".
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Why Images Might Not Appear
• An image may not appear for a variety of reasons:
–
–
–
–
You coded the wrong URL in the src attribute
You forgot to upload the image to the web server.
Visitor might have a poor connection.
A browser can be set up to not load images.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Specifying Image Size
• Specify image size in code and browser will reserve
its space. Text will fill in around image’s space as
image loads, and layout will remain stable.
• Use browser or image editing program to get exact
dimensions of image.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
To Find the Size of Your Image
with Your Browser
• Right-click the image. A
contextual pop-up menu
appears.
• Choose Properties or
View Image Info
(depending on
browser). A box
appears that shows the
dimensions of the
image in pixels.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
To Find the Size of Your Image
with Photoshop
• Open the image in
Photoshop.
• Choose Image > Image
Size. The Image Size
dialog displays.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
To Specify the Size of Your
Image in HTML
• Determine the size of your image.
• Within the img tag, after the src attribute, type
width="x" height="y"
– Use the values you found for the width and height to specify
the values for x and y in pixels.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Scaling Images with the
Browser
• Change display size of an image by specifying a new
height and width in pixels.
• To scale an image with the browser:
– Type <img src="image.url"
• Where image.url is the location on the server of the image.
– Type width="x" height="y"
• Where x and y are desired width and height, respectively, in
pixels, of your image.
– Add any other image attributes as desired and type final />.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Creating and Sizing Images for
Retina Displays
• Apple’s Retina display has four times as many pixels
in the same amount of space as in an otherwise
comparable normal display, resulting in sharper
images.
• In some cases, images need to be made with the
Retina display and similar displays in mind, otherwise
they will look blurry in a browser.
• To avoid blurry images, double the size of your
images, but display them at half that size.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Scaling Images with an Image
Editor
• Most images are simply too big for a webpage.
– Image for print might measure 1800 pixels across.
– Images for webpages shouldn’t be wider than 600 pixels.
• Scale images up or down with an image editor.
• To scale an image with Photoshop:
– In lower-right portion of the Save for Web window, click W
(Width) box or H (Height) box in the Image Size section.
– Enter a new width or height in pixels, or a percentage, and
then press the Tab key to resize the image.
– Continue to adjust the size up or down until you’re satisfied.
The image is not resampled until you press Save.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Scaling an Image
2816 pixels wide
400 pixels wide
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Scalable Vector Graphics
(SVG)
• The SVG graphics language allows you to create
graphics that can scale up or down without
compromising quality (and more).
• You can include SVG in your webpages; gradually,
we’re seeing more of that, because all modern
browsers provide basic support.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Adding Icons for Your Website
• Favicon are small icon in address bars, tabs, and
bookmarks.
– Short for “favorites icon.”
– Favicons are small, measuring 16 x 16 pixels.
– Because browser often displays icon over gray or other
colors, make icon’s background transparent.
• Touch icons display when a site is added to the
home screens of Apple and other touch devices.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
To Add an Icon for a Website
• Create 16 x 16 image an save it in ICO format.
• Create 114 x 114 image for touch devices. Save in
PNG format.
• Place the icon images at the root of your website.
Browsers look for those specific file names at the root
automatically.
LEARN THE QUICK AND EASY WAY!
VISUAL QUICKSTART GUIDE
Favicons
Favicon in browser display
Apple-touch-icon
LEARN THE QUICK AND EASY WAY!