Editing Images for the Web

1. Editing Images for the Web

2. Optimization/Compression • Graphics optimization is important for fast web page display

3. Why optimize? • Compress to minimize file storage size • Compression can be adjusted with graphic programs allowing for a tradeoff between storage size and image quality • Graphics programs optimize the file size and quality of GIFs, JPEGs, and PNGs

4. JPEG • Joint Photographic Experts Group • Used for photographic images where millions of colors shades can exist • During compression some visual quality is lost (lossy compression) and cannot be restored • .jpg and .jpeg extension

5. GIF • Graphics Interchange Format • For graphics with low number of colors up to 256 distinct colors • Logos, line art and pictures with large areas of a constant color • Lossless data compression to reduce the file storage size without degrading the visual quality • A bitmap with .gif extension • One level of transparency (on or off)

6. PNG • Portable Network Graphics • Bitmap image format that capable of lossless data compression • PNG offers a variety of transparency options

7. DPI (Dots Per Inch) • The number of individual dots of information that can be placed within one linear inch (2.54 cm) • 72 dpi for monitors images • 300 dpi or higher for magazine printing quality

8. Screen Resolution • 1024x768 (width x height) as the most common display resolution • web sites and multimedia products designed for at least 1024×768 layout • Higher than 1024×768 (57%) • 1024×768 (36%) • 800×600 (4%)

9. Open Source/Free Software • IrfanView (http://www.irfanview.com) • Optimize images, simple alterations, cropping, batch conversions, resizing,adjusting colour balance • GIMP(http://www.gimp.org) • process digital graphics and photographs, reating graphics and logos, resizing and cropping photos, altering colors, combining multiple images, removing unwanted image components, full blown graphic editor

10. IrfanView • View pictures and make simple changes • Open IrfanView. Click File > Open. • Browse to the photo you wish to alter, left-click the name of the photo to select it and click the Open button. The photo will appear in the IrfanView window. • To reduce the dimensions of the photo, click Image > Resize/Resample. • Select the options you prefer and click OK. • To reduce the quality of a .JPG image without changing its dimensions, click File > Save As and select JPG - JPEG Files from the drop-down list. Click the Options button and use the slide bar to select a lower image quality. • After altering the image, click File > Save As and select a new file name. Click the Save button to create the new image.

11. GIMP • Right-click it and select Open With -> Open with “GIMP Image Editor”. • In the main Gimp window select Image from the top menu, and then Scale Image. • The Scale Image window will appear. The image dimensions (Width and Height) will be displayed in pixels. • If you’d like to resize your picture based on percentage, click the “up/down” arrows in the pixels menu and select percent. • Use the up or down arrows in the Width: box to increase or decrease the size of your picture. Click the Scale button when you’re ready. • The picture will now shrink. • If you want to permanently resize the picture, select File -> Save. If you want to save this resized picture but keep the original as it is, click File -> Save as… • Give your ‘new’ picture a name and click the Save button. • You’ll be asked what Quality you want the picture to be. The higher the quality, the larger the resulting file. I usually opt for somewhere around 85. Click OK when you’re done. • http://www.simplehelp.net/2006/11/04/my-gimp-resources/