Image sizing is vitally important to ensure users on all devices and networks can view your website. Large image files can slow down your page load speed, frustrating users and docking your site's search ranking. Thus, resizing your images and optimizing them before uploading to sharepoint is essential.
General Rule: Images should be between 800px - 2000px wide, and under 400k in file size.
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 properly sized, web-optimized images are used. Image optimization goes both ways: Image file sizes should be neither too large (slows down the page) nor too small (pixilated) 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 should 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 non-full widths should be sized 800px wide and optimized to around 300k. Such images should never exceed a maximum of 350k or go below a minimum of 70k in file size.
- Images displayed at full widths (images that span the width of the page) 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.
Image display percentages
In the responsive environment, images adjust based on the window or screen size of the device being used to view the page. Thus, we use percentages to determine the way images will display optimally whether you're using a widescreen monitor or a narrow screen like a smartphone. When inserting an image on a page, reardeless of its actual size, it can appear in several standard percentages: 100%, 75%, 50%, 33%, and 25%.
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.