Images Specs
The following information details specific image production guidelines for CMOA, Storyboard, and Carnegie International websites.
Looking for information on writing image descriptions? See image descriptions in our Reference section.
Image Dimensions
Note that you only need to address the largest images. All derivatives are handled by WordPress.
Location | Width | Height | Unit |
Banner/Hero | 3000 | 1000 | pixels |
Inline, aligned left or right | 1000 | - | pixels |
Inline, aligned center | 2000 | - | pixels |
Inline, aligned left - breakout* | 1200–1500 | - | pixels |
Exhibition Gallery** | 1200–1500 | - | pixels |
Column template*** | 1200 | - | pixels |
Anything not otherwise specified | 1200 | - | pixels |
* On Storyboard the left aligned image will break out of content well and align with the left edge of the hero image
** Long horizontal images and tall portrait images may need to be wider or taller to suit both the thumbnail layout and appearance in the light-box. On mobile, we should try to avoid having to scroll to see the whole image. Look to earlier exhibition galleries for guidance. *** Column template can embed any of the default images sizes automatically generated by WordPress including the thumbnail sizes. All thumbnails crop to specific ratios. For the Column template we typically use the Extra-Large Thumbnail 3:2 image.
Image Compression
Improve the visitor experience with faster page load times and less cost to your data plan by compressing images before uploading.
Be sure to cut the image to one of the sizes listed above before uploading. No sense in being charged for information we will never use. For context, image files account for the majority of our hosting expenses. Please compress—make sure it looks good but do compress your files.
ImageOptim for various platforms
Squoosh from Google
File Names
File names are searchable, so why not make them useful? Gobbledygook helps no one not even Gremlins. Read more about Naming Files and Folders.
Image Meta Data
When uploading an image using the WordPress media uploader, WordPress will ask you to enter attachment details. These details are important bits of image meta data. The essential fields must be filled in before embedding an image into a webpage.
Title
By default, WordPress will populate the field with the filename. If you have meaningful names, you now have less work to do. This title is used internally by WordPress to sort images in the Media Library. All titles should use title case.
Caption
Caption text displays along with your image. On CMOA websites, in most cases, this field is used to display credit lines, a photographer’s credit, or and other captioning text. Not all templates will display this field; this is a design flaw and a work in progress.
Use the WordPress Text Editor to adjust the Caption to the particular context. After embedding the image in your post or page, the text editor will allow you to edit the text before publishing.
Alt Text
Alt text or alternative text is a required field and is displayed when a user’s browser is unable to locate and image, or read aloud when using assistive technology.
Use the WordPress Text Editor to adjust the Alt Text to the particular context. After embedding the image in your post or page, the text editor will allow you to edit the text before publishing.
Here is a quick run-down of guidelines about writing image descriptions.
Description
The description field describes, in detail, the visual contents of the image. While not required at this time, long descriptions offer more options for making our content accessible. We will look for ways to utilize this field in the future.
Media Categories
Be sure to assign the appropriate media category. Good data return reliable results. Good results improve production workflows and find-ability.
Save
Saving your changes is automatic. You should see an indicator in the upper right corner of the panel noting that changes have saved.
Resources
Post Thumbnail Editor, video explains how to use the plugin.
To Do
Last updated