Skip to content

ONE/Northwest Plone Manual

Sections
Personal tools
You are here: Home Key Concepts Images in Plone Creating Web-ready Images
Document Actions

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:

  1. Browse to http://www.xnview.com/
  2. Select the English version of the website
  3. Click download
  4. If you are a Windows user, select “Download Now” under the “Direct Download for Windows” heading.
  5. Choose a nearby state
  6. Choose a mirror location from which to download the software
  7. Save the new .exe file to your desktop
  8. Follow installation instructions


Resizing Images

  1. Launch XnView software
  2. Choose File → Open and browse to the image you’d like to edit ( screenshot)
  3. Once that image appears in the main area, choose Image → Resize ( screenshot)
  4. Change a pixel width that will fit well within your website’s allowed area
  5. The proportions of the image will be constrained, meaning that as you change the width, the height will change proportionally.
  6. Once you are satisfied with the size, choose file → save as (screenshot)
  7. Select either GIF or JPG depending on the image type
  8. 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

  1. With the image you’d like to crop, use the mouse to highlight the section you’d like to crop
  2. Go to edit → crop
  3. Save as described above


Taking Screenshots (To extract images from documents)

  1. Open XnView software
  2. Choose tools → capture
  3. Choose to capture from window
  4. Choose the appropriate window where you know the image is located
  5. XnView will minimize itself and open the chosen window and then briefly delay
  6. Once a screen shot is taken, XnView will reopen with the image needed
  7. Crop, Resize, and Save as described above

powered by Plone | site by ONE/Northwest