June 12, 2008

Image Formatting tips

Image file formats

Image files are made up of picture elements, called PIXELS The pixels that comprise an image are in the form of a grid of columns and rows. Each of the pixels in an image stores digital numbers representing brightness and color.
Major graphic file formats

There are many graphic file formats, if we include the proprietary types. The PNG, JPEG, and GIF formats are most often used to display images on the Internet. These graphic formats are listed and brieflydescribed below, separated into the two main families of graphics: raster and vector.

Raster formats

JPEG
The JPEG (Joint Photographic Experts Group) image files are a lossy format. The DOS filename extension is JPG, although other operating systems may use JPEG. Nearly all digital cameras have the option tosave images in JPEG format. The JPEG format supports 16-bit color and produces relatively small file sizes. Fortunately, the compression in most cases does not detract noticeably from the image. But JPEG files do suffer generational degradation when repeatedly edited and saved. Photographic images are best stored in a lossless non-JPEG format if they will be re-edited in future, or if the presence of small "artifacts" (blemishes), due to the nature of the JPEG compression algorithm, is unacceptable. JPEG is also used as the image compression algorithm in many Adobe PDF files.

TIFF
The TIFF (Tagged Image File Format) is a flexible image format that normally uses a filename extension of TIFF or TIF. TIFF's flexibility is both a feature and a curse, with no single reader capable of handling all the different varieties of TIFF files. TIFF can be lossy or lossless. Some types of TIFF offer relatively good
lossless compression for bi-level (black and white, no grey) images. Some high-end digital cameras have the option to save images in the TIFF format, using the LZW compression algorithm for lossless storage. The TIFF image format is not widely supported by web browsers, and should not be used on the World Wide Web. TIFF is still widely accepted as a photograph file standard in the printing industry. TIFF is capable of handling device-specific color spaces, such as the CMYK defined by a particular set of printing press inks.


RAW
The RAW image format is a file option available on some digital cameras. It usually uses a lossless compression and produces file sizes much smaller than the TIFF format. Unfortunately, the RAW format is not standard among all camera manufacturers and some graphic programs and image editors may not accept the RAW format. The better graphic editors can read some manufacturer's RAW formats, and some (mostly higher-end) digital cameras also support saving
images in the TIFF format directly. There are also separate tools available for converting digital camera raw image format files into other formats, one such tool being Dave Coffin's dcraw, which is made available under a combination of GNU General Public License and public domain licenses.

Adobe's Digital Negative Specification is a recent (September 2004) attempt at standardizing the various "raw" file formats used by digital cameras.


PNG
The PNG (Portable Network Graphics) file format is regarded and was made as the free and open successor to the GIF file format. The PNG file format supports true color (16 million colors) whereas the GIF file format only allows 256 colors. PNG excels when the image has large areas of uniform color. The lossless PNG format is best suited for editing pictures, and the lossy formats like JPG are best for final distribution of photographic-type images because of smaller file size. Many older browsers do not yet support the PNG file format. The Adam7-interlacing allows an early preview even when only a small percentage of the data of the image has been transmitted.


GIF
GIF (Graphic Interchange Format) is limited to an 8-bit palette, or 256 colors. This makes the GIF format suitable for storing graphics with relatively few colors such as simple diagrams, shapes and cartoon style images. The GIF format supports animation and is still widely used to provide image animation effects.


BMP
The BMP (bit mapped) format is used internally in the Microsoft Windows operating system to handle graphics images. These files are typically not compressed resulting in large files. The main advantage of BMP files is their wide acceptance and use in Windows programs. Their large size makes them unsuitable for file transfer. Desktop backgrounds and images from scanners are usually stored in BMP files.


XPM
The XPM format is the default X Window System picture format (very popular in the Linux world). Its structure is based on the string format of the C programming language. Because XPM was designed to be human-readable, and is stored as uncompressed plain-text, the file size of these pictures can be more than twice as large as uncompressed binary bitmap files (such as BMP, uncompressed TIFF, MacOS-PICT, or Irix-RGB formats). This format is unsupported by most non-Unix software and operating systems (though many web-browsers retain display support for the XBM subset, which was the minimal image format in the early days of the WWW).

