It is absolutely essential that properly sized, web-optimized images are used to ensure users on all devices and networks can view your website. Image optimization goes two ways: Image file sizes should be neither too large nor too small. Large image files can slow down your page load speed, frustrating users and docking your site's search ranking. Images that are too small or overly compressed will look pixelated and poor quality. Before uploading an image to SharePoint it must first be properly sized in width and then optimized, following the standards detailed below. Step-by-step instructions for resizing and optimizing images can be found in our Image Optimization Guide.
General Rule: Use landscape-oriented images that are between 800px - 2000px wide, are under 400k in file size and have been optimized for the web.
Image Orientation
Landscape-oriented images should be used, as these perform better than portrait-oriented images on responsive websites. Portrait-oriented images take up too much space on mobile device screens, spilling off the screen, and allowing less content to be seen. The exception is for faculty and staff headshots.
Image Sizing Standards
- Images displayed at full widths, meaning they span 75% to 100% 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.
- Images displayed at smaller widths (25% and 50%) 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.
- Exceptions: There are some web parts or layouts that require fixed image sizes for consistency, including bio headshots, panel objects, homepage hero photos, page rollup images, and news article thumbnails.
Image Optimization
A web-optimized image is a high-quality image, saved as a small-sized file, in a web-friendly format. If you are already cropping and resizing your image in Photoshop, we recommend optimizing it in Photoshop using Photoshop’s “Save for Web” option. Detailed instructions for cropping, resizing, and optimizing an image in Photoshop can be found in our image optimization instructions. If your image is already the correct size and you only need to optimize it, you may choose to use our approved image optimizer instead of Photoshop.