Tài liệu Professional Web Design: Techniques and Templates- P4 pdf

When saving images as 8-bit PNGs or GIFs, a designer should be aware of the factthat gradations, such as drop shadows, will increase the file size or not be dis-played with strong enough

When saving images as 8-bit PNGs or GIFs, a designer should be aware of the factthat gradations, such as drop shadows, will increase the file size or not be dis-played with strong enough quality Due to the fact that there are a fewer number

of colors available, an effect called banding can occur This causes the gradations

to be represented by solid bands of color instead of flowing into one another

There is a process called dithering, which causes the bands to be broken into

dif-ferent patterns of tiny dots to imitate shades of color by placing certain colorsbeside one another Unfortunately, it increases file size significantly Figure 7.9 is azoomed-in view of the curved edge of Figure 7.8 It takes many shades of gray tomake the image appear to be raised While it is still possible to adequately com-press Figure 7.8, the additional colors will increase the file size of the image

2 The image is a line drawing Although this technically falls into the

previous category, it is differentiated for one reason—when saving animage as a PNG or GIF, the white is guaranteed to stay white, unlike aJPG Figure 7.10 is a cartoon that is sharper and whiter when saved as

a GIF, as opposed to a JPG

3 Text is saved as an image if it is not on a complex background, such as a photo Generally, to make a site smaller, a designer should try to save text

separately from images like photographs, which should be saved as JPGs

If the text is separate, it should be saved as a PNG or GIF, such as inFigure 7.11 Saving the image as a GIF in this image keeps the text nearly

as crisp as when it was in the image editing software

Figure 7.9

Zoomed-in view of the drop shadow in Figure 7.8.

Chapter 7 ■ Understanding Graphics

132

4 The image is a thumbnail photo Depending on the physical size of the

image and how many colors it uses, an 8-bit PNG or GIF will make athumbnail appear sharper for about the same file size If the number ofcolors is limited, such as in the photo of the house in Florence, Italy, shown

in Figure 7.12, the image should be saved as an 8-bit PNG or GIF If saved as

a JPG at the same file size, the body of the house could become splotchy Ofcourse, this is not a hard and fast rule, especially with how the compressionfunctionality of Photoshop has improved over the years

In contrast, the photo of the Dover Cliffs shown in Figure 7.13 uses manygradations throughout the sky, cliffs, and channel, which makes it a bettercandidate to be saved as a JPG.

5 Small graphics are used One way to keep a Web site small is to use and

reuse small graphics, whether in the layout of the page or as a mouseover.Strictly because of their size, such images, including buttons, bullets, andmouseovers, should generally be saved as PNGs or GIFs (see Figure 7.14).The reason is that PNG and GIF compression handle a small number ofcolors much better than JPG compression does

Knowing How PNG and GIF Compression Work

It is helpful for a designer to understand how PNG and GIF compression work

By creating and saving images a certain way, the designer can drastically reducethe download size of images, thus speeding up the site The secret of the two

Figure 7.12

Thumbnail that should be saved as an 8-bit PNG or GIF because of the solid colors.

Chapter 7 ■ Understanding Graphics

134

formats is that they compress as many pixels of one solid color at a time while

running horizontally In other words, if a designer creates an image where areas

of one color run horizontally rather than vertically, the image will be compressed

significantly smaller Figure 7.15 is the exact same image as Figure 7.16; however,

by rotating Figure 7.15 a mere 90 degrees and saving it so that the lines arehorizontal, the image in Figure 7.16 can be compressed by more than 50 percent.

Of course, this is a very specific example because not all images have lines It doesillustrate that the more you have solid colors run horizontally, the more theimage can be compressed

Figure 7.15

File size of image with vertical lines is 1KB.

Figure 7.16

File size of image with horizontal lines is 457KB.

Chapter 7 ■ Understanding Graphics

136

Unfortunately, if the image is already created, there is not much the designer

can do When starting a design from scratch, however, this can be helpful to

know if the download size of the site is extremely critical Figure 7.17 is a design

that was created especially to benefit from GIF compression Notice that nearly

all the lines run horizontally Not only does this take advantage of the GIF

format’s best compression, but it also takes advantage of using the ability to

repeat background images In other words, each line that cannot be saved just as

a background color can be saved as a background image, which can be repeated

infinitely across the X axis (horizontal) using CSS That way, the design requires

a download of only a few images It is then up to the browser to repeat the

images, rather than making it necessary to download larger images

Using JPGs

While the GIF format is useful for saving images with limited colors, the JPG

format is just as powerful when saving images with hundreds, thousands, or

millions of colors Unlike multiple benefits from the 8-bit PNG and GIF formats,

this one advantage of the JPG format makes it remarkably valuable when

build-ing mortised sites

A designer should typically save an image as a JPG in the following situations

Figure 7.17