MrSID
The MrSID (Multiresolution Seamless Image Database) format is a wavelet compression format used mostly by Geographic Information Systems to store massive satellite imagery for map software.


Vector formats
As opposed to the raster image formats above (where the data describes the characteristics of each individual pixel), vector image formats contain a geometric description which can be rendered smoothly at any desired display size.

SVG
SVG (Scalable Vector Graphics) is an open standard created and developed by the World Wide Web Consortium to address the need (and attempts of several corporations) for a versatile, scriptable and all-purpose vector format for the web and otherwise. The SVG format does not have a compression scheme of its own, but due to the textual nature of XML, an SVG graphic can be compressed using a program such as gzip. Because of its scripting potential, SVG is a
key component in web applications: interactive web pages that look and act like applications

GIF and JPEG are currently the primary file types for graphics on the Internet. This article provides an overview of each of them, as well as when each format should be used.

The GIF Format
The GIF format is one of the most popular formats on the Internet. Not only is the format excellent at compressing areas of images with large areas of the same color, but it is also the only option for putting animation online (unless you want to use Flash or other vector-based animation formats, which typically cost more). The GIF89a format also supports transparency, and interlacing.

GIF files support a maximum of 256 colors, which makes them practical for almost all graphics except photographs. The most common method of reducing the size of GIF files is to reduce the number of colors on the palette. It is important to note that GIF already uses the LZW compression scheme internally to make images as small as possible without losing any data

When to use them
Generally, GIF files should be used for logos, line drawings and icons. Avoid using it for photographic images, and graphics which have long stretches of continuous-tone in them. When you're designing GIF files, avoid using gradients and turn off anti- aliasing where possible to minimize the file size.



The JPEG Format
The JPEG format, with its support for 16.7 million colors, is primarily intended for photographic images. The internal compression algorithm of the JPEG format, unlike the GIF format, actually throws out information. Depending on what settings you use, the thrown out data may or may not be visible to the eye. Once you lower the quality of an image, and save it, the extra data cannot be regained so be sure to save the orginal



When to use
As a rule, the JPEG format should be used on photographic images, and images which do not look as good with only 256 colors.





optimize an image for the web using adobe photoshop
JPEG v. GIF - Which format should I use?
GIFs work well for images with large blocks of color and sharp edges. Notice the difference
in file size. Using GIF format for this type of image produces a small file.
Image Formatting tips - The Ethical Hacking
rose.gif
GIF Format, 3 KB


Image Formatting tips - The Ethical Hacking
rose.jpg
JPEG Format, 16 KB



Image Formatting tips - The Ethical Hacking
Zoom of rose.gif

Image Formatting tips - The Ethical Hacking
Zoom of rose.jpg

JPEGs work well for images with continuous tones, such as photographs.
Again, notice the file size. In this case, the JPEG is smaller.
Image Formatting tips - The Ethical Hacking
sunset.gif
GIF Format, 38 KB

Image Formatting tips - The Ethical Hacking
sunset.jpg
JPEG Format, 20 KB












Image Formatting tips - The Ethical Hacking Image Formatting tips - The Ethical Hacking
This document explains how to reduce an image's file size and format it for use on the Web. It is important to make image files as small as acceptable quality will permit, since smaller images dramatically decrease download time when users access your Web pages.
before you start
Image Formatting tips - The Ethical Hacking
You will need:
  • an image, ready for processing, and
  • access to Adobe Photoshop

Step OneReduce the physical size of the image.

