Preparing images for display on the web painlessly...
Okay, let's dispense with the technical stuff before we begin...
Asides first...
- 1. Only work with digital copies. You should have the originals (Think of them as Your negatives) saved to cd's or DVD's or Blu-ray disks and put a way somewhere safe. (A file drawer, cabinet, etc.). If you are paranoid, you should have 2 copies of each AND you have verfied that the photos actually exist on the disk AND one set is in a safe or safety deposit box!
- 2. According to w3schools.com most computer users use a monitor that displays 1024 x 768 pixels or larger
| Date | Higher | 1024x768 | 800x600 | 640x480 | Unknown |
| January 2009 | 57% | 36% | 4% | 0% | 3% |
Larger? Higher? Wide screen High Definition
monitors display at 1440 x 960 pixels or 1680 x 1050 pixels or 1920 x 1200 pixels...
TV's and monitors are converging to a screen with a 16:9 aspect ratio...
Our Conundrum: What resolution do you use to display full screen photos/art on your web pages?
1024 x 768 pixels 1440 x 960 pixels 1680 x 1050 pixels 1920 x 1080 pixels???
And what resolution do you use for your thumbnails?
250 pixels wide 200 pixels wide 150 pixels wide 100 pixels wide
Okay here comes the technical stuff...
What is Resolution?
Not DPI (Dots Per Inch)
DPI is the number of individual dots that can be placed within the span of one linear inch. In other words, DPI is used by the computer to tell a printer or monitor how many "dots" or "pixels" to print or display per inch.
For example when you print at 300 DPI, the computer tells your printer to print a dot 1/300 of an inch in size, or 300 Dots Per Inch.
For Monitors, 96 DPI, tells your monitor to display an 'element' at 1/96 of an inch or 96 elements per inch on the monitor's screen.
Resolution is the size of the pixel when it is printed or displayed and should be referred to as the number of pixels per inch (ppi) that a printer prints or a monitor displays... Resolution is also the number of pixels in a photo/artwork/image calculated by multiplying the width in pixels by the height in pixels. Usually expressed in terms of MegaPixels
Note: (yep another aside)
Most consumer digital cameras set the photos dpi to 72. That particular dpi setting tells the camera's processor to display 72 pixels per inch on the camera's LCD display screen.
Most LCD computer monitors (PC or a Mac) generally displays at 96 pixels per inch. (Mac's haven't used 72 dpi for monitor display since they went with color monitors)
Monitor PPI
You can calculate your monitors "actual" display resolution (ppi) by measuring the width and height (inches or centimeters) and dividing that into the # of pixels in the display's width and height eg
My Dell LCD displays at 1680 x 1050 pixels. The monitor's screen measures 17.125 inches wide and 10.75 inches tall
1680 pixels ÷ 17.125 inches = 98.0 pixels/inch 1050 pixels ÷ 10.75 inches = 97.7 pixels/inch
Printing PPI
The number of pixels per inch used to "print" the picture will determine the size of the print.
How large will a picture print at 300 ppi?
Divide the width of your picture in pixels by 300 pixels per inch.
EG consider an image that measures 2845 Pixels wide and 2152 pixels high
Width: 2845 pixels ÷ 300 pixels per inch = 9.48 inches Height: 2152 Pixels ÷ 300 pixels per inch =7.1733 inches
If you want to make a larger print change the ppi to a smaller number say 240 ppi
Results Width = 11.65 inches Height = 8.96 inches
An Aside
Make a print at 240 ppi and 300 ppi and compare them. More than likely you'll be hard pressed to see a difference in the print quality!
What does this mean? What's all this about anyway... The bottom line...
A computer monitor's display is measured in units of pixels, a web page is measured in units of pixels... As a result when you display your photos, art, images, graphics on a computer always think of their sizes in units of pixels. Pixels wide and pixels high.Think of picture and thumbnail sizes in units of pixels! And their size relative to your monitor's screen in pixels.
Making The Nails...
The size of a thumbnail will vary depending on how many you want to display on one page and how much information you want on a page. Here are some examples of layouts on a 1024 x 768 pixel screen.
 |
 |
 |
 |
