
"Picture Perfect" ?
...this phrase, coined in the USA in the early 20th century, alludes to the idealized settings and composition of photographic images, in which every detail is managed to obtain a perfect visual result ...for your website, it means the image is saved in the proper file format and color mode, is the proper dpi and is optimized to be at the smallest possible file size to allow for the fastest possible display time, while maintaining a visual quality as close as possible to that of the original image ...simple right? ...well, actually it 'is' pretty simple and straight forward if you understand and prepare your images according to the following basic guidelines
...first, "proper file format" ...when it comes to "images" for your web pages, there are basically three major file formats; .gif (Graphics Interchange Format), .jpg [jpeg] (Joint Photographic Experts Group), and .png (Portable Network Graphics) ...while in-depth definitions of these file formats are beyond the scope of this article, here are the basics that should be understood by anyone preparing images for their website:
...the .gif format was introduced by CompuServe way back in 1987 and supports a color palette of up to 256 distinct colors ...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 ...this file format also supports animations and the ability to create and support transparent areas within your image
...the .jpg [jpeg] format is not only the most popular file format for images on the web, but is also the most common format used by digital cameras and other photographic image capture devices such as desktop scanners ...the .jpg file format provides a flexible degree of compression allowing a selectable tradeoff between storage size and image quality ...the .jpg format typically achieves a 10 to 1 compression with little perceptible loss in image quality, subsequently, the JPEG compression algorithm is at its best on photographs and paintings of realistic scenes with smooth variations of tone and color ...for "web usage", where the amount of data used for an image is important, the .jpg file format is by far the most popular
...the .png file format was created to improve upon and potentially replace the .gif format ...it offers a much wider range of transparency options, as well as a much wider range of color depths and provides much greater color precision, smoother blends and fades etc., than the .gif format ...the major differences however are that the .gif format can achieve greater compression, allowing for smaller file sizes, and the .gif format supports animation which the .png format does not ...while the .png format has been gaining in popularity, as it does provide for high quality images, due to its larger file sizes, typically the .jpg file format is still the preferred format for web page "photographs" as it produces smaller file sizes resulting in quicker web page "load times"
...next is color mode ...there are a number of color modes that are used for digital images, however, the primary color modes for images to be used on the web are "Indexed Color" and "RGB" ...while the specifics regarding color mode is beyond the scope of this article, here is what is critical to remember ...to save an image in the .gif file format, the image must be in the "Indexed Color" mode ...while the .jpg file format supports the "CMYK" color mode, which stands for; Cyan, Magenta, Yellow and Black, your images for use on your web pages should be in the "RGB" color mode, which stands for; Red, Green and Blue ...the CMYK color mode is the required color mode for images that will be reproduced via "traditional printing" ...today's "digital" printing and most "print on demand" service providers require that images be saved in the "RGB" color mode ...most image manipulation and/or "graphic arts" programs, such as Adobe's PhotoShop etc., make assigning an image's color mode as simple as making a "menu selection"
...next is the issue of "dpi" (dots per inch) or sometimes referred to as "ppi" (pixels per inch) ...the "required dpi" across all of the output options for images varies a great deal dependent upon the process that will be used for reproducing the image ...however, for use on the web, the standard for images is "72 dpi", as that is the standard resolution displayed by computer display monitors ...while much higher "dpi" is required for traditional "printing", for use on the web, saving your images with a "dpi" greater than 72 is quite simply overkill - all this will do is make your image's file size much larger, making your web pages take longer to load - and will provide little to no visual improvement to your images as it is simply more data than the computer monitor can display
...finally, is the process of "optimizing" your images for use on the web ...as stated at the beginning of this article, "the goal" of optimizing your images is to produce the smallest possible file size allowing for the fastest possible display time, while maintaining a visual quality as close as possible to that of the original image ...again, most image manipulation and graphic arts programs like Adobe's PhotoShop and/or FireWorks, provides great built-in tools for optimizing your images ...the tools in programs like FireWorks also let you see in real time what effects the various settings will have upon your image by providing you with side-by-side and/or "preview" panes of before and after versions of your image before saving the optimized version ...however, as is the case when working with "most" files, whether they be images or other types of files, it is ALWAYS best to work on a "copy" of your original file, and/or to do a "Save As" when saving your changed file - that way, if for any reason you are not happy with the changed file, you always have the original file to go back to in order to try again - certainly "critical" with those "once in a lifetime" photographs ;-)
...if anyone would like to know more about the types of services I can provide, you can learn more by visiting my web site at: http://www.evadware.com ...I would also be happy to set up a phone call with anyone interested in exploring how I might be of assistance - appointments can be requested through the "Request Info" page at the site, or by dropping me an email here at: This e-mail address is being protected from spambots. You need JavaScript enabled to view it
best to all!
:-)
evad






