Optimizing Images for the Web
Avoid uploading full-resolution photos (for example, 20MB files straight from a digital camera) directly to your website. Even if browsers can resize images, large files slow down page load times and create a poor experience, especially for visitors on mobile devices or using cellular data. Learn about image compression (optimization).
Best Practices for Web Images
Quality & Ownership
- Use high-quality, professional images that represent UAB well. Photos should be sharp and clear.
- Images must be original and free of copyright unless you've been granted permission for use. It is your responsibility to ensure that photos you've purchased can be used without limit on your website.
- Anyone identifiable in a photo must have a signed release on file.
Size & Resolution
- Recommended resolution for web images: 72 dpi.
- Maximum suggested file size per image: under 300 KB.
File Types
- JPG – Best for photographs; good balance of quality and file size.
- GIF – Best for simple graphics and illustrations; small file size but limited to 256 colors.
- PNG – Supports high-quality transparency; better for graphics where that matters, but usually larger file sizes than GIF or JPG.
File Naming & Captions
- Use descriptive file names for photos and graphics to help with organization and search.
- Captions are recommended but optional, depending on context.
- Use hyphens (
-) between words instead of spaces, and use all lowercase letters.
Accessibility: Visit Media & Graphics on the Digital Accessibility website to learn more about images and accessibility best practices, including the use of alt text and avoiding putting important text inside images.
Image Sizes and Ratios
| Type | Ratio | Export Size | Placeholder |
|---|---|---|---|
| News Images
NOTE: The news image was increased from 600px x 450px to 1200px x 900px for increased image clarity. |
4x3 | 1200 x 900 600px x 450px |
 |
| Headshot | 5x7 | 800px X 1120px |
 |
| Inline Vertical | 4x5 | 800px x 1000px |
 |
| Inline Horizontal | 5x4 | 800px x 640px |
 |
| Square | 1x1 | 900 x 900 |
 |
| Content Blocks - Homepage Grid Stack |
5x4 | 1500px x 1200px |
 |
| Banner with Site Introduction | 16x9 | 1920 x 540px |
 |
| Carousel | |||
| Banner | 1440px x 620px |
 |
|
| Stacked | 1340px x 500px |
 |
|
| Side-by-Side | 1340px x 500px |
 |
|
| Slideshow | |||
| 4x3 | 1200px x 900px |
 |
|
| 3x4 | 900px x 1200px |
 |