Design that takes advantage of GIF horizontal compression.

Saving a Photograph

Other than in certain instances when saving thumbnails or dealing with flatplanes of color, as outlined in the ‘‘Using PNGs and GIFs’’ section, photographsshould almost always be saved as JPGs The image in Figure 7.18 was saved as aGIF with 128 colors The same image was saved as a JPG in Figure 7.19 with thequality (compression) level set to 41 in Photoshop There is no visible difference

in the two photos Note that the JPG photo is compressed to be more than 80percent smaller

N o t e

The 24-bit PNG format can also save as many colors as JPG Unlike the JPG format, the 24-bit PNG format will save the colors in a lossless method, which will maintain the original colors The lossless method comes at a cost, though The 24-bit PNG will typically be much larger than the JPG.

Saving an Image That Has Gradations

Although this is not an absolute rule, in most cases, the JPG format will compressimages with gradations considerably better than the PNG and GIF formats, be-cause gradations contain many colors Depending on the area, gradations canrange from a few colors to millions of colors Figure 7.20 is an image of a tulip

Figure 7.18

GIF photo saved at 25KB.

Chapter 7 ■ Understanding Graphics

138

that is mainly comprised of gradations throughout the photo Figure 7.21 is a

zoomed-in view of the rectangle section shown in Figure 7.20

The human eye cannot physically detect that there are 167 colors used to create

the area A computer, however, can detect those colors, and, unless otherwise

directed when saving the image, will try to save each of those colors, considerablyincreasing the file size.

Some gradations can also be saved as GIFs The rectangle that makes up ure 7.21 is an example of this situation When saved with the entire photo, therectangle would need to be saved as a JPG However, if the rectangle were to

Fig-be cropped and saved on its own, it could Fig-be saved as a PNG or GIF with only

16 colors, as opposed to 167 Once again, this is because the human eye not physically detect that many colors in that small of an area Viewing theimage at 100 percent, it is difficult to detect more than a handful of colors.Thus, when a color is subtracted from the image, it is replaced with a colorthat is still present in the image Therefore, using 16 colors would be morethan adequate

can-Figure 7.22 is an example of a gradated design The gradated circles (see can-Figure7.23) at the top and bottom of the design are saved as GIFs rather than JPGs fortwo reasons:

1 Because they are small, fewer colors are needed, which keeps the file sizesmall

2 If they were saved as JPGs, the circles could lose their exact hue andthe white in the image could have a pinkish tint, which would disrupt thedesign This, though, is not that much of problem anymore with theimprovement of Adobe’s compression functionality in Photoshop

Figure 7.21

Zoomed-in view of the rectangle area in Figure 7.20.

Chapter 7 ■ Understanding Graphics

140

Saving Text on Top of a Photo

When creating a mortised site, the goal is to make it as fast as possible Thisusually means creating designs where elements can be saved in their best possibleformats In other words, generally save text as PNGs or GIFs and photographs asJPGs But this is not always possible One instance is when a designer saves animage with text on top of a background, such as a photo (see Figure 7.24) Theproblem the designer runs into with this example is that if the photo is saved as aGIF to keep the text crisp, it could be as large as 70KB However, if the entireimage were compressed as a JPG with a smaller size, the text could be blurred andsplotchy There are only two solutions The first is to save the text as a separateimage with a transparent color and layer it over the church, which would be used

as a background image The other solution would be to simply save the image as

a higher quality JPG, which is usually the best decision Saving it this way, thedesigner can compress the image to around 15KB without compromising thequality of the text too much

Using the JPG file format considerably broadens a designer’s ability to buildstriking graphical sites Figure 7.25 is a graphical site that has a total download

of 35KB

Figure 7.24

Photo with text layered on top that should be saved as a JPG.

Chapter 7 ■ Understanding Graphics

142

Misusing Image Formats

Properly creating, saving, and compressing images can make or break a site

Figure 7.25 was a perfect example of how small the download can be of a largely

graphical site when properly using the JPG and GIF file formats Figure 7.26, on

the other hand, is at the other end of the spectrum The site misuses images in

enough instances to make the entire site download larger than 300KB

With today’s software and coding techniques, it is not always necessary, in most

instances, to have a site come in at more than 50KB Following are seven

in-stances where a designer can compromise the quality of a site by incorrectly

saving or compressing an image

1 Saving an uncompressed image This is the most common mistake made by

designers Just saving an image with the correct file format is not enough Thedesigner still needs to compress the image Figure 7.27, for example, whensaved at the absolute lowest JPG compression setting in Photoshop, comes in

at 65KB, while saving it with the absolute highest compression, the file size is

Figure 7.25

Graphical site that comes in under 35KB Copyright † 2002 by House of Nutrition All rights reserved.

Figure 7.26

Site that misuses graphics; the entire page download is larger than 300KB.

Figure 7.27