Image Formatting tips - The Ethical Hacking
Most people are more comfortable with images that fit completely on their screen. Reducing the physical size of images also dramatically reduces the file size. For most machines, an image size of more than 550 pixels wide and 375 pixels high is safe.
  • Open your image in Photoshop by choosing File > Open . . . from the menu bar, locating your file, and clicking the "Open" button.
  • Under the Image menu, select Image Size . . .
  • Make certain that the "Constrain Proportions" and "Resample Image"check boxes are checked in the "Image Size" dialog box.
  • Under the "Pixel Dimensions," you will see numerical fields for "Width" and "Height." If the largest value is the "Width," replace it with the number 550. If the largest value is the "Height," replace it with the number 375.
  • Click "OK."
  • If the image looks satisfactory, save it by choosing File > Save from the menu bar.

caution
Image Formatting tips - The Ethical Hacking
It is a good idea to save this image under a different file name, leaving the original scanned image in its original form. That way, if you decide to start over, you will not need to scan the image all over again.


Step TwoChange the image resolution.

Image Formatting tips - The Ethical Hacking
Most monitors display images at 72 pixels per inch. Higher resolution will be lost on the computer screen, though not in print. If the intended use of the image is for computer display, such as a Web page or PowerPoint presentation, you should reduce its resolution to 72 pixels per inch.
  • Open your image in Photoshop.
  • Under the Image menu, select Image Size . . .
  • Make certain that the "Constrain Proportions" and "Resample Image" check boxes are checked.
  • In the "Print Size" section, there is a "Resolution" numerical field. Make sure that "pixels/inch" is selected in the pull-down menu to its right.
  • If the number in this field is larger than 72, change it to 72.
  • Click "OK."
  • If the image looks satisfactory, save it by choosing File > Save from the menu bar.

Step ThreeChange the compression for JPEG files.

Image Formatting tips - The Ethical Hacking
One of the most common file formats on the Web is called "JPEG." It is commonly used with photographs, paintings, and any image which requires many shades of color. JPEG images have a relatively small file size compared to other digital file formats.
  • From the File menu, select Save As . . .
  • Select a new name for the file, making sure to add the file extension ".jpg" to the end of the file name.

caution
Image Formatting tips - The Ethical Hacking
Be sure to save your file under a different name from the original scanned image, since the following process cannot be undone.
  • Make certain that "JPEG" appears in the "Format" or "Save as" pull-down menu, and select it from the menu if it does not.
  • Click the "Save" button, which will bring up a '"JPEG Options" dialog box.
  • In the "Format Options" section, select "Progressive."
  • In the '"Image Options" section, enter a number from 0 (lowest quality) to 10 (highest quality) in the "Quality" field. Most images look fine saved between 3 and 5.
  • Click "OK."
  • If the new image looks satisfactory, you can return to the original and try repeating the above steps with a lower "Quality." If the new file looks bad, return to the original and repeat the above steps with a higher "Quality."
  • When you have finished, save the final copy of your image, remembering to add the ".jpg" file extension to its name.


Step FourChange the number of colors for GIF files.

Image Formatting tips - The Ethical Hacking
The other common Web file format is the "GIF" format, which uses a more limited color palette than the "JPEG" format. GIF is used for files with small numbers of colors, such as line drawings, icons, and graphs. The most common technique for shrinking these files is to remove any excess colors.
  • Select Image > Mode > Indexed Color . . . from the menu bar. If this is already selected, select Image > Mode > RGB Color, then return to this menu and select Indexed Color . . .
  • Select "Adaptive" from the "Palette" pull-down menu.
  • Select "8 bits/pixel" from the "Color Depth" pull-down menu.
  • From the "Dither" pull-down menu, select "None."
  • Click the "OK" button.
  • Choose Image > Mode > RGB Color from the menu bar, then return to this menu and select Indexed Color . . .
  • The "Palette" drop-down menu should now default to "Exact." At this point, you can click "OK" and then save your file. However, if you need further space saved, continue while preserving the original. The following steps can drastically reduce file size, but they can cause a loss of quality, so it is best not to work with the original.
  • Select "Adaptive" from the "Palette" drop-down menu in the "Indexed Color" dialog box.
  • Look at the number in the "Colors" field and remember it or write it down.
  • Under "Color Depth," select the "bits/pixel" level so that the number of "Colors" is half the number you wrote down.
  • Click the "OK" button and examine the image. If it looks fine, save it under a new file name and repeat the process for the next lowest number of "Colors."
  • When you have finished, save the final copy of your image by choosing File > Save as . . . from the menu bar, selecting "CompuServe GIF" as the file format, adding the ".gif" file extension to its name, and clicking the "Save" button.

