Posted on by Pam Van Londen

Optimizing Online Images

Readings

How to Avoid Plagiarism of your Digital Images.

Online Image Specifications

Optimized images meet these specifications:

Small file size
Keep file size less than 30k if you can.
Exact dimensions
Crop and reduce the size of images to fit the dimensions of the space in your web page.
Correct file format
Online photos are usually .JPG.
Flat-color images like logos and clipart are usually .GIF and sometimes 8-bit .PNG.
Graphics with true transparency need 24-bit .PNG.
Reduced resolution
Monitors render 72 or 96 pixels per inch (ppi); the standard is 72ppi.
Color Mode
RGB for .PNG and .JPG and Indexed for .GIF.

At the completion of this tutorial, students will be able to:

  1. Understand why we optimize images.
  2. Change the five specifications with various software.

The main purpose of optimizing images for online viewing is to reduce the time it takes a browser to display an image file in its correct size. Visitors to web sites do not want to wait for photos and other graphics to load; they want instant reading and viewing. Updating the dimensions of images to fit within the scroll area of a browser is also helpful because visitors want to view an entire image in one glance without scrolling around to see it. And they don’t want graphics to overlap other important information on the page.

In addition, web site servers around the world would fill up too quickly if we all loaded large graphic files onto them because we were unskilled at reducing the file size. To keep from filling up our allotted server space, we will reduce the file size, dimensions, and resolution, and save in the proper format.

Example files and their properties

The three most common file formats for the web are .GIF, .PNG, and .JPG:

  • Example of a gif file
    GIF files can have transparency and animation and are typically used for flat color graphics. Their edges anti-alias to one background matte color.
  • Example of a png file
    PNG files have true transparency and are usually best for biomorphic shapes and flat colors.They can be placed over any variety of colors without distortion.
  • Example of a jpg file
    JPG files only used for photographic images. They compress down to small file sizes and remain rectangular. Higher compression reduces image quality.


Tools and Tutorials for optimizing images

For any of these tutorials, have ready a digital file of your photo, art, or graphic.