Image Sizes & Tips
Recommended Image Sizes
| Page/Block | Image | Recommended Size |
|---|---|---|
|
All pages & Aprimo Image Block |
Hero Image | 1920 X 720px |
|
All pages & Aprimo Image Block |
Hero Image - Mobile Override | 780 X 520px |
|
All pages (excluding bios and listings) & Aprimo Image Block |
Teaser Image | 680 X 340px (2:1) |
|
All pages & Aprimo Image Block & Site Settings |
Social Sharing Thumbnail (OG) | 1200 X 630px (1.91:1) |
| Callout/Feature Block | Callout Image |
725px min width (height can vary) |
| Speaker Image | 365 X 365px (1:1) | |
| Bio Pages | Bio Headshot Image | 1000 X 1000px (1:1) PNG |
| Site Settings | Bios Pages - Banner Background Image | 1920 X 720px |
| Site Settings | Bio Card Background Image | 675 X 450px |
| Site Settings | Bio Card Headshot Placeholder Image | 1000 X 1000px (1:1) PNG |
| Global Footer - Affiliate Logo | 180px max for both width and height |
For Images Uploaded in Optimizely
General Tips
- Use JPGs for photos.
- Only use PNGs for illustrations or when transparency is required (bio page headshots, for example).
- If you’re unsure, use a JPG.
- If an individual image exceeds 1mb in size, then it's too big and needs to be reduced.
Improve Site Performance With Compression
One of the biggest and most preventable issues that lead to slow page performance is uncompressed images.
Before uploading an image in Optimizely:
- Resize the image to the correct dimensions.
- The dimensions vary based on where the image will be used. Please refer to the recommended image size labels next to the field in the CMS, or the how-to guides.
- It's recommended to save/export photos from your image editor at 100% quality and let an image compressor handle all of the compression.
- For web display, images shouldn't exceed 72 DPI (it can be larger for downloads but not for just displaying images on the site).
- Run the image through an image compression tool. Free compression tools to try out: