Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    User Guide

    Image Component

    The Image component allows a single image asset to be displayed on the page. Images are adaptive; the relevant image width is selected for the screen size.

     

    Images must be uploaded to an Assets folder in advance – they cannot be uploaded through the Image component. Check out the Navigating AEM guide for more info.

    Navigating AEM
    Image Description Best Practices

    Overview

    Component name: Image

    Authors who can use: all

    Templates/page types that can use component: all

    Required or optional: optional

    Authoring Fields

    Adding the Image component to the page

    Once on the desired page in Edit mode, add the Image by doing the following:

    Option 1: Double click on “Drag components here.” A modal titled “Insert New Component” will pop up. Type “Image” in the search bar, or scroll to the Image in the list. Double click to add to page.

    Option 2: On the left hand rail, navigate to the Components tab. Type “Image” in the search bar, or scroll to the Image in the list. Double click to add to page.

    Editing the Image component

    1. With the edit wrench, open the component.

    Image toolbar, featuring the edit wrench.

    2.       Asset tab

    a.       Inherit featured Image from page checkbox: Use the featured Image, either from page’s Page Properties, or from the properties of a linked page, if one is defined.

    i.      The checkbox is default checked off. Uncheck to add a different Image to the page.

    b.       Pick button: Select an Image from the DAM (Digital Asset Manager, where Images and other assets are stored).

    c.       Drop an asset here field: Drag and drop an Image from the left hand rail.

    i.      Once a photo has been added:

    1.       Edit button: From the Image’s toolbar, click “Edit” to crop, rotate, and flip the photo.

    2.       Clear button: Delete the selected Image.

    d.       Decorative Image – no alternative text checkbox: Meaningful Images, which contribute new information to the page, must have alternative text provided for visually impaired residents. Decorative Images which don’t convey additional meaning do not require alternative text for accessibility. Default unchecked. If checked, below accessibility fields will be disabled.

    i.      Alternative text for accessibility field: Add alternative text.

    ii.      Inherit from description of asset checkbox: If selected image already has alternative text defined in Assets, use this text. If unchecked, the “Alternative text for accessibility” field will be enabled. Default unchecked.

    e. Preset Type radio buttons: Select if the Image should appear as-is, or appear cropped. If the image is inherited from Page Properties, this field will not appear. It is unlikely that the default options need to be changed.

    i.      Select either Image Preset or Smart Crop radio button

    1.        Image Preset radio button

    a.       Image Preset dropdown: None selected by default; no other options.

    b.       Image Modifiers

    1. To make images transparent, enter "&fmt=png-alpha" or "&fmt=webp-alpha".    

    2.       Smart Crop radio button

    a.       Rendition dropdown: None selected by default. Select Auto to let the system determine the best cropping; otherwise select Small, Medium, or Large.

    b.       Image Modifiers

    f.       Disable lazy loading checkbox: When checked, Image will load regardless of if it is currently visible by resident. When unchecked, Image will only load when visible on the page. Default unchecked.

    g.       Image Width dropdown: Select pixel size of image. Options range from 16 (smallest) to 1200 (largest). Default Auto.

    The Asset tab in the Image authoring dialog.

    3. Metadata tab

    a.       Caption field: Add a caption to display under the Image. This field is disabled if the checkbox below is checked.

    i.      Get caption from DAM checkbox: When checked, use the Image’s caption text as defined in the DAM. Default checked.

    b.       Link pathfinder field: Add a link

    i. Open link in new tab checkbox: When checked, open the link in a new browser tab. Default unchecked.

    The Metadata tab in the Image authoring dialog.

    4.       Styles tab

    a.       Image Border dropdown: When Border 1 Pixel is selected, a gray border appears around the Image. This can help separate the Image from a background with the same color. Default None.

    b.       Border Radius: When Radius 32 Pixel is selected, the Image will have rounded corners. Default None.

    The Styles tab in the Image authoring dialog.
    A left-aligned Image with a border, border radius, and caption. Figure A: Above is an example of a left-aligned Image with a border, border radius, and caption.

    Sizing

    Below are guidelines detailing the minimum recommended sizing specs across our various available aspect ratios. Within our components, the most commonly applied ratios are 16:9, 4:3, and 1:1. Oher common sizes are 32:9, 3:2, 2:3 and 3:4. When cropping images (before uploading to AEM), size to these ratios.

    selection of images for image sizing

    Accessibility

    1. When adding an Image to the page, make sure to add alternative text that describes the information or function represented by the photo, unless it is decorative. This will be read out by a screen reader for users who cannot view the image.

    a. Check out the Image Description Best Practices guide for editorial guidance on writing useful alternative text.

    Other tips

    1. To make images transparent, add either "&fmt=png-alpha" or "&fmt=webp-alpha" to the Image Modifiers field in the Asset tab.
    2. Use the Emulator widget to test Image size on different devices.
    3. The recommended character limit for captions is 40 characters.
    4. If authored/pulled from the DAM, a caption appears below the Image. Make sure the "Caption" field in Metadata tab is empty if none should display.