Optimizing the Graphics File

he first place to start is by saving your graphics file in a Web-ready way.

The way you save a graphics file for print use and the way you save it for Web use is quite different.

In print:Online:
You want to save all the data you can — the more data, the better the results. You want to find a balance between the size of the file and the screen display quality of the graphic.
All readers will be seeing the graphic in much the same way, printed with a certain process onto a certain type of paper.Readers will be seeing the graphic on different platforms, with different browsers, with different monitors.
Readers see a reflective image created using subtractive colors. Readers see a projected or transmissive image created using additive colors.
The viewing experience involves picking up the paper and looking at the graphic. The viewing experience involves the browser contacting the server, the server delivering the graphic across a connection to the browser, and the computer’s video card displaying the graphic within the browser.
There is a wide range of color options available (as long as you pay for the press run.) Color use is free … but your readers may or may not be able to see it exactly as you expect.
Anti-alias with Care
Anti-aliasing can smooth out your edges, making graphics look nicer. However, it can also add overhead.

Look at your design carefully before deciding whether to alias or anti-alias for edge quality. Designers often assume that everything looks better anti-aliased?but that isn’t necessarily true.

Save your artwork as an aliased graphic and place it on the page before evaluating it. Remember, the viewers will not look at the page as critically as you do and some elements, such as small text treated as a graphic, actually look better aliased.

Anti-aliased graphics can add size to your graphics file and time to the page load process. In addition, their appearance will vary more from system to system than aliased graphics. Anti-aliasing can add a great deal of value&3151;when it is used well.

How-to anti-alias a graphic:
In Fireworks, any object you draw can be aliased or anti-aliased. You can also specify the degree of anti-aliasing. The anti-alias process is different for fills than it is for strokes.

For filled objects:

  1. Draw the object using any of the drawing tools. The object can be filled as you draw it or by using the paint bucket.
  2. Open the Fill palette and choose Anti-alias from the Edge pop-up menu. Alternately, you can open the Modify menu, select Edge, and then Anti-alias.

    The Fireworks default in both cases is Anti-Alias. To turn off anti-alias, select the Hard Edge option from the menu instead of the Anti-alias option. To create an ever softer edge, select the Feather option from the Edge menu. Feathering allows you to specify how much of a soft edge the graphic object will get. Change the feathering by moving the value slider next to the Edge menu. Higher numbers are fuzzier.

    This table shows the different options:

     Fill Palette settingsFull sizeMagnified
    Aliased
    Anti-Aliased
    Feathered

For stroked objects:

  1. Draw the object using any of the drawing tools.
  2. Make sure the object has a stroke and the stroke has width:
    1. Open the Stroke palette, select a Stroke Category from the top pop-up menu. Each category has settings for Stroke Name, Tip Size (width), and Edge Softness (anti-aliasing/feathering).
    2. Choose a Stroke Name.
    3. Change the default Tip Size by entering a number into the value box in the middle right of the stroke palette, or move the value slider to the right of that box.

  3. In the Stroke Palette box, change the default Edge Softness by moving the value slider next to the Tip Preview box (this is located in the middle left of the stroke palette). Higher numbers are fuzzier. Stroke categories Pencil and Basic have Stroke Names that cannot be anti-aliased; these names include the word hard, indicating they are hard edged.

    This table shows some examples of stroke edge options:

    CategoryStroke Palette settingsFull sizeMagnified
    Pencil-hard
    Pencil-Soft
    Airbrush

Crop Well

Good use of cropping enhances the image and reduces file size.

Cutting off unwanted parts of a picture?or cropping?can greatly enhance the image’s effectiveness. In addition, cropping an image reduces its file size and improves the focus of your graphic content. All image editing programs have cropping tools. Look carefully at your graphics and crop them as much as possible.

The original uncropped image has extraneous, and distracting visual information.Cropping the image to show only the car focuses the viewer’s attention on the vehicle, not it’s surroundings.Cropping further can change the visual story, this graphic emphasises the number and driver of the car.
Use the Real Size

Save your graphic at the size you are using it within your Web page.

Alway make the image in your Web graphic file be the size that you plan to use it at within the page. If you’ll be using it at several different sizes, make several different files each at a different image size.

You can resize an image using the image tag’s width and height attributes, but in most cases all that will do is add overhead to the time it takes the page to display:

Original size is:
252 x 144 pixels
IMG attributes are:
width=”252″ height=”144″
File size is: 10.1K
Loads and immediately displays
Original size is:
252 x 144 pixels
IMG attributes are:
width=”121″ height=”69″
File size is: 10.1K
Loads, then client computer spends time resizing before display
Original size is:
121 x 69 pixels
IMG attributes are:
width=”121″ height=”69″
File size is: 3.3K Loads and immediately displays
Use Screen Resolution

Save your graphic at a resolution appropriate for screen display

You readers are going to be viewing your pages&3151;and the graphics within them?on a computer monitor. Monitors typically display data at 72 dpi. Therefore, save your files at 72 dpi.

If you are using graphics files which were originally created for print media, they are typically saved at a higher resolution. If you use a larger resolution one of two things will happen: if you’ve specified the image size in your image tag, the extra data will just be thrown away but your readers will get to experience the joy of a long download time. If the image size isn’t specified, all that data will display and you’ll end up with a huge image on the screen.

So forget the print rules and stick to the lower resolution?you’ll get the same quality, far, far smaller files, and no size surprises.

 
Original physical size = 1.68 x .96 inches
Original resolution = 150dpi
Number of pixels = 252 x 144
Physical size on a Web page = 3.5 x 2 inches
This image increases to more than twice its original size because the resolution is too high.
 Original physical size = 1.68 x .96 inches
Original resolution = 72dpi
Number of pixels = 121 x 69
Physical size on a Web page = 1.68 x .96 inches
This image is the right size because the resolution is 72dpi.
Select the Best Format

Matching the right format to the right image saves valuable download time and makes the image look better.

There are three formats you might want to consider:

  • GIF
  • JPEG
  • PNG

GIF and JPEG formats are supported by all browsers. Newer browsers (5x and above) also support the PNG file format, which is specifically designed for web use.

Each of these formats compresses graphic data using different methods. Each method works best with a certain type of graphical data: GIF or PNG for line art with blocks of solid color and JPEG for photos or grahics with continuous tones.

Deciding on the type and amount of compression you need is a balancing act. Too much compression negatively impacts image quality, while too little can slow your site to a painful crawl. The goal is to give readers something pleasing to see within the time they are willing to wait.

This chart shows the three formats and their compression features:

FormatCompression RatiosDescription
GIF4:1 – 10:1Lossless for images. Works best for flat color, sharp-edged art. Horizontal bands of color compress better than vertical bands.
JPEG5:1 – 10:1High quality – has little or no loss in image quality with continuous tone originals. Worse results for flat color and sharp-edge images.
20:1 – 40:1Moderate quality – usually the best choice for the Web.
50:1 – 100:1Poor quality – suitable for thumbnails and previews.
PNGone third smaller than GIFsPNGs behave similarly to GIFs and work best with flat-color, sharp-edged art. PNGs compress both horizontally and vertically, so solid blocks of color generally compress best.
Format Guidelines