Photo after being compressed.

Chapter 7 ■ Understanding Graphics

144

reduced to 5KB This allows a lot of room for variation While the qualitywould be severely compromised at 5KB, saving the image at 65KB, too, is amistake Most JPGs need only be saved with so much compression After acertain quality has been met, decreasing the compression only creates a largerfile size; it does not improve the quality of the image.

PNGs and GIFs, too, can be compressed many times Because each colorthat is eliminated from a PNG or GIF during compression is replaced byanother color, images that are saved as GIFs can be drastically reducedmany times

2 Photo saved as an 8-bit PNG or GIF While this was more of an issue in

years past, designers still save photos as GIFs Figure 7.28 is a photo that,when saved as a GIF, is 54KB If the image were saved as a JPG, a file size of14KB would provide acceptable image quality

3 Solid colors saved as a JPG The JPG format is ironic Because it can

compress millions of colors so easily, it is easy for a designer to believe it can

do the same for limited colors This is not the case Figure 7.29 shows animage that was saved as a GIF

Figure 7.28

Image that should be saved as a JPG rather than a GIF.

Figure 7.30 is the same image saved as a JPG Following are three problemswith the latter image:

■ Although compressed nearly 80 percent, Figure 7.30 is still 4KB, asopposed to Figure 7.29, which is 2KB

■ The lines on the right in Figure 7.30 are completely splotchy, unlike thelines in Figure 7.29, which are crisp

■ The level at which the JPG is compressed slightly changes the backgroundcolor

4 Mixing JPG, PNG, and GIF formats to maintain one color When

com-pressing an image as a JPG, the image sometimes loses its color accuracy

In other words, the colors do not always remain the same after beingcompressed In Figure 7.31, a clock with a colored border was saved on abackground with the same color as the border The clock with the borderwas saved as a JPG, while the background was saved as a GIF

Taking a closer look at the seam where the two images were mortisedtogether (Figure 7.32), it is apparent that the smoothness and clarity ofthe clock’s border becomes splotchy

Figure 7.29

Image saved as a GIF.

Chapter 7 ■ Understanding Graphics

146

5 Over compressing an image While compressing an image is not overly

complicated, obtaining an eye for a properly compressed image takes alittle experience What initially may look good to a designer one day, maylook overly compressed the next When a JPG is overly compressed (seeFigure 7.33) from its original state (Figure 7.34), the image loses itscrispness

One of the first places to show degradation is in solid colors, such as people’sfaces All three faces and the lines on the floor in Figure 7.34 have lost theirclarity.

Figure 7.32

Zoomed-in view of splotchiness in Figure 7.31.

Figure 7.33

Image saved as a JPG with proper compression.

Chapter 7 ■ Understanding Graphics

148

When a GIF is overly compressed, the image becomes pixilated in areas with

more colors Figure 7.35 is the original image, while Figure 7.36 is an overly

6 Not saving images as PNGs, GIFs, or JPGs As previously mentioned, the

three main image file formats used with the Internet today are PNGs, GIFs,and JPGs However, a Web page can also use BMP files, and the browserwill display them The header image of Figure 7.26 was saved as a BMP It is159KB, but if it had been saved as a GIF, it could have been saved ataround 14KB

Figure 7.37 is a photo saved as a JPG that is 4KB, while the same imagesaved as a BMP file (Figure 7.38) is 166KB

7 Saving large, animated GIFs The GIF format is versatile in that a designer

can not only create a regular GIF and a GIF with a transparent color, but hecan also save a GIF that is animated Unfortunately, just because a designercan save an animated GIF does not necessarily mean it should be done(Web design Rule 1)

Using an animated GIF can, at times, increase the usability of a site if the file is

typically under 10KB However, when animated GIFs are used to display several

photos, a designer is not only incorrectly saving the photos as GIFs, but two,

three, or four of them are being saved into one animated GIF, amplifying the

mistake

Understanding Graphics/Compression Software

Prior to the considerable growth of the Internet in the early to mid-1990s, the

goal of graphics software was to create high-quality images, such as TIF, BMP,

and EPS files The reason was that the graphics created by the programs were

mainly used for printers Unfortunately, this created a problem for Web

de-signers Because a minimum of 300dpi (dots per inch) to 600dpi was required by

printers, designers had to try to compress images to work with monitors, which

mostly show only 72dpi Anything in excess of 72dpi for images increases the file

size without improving the quality of the image

Large images coupled with slow modems severely handcuffed designers because

it was difficult to create fast-downloading sites Although the software allowed

the designer the ability to compress images, opportunities were limited To

compress a GIF, the designer could assign only a certain bit depth to an image

Figure 7.38

Image saved as a BMP (166KB).

In other words, the designer had the choice of saving the image with only 2, 4, 8,

