1 / 11

Editing Images for the Web

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

signa
Download Presentation

Editing Images for the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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/

More Related