Here are some guidelines for selecting the best graphic format for your file.

  • Large areas of solid color?

    Go with GIF. Images created with vector-based drawing programs and typograhic images are usually good candidates for GIF format. Any image that would be a good choice for a GIF format will also work well as a PNG format.

    GIF with Web palette:GIF with adaptive palette:JPEG with 80% compression:


    File size = 6.6K


    File size = 6.7K


    File size = 6.0K

    Note: A solid color image is an obvious choice for GIF file format. However a solid color image that has been created with non-Web colors will show unpleasant dithering if it is converted to the web palette. The JPEG file format makes this solid image look blotchy.

  • Photos?

    JPEG’s the snap choice. Images that have been scanned, or created in a bitmap drawing or painting program will typically work well as a JPEG. If the photo-realistic image is monochromatic, it may also work well as a GIF with an adaptive palette.

    GIF with Web paletteGIF with adaptive paletteJPEG with 80% compression

    File size = 11.9K

    File size = 14.5K

    File size = 7.0K
     

    File size = 10.8K

    File size = 9.8K

    File size = 6.1K

    Note: A photographic image is an obvious choice for JPEG file format. In the first image, the adaptive palette GIF is an acceptable alternative if it is necessary to use a GIF. However the file size is significantly greater than a JPEG. In the second image, the adaptive palett GIF shows more dithering due to the strong colors and smooth blending in the photograph. In all cases, the Web palette GIF is always going to cause extreme dithering of a photograph.

  • A little of both?

    If the image is a combination of blocks of color and continuous tones, experiment with both alternatives and see which gives you the best solution in balancing files size and quality.

    Actually go ahead and save the image as a GIF and also as a JPEG and comprare the results. If possible, look at the image quality on different computers, under different browsers. Look at the file size. Often a format and file size tradeoff is clear.

    GIF with Web paletteGIF with adaptive paletteJPEG with 80% compression

    File size = 10.7K

    File size = 13.1K

    File size = 5.2K

    Note: A monochromatic image looks equally good as a GIF with adaptive palette or JPEG. JPEG compression is very effective on monochromatic photo-realistic images. The Web palette GIF is always going to cause extreme dithering of a monochromatic image because it does not contain enough tones of any color to produce a smooth blend.

  • All readers are using the newest broswers?

    You might want to consider PNG format. Older broswers might not be able to display this format, but if you are working in an environment of 5.0+ browsers, you can get both good quality and smaller file sizes.

      acorn.gifacorn.png
     This GIF image uses a palette of 155 colors. The file size is 5,125 bytes.This PNG image uses an identical palette. Its file size is 4,253 bytes.
GIF Options

When you use the GIF format, you must also set several parameters including bit depth, palette, and dithering.

To save a graphic as a GIF you perform the following steps. Click on any step to learn more about it.

  1. Convert the graphic from 24-bit RGB to an indexed file. This process also flattens or merges the layers within a graphic file.
  2. Select a type of color palette, usually either Web of adaptive palette.
  3. Choose a bit depth for the palette. In most cases, 7-bit or less is sufficient.
  4. Select whether to dither or not dither the image.
  5. Save the file with the three-letter extension .gif at the end of the file name.

TIP: The Web graphics program Fireworks has an export wizard that is very helpful in determining which file format and settings are appropriate for an image.

To use the wizard:

  1. Create your image in a vector-based or bitmap drawing program, or use Fireworks as your creation tool.
  2. When the image is complete, import it into Fireworks. Fireworks supports the following file types: PNG, GIF, JPEG, BMP, TIFF, xRes, LRG, ASCII, RTF, Adobe Photoshop 3, 4, 5, Adobe Illustrator 7, Macromedia FreeHand 7, 8, CorelDRAW 7, Targa.
  3. Make any adjustments to the image (like setting its size and resolution to one appropriate for your Web page)
  4. Select Export Wizard from the File menu.

    The Export Wizard asks you a few questions about the image and its intended use and then displays a large dialog box containing options for export file type and image settings on the left side and a preview area on the right.

    Through the palette bar at the bottom right of dialog box, you can tell the preview area to show 1, 2, or 4 simultaneous previews of the same image.

    Each preview area lists file format, compression, file size and speed over an average Internet connection. Fireworks places the preferable choice in the top preview area.

  5. In the upper left corner is an Option tab, which contains pull-down menus for file format and format options. To change Firework’s recommendation, click on the settings until you are happy with the result.
  6. When the setting are the ones you want, click on the Next button to continue. You’ll be see the usual dialog box for saving a file.
  7. Save the file in your images directory.
JPEG Options
There is more to having a good JPEG than selecting the right compression option.

JPEG works well for compressing either full-color or gray-scale images of natural, real-world scenes. JPEG compression is best for continuous tone images like photographs or natural artwork; not for sharp-edged or flat-color, art-like lettering, simple cartoons, or line drawings. JPEG always uses 24-bit color depth, it doesn’t handle 8-bit (indexed images); you have to convert these images into RGB before compressing them as JPEGs.

What looks good as a JPEG:

  • Photographs
  • True-color
  • Lots of colors
  • Blends
  • Soft shadows, glows, and the like

What doesn’t look good as a JPEG:
Flat color areas:
Logos, icons, and type:
 
Thumbnail images don’t compress well:
 
JPEG, 3.4K     GIF, 2.3K

JPEG is a lossy compression method, meaning information is lost during compression. This type of compression is designed to take advantage of the way our eyes work; we are more sensitive to slow changes of brightness and color than we are to rapid changes over a short distance. To achieve this, the image is converted into a frequency map and high frequency information is selectively discarded. The greater the compression, the more information is discarded.

