Creating Web-ready Images
Choosing appropriately between .gif and .jpg formats, cropping, and resizing images are all very important to keep pages lightweight and quick to load. A free program called XnView simplifies preparing images for the web.
For those that do not have access to expensive image editing software (such as Adobe's Photoshop), we
recommend XnView as a free alternative
for non-commercial use and for nonprofit organizations. Versions for
Windows and Mac OS X are available.
Downloading and Installation
To download and install XnView, follow these instructions:
- Browse to http://www.xnview.com/
- Select the English version of the website
- Click download
- If you are a Windows user, select “Download Now” under the “Direct Download for Windows” heading.
- Choose a nearby state
- Choose a mirror location from which to download the software
- Save the new .exe file to your desktop
- Follow installation instructions
Resizing Images
- Launch XnView software
- Choose File → Open and browse to the image you’d like to edit ( screenshot)
- Once that image appears in the main area, choose Image → Resize ( screenshot)
- Change a pixel width that will fit well within your website’s allowed
area
- The proportions of the image will be constrained, meaning that as you
change the width, the height will change proportionally.
- Once you are satisfied with the size, choose file → save as (screenshot)
- Select either GIF or JPG depending on the image type
- Select save
Choosing between GIF and JPG
JPG Example:

JPG - Photographs and graphics with lots of color, and particularly colors
that blend and fade into one another, are best served by JPEG.
GIF Example:

GIF - If your image has flat color fields, like a drawing, cartoon, logo,
or text, it will compress well in the GIF format.
Cropping Images
- With the image you’d like to crop, use the mouse to highlight the section you’d like to crop
- Go to edit → crop
- Save as described above
Taking Screenshots (To extract images from documents)
- Open XnView software
- Choose tools → capture
- Choose to capture from window
- Choose the appropriate window where you know the image is located
- XnView will minimize itself and open the chosen window and then briefly delay
- Once a screen shot is taken, XnView will reopen with the image needed
- Crop, Resize, and Save as described above