This document is designed to introduce you to the process of editing digital images. There are several tools available for Windows, Macintosh, and Linux computers, as well as mobile devices. We use these tools to optimize images and prepare them for publishing, be it on the web, or in a print or video production. There are several things to consider when publishing your images. However, once you have this basic knowledge, it can be very rewarding to see your images shared with the world.
Image Creation & Modification
The purpose of this document is not to teach you how to draw, or even go into great detail about the capabilities of each graphics program. Adobe’s Photoshop is the premier professional program that can literally transform any graphic image into whatever your mind can think of. People have used Photoshop for years and not mastered all of its features. The other programs approach, but do not match, Photoshop’s abilities. Each of these programs is quite powerful, and can do some amazing things to digitally modify your images. They all have a similar set of tools to create simple graphics or spectacular masterpieces.
We have more information on the available Image Editing Programs.
You can’t just put 8″x10″ photos on your web page. Your images are intended to enhance a document, not overpower it. You must consider factors such as how much detail does the viewer need to see in the digital image. The dimensions of the image will directly affect its file size. The bigger the image, the bigger the file size. You may need to “scale down” (resize) your image. Photoshop, Photoshop Elements, Paint.NET, Pixelmator, Seashore and GIMP, will all handle this task. Other basic utilities will do resizing as well, such as Windows Photo Gallery on Windows, and Preview on the Mac. Remember to keep the proportions (also known as aspect ratio) of the image the same or you will get a “skinny” or “fat” image after it is scaled. Images are measured in pixels.
What is a pixel? A pixel, short for Picture Element , is a single dot of color in a graphic image. These dots make up the picture, icon, or piece of “clip art” that you see on your computer screen. A standard Windows or Macintosh computer screen is something like 1920 pixels wide by 1080 pixels high (also the resolution of high definition TV). If you were to magnify an area of an image, you would see individual squares. Each square is one pixel.
Now that you have produced a digital image in a paint program, and you have scaled it to the proper size, you’re ready to include it in your web page . . . almost. When you include a graphic image in a web page, it needs to be in a particular format. There are generally three image formats that are supported by today’s web browsers – are JPEG (pronounced “jay-pegs”), GIF (pronounced “Jif”)¹ and PNG (pronounced “Ping”). These computer image files are known by their identifying “extension”. For example: mypicture.gif, mypicture.jpg, or mypicture.png.
If you save your image from another web page (legally, of course), then the picture will almost certainly be in GIF, JPEG, or PNG format. If you use a digital camera or scanner to “digitize” your image, it is best to save it as an uncompressed image such as RAW, or PSD (Photoshop), or TIF. Uncompressed digital images are usually quite large in terms of their file size. A scanned 8 x 10″ photo can be several megabytes (Mb) in size. The compressed version in GIF, JPEG, or PNG format might be a few hundred kilobytes. That’s still pretty large for a web graphic, but it would take 1/10th the time to transfer over the internet than the original scanned image. That’s the reason that web images are published in a compressed format, to take less time to load on a web page. Compressed images are those where some of the data is taken away from, or condensed within, the file. An image the size of an 8 x 10″ would need to be “scaled” to a smaller size, which we talked about earlier. You can use any of the programs we referred above to re-size your images.
So which one, GIF, JPEG, or PNG?
With the speed of Internet connections as fast as they are, the size of the images are less of a concern. However, there are people still using dial-up to connect, so if that is your intended audience, you should optimize your images as much as possible. As you reduce, or “compress” an image’s file size, there is a trade off in image quality. Also, certain images lend themselves to being converted into GIF, JPEG, and PNG . A general rule of thumb is that logos or “line art” images with large blocks of solid colors, do well in the GIF or PNG format, while photographs do better in the JPEG or PNG format. PNG format is an attempt at being a hybrid. When it comes down to it, if you need to absolutely reduce file size to a minimum, you can save the image in all of the formats, then weigh the quality of the image versus how large the file is. Also keep in mind that the GIF format supports animation. The web is filled with animated GIFs.
This is by no means a compendium on web graphics, but hopefully it does get you thinking about the way images “magically” appear in web pages (sorry we spoiled the trick). There are copious amounts of additional information out there if you can’t get enough of this stuff. Please feel free to contact UMW New Media for more information.