How can we help?

Images are a crucial part of any website's success, so you need to make sure you are working with them in the best possible ways throughout the site. To start, let's go over some simple rules you'll want to follow.

Rules for Working with Images

Start Large - As a general rule, you will want images that are large for your website, at least to start. You can always size them down to whatever you need, so starting with a larger image is good, think 800px - 1000px (see size guidelines below).

Use JPEGs, PNGs, or SVGs - Other formats may not work at all (e.g. GIFs). If you are not familiar with PNGs, they are an Adobe image format for the web that allows for image transparency. SVGs are a vector image format (line art instead of pixel art) that scale beautifully larger or smaller as needed. For pixel-based images (JPEGs and PNGs), our system has an auto scaling feature that always rescales the image file for optimal image quality.

Resize with Care - Sizing down is always fine; just realize you will lose detail the smaller the image gets, and that's normal. Never enlarge an image past its starting size, or it will begin to pixelate and look grainy.

Know Your Limits - For web images, the largest you would ever need them to be is about 2,000px wide, so the system may block you from uploading images larger than this. Similarly, you don't what huge image file sizes for web images or it will slow your page load time way down, so the limit on the file size is 4mb. Anything larger will be blocked from upload. If for some reason you need to upload an image that exceeds these limits, click on the Documents folder in the Files area and you can upload files up to 100mb in size. For display on the web page, though, you will want to follow the limits above.

Crop for Best Fit - To maintain an orderly appearance, or to make sure that your images line up nicely, you will want to crop them to exact dimensions. If you're replacing an image, find its original dimensions and crop the new image to fit. In your slideshow, you will want all images to have exactly the same dimensions, whatever you feel looks best.

Add or Change an Image

If you need to add an image into a module to display on one of your pages or if you need to change out an old image for a new one, please follow the steps below:

1. To add a new image or change one that is already there, first click on the Edit button for the module where you want the image (the Edit button is the small pencil on the far left of the gray Module Toolbar).
   
   
   
   
2. In the content editor, either right-click on an image you want to replace or left-click your mouse where you want the new image to go. If you are changing an existing image, your right-click will pop up a small menu: click on Insert Image to open the Insert / Edit Image window. If you are putting in a new image, either right-click and use the menu or you can click on the Insert/Edit Image button in the controls above the area in which you're working (it looks like a photo of a mountain, look in the top row of buttons below).
   
   
   
   
3. In the Insert / Edit Image window, if you are changing an image to a new one, you should write down the Width and Height so you can change the new image to the same size. If you are bringing in a new image, you may need to try several sizes, saving the image (see below) to see how it fits.
   
   
   
   
4. To load the new image, click on the Browse Server button (the button to the right side of the Source field).
5. You will see the Browse Server window open, with some of your site images visible. If your image is already on the server, click on it. If you are uploading a new one, click on the button for Upload File.
   
   
   
   
6. In the Upload File window, click on the Add Files button and browse your computer for the image(s) you want. You can also just drag and drop images into the gray area below the buttons, if you like.
   
   
   
   
7. When you find your image(s), if there is only one you need, you can double-click on it (or click on it once and click the Open button at the bottom). If you want to load multiple images, you can click on each separately while holding down Ctrl (Command if you use a Mac) and then click Open. If you are selecting all of the files in a folder, you can do Ctrl + a (Windows) or Command + a (Mac) and then click Open.
   
   
   
   
8. You will see thumbnails of the images you are uploading in the Upload Files window. Click the Start Upload button and the image(s) will upload. When they are finished, the Upload Files window will disappear and you will again be looking at your Browse Server window.
   
   
   
   
9. You will see the image(s) you just uploaded at the top of the list. Click on the image you want.
   
   
   
   
10. You will see the Width and Height for the image, as well as its URL. You can adjust the Width or Height as desired and click the other dimension and it will adjust to fit. ADD ALTERNATIVE TEXT TO EVERY IMAGE: The Alternative Text area is where you can enter a descriptive phrase or sentence about the image so the search engines will know how to index it for web image searches. Doing this will increase your search relevancy for the whole website, so we strongly encourage you to do this for each image.
    
    
    
    
11. In the Advanced tab, you have other options for formatting your image. You can set Alignment (the way the image lines up to text) and the standoff of how far the image is separated from the text in pixels (using the Horizontal Space and Vertical Space fields, for horizontal and vertical standoff).
    
    
    
    
12. When you are finished, click OK, and then you can use the resizing 'handles' around the image to adjust further as necessary. When your work is done, remember to click the Save button at the bottom to bring the changes live to the web page.

Guidelines for System Images

In addition to the rules above, you will want to follow these guidelines when working with images in the different areas of the system:

Product Images: You will want these to be large, if you can get them that way. Anywhere from 800px to 1000px is preferred, with a minimum of 500px wide. The system will downsize them as needed wherever they display smaller. Uploading smaller images can work, but it won't represent the product well, and can jeopardize the customer's perception of the product value as well as their online shopping experience. Taking your own photos with a digital camera or smartphone is good if the product manufacturer doesn't have good ones available.

Category Images: Smaller is okay, around 400px is about as large as they will ever be seen.

Class Images: Again, larger is better. If you can follow the same guidelines for product images, that is great. Not as critical as your product images, but still quite important because in many ways, the image you put up for a class will be helping you sell it.

Slideshow: If you are using the Responsive website system (all newer sites do) your slideshow either spans the full width of the browser, or the width of the central content area. We recommend uploading images at 1920px wide for full-width, and 1170 wide for standard width. For the height, the only important consideration is that the images you put in all have the same pixel height.

Free Online Resources: When working with images, especially ones you take with a camera with a high megapixel count (3MP or higher), you often will need to down-size the image to get it to upload in the first place. For many areas of the system, such as your slideshow, you will also need to crop images to specific pixel dimensions. Here are some great free resources to help you with your image work:

Pixlr.com by Autodesk: This is an online image editing program that is free for you to use, with a paid version that has more robust features. With Pixlr Express you get AI enhanced editing and will easily be able to do simple functions such as resizing, cropping, and even adding text overlays.

Canva.com is a phenomenal resource and tool set for doing web graphics, promotional images, or any image and text layout work you might have on your list.

WebFX Colorpicker: Need an RGB value or a Hex code for a specific color? This easy to use site will let you get what you need quickly.

IconFinder: Many free icons, buttons, and symbols for whatever you might need for your site.

Pexels.com: Free stock images, all royalty free!

Adobe Color: Need to find matching colors? Or perhaps a palette of compatible colors for use on your site? Adobe has put together an amazing tool you can try for free to help you intuitively find the colors you want.