Image Component

When to use an Image component

  • When it's important to display your visual content entirely without cropping. 
    • Certain types of visual content are important to display in full without cropping.
    • Example: display a chart in full. A chart is a carefully constructed image used in a data analysis; display it fully to prevent confusion. 
  • When you want to experiment with different positions of the image, sizes, or alignments. 
    • Once an image is placed on a page, the CMS provides tools for quickly moving images around.
    • As you move images around on a page, the image is resized based on the dimensions of the section containing the image. 
  • While using the Text editor WYSIWYG (What You See Is What You Get) features.

When to consider another component

  • An image component also has the option to hyperlink the image. This will not add any text or a description to the image, the image will just be clickable.
  • If you need to add a line of text to contextualize your image, use an Image link component. If you need to add a short description or want to add a button below your image, use the Call-to-action component.

NSF Media Hub authentication

The first time you add an image to a page, either with the image component or from the WYSIWYG editor, you'll need to authenticate with the NSF Media Hub before adding images.

When you select NSF Media Hub, select authenticate to be taken to the authentication screen. The authentication screen opens in a new tab.

Select Go under Login with SSO and then select Allow. This will authenticate your account. 

Return to your image tab and select reload the page. You can choose your image from the NSF Media Hub.

Place a checkmark in your image and then click Select assets.

 

Image Best Practices

This size limit balances the need for faster load times with the equally important requirements of image quality and size. If needed, compress images prior to upload using a tool such as Compress JPEG. An exception to the 1MB file size is if you are uploading a hi-res image for users to download.

JPEG (.jpeg) images commonly have a smaller file size than PNG’s (.png), which will optimize the page load time. Additionally, uploading a JPEG ensures the image does not contain any unwanted transparency.

This is a WCAG accessibility violation (WCAG 1.4.5) which states that text should be used to convey information, rather than images of text. If this is unavoidable, make sure the text is represented in the alt text field.

This is brief, meaningful text used by screen readers, search engines, or when the image cannot be loaded. It is also the link text used if the image is linked. 

If the image is decorative or redundant to text near it, then use two quote marks to indicate empty alt text: "".

Image Examples

Credits and captions will pull from the image metadata that is entered when the image is uploaded. 

Image Added via Component

This is an image added to a one-column layout. 

a great blue heron stands in the marsh at attention

Credit: Florida Museum of Natural History/Photo by Jeff Gage

These are image components added to a two-column layout.

monarch butterflies flutter around and land on a yellow bunched flower

Credit: Florida Museum of Natural History/Photo by Kristen Grace
Neutrinos interacting with Antarctic ice
When a neutrino interacts in the clear Antarctic ice, it produces secondary particles that leave a trace of blue light as they travel through the National Science Foundation's IceCube detector.

Credit: Nicolle R. Fuller/NSF/IceCube
Top