Optimizing Online Images
Posted in Production 4 years, 7 months ago at 7:00 pm
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 20k if you can.
- Exact dimensions
- Crop and reduce the size of you image 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 .png.
- Reduced resolution
- Monitors render 72 or 96 pixels per inch (ppi); the standard is 72ppi.
At the completion of this tutorial, students will be able to:
- Understand why we optimize images.
- Change the four 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.
Tools and Tutorials for optimizing images
For any of these tutorials, have ready a digital file of your photo, art, or graphic.
- Photoshop
- PaintShop Pro
- iPhoto
- Windows Paint
- Picture Manager
- Gimp (free to download)
- Save for Web plugin download
- Design tutorials by experience level
- Save as…
- When you choose File->Save as… and choose a format, you won’t have control over the image until you click the SAVE button again.
- Turn on the Advanced menu to control quality, file size, transparency, and see a preview.
- When you choose File->Save as… and choose a format, you won’t have control over the image until you click the SAVE button again.
- Paint.net (free to download)
- Online tools that optimize for you:
- Dynamic Drive’s Image Optimizer
- smush.it!
- RIOT
- PNGOUT
- SuperGIF
- PNGGauntlet
- PNGCrushrrr
- SuperPNG
- Image Shack
- Shrink O’Matic
- Favicon Generator
- Add an icon to the address bar to show up in visitors’ bookmarks. Dynamic Drive’s tool generates ICO format, which works for Windows IE. Otherwise, use .gif.



