Tips: Resize Your Images Before Uploading to Your Exponent CMS Website

As a general rule of thumb, any images that will be placed into text modules should be resized using an external image editing program such as Microsoft Picture Manager or Picasa before it is uploaded to the Exponent CMS File Manager.

Resizing your images to the exact pixel dimensions that they will appear on the website helps:

  • Reduce the amount of time it takes to upload the image to the File Manager
  • Optimize loading time for the page the image(s) is on
  • Control the amount of disk space and bandwidth that is being used by the website

Example Image that Needs Resized

The image below is a prime example of an image that should have been resized before it was uploaded to the File Manager and inserted into the text module. The image looks slightly distorted and hangs over the side nearly into the next content module beside it.

By right clicking on the image and selecting “View Image” the image will open up in a new tab and show the actual size of the image.

As you can see in the image above, is the actual size of the image is substantially larger (1085px wide by 695 px tall in reality) than how it appears in the text box that is only 273px wide. This image should have been resized to 273px wide by 185px tall.

Resizing Images

To properly resize the image you must first open it up in your picture editing software. For the purposes of this Blog Tip, I'm using Microsoft Picture Manager.

Once you've opened the image in Picture Manager, select the “Edit Picture” button at the top of the editor.

After you've selected “Edit Pictures,” on the right side you can select to “Resize” the image.

Once you select "Resize" on the right hand column, you have the option to type in the new pixel dimension size that you want for the image, or you can reduce the image size by percentage until you reach the dimensions that fit the space that your image will be placed in.

Once your image has reached the desired size, you can choose to save over the existing image or save a new smaller version of the image.

Once you've re-saved your image to the size it needs to be on the website, you can then upload it to the Exponent CMS File Manager and place it onto the site. Read more on uploading files to the Exponent CMS File Manager.

As you can see below, the new resized image is crisper and no longer hangs outside of the boundaries of the text module. Read more on Inserting Images into Text Modules.

This is the proper way to manage images on your Exponent CMS website!

Comments

  • Adam Williams said on December 31, 1969

    Why not just get Exponent CMS to bring up a dialog after the file has been uploaded offering to resize / crop and optimize the image? It seems a bit long winded to expect users to use external software to make their images web ready.

  • Phillip Ball said on March 16, 2011
    There's actually a built-in image editor, but it's still a bit rough around the edges. I doesn't do well (yet) with large images, like those that have been directly uploaded from a digital camera. It's still usable though. We're just promoting what we feel are best practices here, showcasing free, pre-installed software (for most computers anyhow), that will help the organize and prepare their media for online viewing, then putting it online. You might call it long winded, but it's now a documented (and currently necessary) process.
  • Ranie said on June 6, 2011
    There is also a Image Resizer app that integrates into windows contextmenu... Like the old powertool http://imageresizer.codeplex.com works greate and it's easy
  • David Leffler said on February 3, 2013

    FWIW, (automatic) Image resizing during an uploaded was added as a feature in version 2.1.1.  This allows you to optionally set a maximum width on uploaded images.

    Also the Pixidou Editor (accessed by clicking on the 'edit' link in the File Manager) is not so 'rough around the edges' as of several versions ago.  It can easily perform all your basic image editing tasks.

Leave a comment

Fill out the above security question to submit your form.