| 4 thumbnails 150 pixels wide | 9 thumbnails 250 pixels wide | 12 thumbnails 105
pixels wide |
6 thumbnails 184
pixels wide |
Step 1
Convert your images to JPG (Jpeg) format for use on the web. The jpg file format can compress an images storage size by a factor of 10 without a noticeable loss of quality.
Programs that can do JPG Conversion that come with the computer's OSMac
Preview
Preview is the Macs image viewer, and in OS X Leopard it can do image processing, change file formats and resize images. And it can do it to more than one image at a time!
iPhoto
New Macs come with the program iPhoto (It can be upgraded to the latest version for around $50.00 with the purchase of iLife '09). It can even make plain web page thumbnails and a web slideshow...
Windows
Raw Image Thumbnailer and Viewer
This utility program and "resizer" became available after Windows XP shipped. They were made by software developers as tools for their use. You can use them too! To obtain the RAW Image Thumbnailer and Viewer just follow the link below to MicroSoft's web site and down load the Raw Image Thumbnailer and viewer program. Though it was designed for raw digital camera file formats the program can convert most common image formats. When you install the program just select ALL file formats.
This program can only convert raw and common file formats...
Microsoft's RAW Image Thumbnailer and Viewer for Windows XP
Even though this program can only convert file formats it can "send" the image to the an image editing program of your choice. While you are at MicroSoft's web site download the white paper about the Raw Viewer program...
Resizer
This utility can resize your images...
This link will automatically download a Windows utility program called "Resizer"
Image Resizer from PowerToys
After you have installed this program highlight and right click the images you want to resize. A requester pops up, choose resize.. then, when the dialogue box opens choose advanced. 
Click the Custom radial button and type in the size you want and all the images will be resized...
mspaint
mspaint is probably the second worst and oldest program that still ships with Windows (Notepad gets first place)... But, it can load common image formats one at a time, resize them and save them in a common file format, one at a time.
Windows - Vista
Photo Gallery
Vista introduces a simple photo editing program to the Operating System called Photo Gallery
Photo Gallery offers some simple editing tools.
To resize (not Crop) a photo in Photo Gallery Select the photo(s) you want to resize, and then, on the File menu, click Resize. Then in the Resize dialog box, select the size you want...
What does this mean? What's all this about anyway... The bottom line...
The Mac is way ahead of Windows here... But, there are better ways to convert file formats and resize your images! and some of the programs are free or open source or "donation ware"!
Step 2 -- Free Downloads
Let's face it, I'm a software junky... I just love trying out software... always looking for that useful gem that comes along and out shines them all!
Mac
Image Tool
This may be the only tool on the Mac you need to change file formats and resize your images. Developer Jim McGowan makes this utility free, but asks if you use it a lot to make a donation!
You can download it from Jim's web site!
Picasa
Yes it's available for Intel Macs only! You can download it for free!It does several things that iPhoto for the Mac doesn't.
- You can write text on images... and that means you can make water marks for you web images if you so desire.
- It makes simple web thumbnail galleries that can include VIDEO clips.
Graphic Converter
A Mac must have program. The name says it and it can! It imports 200 file formats and exports 80... If you had an Amiga or an Atari computer in your past you can use your old graphics! You can try this program for free, for as long as you want, but the price won't break the bank at $34.95 --for life.
With this program you can do just about anything with your images. It has a built in batch function to change file formats and image size. It also makes html thumbnail catalogue pages, slideshows, movies, and...oh, my! You have to TRY this program!
Available from LempkeSoft GmbH
Seashore
This is a quote directly from the Seashore web site.
You can download it here from sourceforge.netSeashore is an open source image editor for Mac OS X's Cocoa framework. It features gradients, textures and anti-aliasing for both text and brush strokes. It supports multiple layers and alpha channel editing. It is based around the GIMP's technology and uses the same native file format.
However, unlike the GIMP, Seashore only aims to serve the basic image editing needs of most computer users, not to provide a replacement for professional image editing products. Seashore was created by Mark Pazolli who, together with a handful of other developers and helpful users, still develops it to this day.
Windows
Easy Thumbnails
A very nice utility that does the job! This program converts file types and makes thumbnails! And, it's free!
Easy Thumbnails is available from Fookes Software in Switzerland
Picasa
If you aren't using a cataloging program for your visuals... Get Picasa free!
Advantages
- You can write text on images... and that means you can make water marks for you web images if you so desire.
- It makes simple web thumbnail galleries that can include VIDEO clips.
- And that means Picasa makes the thumbnails and web gallery pages automatically! Do note that the web pages are quite plain vanilla in style... but, you know how to fix that!
Irfanview
Windows answer to Graphic Converter. A must have program.
At over 3.5 million downloads it is one of the most popular image viewer, batch graphic converters with image enhancing program in the world. And it is free.
It can also make a simple web gallery with thumbnail pages. Irfan view can be installed on a flash drive and run from there!
You can get the program from Irfan Skiljan's web site. If you really like it he asks for a donation of $12.00
paint.net
Students from Washington State University wrote this program to replace Microsoft's mspaint.
It is a free award winning image editing program. It requires the installation of Microsoft's .netframework 3.5 SP1 It does not have obvious built in batch processing for thumbnails and image conversion.
If you need a paint/imageprocessing program, you can check it out and download it at paint.net The paint.net download aids you in the installation of .netframework.
the gimp
To quote the portable app web siteIt is installed on the class CD as a portable app... you can visit the gimp portable app website hereFeatures
The GIMP (GNU Image Manipulation Program) is a freely distributed program for such tasks as photo retouching, image composition and image authoring. It has many capabilities. It can be used as a simple paint program, an expert quality photo retouching program, an online batch processing system, a mass production image renderer, an image format converter, etc.
What does this mean? What's all this about anyway... The bottom line...
If all you need is a simple program to generate thumbnails and convert your images to .jpg format for the web then Image Tool for the Mac and Easy Thumbnails for the PC are all you need.
The other programs like Picasa, Graphic Converter and Irfanview offer much more, and are more flexible... but that means you will have to play with them and learn to use them... However, these programs can quickly make simple web galleries for you that YOU can customize to match your web site.
Mac & PC Gallery Design Programs
JAlbum
This is the bottom line...
There may be many other programs available that can make Web Galleries... but this one does it all, and it's available for the Mac & PC!
And, it's free...Try JAlbum out!
Mac & PC
Commercial paint/image enhancing programs
If you have a Digital Camera, check the disks that came with the camera. They usually ship with a graphic program that can change file formats, resize images and even make web galleries.
- Paintshop Pro See the Corel web site
- Photostudio See the Arc Soft Web site
- Photoshop Elements See Adobe's web site
- Photoshop See Adobe's Web site
Mac and PC
Photo and Image Management Programs
Adobe's Lightroom for Mac's and PC's This is the only Adobe product that allows you to have two copies of the program, even if the other computer is a different platform... (You can run only one at a time...)for Mac only Aperture
Both these programs, Lightroom and Aperture, offer extensive web site support for building and maintaining photo galleries.