Transparent GIFs Using Adobe Photoshop, the image below was drawn against a white background. The copy on the left was saved in GIF format without using transparency - notice how the background of the image remains white although the background of the table is set to yellow. The copy on the right was also saved in GIF format, but with a transparent background.
Image Formatting tips - The Ethical Hacking
face.gif


Image Formatting tips - The Ethical Hacking
facetrans.gif

Color Palettes
To display a full-color image on a 256-color computer, an application must simulate colors it can't actually display. The computer does this by dithering: combining pixels from its 256-color palette into patterns that approximate other colors. At a distance the human eye merges these dithered patterns into another color, but up close the image appears speckled. Because different operating systems and applications build color palettes according to their particular needs, color variance arises when moving across platforms and programs. You should prepare for the fact that visitors to your website will be using different systems with various color settings.
There is, in fact, no one universal 8-bit palette that will not dither on all platforms. However, there is a 216-color palette that will not dither on most. The web-safe palette (or browser-safe palette) consists of 216 colors that display the same on both Macintosh and PC operating systems. These colors will also display the same on PC systems using a low color depth. By using the web-safe palette you will ensure that the graphics you create look the same no matter what system or browser the viewer is using. When displaying graphics created with non web-safe palettes, the browser tries to approximate the color through dithering. This may work fine for some graphics, but will often produce results far from what you intended.
Web-safe colors should be used for creating images with large blocks of solid color. Photographs should not be remapped to web-safe color, as they will take on a blocky appearance.
Choosing a web-safe palette in
Adobe Photoshop

Image Formatting tips - The Ethical Hacking
  1. Open Adobe Photoshop

  2. Click on the Swatches tab of the floating palette for Color, Swatches, Brushes

  3. Click on the arrow in the upper right, on the same line as the Swatches tab.

  4. Choose Replace Swatches. (Note: "Load Swatches" will just add the new palette to the end of the current palette, without indicating which palette is which).

  5. Open the Color Palettes folder: c:\program files\adobe\photoshop 5.0\goodies\color palettes

  6. Choose the file Web Safe Colors.aco, and click Load.
A web-safe color palette is now loaded.

Image Formatting tips - The Ethical Hacking
true color
(millions of colors)


Image Formatting tips - The Ethical Hacking
Screen shot of image using
lower color depth (256 colors)

When web-safe colors are used to create the image, it looks the same when
displayed in either mode.
Image Formatting tips - The Ethical Hacking
true color
(millions of colors)


Image Formatting tips - The Ethical Hacking
Screen shot of image using
lower color depth (256 colors)


Although web-safe colors work well for creating images with large blocks of color, photographs
should not be remapped to web-safe color. The reason the first image looks better is because
dithering works quite nicely with continuous tone images. In fact, all JPEGs are dithered.
Look at the difference below:
Image Formatting tips - The Ethical Hacking
Saved as a jpg,
using millions of colors


Image Formatting tips - The Ethical Hacking
Saved as a jpg,
after conversion to web safe colors













GIF Cruncher and JPEG Cruncher
Free on-line tools for compressing GIFs and JPEGS are available at www.gifcruncher.com and www.jpegcruncher.com. These tools are very useful for automatically reducing file size and comparing different levels of quality. Each tool will return several versions of your image, ranging from high quality and large file size, to low quality and low file size. Choose the file which best suits your needs, and save it to your disk.
UsefulLinks:

No comments:

Post a Comment