Web Design Services Multimedia Consulting Services Research Services Our Clients Search Engine Info Contact Us
Image Editing Software & Tips
Main Site
Web Design Resources Resources & Tools  
Web Page Authoring Tools Authoring Tools  
HTML Reference HTML Reference  
Image Editing
Javascript  Links Javascript  
PERL - CGI - SSI PERL/CGI/SSI  
PHP & MySQL PHP/MySQL  
Flash Macromedia Flash  
Web Audio Web Audio  
Java Applets  

Web Image Editing
Do Choosy Mothers Really Choose GIF's?

This aspect of design is in some ways much simpler than it would seem, provided you have access to the right tools. It also has a very significant impact on the impression your pages create, as casual browsers are a lot more tuned into the overall look and feel of things than the text content and details of quality graphic design.

The two primary concerns when planning and designing web graphics are file size and color rendering. We're not going to get in-depth here (check out our recommended links instead) but in a nutshell, the trick is to choose the file type that will keep file sizes small while maintaining image quality.

File Types

There are three common file types used for images on the web: GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group), and PNG (Portable Network Graphics).

The Practical Basics:

GIF
Especially suited to solid blocks of color in logos and other graphic elements. GIF's allow transparency, animation, and excellent compression of file sizes provided the palette is in a web-safe color range. Not well suited to photos or complex gradients, as the "dithering" of the 256 colors used in GIF's will create splotchy or spotty images when used for these sorts of images.

JPEG
Especially suited to photographs, JPEG's can display over 16 million colors. JPEG's don't support transparency or animation. When compressed intelligently and with the right software, an excellent balance between file size and image quality can be achieved. If poorly compressed, images will look scrunchy or rippled at the edges of contrasting colors or bright and dark areas.

PNG
Originally designed as a replacement for GIF's to battle some "copyfight" issues, PNG's also utilize a 256 color palette, but achieve better compression, better gamma correction (cross-platform rendering of image brightness), and more sophisticated transparency. They do not support multiple-image animation. Unfortunately, Microsoft seems to have no interest in supporting PNG's in Internet Explorer, so their best features are slow to gain recognition. Most of these features work in FireFox, Safari, and other browsers, however.

The Tools
There's More To Life Than Photoshop

For web imaging there are several tools that are actually a lot more productivity-oriented than Photoshop, which of course remains the pervasive and obviously sophisticated choice for advanced image editing.

Ulead PhotoImpact
Especially if you opt to not install some of its consumer-oriented features like album-creation and photo sharing, PhotoImpact presents a streamlined and relatively intuitive interface that makes for quick editing of existing files for the web. It also has a very adequate set of features for new image creation, including 3D objects and text, but is not especially suited to print graphics. It is usually available for under 100USD.

Macromedia Fireworks
As well as plugging in nicely with Dreamweaver, Fireworks provides excellent compression results, works nicely when "image-slicing", and has a very intuitive interface as well.


Recommended Software:
For web image editing, the streamlined interface and relatively short learning curve makes PhotoImpact a great choice. We actually use it more than Photoshop on a lot of projects. The only thing we don't like is seeing that guy's face every time we launch the software...
Ulead PhotoImpact 10
Ulead PhotoImpact 10
Again - for web images, Macromedia Fireworks is probably preferable to Photoshop, and integrates nicely with Dreamweaver:
Fireworks MX
Macromedia Fireworks MX 2004
Don't overlook The GIMP. It's free, and is becoming a viable piece of software. (If you don't see an image below, your browser doesn't support PNG's):



Recommended Links:

A quick summary of the three most common web-oriented file types from Wikipedia:
GIF
JPG
PNG

Some product tutorials from the product creators' web sites:

Photo Impact

Fireworks

Photoshop
Web Design | Multimedia | Consulting | Copywriting | Broadband & Wireless | Web Hosting | Music Industry | Contact | Clients | Search Engines | Printers & PC's | Investing | About Us | Web Design Resources | Index
Landing Page Interfluence Landing Page