CMS Tip: A Visual Web Guide.

In the first of my CMS tips, I am going to take on an aspect of web, which many people overlook when updating their CMS site… enhancing content with images.

Images can be used to trigger an emotion, emphasize an idea, support content or just enhance readability of a page.  Since they can play so many roles, it’s easy to see why adding them to your site can seem like a daunting task.

Below are some basic tips for choosing the right images, editing those images, and laying them out in your content.  After reading this guide you should have a basic understanding of how to add images to improve your own site. 

Choosing the Right Images

As with any design project it is best to start with the end in mind. In basic terms, have a plan. 

Creating an image plan can be broken into three parts: purpose, consistency, and consolidation. 

Purpose:  A big part of choosing images is asking questions. 

• What type of image would enhance this content?
• Does this image support this page?
• Where does this image go?

Asking the most basic questions will help you decide whether an image helps or hurts a page.

Consistency:  Maintaining a consistency in your images will increase the readability and overall professionalism of your site.  This means placing images in a similar size, similar quality and in similar locations throughout the site.  Of course you have creative freedom to stray from this, but don’t stray so far that you break the layout.  When you have a large variance of size, quality, or location, it creates a visual shock to the reader.   

Consolidation:  One of the most important parts of adding images is limitation.  More images can be distracting to the reader, and can increase page load times.  By limiting the amount of images, you also increase the importance of each individual image.   If a page is filled with images, the reader may stop caring about the individual images, and they can lose their purpose.

Another factor that combines the aspects of purpose, consistency, and consolidation is source.  Each website is different, and each message is unique.  You may want to take some time to consider what source your images are going to come from to best support your site.  Will it be stock imagery or will you take your own photos?  Are you going to hire a professional photographer?  While it is okay to mix sources, it is still important that you maintain a consistent quality and appearance. This may require limiting the number of photos you use. 

Sizing Your Images

I’ll talk more about layout later, but before you upload photos to your site, you want to make sure they are an appropriate size.  It is never a good idea to just upload full resolution photos from a camera.  Images can be slightly larger than their final display size, but browsers can ruin the quality of images with an extreme size decrease. 

To start, I always recommend using Firefox or Chrome as your browser.  These have great tools (plugins) for helping you get an idea of your image size.  Remember, since we are working with the web, I will be discussing image sizes in terms of pixels.

Using Firefox as an example, go to the Firefox add-ons page, and install MeasureIt.  Next, right click your Firefox status bar, and select “Customize” to see your list of add-ons.  Drag the MeasurIt icon anywhere onto the status bar. 

To determine your image size requirements, go to a page that you wish to add an image.  Click on the MeasureIt icon, and left click and drag your mouse on the page to create a mock location for the image.  The MeasureIt add-on will display the width and height of the box you just created in pixels.  Write this size down and we will use it as a basis for our first image.  

Photoshop.com

Now that you have your image size, and have selected an image that contributes to your purpose, lets discuss how to size the image.  Some of you may be blessed with image editing software/knowledge, but for the rest I recommend photoshop.com. 

Photoshop.com is a free service offered by Adobe, which offers basic to intermediate image-editing capability.  To use it, all you need to do is go to their website, and sign up for an account.

Once signed in you can upload photos you wish to size.  The free account gives you a 2GB storage limit, but you can always delete photos when you are done.  Click the upload icon , and you will be navigated through a series of steps to create your first album.  Once uploaded, click on your newly created album, and select the image you wish to edit.  Next click the edit icon. 

In the editing window you will be given a variety of options for editing your photo, but our primary concern for this article are the “Crop & Rotate” and “Resize” icons.   

First, crop your photo to your desired dimension.  You don’t have to be perfect here, but make it either horizontal, vertical or square.  If your photo is already the dimension you wish, you don’t need to do anything. Click the photos to the right to view larger. 

Next, click the resize icon. To size it closely to the pixels you have written down, click the Custom box in the top middle.  This will allow you to specify a height and width.  You can either fill in the width or height box and the other will automatically adjust.  For consistency in appearance, I recommend giving most of your photos the same width. We’ll discuss more about varied width options later.

Once you have your image sized, click the "Done" button.  Next click the "Save to my computer" option, and download the file.  Close out of the editor, and you will now have a custom sized image.

Laying Out Your Page

Image layout can be a struggle, but since you have made it this far, you should have no trouble.  We already have a plan of where we will place our first image, we have it sized for web, and now we just need to place it there. 

There are a few tried and true options for photo layout on a page.  You always play around with positioning and make corrections, but here are four tips for a quality consistent layout. 

1. Align all images the same way.  The first image you use sets a precedent for the rest of the images on your site.  Images help guide a reader’s eyes.  If images appear all over the place, the reader will be confused by where to look. 
2. Try to not have more than two image sizes.  Sometimes a varied image layout looks best, but if you have five photos at five sizes, the layout can look cheap or unplanned.  You can choose an emphasizing photo size and supporting photo sizes, but keep their sizing consistent. 
3. Limit your photos.  Unless lots of photos benefit the reader, as in the case of a how-to, it is usually recommend to only use photos that support the content.  If you have a lot of photos I recommend implementing a gallery system that is primarily for displaying the extra photos.  Too many photos in the text limits the importance of each individual photo.  Contact Us if you do not have a gallery system on your site.
4. Give your photos room to breathe.  Space out your photos so they don’t overtake the text.  Also, in the advanced tab of our CMS’s image insertion window we offer the ability to align photos and add vertical or horizontal space.  Horizontal and vertical space is a unit of pixels that keeps text away from the image.  You can play around with images to find the best layout for you, but I recommend starting with 10 in both of these boxes.     

We have varied version of our GearsCMS available, so use your CMS training manual to determine how to add/upload photos to your site. 

Now the final step, and possibly most important, is play.  Try a few different layouts as you update your content, but keep it consistent throughout your pages.  Remember to preview your layout on the web before you finish.