Image & Media Guidelines

Standards for every image uploaded to CAS.org — dimensions, formats, optimization, alt text, and sourcing. Follow these rules to keep page load times fast, accessibility scores high, and visual quality consistent.

Last Updated: March 30, 2026 | Audience: Everyone

Format & Optimization

Every image uploaded to the CAS.org Webflow CMS or Designer must be optimized before upload. Unoptimized images are the single biggest contributor to slow page loads.

Preferred Format: AVIF

Use AVIF as the default image format for all web images. AVIF delivers significantly smaller file sizes than JPEG or PNG at equivalent visual quality. Webflow serves AVIF automatically to browsers that support it and falls back to the original format for older browsers.

How to Convert to AVIF

1. Go to TinyPNG.com.
2. Drag and drop your image file (JPEG, PNG, or WebP).
3. Once compressed, click the download arrow and select AVIF as the output format.
4. Download the converted file. This is the file you upload to Webflow.

TinyPNG is free for up to 20 images at a time and handles batch conversion.

When NOT to Use AVIF

Use SVG for logos, icons, and simple illustrations with flat colors and sharp edges. SVGs are resolution-independent and render crisply at any size. Use PNG only when you need transparency and cannot use SVG (e.g., complex transparent overlays on photos). Use GIF only for simple animations — and consider whether a short video or Lottie animation would be a better choice.

File Size Targets

After AVIF conversion, aim for these maximum file sizes. Images exceeding these limits will noticeably slow page loads, especially on mobile:

• Hero and feature images: Under 200KB (ideally 80–150KB after AVIF conversion)
• Thumbnails and card images: Under 80KB
• Speaker and author headshots: Under 50KB
• Icons and small graphics: Under 20KB (prefer SVG)

Dimensions by Context

Use the dimensions below for each image context on the site. Uploading images at the correct size prevents Webflow from having to resize them on the fly and keeps the CMS asset library manageable.

CAS Insights Articles

• Feature Image: 1200–1920px wide. This is the primary article image shown at the top of the post and on social sharing cards. Minimum 1200px to look sharp on retina displays.
• Thumbnail: 800–1200px wide. Used on the CAS Insights index page cards. If left blank, the Feature Image is cropped automatically.
• Inline images (within Rich Text): 720–1440px wide. The content column is 720px, so images wider than 720px display at full width with retina sharpness. Never upload images narrower than 720px for inline use — they will appear blurry.

Webinars

• Brightcove Video Thumbnail: Download directly from Brightcove and upload to Webflow. Must be present — without it, a black box appears on the webinar page. Typically 1280×720px.

Events

• Image from previous event: Max 200KB file size. 1200px wide recommended.
• Co-brand / Co-hosting Org logos: PNG or SVG with transparent background. 400–600px wide.

Speakers & Authors

• Headshots: 300–800px wide. Square aspect ratio (1:1). These display in circular or square crops depending on the template, so center the subject's face in the frame.

Gated Content

• Feature Image: Same specs as CAS Insights (1200–1920px wide).
• Fanned Image: Used for the stylized "fanned pages" preview treatment. 800–1200px wide.

Homepage

• Home Hero Slides: 1920px wide minimum. These are full-bleed hero images and must look sharp on large desktop monitors.

Alt Text

Every image on CAS.org must have descriptive alt text. This is not optional — it is a legal accessibility requirement under WCAG 2.1 and directly affects our search engine rankings.

How to Write Good Alt Text

Be specific and descriptive. Describe what the image actually shows, not what it represents conceptually.

• Good: "Molecular structure of aspirin showing benzene ring and acetyl group"
• Bad: "Image" or "Chemistry" or "Molecule"

Include relevant context. If the image shows data, describe the key takeaway.

• Good: "Bar chart showing 40% increase in patent filings for mRNA therapies between 2020 and 2024"
• Bad: "Chart" or "Data visualization"

Keep it concise. Aim for one to two sentences. Screen readers will read the entire alt text aloud, so avoid writing a paragraph.

Don't start with "Image of" or "Photo of." Screen readers already announce that the element is an image.

For decorative images (purely visual elements with no informational content, like background textures or divider lines), set alt text to empty. In Webflow, leave the alt text field blank and check the "Decorative" toggle if available.

