In the responsive environment, image sizes adjust based on the window or screen size of the device being used to view the page. Thus, we use percentages to determine image sizes to display optimally whether you're using a widescreen monitor or a narrow screen like a smartphone. When inserting an image on a page, it can appear in several standard sizes: 100%, 75%, 50%, 33%, and 25%.
Important Image Sizing Standards
Images should be at least 800px wide and no more than 2000px wide, and no more than 400k in file size.
It is absolutely essential that content editors use properly sized, web-optimized images. Image optimization goes both ways: Image file sizes should be neither too large nor too small or overly compressed.
If you do not already have a good image optimizing tool (like Photoshop - see our guide) we've provided a link to an approved image optimizer. Unless you're already skilled at discerning optimization for web images, use the provided tool's default compression level, though editors can take the level down to no less than 80 on images that you need to bring file size down further on, depending on the size of the image.
So images must first be properly sized in width and then optimized, following the standards for width and file size detailed below:
- Images displayed at 50% and under widths should be sized 800px wide and optimized to around 200k. Such images should never exceed a maximum of 250k or go below a minimum of 70k in file size.
- Images displayed at 75% or 100% widths should be sized 1600px wide and optimized to around 300k. Such images should never exceed a maximum of 400k or go below a minimum of 100k in file size.
- Landscape-oriented images should be used, as these perform better than portrait image orientation in responsive site environments.
In Default Slideshow configuration on a home page or two-column layout - Slideshow images require higher resolution standards and should be sized between 1600px to 2000px wide max and should never exceed a maximum 400k file size. Additionally, a widescreen or panoramic aspect-ratio between 2:1 to 3:1 must be followed. For example, an image with a 1800px width should have a height of between 600px and 900px
In Slideshow Content Right configuration on a home page or two-column layout - Images in a slideshow with the right content box should be sized between 1400px to 1600px wide max and should never exceed a maximum 400k file size. Additionally, for a home page layout, an aspect ratio of 1.9:1 must be followed (for example, 1600px x 842px), and for a two-column layout, an aspect ratio of 1.4:1 must be followed (1600px x 1143px).
Bio Photos: These images used for bio rollup pages should be exactly 255px x 300px in dimension and not exceed 40k in file size - usually they will be fine once they are 255x300. (If a headshot is not available, please use our image placeholder. Drag it from the browser window to your desktop, and then upload it to the appropriate Images folder.)
Right Sidebar Images: All images used in the context of the right sidebar should be sized exactly 800px wide and be optimized to under 100k in file size.
Page Rollup Images: At the bottom of every page editing panel, next to the Page Info tab is the Rollup Info tab. This is where the content that the Page Rollup Web Part displays lives. All images used should be 120 x 120px and not exceed 40k in file size.
Note: There's more than one aspect to image size — both the image width and the file size should be within our standards. Image file sizes should never exceed 400k.
See our guide on how to upload and insert images for more information.