creating the pages part five graphics. file format basics you can currently use only three image...
Post on 22-Dec-2015
215 views
TRANSCRIPT
Creating the pagesCreating the pages
Part FivePart Five
GraphicsGraphics
File Format BasicsFile Format Basics
You can currently use only three image file You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new formats on the Web: GIF, JPG, and PNG. A new format, SVG, is not yet in common use.format, SVG, is not yet in common use.
These formats all compress images to create These formats all compress images to create smaller files. Knowing which file format to use for smaller files. Knowing which file format to use for which type of image is important.which type of image is important.
If you choose the wrong file type, your image If you choose the wrong file type, your image won’t compress or display properlywon’t compress or display properly
GIF FormatGIF Format
GIF uses a lossless compression GIF uses a lossless compression technique, meaning that no color technique, meaning that no color information is discarded when the image is information is discarded when the image is compressedcompressed
The color depth of GIF is 8-bit, allowing a The color depth of GIF is 8-bit, allowing a palette of no more than 256 colorspalette of no more than 256 colors
GIF excels at compressing and displaying GIF excels at compressing and displaying flat color areas, making it the logical flat color areas, making it the logical choice for line art and color graphicschoice for line art and color graphics
GIF TransparencyGIF Transparency With GIF files, you can choose any one color With GIF files, you can choose any one color
in an image to appear as transparent in the in an image to appear as transparent in the browserbrowser
The background color or pattern will show The background color or pattern will show through the areas that you have designated through the areas that you have designated as transparentas transparent
Using transparent areas allows you to create Using transparent areas allows you to create graphics that appear to have an irregular graphics that appear to have an irregular outside shape, rather than being bounded by outside shape, rather than being bounded by a rectanglea rectangle
GIF AnimationGIF Animation
The GIF format lets you store multiple images The GIF format lets you store multiple images and timing information about the images in a and timing information about the images in a single filesingle file
This means that you can build animations This means that you can build animations consisting of multiple static images that play consisting of multiple static images that play continuously, creating the illusion of motion continuously, creating the illusion of motion
JPG FormatJPG Format
JPG is best for photographs or continuous tone JPG is best for photographs or continuous tone imagesimages
JPGs are 24-bit RGB images that allow millions JPGs are 24-bit RGB images that allow millions of colorsof colors
JPGs use a “lossy” compression routine JPGs use a “lossy” compression routine especially designed for photographic images. especially designed for photographic images. When the image is compressed, some color When the image is compressed, some color information is discarded, resulting in a loss of information is discarded, resulting in a loss of quality from the original image.quality from the original image.
JPG FormatJPG Format
When you create the JPG file, you can also When you create the JPG file, you can also manually balance the amount of compression manually balance the amount of compression versus the resulting image qualityversus the resulting image quality
The higher the compression, the lower the The higher the compression, the lower the image quality. You can play with this setting image quality. You can play with this setting to create files that are as small as possible to create files that are as small as possible but still look good. but still look good.
Many photos can sustain quite a bit of Many photos can sustain quite a bit of compression while still maintaining image compression while still maintaining image integrityintegrity
PNG FormatPNG Format
A royalty-free file format that is intended to A royalty-free file format that is intended to replace GIFreplace GIF
This lossless format compresses 8-bit images This lossless format compresses 8-bit images to smaller file sizes than GIFto smaller file sizes than GIF
PNG supports transparency and interlacing PNG supports transparency and interlacing but not animationbut not animation
SVG FormatSVG Format
A new standard from the W3CA new standard from the W3C A language for describing two-dimensional A language for describing two-dimensional
graphics using XMLgraphics using XML SVG graphics are scalable to different display SVG graphics are scalable to different display
resolutions and are printableresolutions and are printable Not yet supported by most browsersNot yet supported by most browsers
Interlacing & Progressive DisplayInterlacing & Progressive Display
Most Web-capable graphics editors let you Most Web-capable graphics editors let you save images in an interlaced or progressive save images in an interlaced or progressive format format
You can choose this display option when You can choose this display option when creating GIF, PNG, and JPG filescreating GIF, PNG, and JPG files
GIF and PNG files use interlacing, while GIF and PNG files use interlacing, while JPGs use progressionJPGs use progression
Interlacing & Progressive DisplayInterlacing & Progressive Display
Interlacing and progressive display are Interlacing and progressive display are generally the same thing—the gradual display generally the same thing—the gradual display of a graphic in a series of passes as the data of a graphic in a series of passes as the data arrives in the browserarrives in the browser
Where You Can Find ImagesWhere You Can Find Images
Stock photo collectionsStock photo collections Digital camerasDigital cameras ScannerScanner Public-domain Web sitesPublic-domain Web sites Clip artClip art Create your ownCreate your own Remember to respect copyright laws!Remember to respect copyright laws!
Which format?Which format?
GIF: The everyday file format for all types of GIF: The everyday file format for all types of simple colored graphics and line art. Use GIF simple colored graphics and line art. Use GIF sparingly for its animation capabilities to add sparingly for its animation capabilities to add visual interest to your pages. GIF’s visual interest to your pages. GIF’s transparency feature lets you seamlessly transparency feature lets you seamlessly integrate graphics into your Web site.integrate graphics into your Web site.
JPG: Use JPG for all 24-bit full color JPG: Use JPG for all 24-bit full color photographic images, as well as more photographic images, as well as more complicated graphics that contain color complicated graphics that contain color gradients, shadows, and featheringgradients, shadows, and feathering
Which format?Which format?
PNG: If the browsers are supporting it, use PNG: If the browsers are supporting it, use PNG as a substitute for GIF. Because PNG PNG as a substitute for GIF. Because PNG doesn’t compress your 24-bit images as well doesn’t compress your 24-bit images as well as JPG, don’t use it for photos.as JPG, don’t use it for photos.
Color DepthColor Depth
The amount of data used to create color on a The amount of data used to create color on a display is called the display is called the color depthcolor depth
If your users have a 24-bit color display, they If your users have a 24-bit color display, they can appreciate the full-color depth of your can appreciate the full-color depth of your images. But many monitors cannot display 24-bit images. But many monitors cannot display 24-bit images.images.
If your monitor doesn’t support the full color If your monitor doesn’t support the full color depth of an image, the browser must resort to depth of an image, the browser must resort to mixing colors that attempt to match the original mixing colors that attempt to match the original colors in the imagecolors in the image
Using the <img> elementUsing the <img> element
By definition, <img> is a replaced element, By definition, <img> is a replaced element, meaning that the browser replaces the <img> meaning that the browser replaces the <img> element with the image file referenced in the element with the image file referenced in the SRC attributeSRC attribute
<img> is an empty element, so never use a <img> is an empty element, so never use a closing tag with itclosing tag with it
Using the <img> elementUsing the <img> element
The browser treats the image as it treats a The browser treats the image as it treats a character: normal image alignment is to the character: normal image alignment is to the baseline of the text. Images that are within a line baseline of the text. Images that are within a line of text must have spaces on both sides, or the of text must have spaces on both sides, or the text will touch the image.text will touch the image.
Specifying alt and title TextSpecifying alt and title Text
The alt text is displayed if the image does not The alt text is displayed if the image does not appear, providing a description of the image appear, providing a description of the image
The title text appears as a pop-up when the user The title text appears as a pop-up when the user places the cursor over the imageplaces the cursor over the image
Specifying width and heightSpecifying width and height
Every <img> element on your site should contain Every <img> element on your site should contain width and height attributes width and height attributes
These attributes provide important information to These attributes provide important information to the browser by specifying the amount of space the browser by specifying the amount of space to reserve for the imageto reserve for the image
This information dramatically affects the way This information dramatically affects the way your pages download to the user, especially at your pages download to the user, especially at slower connection speedsslower connection speeds
Sizing Graphics for the PageSizing Graphics for the Page
One of the easiest ways to make your graphics One of the easiest ways to make your graphics download quickly is to keep their dimensions download quickly is to keep their dimensions small and appropriate to the size of the pagesmall and appropriate to the size of the page
Removing the Hypertext BorderRemoving the Hypertext Border
When you create a hypertext image, the When you create a hypertext image, the browser’s default behavior is to display the browser’s default behavior is to display the hypertext border around the imagehypertext border around the image
This border is often unnecessary as users often This border is often unnecessary as users often use their mouse to point to each image to see if use their mouse to point to each image to see if the hypertext cursor displaysthe hypertext cursor displays
To remove the hypertext border, add the To remove the hypertext border, add the border=“0” attribute to your <img> tagborder=“0” attribute to your <img> tag
Aligning Text and ImagesAligning Text and Images
You can align text along an image border using You can align text along an image border using the align attributethe align attribute
Text and image alignment defaults to bottom Text and image alignment defaults to bottom alignment, which means the bottom of the text alignment, which means the bottom of the text aligns with the bottom edge of the imagealigns with the bottom edge of the image
Valid values are: top, middle, bottom, left, rightValid values are: top, middle, bottom, left, right
Adding White SpaceAdding White Space
Add white space around your images to reduce Add white space around your images to reduce clutter and improve readabilityclutter and improve readability
To increase the white space around an image, To increase the white space around an image, you can add the vspace and hspace attributes to you can add the vspace and hspace attributes to the <img> element, and set the values to a pixel the <img> element, and set the values to a pixel amountamount
Using Single-Pixel RulesUsing Single-Pixel Rules
Single-pixel lines or rules work exactly like Single-pixel lines or rules work exactly like transparent pixel GIFs, except they are a single transparent pixel GIFs, except they are a single color rather than transparentcolor rather than transparent
You can change a single-pixel rule to any size You can change a single-pixel rule to any size by using the width and height attributes by using the width and height attributes
This creates reusable graphics of horizontal or This creates reusable graphics of horizontal or vertical lines of varying thickness that you can vertical lines of varying thickness that you can use in many ways in your Web pages to use in many ways in your Web pages to enhance your layoutenhance your layout
Using Background ImagesUsing Background Images
You can use the background attribute to the You can use the background attribute to the <body> element to tile images across the <body> element to tile images across the background of a Web pagebackground of a Web page
You can use any image as a background You can use any image as a background graphic, though many are not appropriate for the graphic, though many are not appropriate for the task. In too many Web sites, complicated task. In too many Web sites, complicated background graphics distract the user.background graphics distract the user.
If your site includes a lot of text, avoid dark or If your site includes a lot of text, avoid dark or overly complex backgroundsoverly complex backgrounds
CSS Background PropertiesCSS Background Properties
Cascading Style Sheets allow you more control Cascading Style Sheets allow you more control over background image tiling than standard over background image tiling than standard HTMLHTML
To apply a background image, use the <body> To apply a background image, use the <body> element as the selector with the background element as the selector with the background propertyproperty
The CSS background-repeat property allows you The CSS background-repeat property allows you to create a single column or row of the image, to create a single column or row of the image, rather than tiling completely across the pagerather than tiling completely across the page
Hexadecimal ColorsHexadecimal Colors
HTML uses hexadecimal numbers to express HTML uses hexadecimal numbers to express RGB color valuesRGB color values
Hexadecimal numbers are a base-16 numbering Hexadecimal numbers are a base-16 numbering system, so the numbers run from 0 through 9 system, so the numbers run from 0 through 9 and then A through Fand then A through F
Hexadecimal color values are six-digit numbers; Hexadecimal color values are six-digit numbers; the first two define the red value, the second two the first two define the red value, the second two define the green, and the third two define the define the green, and the third two define the blueblue
Hexadecimal ColorsHexadecimal Colors
Browser safe hexadecimal colors are always Browser safe hexadecimal colors are always made up of the following 2-digit color values: 00, made up of the following 2-digit color values: 00, 33, 66, 99, CC, and FF33, 66, 99, CC, and FF
Using Background ColorsUsing Background Colors
One of the simplest ways to work with One of the simplest ways to work with hexadecimal color is to specify a background hexadecimal color is to specify a background color for your pages color for your pages
Use the bgcolor attribute in the <body> element, Use the bgcolor attribute in the <body> element, or with Cascading Style Sheets, use the or with Cascading Style Sheets, use the background-color property with body as the background-color property with body as the selectorselector
Using Background ColorsUsing Background Colors
You can use background color in tables for You can use background color in tables for different purposes, and all by using the bgcolor different purposes, and all by using the bgcolor attribute attribute
The table <table>, table row <tr>, table header The table <table>, table row <tr>, table header <th>, and table data <td> elements all accept <th>, and table data <td> elements all accept the bgcolor attributethe bgcolor attribute
Graphics SummaryGraphics Summary
Remember that the final destination is the Remember that the final destination is the monitor, not the printed page, so design monitor, not the printed page, so design accordinglyaccordingly
Most monitors have a resolution of 72 dpi. If Most monitors have a resolution of 72 dpi. If you are creating or scanning images, or you are creating or scanning images, or when you import images from a CD-ROM, when you import images from a CD-ROM, always change the final resolution to 72 dpi.always change the final resolution to 72 dpi.
Graphics Summary Continued Graphics Summary Continued
Reduce image size to the appropriate Reduce image size to the appropriate dimensions for a Web page. If you must use dimensions for a Web page. If you must use a larger image, let the user view a thumbnail a larger image, let the user view a thumbnail first, and provide the file size information.first, and provide the file size information.
Use the cache by reusing graphics as much Use the cache by reusing graphics as much as possibleas possible
Graphics Summary continuedGraphics Summary continued
Work with a limited Web-safe palette when Work with a limited Web-safe palette when creating graphicscreating graphics
Test your work!Test your work! Browsers and computing Browsers and computing platforms render colors differently. Test at platforms render colors differently. Test at different color depths also.different color depths also.