Resizing Images with pixlr.com Express

Prerequisites

This tutorial assumes you are familiar with the following:

• Logging in to CommonSpot
• Uploading Images

Contents

1. Overview
2. Open the Image
   
3. Resize the Image
   
4. Save the Image to Your Computer
   
5. Upload the Image to CommonSpot

Overview

Why Resize Images?

It's good idea to resize your images before uploading them for a few reasons:

1. Large images make your pages load slowly, and nobody likes that.
2. Most images above 500 pixels (px) wide will be cut off for many of our users.
3. The CommonSpot image editor is slow and clunky.

Why Use Express?

There are many ways to resize images on a computer, but not everyone in the City has the same software, or the same permissions for installing software, on their machines.

This means that we have to find something that's free and accessible to everyone. As far as we know every contributor has a web browser with Flash installed on it.

Express is fast, relatively easy to use, and doesn't require that you create an account.

What Size Should They Be?

This depends on the layout you are using. Remember that the website resizes based on browser size, so maximum-width images might be cut off for some users.

General Images

Banner Images

Banner images should be 905px wide and 162px tall.

Step 1: Open the Image with Express

1. Go to http://pixlr.com/express in your favorite web browser.

2. Click on Browse.

3. Locate the image on your computer, and open it.

If successful, your image should pop up on the screen like this:

Step 2: Resize the Image

1. Click on the Adjustment button at the bottom of the page:
   

2. Click on the Resize button:

3. Enter your desired width or height. The other dimension will be changed automatically, to make sure the image doesn't look squished or skewed:

4. After entering your desired width or height, hit the Apply button.
   

5. The image is now resized, but it may look smaller than you were expecting. If this is the case, the image is probably zoomed out.  You can go to 100% zoom if you wish, but it makes no difference:

Step 3: Save the Image to Your Computer

1. Once you are satisfied with your changes to the image, click the Save button in the upper right corner of the page:

2. Give your resized image a name, and choose the desired image quality, then click the Save button:

3. Choose where you would like to save the image on your computer.
   

Step 4: Upload the Image to the CMS

See the uploading images tutorial for instructions.