Images
This page replaces generic rules with a compact, professional image system, written for product designers and content leads. It explains the exact export sizes, fixed aspect-ratio presets, composition rules, accessibility checkpoints, Figma workflow tips, and a QA checklist you can paste into your case study or hand to a design team.
Resolution & canonical exports
Rule:
For every important image asset produce 3 raster variants: 1×, 2x, 3x. Named with @1x, @2x, @3x suffixes. Prefer vector (SVG) where applicable (icons, logos, illustrations).
Use Case
Aspect Ratio
1x (px) Exact
Designer Note
Hero / Full-Bleed Banner
16:9
1920 × 1080
Primary marketing & page headers
Section Banner / Large Card
16:10
1600 × 1000
Secondary headers, large preview cards
Card / Content Image
4:3
16:10
800 × 600
Product cards, article thumbs
Wide / Hero Narrow
21:9
32:9
2560 × 1100
Ultra-wide displays or immersive banners
Thumbnail / Grid Item
1:1
5:4
160 × 160
Galleries, small cards
Avatar / Profile
1:1
128 × 128
Crop subject centered
Logo / Product Mark
Variable
512 × 512
Prefer SVG as first asset
Background
16:9
2000–3000px width
Use only when photo must be zoomed/cropped
Preset aspect ratios
Use these controlled presets in component templates so crops are predictable:
File Formats & Colour Profiles
Primary Web Formats:
WebP (best quality/size), AVIF (when supported).
Fallbacks For Broad Compatibility:
JPEG (photography), PNG (only for transparency/raster effects).
Vectors:
SVG for logos, illustrations, simple UI art, deliver SVG first, then optimized raster fallbacks.
Color Profile:
Author assets in sRGB. If you intentionally support wide color (P3), document where P3 variants are required (rare for web apps).
Compression Target:
Thumbnails <50 KB, card images 50–150 KB, hero images 150–300 KB (1×). Fine-tune visually.
Composition & Focal-Point Rules
Safe Zone:
Keep the subject inside a 10% inset from every edge (so critical content survives cropping).
Focal Point:
Every image must have a single focal point set in the component (Center / Focal X,Y). In Figma mark the focal point in the frame notes.
Text Overlays:
Reserve a dedicated overlay band (30–40% height at top or bottom) for any text, never rely on image contrast alone. Use a neutral scrub or gradient behind text.
Rule Of Thirds:
Prefer subject placement on thirds for portraits, center for product shots. Document the preferred crop for each component.
Face Visibility:
When images contain people, keep faces clearly visible and centered in avatars and small crops.
Cropping Strategy & Responsiveness
Design For Crops, Not Auto-Crop: For every image used in multiple components, supply dedicated crops:
HERO,CARD, THUMBNAIL. Don’t rely on a single image to cover every layout.Avoid Extreme Auto-Zoom: When a narrow container will crop the subject, create a dedicated narrow crop rather than relying on system cropping.
Closing Note
Images in APPEX NOW are authored to be crisp, consistent, and predictable. We use fixed aspect presets, exact export sizes (1× / 2× / 3×), focal points and a 10% safe margin so art scales reliably across layouts. WebP (or AVIF) is preferred, SVG for vectors. Every meaningful image includes alt text and accessibility checks, making visual content fast, inclusive, and designer-friendly.