Browse DevX
Sign up for e-mail newsletters from DevX


Optimizing the Graphics File : Page 9

Finding the right graphic is just the first step in putting graphics into your Web site. Once you've created or found the graphic, you need to prepare it for online use, structuring it to display quickly at the maximum quality. Optimizing the File shows you how to make the balance between file size and quality level.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date