This article covers image guidelines for activities and emails in Fuel Cycle. Follow these specifications to ensure your images display correctly across devices and email clients.
Design Specifications
All image dimensions in this article are listed in pixels (px) as width x height. For example, 600x120 means 600 pixels wide by 120 pixels tall.
Supported File Types
Fuel Cycle supports the following image file types:
- JPEG — Best for photographs and images with a wide range of colors.
- PNG — Best for graphics, logos, icons, and any image that requires transparency. PNG supports full alpha transparency, which means parts of the image can be partially or fully see-through.
- GIF — Suitable for simple graphics with limited colors, such as icons or logos. GIF supports only binary transparency (fully transparent or fully opaque) and a maximum of 256 colors, so avoid using it for photographs or complex images.
You can add static GIFs to emails and activities without issue. Animated GIFs may not display correctly in all email clients. Some versions of Microsoft Outlook show only the first frame instead of the full animation. Test animated GIFs with your audience's most common email clients before sending.
Image Size Specifications
Brand Logos
The minimum size for brand logos is 300x60 px. The preferred size for headers and footers is 600x120 px. These dimensions follow a 5:1 width-to-height aspect ratio, which works well for logos in a landscape format.
Login Page Images
A 16:9 aspect ratio is desirable. At minimum, your image should be 555x312 px.
Background Images
Use a 2:1 aspect ratio for background images. At a minimum, your image should be 2000x1000 px. A width of 2500 px or greater is preferred.
Featured Images
- Minimum: 1200x513 px
- Preferred: 2500x1070 px or larger
Activity Card Images
- Minimum: 1200x675 px
- Preferred: 2500x1406 px or larger
Topics and Categories Landing Page Images
- Aspect ratio: 21:9
- Minimum: 1200x513 px
- Preferred: 2500x1070 px or larger
Best Practices
Activity and email layouts vary, so test your images in your specific designs before publishing. The following guidelines will help you achieve the best results.
Image Dimensions
Start with images larger than the required display size. Scaling a large image down preserves quality. Scaling a small image up causes it to appear blurry or pixelated.
File Size
Keep image file sizes at 1 MB or less. Larger files take longer to load, which slows down the experience for your members. Use a compression tool such as TinyPNG or Squoosh to reduce file size without noticeable quality loss.
Alternative Text
Always include alternative text (alt text) when you add an image to an activity or email. Screen readers use alt text to describe images to visually impaired users. Write alt text that conveys the purpose of the image, not just its appearance. For example, instead of "image of a chart," write "Bar chart showing Q3 survey response rates by region."
Color Profile
Save all web images using the RGB color profile. The CMYK color profile is designed for print and does not render accurately on screen. In some cases, CMYK images fail to display altogether.
Orientation
Check whether the space where you plan to place your image is landscape (wider than it is tall) or portrait (taller than it is wide). If the image orientation does not match the available space, it will be resized to fit. This can produce unexpected results.
Uploading Images
Stock images are not included. Upload your own images through the Asset Library.
Images on High-Pixel-Density Screens
Most modern smartphones, tablets, and laptops use high-pixel-density displays. Standard-resolution images can appear blurry on these screens.
To keep images sharp on all devices, upload images at twice the display size. For example, if your header image displays at 600x200 px, upload an image that is 1200x400 px. The browser scales it down to fit, and the extra pixels keep the image crisp on high-density screens.