Ratio Calculator
Shape preview (not to scale)
Image Ratios (testing)
Common Hero Aspect Ratios
| Format | Aspect Ratio | Decimal Ratio | Use |
|---|---|---|---|
| Wide Banner | 3:1 | 3.0 | Marketing banner, headline-driven layouts |
| Standard Hero | 5:2 | 2.5 | Standard landing hero, good content framing |
| Full HD Hero | 16:9 | 1.78 | Default widescreen (video, immersive hero) |
| Photo Hero | 3:2 | 1.5 | DSLR-style photography, editorial hero |
| Tablet Hero | 4:3 | 1.33 | Tablet-friendly layout, balanced spacing |
| Cinematic Hero | 21:9 | 2.33 | Ultra-wide cinematic banner, modern look |
| Halfscreen Hero | 2:1 | 2.0 | Split-screen UI, large call-to-action sections |
| Square Hero | 1:1 | 1.0 | Centered content, social-style splash |
| Tall Hero | 2:3 | 0.67 | Vertical scroll teaser, portrait-heavy layouts |
Image Tag vs. Background Image — Accessibility Comparison
| Feature | Using <img> (Recommended) | Using background-image (Limited) |
|---|---|---|
| Semantic | <img> is a semantic HTML element recognized by screen readers | background-image is CSS only; screen readers ignore it |
| Alt text | Supports alt text (alt="description") or alt="" for decorative images | No way to describe image to assistive tech |
| Keyboard focus / ARIA | Can be focused or labeled with ARIA roles | Cannot be focused or described semantically |
| Responsiveness | Use srcset, sizes, or <picture> for responsive performance | Requires media queries and extra CSS; harder to manage |
When to Use background-image
| Use Case | Preferred Method |
|---|---|
| Informative image (conveys content) | <img> with alt text |
| Decorative image (purely aesthetic) | background-image with aria-hidden="true" on container |
| Responsive media | <picture> or <img srcset> |
| Pattern, texture, or layout effect | background-image via CSS |
Best Practices for Image Sizing
| Principle | Best Practice |
|---|---|
| Responsive sizes | Use max-width: 100%; height: auto; |
| Avoid fixed sizes | Use % or rem units instead of hardcoded pixel sizes |
| Correct resolution | Use srcset or sizes for higher-res on retina displays |
| Compression | Use optimized image formats (WebP, AVIF, JPEG) |
| Zoom and scaling | Test at 200% browser zoom for WCAG 1.4.4 and 1.4.10 |
| Alt text | Always provide alt="", or describe if relevant |
| Text in images | Avoid. Use HTML text for scalability and accessibility |
Common Sizing Options by Use Case
| Use Case | Recommended Width | Notes |
|---|---|---|
| Hero Image | 1200–2000px | Full-width desktop view; use srcset or <picture> |
| Mobile Hero | 600–800px | Responsive fallback for smaller viewports |
| Content Image | 300–800px | Scale to column width; use max-width: 100% |
| Thumbnail / Icon | 64–240px | Use SVG if possible; consistent sizing for UI elements |
| Card Image | 250–400px | Use aspect-ratio + object-fit: cover |
| Gallery Image | 150–600px (grid) | Responsive grid using auto-fit or minmax() |
| Background Image | Up to 2000px | Use for decoration only; compress for performance |
| Logo (inline) | 150–300px | Use high-res PNG or SVG for sharpness and accessibility |
Hero, Card, and Gallery Best Practice Breakdown
| Device | Recommended Width | Notes |
|---|---|---|
| Desktop | 1200–2000px | High-resolution, spans full viewport |
| Tablet | 800–1200px | Scales based on content area |
| Mobile | 600–800px | Use compressed variant or different crop |
Card Images
| Usage | Width | Notes |
|---|---|---|
| Standard | 250–400px | Use width: 100% inside card container |
| Aspect Ratio | 4:3 or 16:9 | Use aspect-ratio and object-fit for consistency |
| Height | auto or fixed with aspect-ratio | Avoid distortion from manual height setting |
Gallery Images
| Grid Columns | Image Width | Notes |
|---|---|---|
| 2 columns | 600px max | Use for higher-detail image sets |
| 3–4 columns | 300–400px | Balanced visual layout |
| 5–6 columns | 150–250px | Best for thumbnails and previews |
Summary Table: Image Sizing by Type
| Image Type | Width | Aspect Ratio | Alt Text | Responsive Handling |
|---|---|---|---|---|
| Hero | 1200–2000px | 16:9 or fluid | Yes if content-related | <picture> or srcset |
| Card | 250–400px | 4:3 or 16:9 | Yes if relevant | width: 100%; height: auto; |
| Gallery | 150–600px | 1:1 or auto | Yes or aria-hidden if decorative |
CSS Grid + object-fit + lazy loading |
It seems that you have reduce motion enabled!