Santa Clara University

summer-web

Software Tips & Tricks

Back to Blog

Optimizing Images for the Web

Source: Pixlr.com

Use an image editing program to resize, crop, touch up, and save your images in a web-friendly format. Some popular programs include Photoshop, GIMP, Picnik, Pixlr, Phoenix, or Pixelmator.

Reducing File Size
One culprit in large image sizes is the resolution (pixels per inch/ppi). Most monitors have a resolution between 72 –96 ppi, so be sure to save your images at this resolution or less.

Also make sure the image is the size you need it to be: a picture that is 640x480 px (pixels) and 72 ppi is about 6"x4", or about 1/4 of the space on a typical 17" screen.

Image Formats
Once you have finished editing your images, save them using a web-appropriate format. The four most commonly used image formats for the web are BMP, GIF, JPEG, and PNG.

Check out the comparison table at the bottom of this tutorial from In Obscuro that explains the differences and shos examples of JPEG, GIF, and two versions of PNG.

For a hands-on learning experience on how to optimize your images, create your own buttons and banners, and more, come to our 2-hour web images class.

Posted by Technology Training

Tags: images, Photoshop, web publishing

Tags
Printer-friendly format
 
Established 1851