Image Optimization for Digital Signage
Images are the foundation of digital signage content. Properly optimized images ensure crisp display quality, fast loading times, and efficient storage usage. This guide covers everything you need to know about preparing images for digital displays.
Resolution and Dimensions
Matching Display Resolution
Always create images at the exact display resolution:
┌─────────────────────────────────────────────────────────────────────┐
│ RESOLUTION GUIDELINES │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ COMMON DISPLAY RESOLUTIONS │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ Display Type │ Resolution │ Aspect Ratio │ │
│ ├─────────────────────────────────────────────────────────────┤ │
│ │ HD Display │ 1280 × 720 │ 16:9 │ │
│ │ Full HD (1080p) │ 1920 × 1080 │ 16:9 │ │
│ │ 2K Display │ 2560 × 1440 │ 16:9 │ │
│ │ 4K UHD │ 3840 × 2160 │ 16:9 │ │
│ │ Portrait FHD │ 1080 × 1920 │ 9:16 │ │
│ │ Portrait 4K │ 2160 × 3840 │ 9:16 │ │
│ │ Ultra-wide │ 3840 × 1080 │ 32:9 │ │
│ │ Square │ 1080 × 1080 │ 1:1 │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ GOLDEN RULES │
│ ├── Match image resolution to display resolution exactly │
│ ├── Never upscale (enlarging causes blur) │
│ ├── Downscaling is OK but wastes bandwidth │
│ └── Create separate versions for different display sizes │
│ │
└─────────────────────────────────────────────────────────────────────┘
Zone-Based Sizing
When using multi-zone layouts:
| Zone Size | Image Resolution | Example Use |
|---|---|---|
| Full screen | 1920 × 1080 | Hero images |
| Half screen (horizontal) | 1920 × 540 | Banner zones |
| Half screen (vertical) | 960 × 1080 | Side panels |
| Quarter screen | 960 × 540 | Corner zones |
| Third screen | 640 × 1080 | Column layout |
Formula:
Zone width = Display width × (zone percentage / 100)
Zone height = Display height × (zone percentage / 100)
File Formats
Format Comparison
Choosing the Right Format
┌─────────────────────────────────────────────────────────────────────┐
│ FORMAT COMPARISON │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ JPEG (.jpg) │
│ ├── Best for: Photographs, complex images │
│ ├── Compression: Lossy │
│ ├── Transparency: No │
│ ├── File size: Small to medium │
│ ├── Quality range: 60-95% recommended │
│ └── Use when: Photos, gradients, realistic images │
│ │
│ PNG (.png) │
│ ├── Best for: Graphics, logos, text │
│ ├── Compression: Lossless │
│ ├── Transparency: Yes (alpha channel) │
│ ├── File size: Medium to large │
│ └── Use when: Logos, icons, text overlays, transparency needed │
│ │
│ WebP (.webp) │
│ ├── Best for: Modern players supporting WebP │
│ ├── Compression: Both lossy and lossless │
│ ├── Transparency: Yes │
│ ├── File size: 25-35% smaller than JPEG/PNG │
│ └── Use when: Player supports it, bandwidth is limited │
│ │
│ GIF (.gif) │
│ ├── Best for: Simple animations │
│ ├── Compression: Lossless (256 colors max) │
│ ├── Transparency: Yes (1-bit only) │
│ ├── File size: Varies with animation │
│ └── Use when: Simple animated graphics, avoid for photos │
│ │
│ SVG (.svg) │
│ ├── Best for: Icons, logos, vector graphics │
│ ├── Compression: None (vector format) │
│ ├── Transparency: Yes │
│ ├── File size: Very small for simple graphics │
│ └── Use when: Scalable graphics, icons (if supported) │
│ │
└─────────────────────────────────────────────────────────────────────┘
Format Selection Guide
| Content Type | Recommended Format | Reason |
|---|---|---|
| Product photos | JPEG (85%) | Best compression for photos |
| Logos | PNG-24 | Preserves edges, supports transparency |
| Icons | SVG or PNG | Crisp at any size |
| Screenshots | PNG | Lossless for text/UI |
| Simple graphics | PNG-8 | Small file, limited colors OK |
| Photos with overlay | PNG-24 | Needs transparency |
| Animated icons | GIF or WebP | Animation support |
Compression and Quality
JPEG Quality Settings
Quality vs File Size Trade-off
┌─────────────────────────────────────────────────────────────────────┐
│ JPEG QUALITY GUIDE │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ Quality │ File Size │ Use Case │
│ ──────────────────────────────────────────────────────────────────│
│ 100% │ Largest │ Archival only (not for signage) │
│ 90-95% │ Large │ High-quality photography │
│ 80-89% │ Medium │ RECOMMENDED for most signage │
│ 70-79% │ Smaller │ Good balance, slight artifacts │
│ 60-69% │ Small │ Acceptable for thumbnails │
│ Below 60% │ Smallest │ NOT recommended (visible artifacts) │
│ │
│ RECOMMENDATION FOR SIGNAGE: 80-85% quality │
│ └── Best balance of quality and file size │
│ └── Artifacts not visible at typical viewing distances │
│ │
└─────────────────────────────────────────────────────────────────────┘
PNG Optimization
PNG Compression Options
| Type | Colors | Best For | File Size |
|---|---|---|---|
| PNG-8 | 256 max | Simple graphics, icons | Smallest |
| PNG-24 | 16.7 million | Photos, gradients | Larger |
| PNG-32 | 16.7M + alpha | Transparency needed | Largest |
Optimization Tools:
- TinyPNG - Lossy compression for PNG/JPEG
- ImageOptim - Mac optimization tool
- PNGGauntlet - Windows PNG optimizer
- Squoosh - Google's web-based optimizer
Target File Sizes
Recommended Maximum File Sizes
| Resolution | JPEG Target | PNG Target |
|---|---|---|
| 1280×720 | Under 200 KB | Under 500 KB |
| 1920×1080 | Under 500 KB | Under 1.5 MB |
| 3840×2160 | Under 2 MB | Under 5 MB |
Smaller is better for faster sync and less storage usage
Color Management
Color Profiles
Color Space Considerations
┌─────────────────────────────────────────────────────────────────────┐
│ COLOR MANAGEMENT │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ sRGB (Standard RGB) │
│ ├── Use for: Most digital signage │
│ ├── Compatibility: Universal │
│ └── RECOMMENDATION: Convert all images to sRGB │
│ │
│ Adobe RGB │
│ ├── Use for: Print workflows │
│ ├── Compatibility: Limited on displays │
│ └── Convert to sRGB for signage │
│ │
│ Display P3 │
│ ├── Use for: Wide-gamut displays │
│ ├── Compatibility: Apple, some premium displays │
│ └── May cause color shifts on standard displays │
│ │
│ CMYK │
│ ├── Use for: Print only │
│ ├── Compatibility: None for digital │
│ └── Always convert to sRGB for signage │
│ │
│ BEST PRACTICE │
│ └── Export all images as sRGB, embed color profile │
│ │
└─────────────────────────────────────────────────────────────────────┘
Color Contrast
Ensuring Readability
| Element | Minimum Contrast | Recommended |
|---|---|---|
| Body text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| Graphics/icons | 3:1 | 4.5:1 |
High-Contrast Color Combinations:
- White text on dark blue/black
- Black text on white/yellow
- Yellow text on black (use sparingly)
- Avoid: red/green, blue/purple, light colors on light
Design Considerations
Safe Zones
Keep Important Content in Safe Area
┌─────────────────────────────────────────────────────────────────────┐
│ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ █████████████ OVERSCAN AREA (5%) ██████████████████████████│ │
│ │ █ █│ │
│ │ █ ┌──────────────────────────────────────────────────┐ █│ │
│ │ █ │ │ █│ │
│ │ █ │ SAFE ZONE (90%) │ █│ │
│ │ █ │ │ █│ │
│ │ █ │ Place all important content here │ █│ │
│ │ █ │ (text, logos, key visuals) │ █│ │
│ │ █ │ │ █│ │
│ │ █ └──────────────────────────────────────────────────┘ █│ │
│ │ █ █│ │
│ │ █████████████████████████████████████████████████████████████│ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ Margin: 5% from each edge (96px on 1920 width) │
│ │
└─────────────────────────────────────────────────────────────────────┘
Text in Images
Text Legibility Guidelines
| Viewing Distance | Minimum Text Height | Font Weight |
|---|---|---|
| 3 feet (1m) | 24px @ 1080p | Regular |
| 6 feet (2m) | 48px @ 1080p | Regular |
| 10 feet (3m) | 72px @ 1080p | Medium |
| 20 feet (6m) | 144px @ 1080p | Bold |
Text Best Practices:
- Use sans-serif fonts for readability
- Add text shadow or background for contrast
- Avoid thin fonts at small sizes
- Limit text amount (7 words or less per message)
Batch Processing
Automation Tools
Tools for Bulk Image Processing
| Tool | Platform | Best For |
|---|---|---|
| Adobe Photoshop Actions | Mac/Windows | Professional workflows |
| Adobe Bridge | Mac/Windows | Batch renaming, metadata |
| ImageMagick | CLI (all) | Scripted automation |
| IrfanView | Windows | Quick batch processing |
| Automator | Mac | Simple workflows |
| XnConvert | All | Free batch converter |
ImageMagick Commands
Common Batch Operations
# Resize all images to 1920x1080
mogrify -resize 1920x1080! -path output/ *.jpg
# Convert PNG to JPEG at 85% quality
mogrify -format jpg -quality 85 -path output/ *.png
# Add watermark to all images
mogrify -gravity southeast -draw "image over 0,0 logo.png" *.jpg
# Optimize JPEG files
mogrify -strip -quality 85 -sampling-factor 4:2:0 *.jpg
# Create thumbnails
mogrify -resize 320x180 -path thumbs/ *.jpg
Quality Assurance
Pre-Upload Checklist
┌─────────────────────────────────────────────────────────────────────┐
│ IMAGE QA CHECKLIST │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ TECHNICAL │
│ □ Resolution matches display exactly │
│ □ Correct aspect ratio (no stretching) │
│ □ File format appropriate for content type │
│ □ File size optimized (under target) │
│ □ Color profile is sRGB │
│ │
│ VISUAL QUALITY │
│ □ No visible compression artifacts │
│ □ No pixelation or blur │
│ □ Colors appear correct │
│ □ Text is readable │
│ □ Important content within safe zone │
│ │
│ CONTENT │
│ □ Branding consistent and correct │
│ □ Text proofread for errors │
│ □ Contact info/dates accurate │
│ □ Legal/compliance approved │
│ │
│ FILE MANAGEMENT │
│ □ Consistent naming convention │
│ □ Metadata/tags added │
│ □ Source files archived │
│ │
└─────────────────────────────────────────────────────────────────────┘
Testing on Displays
Always Test Before Deployment:
- View at actual size on computer monitor
- Test on actual display hardware
- View from typical viewing distance
- Check under different lighting conditions
- Verify text readability
- Confirm colors match expectations
Properly optimized images are the foundation of professional digital signage content. Take time to prepare images correctly for the best visual impact.