The following is our best practices guide on how to add images to your website. 

• recommended sizing for standard image containers on key website pages
• guidelines on selecting, editing, and cropping photos for a consistent experience
• step-by-step guide on adding images to pages throughout your website

Photo Sizes and Specs

General Image Guidelines

• Best practice is to size, crop and compress photos before you upload them to your site. Large file sizes slow down site speed and performance. Once you’ve resized the image to the correct pixel dimensions, use a file compressor like Compressor.io. This is a free download.
• High resolution photos are a must. 72 DPI is the recommended resolution. 
• Select the largest file size available before resizing and cropping photos.

Area Profile Images

Area Index Images

• Each Area Profile requires two images: an area index image and a hero image.
• They appear on different pages of your website.
• They can be the same image or you may use different images.
• Area index images appear on the /areas page of your website. They may also appear, if you opt for this, at the bottom of an area profile page or property details pages
• Area index images must be cropped to 500 x 330 pixels.

Hero Images

• Hero images appear on the area profile page. They function as a banner image. Hero images must be 1920 pixels wide.
• Our platform does not require a standard size for hero image height. We recommend setting a standard height of anywhere from 575 to 750 pixels. All hero images on a client site should have the same pixel dimensions for consistent appearance.
• Hero images may have a text overlay formatted as an H1 head. Be sure the photo you’ve selected for the hero image is one where the text will be visible. For example, when the text overlay is reversed-out white, avoid choosing a photo with a lot of white or light colors. The text overlay is automatically centered north-south-east-west over the photo, so be sure that no critical details in the image will be covered up.

Office Photos and Agent Photos

• The platform comes with a standard system page which allows you to display your office(s) on the front end of your website.
• You can associate your agents and exclusive listings with individual offices if desired.
• Your Offices page is pre-loaded in the system, and has the path name /offices.
• When your site is staged, the platform will upload office photos and agent photos that you provide. Please provide high res photos at the largest pixel size possible.
• Once your site is launched, you can change or add office photos.
• Be sure to use the same pixel dimensions when changing or adding photos.
• For Office photos, the dimensions are 400 x 260 pixels.
• For Agent photos, the dimensions are 300 x 450 pixels.

Guidelines for Image Editing and Naming

How to Edit Images

• Download the largest pixel size available.
• Use a photo editing tool to crop the image to the desired pixel dimensions.
• Save as a jpg or png file. Jpg is preferred.

How to Name Images for Organization and Search Engine Optimization

• Always rename image file. For photos of geo locations, use the name of the place, like this: arlington-ma-hero-image
• Always use lowercase characters.
• Always use hyphens to separate words.
• For hero images, add “hero-image” at the end of file name.
• For area index images, add “area-index” to end of file name.

How to Compress Images

• Large file sizes slow down site speed and performance.
• Once you’ve resize the image to the correct pixel dimensions, use a file compressor like Compressor.io (free).

Inserting and Editing Images

You may add as many images as you like to any page on your website, as well as easily apply the same picture to multiple pages.

1. Follow the steps to create a new page shown here
2. Click the Insert/Edit Image tool icon
3. Click on the “Browse Server” tab
4. Click on “Upload”  and browse your computer. Select the picture you would like to add, then click "open" once selected
5. Click on “Send it to the Server”. The URL of the image location on the server will now appear in the URL field
6. If desired, add any additional styling (spacing, alignment, etc.)
7. Click OK to save your changes
8. Your image will now appear in the body content of this page

To edit an image already added to a page

1. Select the Content tab on the back end of your site; the Pages sub-item opens by default
2. Select the image you wish to edit by clicking or highlighting it
3. Click or right click for Image Properties
4. Change the width, height, or position of the image using the fields on the lower left of the Image Properties window; a small preview is shown on the lower right of the window
5. When you are satisfied with the position and size of your image, click OK to finalize the edit
6. Click the “Update” button on the lower left of the page editor to submit your edits

Tip: Once you have added an image, you can edit it directly from the body content without selecting the image editing tool. Click on the image to select it, then right-click the image and choose “image properties” from the dropdown menu. Make your changes as desired, and then click “OK”. You can also delete an image by clicking on the image to select it, then hitting your backspace or delete key

To learn how to make an image an active hyperlink, see our help documentation on Inserting/Editing Links.