When you upload an image, the system scales it down to the size less than it is in the following table and saves it at that size. For example, uploading a 1400x768 image will scale it down to a medium size (1200x675).
Size | Max size | Average file size |
Thumbnail | 300 px | 20 KB |
Small | 700 px | 150 KB |
Medium | 1200 px | 500 KB |
Large | 2000 px | 1 MB |
Huge | 3000 px | 2 MB |
Each image type has a maximum size to avoid storing unnecessary large files. The following table summarizes this with possible client-side optimization. If you upload a 900x450 image for a command button, it will reduce it to 300x150 and then save it.
Image Type | Max size | Client optimization |
Command Buttons | Thumbnail | No |
Background | Large | No |
Generic Photo | Large | Yes |
News | Large | No |
Partner/Sponsor | Small | No |
Slideshow | Large | Yes |
Favicon | Thumbnail | No |
Team Logo | Medium | Yes |
When you upload an image type with client-side optimization, the system generates duplicates in the first table in all the smaller sizes below it. A 1400x768 slideshow image will be saved in the medium (1200x675), small (700x394), and thumbnail (300x169) versions.
Then, when you access a page with that image, the system loads the smallest acceptable generated image based on the screen size or area to speed up page loading. For example, it may load the 1200x675 version on a desktop screen but load the 300x169 version on a phone.
Images uploaded via the CK Editor in the Main Text, Generic Content, News body, and Custom Pages components are not optimized; they are left as is. Therefore, resize them to the desired display size before uploading them to minimize loading time.
We will list exact images sizes and aspect ratios expressed as width to height, such as 5:2 for 5 units wide to 2 units high. Images that match the correct aspect ratio will be resized to fit exactly into the given space. Images that don't will be stretched, shrunk, or cropped to fit within the given aspect ratio.
For example, the home page slides have a 2.5:1 aspect ratio (also known as a 5:2 aspect ratio). That means the image should be 2.5 times as wide as it is high. So although the precise dimensions are 1200x480, if you upload a photo that is 1500x600 pixels it will still display perfectly. Learn how to crop and resize images to correct aspect ratios.
Here are areas where you will need to upload new photos.
Home Page Slides
Dimensions: 1200x480 pixels (Classic, Clean templates)
Business and Minimal can use up to 2000x800, but 1200x480 looks just fine and load much faster.
Aspect ratio: 2.5:1 (or 5:2)
In the side menu, click Website Design.
Click the Photo Slideshow overlay.
Click the slide to update.
Click the in the upper right of the photo to delete it, then click Remove to confirm.
Drag and drop a photo onto the Slide Photo area, or click the area and then double click the desired photo.
Click Save.
Repeat for each remaining slide.
Click Close.
Need more details? Learn more about the Photo Slideshow component.
Command Buttons
You can now choose from two button types: one with icons and one with a larger photo behind the button text.
Command Buttons with Icons (Simple)
Template, icon dimensions in pixels, aspect ratio:
Business: 58x58, 1:1
Classic: 58x58, 1:1
Clean: 58x58, 1:1
Minimal: 61x61, 1:1
In the side menu, click Website Design.
Click the Command Buttons overlay.
Click a command button to change.
Click the Icon box.
You may search for and click one in the supplied library, or use your own by clicking the in the upper right of the image and dragging and dropping one onto the OR Upload your own area.
Click Save.
Repeat for each remaining command button.
Click Close.
Command Buttons with Larger Photos (Image Thumbnail)
Template, image dimensions in pixels, aspect ratio:
Business: 317x178, 16:9
Classic: 315x177, 16:9
Clean: 317x178, 16:9
Minimal: 274x154, 16:9
In the side menu, click Website Design.
Click the Command Buttons overlay.
Click the Choose Display Type dropdown and select Image Thumbnail.
Click a command button to change.
Click in the upper right of the existing image and click Remove.
Drag and drop a photo onto the Thumbnail Photo area.
Fill in the Button Description Text.
Click Save.
Repeat for each remaining command button.
Click Close.
News Articles
These take on a blog feel with much larger images. You’ll want to update the images in at least your most recent articles. Photos are typically displayed in their original aspect ratios in the article. The news article listing page displays thumbnails in a 4:3 aspect ratio.
In the side menu, click Org Tools > News.
Click the title of an existing article.
Click Edit… in the upper right.
Click the in the upper right of a photo to delete it.
Drag and drop new photos into the News Photo area.
Business, Classic, Clean: 864 pixels wide
Minimal: 912 pixels wide
Click Save.
Sponsors & Partners
The procedure is the same as for home page slides. Existing images will generally be fine, but now that you can use larger PNG and GIF images (see sizes below) with transparent backgrounds, we encourage you to obtain larger modified logos like that, as they will look nicer and blend in if the Sponsors area has anything other than a white background.
Template: Dimensions, aspect ratio:
Business: 146x146 pixels, 1:1
Classic: 213x158 pixels, approx. 4:3
Clean, Minimal: 148x148 pixels, 1:1
Custom Skin Sites
If your site had a custom skin and you opted for us to send you its assets, next, add your custom skin assets to the new CMS.
Otherwise, it's now time to upload a new team logo.