Lossy compression reduces image fidelity by removing information. In solid-color areas, JPEG compression actually adds noise which can distort and even blur flat-color graphics, which is why JPEG compression is not well suited to flat-color sharp-edged images or lettering.

To make a good JPEG file, follow these steps. Click on any step to learn more about it:

  1. Scan with a good quality photograph, or create a photo-realistic image on the computer.
  2. Remember that the computer screen can only display 72 dpi, so it isn’t necessary to scan or work at a high resolution.
  3. Reduce the image to the size it will appear on your Web page.
  4. Select a compression setting. Medium or between 50 and 80 percent, generally works for most images. The compression option generally appears as you save the file.
  5. Save the file with the three-letter extension .jpg at the end of the file name.

TIP: The Web graphics program Fireworks has an export wizard that is very helpful in determining which file format and settings are appropriate for an image.

To use the wizard:

  1. Create your image in a vector-based or bitmap drawing program, or use Fireworks as your creation tool.
  2. When the image is complete, import it into Fireworks. Fireworks supports the following file types: PNG, GIF, JPEG, BMP, TIFF, xRes, LRG, ASCII, RTF, Adobe Photoshop 3, 4, 5, Adobe Illustrator 7, Macromedia FreeHand 7, 8, CorelDRAW 7, Targa.
  3. Make any adjustments to the image (like setting its size and resolution to one appropriate for your Web page).
  4. Select Export Wizard from the File menu.
    The Export Wizard asks you a few questions about the image and its intended use and then displays a large dialog box containing options for export file type and image settings on the left side and a preview area on the right.

    Through the palette bar at the bottom right of dialog box, you can tell the preview area to show 1, 2, or 4 simultaneous previews of the same image.

    Each preview area lists file format, compression, file size and speed over an average Internet connection. Fireworks places the preferable choice in the top preview area.
  5. In the upper left corner is an Option tab, which contains pull-down menus for file format and format options. To change Firework’s recommendation, click on the settings until you are happy with the result.
  6. When the setting are the ones you want, click on the Next button to continue. You’ll be see the usual dialog box for saving a file.
  7. Save the file in your images directory.
Reader Experience

Readers won’t have the same viewing experience you do

It is a good idea to see your graphics under different. viewing situtations, to get a sense of the variations your readers are likely to encounter.

First, try viewing your pages under a 256 color monitor. Although increasing numbers of readers have true-color monitors, this is one place where you will still find some variation.

To simulate a basic color monitor, change your monitor’s color setting to 256 colors. On a Macintosh, use the “Monitors and Sounds” control panel:

mac color setting

On a PC use the Setting/Control Panel/Display option, then select the Settings tab/256 color option:

windows monitor settings

If you look at your images in 256 color mode, you’ll get a better sense of what your readers are seeing.

Next, try viewing your page under both Netscape Navigator and Internet Explorer. There is a fairly even mix of these browsers in use, and each has some subtle variations.

Finally, if you have access to both a Macintosh and a PC, try viewing your page on the different platforms. You will see system-to-system differences in rendering.

Check File Size

Check the size of your file.

Don’t forget to check the size of your files. Most graphic programs have a feature that lets you see how big your file is. For example, Fireworks has a handy feature that allows you to preview various file format options and see the file size for that file as well as the approximate download time over a 28.8 modem connection.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

The Latest

technology leadership

Why the World Needs More Technology Leadership

As a fact, technology has touched every single aspect of our lives. And there are some technology giants in today’s world which have been frequently opined to have a strong influence on recent overall technological influence. Moreover, those tech giants have popular technology leaders leading the companies toward achieving greatness.

iOS app development

The Future of iOS App Development: Trends to Watch

When it launched in 2008, the Apple App Store only had 500 apps available. By the first quarter of 2022, the store had about 2.18 million iOS-exclusive apps. Average monthly app releases for the platform reached 34,000 in the first half of 2022, indicating rapid growth in iOS app development.

microsoft careers

Top Careers at Microsoft

Microsoft has gained its position as one of the top companies in the world, and Microsoft careers are flourishing. This multinational company is efficiently developing popular software and computers with other consumer electronics. It is a dream come true for so many people to acquire a high paid, high-prestige job