Overview
The resources below will help you in properly naming your files, reviewing your file size, and understanding folder structure.
Training videos will guide you in the following:
- Upload assets to the DAM
- Navigate the folder structure
- Create a new folder
- How to overwrite assets
- How to generate a browser link to the assets
- How to update the asset properties/metadata
- How to publish assets
- How to move assets
CAUTION: You Have DELETE Permissions for Live Site Assets
If you need to delete an image email DCM Team & provide the asset path.
Upload assets to the DAM
Upload all supporting assets to the Digital Asset Manager aka DAM. These assets include Images and PDFs to support Digital projects.
Image Best Practices:
1. Avoid text in images – it can be difficult to read for users who rely on screen readers or have visual impairments. It also doesn’t scale well for responsive designs, causing issues on various devices.
2. When adding text in images – If text must be included for the image design purposes like logos, infographics or charts, it’s best to describe the text separately in the images alt text to remain compliant with Accessibility Web Standards. When loading your image in AEM use the Description field in the image properties to add alt text. Alt text should be brief yet clear enough to describe the purpose of the image or its content. Think of it as a summary.
- Avoid Using “Image of…” or “Picture of…”: Screen readers already identify that.
- Good example: for a chart image: “Bar chart comparing sales over the past 5 years.”
3. Image File Name – all lowercase letters, use hyphen to replace spaces & no special characters.
Image Specs:
Size: under 700 pixels wide and 1200 pixels wide for backgrounds
File size: >200KB or below
Format: Webp, JPG , or PNG
PDF Best Practices:
File name format
- all lowercase letters
- hyphen between words (no spaces or underscores)
- no special characters (e.g., no accents, apostrophes, or punctuation)
Optimize File Size for Web
Compress PDFs: Reduce file size by compressing images and optimizing the PDF content without sacrificing quality, to ensure faster loading times on the web.
Embed Fonts Efficiently: If embedding fonts, only embed the characters used in the document to save space.
Remove Unnecessary Elements: Eliminate unused objects, metadata, or redundant images that can increase the file size unnecessarily.
Test PDF for Accessibility: Adobe Acrobat Accessibility Checker: Use the built-in accessibility checker in Adobe Acrobat Pro to identify issues and fix them before publishing.
Navigate the folder structure
Understand folders that you will navigate to when adding or replacing images.
Create a new folder
Learn how to name folders and where you should create folder.
How to overwrite assets
When replacing files options will appear here's the breakdown of what each option does.
- Canel: Will stop the replcement
- Keep Both: Will upload the image with a different file so the original isn't replaced
- Replace: This will update the image to the new image your uploading (this is the option you always use for replaceing files.)
- Create Version: Creates a snapshot of the asset before the change, saving it as a new version in the asset's history, which allows you to preview, compare, or revert to the previous state later
How to update the asset properties/metadata
Learn where to update the assets properties, which is helpful for SEO.
How to publish assets
Learn where the publish setting appears.
How to generate a browser link to the assets
After you publish and asset this will help you generate a link of the asset so you can confirm it's live or provide a PDF link to a stackholder.
Pro Tip: Bio images can be requested from Creative with these specs:
Design a square image (Aspect Ratio: 1:1 Square; 400x400 px; .jpg or .png or .webp) with the subject centered and enough margin around the edges so it looks good when styled as a circle using border-radius: 50%
File name format example: [first-name]-[last-name].jpg
- all lowercase letters
- hyphen between first and last name (no spaces or underscores)
- no special characters (e.g., no accents, apostrophes, or punctuation)
Image file name format examples:
jane-smith.jpg
john-oconnor.png