Editing Images for the Web

Optimization/Compression

• Graphics optimization is important for fast web page display

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

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

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)

PNG

• Portable Network Graphics

• Bitmap image format that capable of lossless data compression

• PNG offers a variety of transparency options

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

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%)

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

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.

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/