Web Design Tutorial Part 4:
Optimizing Graphics for Web – The Selective JPEG Mask

BY MELODY REED

Editorial

President’s PDA

Computer
Connections

Web Design Part 4

Why Apple Can’t
Afford to Ignore
the Gaming Industry

Adobe Creative
Suite

Tutorials:
Know Your App

PDF2Office v1.0

Qaptain Qwerty’s
Qorner

Photo Page

From My Keyboard

Volunteer for
Express!

In preparation for this part of the tutorial, in the last issue I asked you to have a photo of yourself or any high res photo that you would like to put up on your web site. This should be particularly interesting to photographers, who are concerned about getting their files ready for the web, without losing quality, and keeping them small so they download fast.

As you probably know by now, all graphic files, especially photographs, have to be 'optimized' before they can be incorporated into a web page. Optimization combines the art and science of reducing the size of a digital image (thus increasing the speed that it downloads) but – the art is in maintaining an acceptable appearance, with negligible decay. This is a challenge; we are taking, for example, a 300 dpi photo that weighs in at 300 mb and need to reduce this to 72 dpi weighing no more than 20-35 K! What happens when you make these drastic reductions in size is the creation of artifacts (clumps of dispossessed pixels of arbitrary color and size and shapes) representing the degradation of the file due to extreme compression.

Even the experienced optimization artist/technician must make a compromise when deciding between reduction of size (and decreased quality) but with a faster download time, or better quality with a less compressed file (slower download time). This is all about bandwidth. When everybody has super fast access to the internet we won't need to do this. But for now download/wait time would be unbearable if we didn't optimize. And unless you are giving away something very special or are a relative of the web designer, 2-3 seconds and you have surfed on to another more responsive site.

I am going to spare you all the basic details of the ubiquous '2 up 4 up' optimization windows, but describe a more strategic approach. If you haven't seen it before, see fig 1. Suffice to say you can intuitively compare various resolution and file types side by side, enabling you to make the best file selection. You can find this dialog box in Photoshop and in Fireworks (where we will be working today).

Instead I want to show you a very handy technique, that eliminates the need to compromise the appearance of the file. It is really beneficial in photographic images to simulate the 'selective focus' effect of the camera with a wide open aperture. When selective focus is used skillfully in a photograph, it separates itself from a picture postcard snapshot – where everything has the same weight – to an artistic portrait, of a person, a flower or a landscape. It becomes an art because it is communicating and revealing the artists personal point of view – where should we focus? What is the picture telling us, or making us think about.

Some examples of this technique:

• making the eyes of a portrait stand out by softening the surrounding areas
• emphasizing the texture and color saturation of just one petal of a flower
• making one object in a still life stand outy
• one person in a crowd you want to bring the viewers attention to, as you were looking at them yourself
• a close-up (macro) shot lends itself to a blurry background  

This should be

particularly interesting

to photographers,

who are concerned

about getting their

files ready for the

web – without losing

quality and keeping

them small, so

they download fast.

Selective JPG Masking, a technique which we are able to do in Fireworks, not only lets us create a more creative image, but eliminates the struggle of size versus quality. The strategy is first to determine the lowest quality the non-essential parts of the image can live with, (just before we see any pixilation). Then we can save the high quality, low compression for the important focus of the image. Even if a minimum is in this higher resolution the eye of the viewer will go to this sharp, focused area of the image-which actually may have a stronger emotional impact than if everything was evenly compressed.

Now going back to the four up dialog box in Fireworks select these two values. Go back to the original file and select the 'important' part of your picture with the lasso tool. Then go to Modify/Selective JPG/Save selection as JPG mask. Now we can deselect the selection (cmd-d) because the mask is in place. Click on preview, so you can see the results of your next and final step.

Open up the Optimize palette from the windows menu and select JPEG as the file format, and notice the two choices Quality and Selective Quality.

The Quality field is for the non-essential part of the image, in this case Mugsey's ears and beard. The Selective Quality of 90% (hardly any compression at all), I reserved only for his eyes and nose. In Coby's case I also included his lips. This makes the picture file small, and doesn't distract from their beautiful faces.

Selective JPG Masking,

a technique which

we are able to do in

Fireworks not only

lets us create a more

creative image, but

eliminates the struggle

of size versus quality.

So that is it for this month. Happy practicing. Please feel free to e-mail me with any questions at all.

Next time we meet I will talk about styling the text and the page by using Cascading Style Sheets (CSS) a must in today's web design world. Also if I have time I will share more about Melody's Media Mix, an instructional, (and I hope enjoyable) cable show about digital art and technology. If you are interested in knowing when it will air, or if you would like to be a guest on the show please get in touch with me at .    

Melody Reed is a native of Manhattan and has been an instructor at Pratt Institute for 18 years. She is the chairperson for the Macromedia MX web design sig of NYPC, and is also a computer consultant, web designer, digital photographer, and tutor. She can be reached for questions or consultation at 917-721-9696 or .