Where to Enter Alt Text

In the CMS Editor: Most image fields have a corresponding "Alt Text" plain text field directly below them (e.g., "Main Image Alt Text" under "Feature Image"). Fill in both fields together every time.

In the Designer: Select the image element, and enter alt text in the Image Settings panel on the right side.

Sourcing Images

Getty Images

CAS has a Getty Images subscription for editorial and marketing photography. To get a Getty image for a CAS Insights article or marketing page:

1. Submit a request to the design team (Mariah or Tammy) with the article topic and any visual preferences.
2. They will source and download the image from Getty.
3. The image will be uploaded to the CAS Brandfolder for archiving.
4. You then download from Brandfolder, convert to AVIF via TinyPNG, and upload to Webflow.

Never download images from Google Image Search or other stock sites without a license. This exposes CAS to copyright liability.

Brandfolder

Brandfolder is the CAS digital asset management system. All approved brand assets, logos, photography, and marketing materials are stored there. When uploading gated content PDFs, use the Brandfolder Attachment CDN link in the PDF URL field rather than uploading the file directly to Webflow.

AI-Generated Images

If original photography or Getty images are not available, AI-generated images can be used with caution:

• Flux 1.1 Pro is the recommended model for photorealistic output.
• Adobe Firefly and DALL-E 3 are acceptable alternatives.
• AI images must be reviewed for accuracy — check for incorrect molecular structures, extra fingers on hands, nonsensical lab equipment, or text artifacts.
• Do not use AI-generated images of identifiable real people.
• Label AI-generated images internally (in Brandfolder or file naming) so the team knows the provenance.

Photography Standards for Scientists

When commissioning or selecting photography featuring scientists, follow these rules:

• Documentary realism over staged photography. Scientists recognize posed stock photos immediately and it undermines trust. Show actual work environments, real equipment, and natural interactions.
• Specificity matters. A chemist at a fume hood with specific glassware is more credible than a generic person in a lab coat smiling at the camera.
• Diversity is essential but must be authentic. Represent the actual diversity of the scientific community without tokenism.
• Show the work, not the worker. Close-ups of hands working, screens showing data, lab notebooks, and equipment are often more effective than portraits.

Webflow Asset Library Hygiene

The Webflow asset library is shared by the entire team. Keep it organized:

• Name files descriptively before uploading. Use lowercase, hyphens instead of spaces: cas-insights-mrna-patents-feature.avif not IMG_4392.jpg or Screenshot 2026-03-15.png.
• Upload to the correct folder if the asset library has folder structure. Check the existing folder organization before creating new folders.
• Don't upload duplicate images. Search the asset library first. If the same image already exists, use the existing asset.
• Don't delete assets you didn't upload without checking whether they are in use. Deleting an asset that is referenced by a CMS item or page element will leave a broken image placeholder.

Quick Reference Table

Use this as a cheat sheet when preparing images for upload:

• CAS Insights feature: 1200–1920px wide, AVIF, under 200KB, alt text required
• CAS Insights thumbnail: 800–1200px wide, AVIF, under 80KB
• Inline Rich Text images: 720–1440px wide, AVIF, under 150KB, alt text required
• Headshots (speakers/authors): 300–800px wide, square 1:1, AVIF, under 50KB
• Video thumbnails: 1280×720px, download from Brightcove, AVIF
• Hero slides: 1920px+ wide, AVIF, under 200KB
• Logos and icons: SVG preferred, PNG with transparency as fallback
• Gated content PDFs: Use Brandfolder CDN link, not direct Webflow upload

Common Mistakes

• Uploading raw camera files or uncompressed PNGs. A single 5MB hero image can double a page's load time. Always convert to AVIF first.
• Skipping alt text. Every content audit will flag this. Add it at upload time, not later.
• Using images narrower than the display area. A 400px-wide image in a 720px content column will render blurry. Always upload at least as wide as the display container.
• Uploading screenshots as feature images. Screenshots of software, websites, or documents look unprofessional as article hero images unless the article is specifically about that interface.
• Forgetting the Brightcove thumbnail. This is the number one cause of the "black box" on webinar pages. Always download and upload the video thumbnail separately.