what is optimizing?

Optimizing is making the best or the most effective use of a resource. In the context of digital imaging, it is image sizing and the format in which the image has been saved. In the production of web pages, images are used as a communication tool. They also add file size to a web page. The process of optimizing for the web is simply a process of appropriate sizing for the task at hand and choosing the format that will offer both the best image quality with the smallest or acceptable file size.

The most common formats are GIF, JPEG, PNG, and SVG. The GIF format has been around the longest. GIF (pronounced jiff) is an acronym for Graphics Interchange Format. The Graphics Interchange Format (GIF) is a bitmap image format that was introduced by CompuServe in 1987 and has since come into widespread usage on the World Wide Web due to its wide support and portability. The format supports up to 8 bits per pixel, allowing a single image to reference a palette of up to 256 distinct colors chosen from the 24-bit RGB color space. It also supports animations and allows a separate palette of 256 colors for each frame.

JPEG is short for Joint Photographic Experts Group. JPEG (pronounced JAY-peg) is a commonly used method of compression for photographic images. The degree of compression can be adjusted, allowing a selectable tradeoff between storage size and image quality. JPEG typically achieves 10:1 compression with little perceptible loss in image quality. (From Wikipedia).

Portable Network Graphics, or PNG as we commonly know it, is a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace GIF (Graphics Interchange Format) as an image-file format not requiring a patent license. It is pronounced /ˈpɪŋ/ [1] or spelled out as P-N-G. The PNG acronym is optionally recursive, unofficially standing for “PNG's Not GIF”.[2] PNG supports palette-based (palettes of 24-bit RGB colors), greyscale, RGB, or RGBA images. PNG was designed for transferring images on the Internet, not professional graphics, and so does not support other color spaces (such as CMYK). From Wikipedia.

Scalable Vector Graphics (SVG) is an XML-based file format for describing two-dimensional vector graphics, both static and dynamic. SVG allows three types of graphic objects: vector graphics, raster graphics, and text. SVG images, being XML, contain many repeated fragments of text and are thus particularly suited to compression by gzip, although other compression methods may be used effectively. Once an SVG image has been compressed by gzip it is referred to as an "SVGZ" image, with the corresponding filename extension. The resulting file may be as small as 20% of the original size.

what is the difference between a jpg and a gif?

With a color palette of only 256, the color limitation makes the GIF format unsuitable for reproducing color photographs and other images with continuous color, but it is well-suited for simpler images such as graphics or logos with solid areas of color. GIF images are compressed using the Lempel-Ziv-Welch (LZW) lossless data compression technique to reduce the file size without degrading the visual quality.

On the other hand, JPEG compressions was developed just for photographs. With its 10:1 adjustable compression ratios, a higher level of quality control is available to designers and developers. The objective is to reduce redundancy of the image data in order to be able to store or transmit data in an efficient form. A chart showing the relative quality of various jpg settings that also compares saving a file as a jpg normally and using a "save for web" technique Image compression can be lossy or lossless. Lossless compression is sometimes preferred for artificial images such as technical drawings, icons or comics. This is because lossy compression methods, especially when used at low bit rates, introduce compression artifacts. Lossless compression methods may also be preferred for high value content, such as medical imagery or image scans made for archival purposes. Lossy methods are especially suitable for natural images such as photos in applications where minor (sometimes imperceptible) loss of fidelity is acceptable to achieve a substantial reduction in bit rate.

photoshop & fireworks together

Thoughts & observations about Fireworks or Photoshop as a Web Authoring tool for Digital Imaging.

Fireworks with its diverse tool box, supporting both raster and vector objects offers an expedient path from concept to publishing. It was developed as a companion tool for Dreamweaver. Over the course of an afternoon, I was able to create, produce and publish a comp to the web for client review. The drawing tools can be learned with ease. Effects, finishes, patterns are easy to use and adjust. With its native file resolution set to 72 ppi, designs come to life with no surprises.

Photoshop will always be a featured choice for creating and adjusting high resolution images. Photoshop can be used for creating and/or enhancing the imagery one can use as jewelry on web pages. For custom imagery, I prefer the enhanced tool set for photoshop.

With many marketing campaigns, supporting both web and print mediums, it works to create high resolution versions of projects as they can always be downsized to meet the needs of the web. A project's parameters and timeline can sometimes drive a designers choice of tools used to get get the job done.

Photoshop and Fireworks Collage

American Indian Folklore is a fascinating topic on its own. Romanticizing Henry Wadsworth Longfellow's famous poem, Hiawatha did in fact carry the Princess Minnehaha across the creek but not in this particular location. The bet is he performed his act of chivalry in the Spring when the water was much deeper and moving at a more perilous rate.

This photo was shot in late summer. Water levels in the creek were unusually low because annual rainfall in the area was well below normal.

The final JPEG is optimized at 70% quality. The image size is 240 x 320. The optimized file size is 27K. Its full size, optimized companion is 480 x 640 with a file size of 92K. In comparison, the original, full size source file(480 x 640 PNG) is 2.7 MB.

The background image is a collage using two images. It was produced using the more robust selection and masking features of Photoshop. Text and text effects were added in Fireworks. Final file optimization was produced in Fireworks.

Click on the image for a larger view. The effect is compliments of www.highslide.com.