16, 32, 64, 128, or 256 colors To compress a JPG, the designer could assigncompression in only increments of 10 In other words, the designer had thechoice to save an image only at a level of 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10

Fortunately, software companies have made great strides in offering designersmore flexibility in compressing images Today, not only have these companiescreated and improved their own image-compression software, but they also haveincluded this functionality in their image editing programs

Compressing images has never been more flexible Now, instead of determiningthe compression of a PNG or GIF in groups of numbers, a designer can select thespecific number of colors and even the specific colors themselves to include in animage For even more control, the designer can even select certain colors thatmust remain in an image as the total number of colors is reduced Figure 7.39illustrates the compression component included with Photoshop It not onlyshows a designer which colors are selected for the particular image, but it alsoallows the designer to compare the original version with the compressed version

as changes are made

Figure 7.39

Image-compression window in Photoshop.

Chapter 7 ■ Understanding Graphics

152

N o t e

When choosing to compress an image with the JPG format, the designer now has the flexibility of increasing or decreasing compression by 1 percent instead of 10 percent at a time This is incredibly useful because it allows the designer to take advantage of a unique characteristic of the JPG format.

Sometimes when increasing the compression from, say, a quality level of 46 to 45, the quality of the image decreases However, then when quality is dropped one more percent to 44, the image quality will shift enough to where it appears sharper than the lesser compression level of 45 This allows a designer the ability to trim the excess file size down to the bare-bones minimum.

Summary

Much of the speed and quality of a site is determined by its graphics, which is

why it is important for a designer to understand how to create, use, save, and

compress images While vector-based images are the newest technology

avail-able, traditional bitmap images, such as PNGs, GIFs, and JPGs, are the most

widely and consistently supported

PNGs, GIFs, and JPGs can do a good job of compressing images if the correct

format is used A designer can also use the formats incorrectly, which can

com-promise the quality of a site If the designer understands how and when to use

the formats along with compression software, sites can be highly graphical and

yet fast at the same time

This page intentionally left blank

Creating CSS

Designs

While back-end development such as db-driven programming and ecommercefunctionality has made large strides over the years, so has the front-end design ofsites In the past, to create a Web site that had the look and feel of traditionalgraphic design, the designer had to resort to using nested HTML (now XHTML)tables for the majority of content placement The tables not only allowed thedesigner to mortise images together, but they also allowed for the layout ofXHTML text that was styled using CSS With the evolution of browsers over thepast several years, nearly all layouts can now be accomplished using CSS WhileChapter 6, ‘‘What Is Needed to Build Mortised Sites,’’ outlines essential basicinformation about CSS, this chapter explains the basics of how to use that code

to create such sites The chapter also explains the differences between XHTMLtable-based design and CSS-driven design

CSS-Based Design Versus XHTML Table Design

The first question a designer usually asks when it comes to creating CSS designs

is, ‘‘HTML has worked well for so many years, why isn’t it good enough now?’’Unfortunately, there is not one answer to this question Yes, HTML sites havebeen the main staple of designers since the mid-1990s Yes, they are logical in theway they work Yes, XHTML code, having replaced HTML as the standard, iscompact enough, allowing for fast downloads, depending on included imagesand any extra code included The bottom line, though, is nearly everything can

be improved, and XHTML’s table-based design is no exception There are severaladvantages to creating CSS-based designs.

Advantages of CSS Designs

■ The outputted Web page, barring the style sheet, is much cleaner and easier

to follow, because it takes considerably less code to accomplish the samelook and feel This makes it easier for the designer to understand nestedelements and how they relate to other content and containers While nesting

is still necessary to accomplish the same look and feel as XHTML-tabledesign, the amount of code to do so is drastically reduced

■ The combined download size, or weight, of the XHTML and CSS files isconsiderably smaller Whether a user has a low- or high-speed connection,faster sites are always appreciated

■ The structure and styling of the site can be easily added, edited, and deleted.Although this concept is not new to those who create db-driven sites, CSSallows for changes made to one page to cascade through an entire site

■ Pages can be printed with much more control and consistency thanXHTML pages

This is not to say that CSS is the perfect solution to coding Web sites As with anyInternet technology, there are going to be some disadvantages However, it can

be argued that the advantages outweigh the disadvantages, but the designerneeds to be aware of these shortcomings

Disadvantages of CSS Designs

■ There is a learning curve Even if a designer is familiar with CSS, using thelanguage to lay out an entire site takes longer to learn than just styling text.The main reason is that there are idiosyncrasies with how CSS and its var-ious elements interact in different browsers The workarounds or hacks tosolve many of these idiosyncrasies are explained in the following chapters,and they mitigate this disadvantage

■ Although things are improving, CSS is not supported as consistently inbrowsers as XHTML tables are, so it requires more testing by the designer.Not only are there compliant and noncompliant browsers that handle CSS

Chapter 8 ■ Creating CSS Designs

156