Editors: Resizing Image for the Web Tutorials

Why Do I need to Resize my photos?

Often times, pictures from our digital cameras are very large. This is because there are different image resolutions for printing photos vs. simply viewing photos on the web.

Print Images

Image size for printing is determined by how many pixels-per-inch (ppi) make up a photo or image. The amount of pixels (or dots) can range from a lot (300 ppi) to a little (72 ppi). When you are printing a photograph from your camera, the rule of thumb is to use the highest ppi possible for the size you need. Most printers will recommend using 300 ppi as your setting.

Web Images

The web works a little differently. To understand how image ppi affects images displayed on webpages, consider this formula: 1-1.

Pixels-per-inch is irrelevant to images on the web.

Rather, they are based on how many pixels the image has. The goal is to resize your photo to exactly what size you will be using it on the website. A general rule of thumb is that about 100 pixels = approximately 1 inch on a website. By sizing down your photos appropriately for what you are using them for, you will reduce the file size and make the page load faster.

Why use PPI then?

We recommend the setting of 72 ppi for the web. Why? Because you have to put something in the box in most image editing programs, such as Adobe Photoshop. But when Photoshop asks for ppi in the Image Size dialog, this value is used to determine how Photoshop converts the pixel dimensions of the image into printed inches.

Recommended Programs

There are free programs that we recommend for resizing your images:

1. Resize.it
   This is an online tool that will resize and crop a single photo for you quickly - no need to install any software onto your computer!
2. pixlr
   pixlr is a more advanced online photo editor that will crop and resize your photos & much more.
3. Microsoft Office Picture Manager
   Microsoft Picture Manager is installed with all Office Suites, so you should already have it! With this program you can manage, edit, share, and view your pictures from where you store them on your computer. Picture Manager can correct your pictures, with editing tools to crop, expand, or copy and paste.
4. Microsoft Image Resizer Powertoy
   This PowerToy enables you to resize one or many image files with a right-click. After a simple one-time install from the Microsoft website you'll be able to resize your photos in two steps!
5. OSX Image Resizer (for Mac Users)
   Have a Mac? We've still got you covered. This tutorial will show you how to use OSX to resize a large number of images quickly.
6. Using dotCMS Built-In Image Editor
   Our CMS has a built-in tool to crop, resize and adjust images that have already been uploaded. While we always recommend adjusting photos before uploading them, this tool is a quick way to adjust a photo that is already on your site.