Image Selection
- Use high-resolution images to ensure clarity and professionalism. Avoid images that are too small, pixelated, or blurry.
- Select images that are relevant to the content and reflect the Air Force Services Brand and mission.
- Include images that represent a diverse range of people and activities.
- Avoid image distortion. Crop to highlight the main subject and eliminate unnecessary elements.
- Use a consistent style for images—such as similar color tones, filters, and compositions—to maintain a cohesive look across all websites. For example, when showcasing events, choose one image shape and stick with it (e.g., use all square images or all landscape rectangles). We recommend using square or landscape images instead of portrait ones, as portrait images can take up the entire screen on smaller devices. Portrait images should only be used for specific cases like banners or hero sections.
Graphic Elements
- Use icon sets and illustrations that align with the overall design aesthetic. Choose styles that are simple, clean, and easily recognizable.
- Maintain consistency in the style, size, and placement of all graphic elements. Inconsistent use of these—such as mixing filled and outlined styles—can disrupt the overall visual harmony of the page.
- They can serve as visual enhancers when images aren’t available, helping content look more polished and less empty.
- Pay attention to spacing and alignment. Graphic elements should support the content without overpowering it or creating unnecessary gaps. The goal is to enhance the visual presentation—not distract from the message.
Image Optimization
- Use appropriate file formats based on the image type. For example, use JPEG or JPG for photographs and PNG for graphics that require transparency.
- Always optimize images to balance quality and file size for faster loading. Our sites use the Imagify plugin to handle this automatically, but you’re welcome to upload already optimized images if you prefer.
- Keep in mind that images wider than 2800 pixels are generally too large for web use, even on large screens. The larger the image size and the more images loaded on a page, the more it can impact performance and loading times.
Image Dimensions
For banners and slideshows, the recommended minimum size is 2000×800 pixels. These elements typically stretch across the full width of the screen, so high-resolution images are important for presentation and layout. If you have higher-quality images, such as 2800×1120 pixels, those work even better. These dimensions help enhance the visual impact of the page header, which plays a big role in how users perceive the site.
For other images used throughout the site, the recommended minimum width is 980 pixels. To maintain a 16:9 aspect ratio, the height should be around 550 pixels. However, our templates typically use 980×700 pixels—a size we’ve found to be consistently effective across responsive layouts. Shorter heights tend to appear too small on mobile or smaller screens.
These dimensions are recommended for layout and consistency, but you have the flexibility to use what best represents your content—so long as the width stays at a minimum of 980 pixels.
Here are a few real-world examples:
- Peterson Space Force Base uses banners with shorter height than recommended. It works well for them and matches their visual preferences.
- Hanscom AFB uses square images following the recommended minimum size. Their layout looks clean and remains consistent across devices.
The key is to keep dimensions responsive and visually balanced. The sizes may differ, but both approaches look great and work well.