Image Sizing

The Simple Approach

Don’t want to overthink it?

Choose your quality level:

Standard Quality (Easiest)

Good for most use cases, works on all screens:

• Page Headers: 1920 × 1080px (standard HD)
• Shortcut Tiles: 500 × 200px

High Quality (Recommended)

Crisp on Retina/4K displays, ideal for design systems:

• Page Headers: 3840 × 2160px (4K resolution)
• Shortcut Tiles: 856 × 360px

When to use High Quality:

• Your audience uses Retina MacBooks or 4K monitors
• You’re showcasing a professional design system
• You have access to high-resolution source images

When Standard Quality is fine:

• Internal team documentation
• You’re working with limited image resources
• File size and loading speed are priorities

Export as JPEG or WebP at 80% quality, and you’re done!

Page Header Images

Choose your header size in Knapsack, then use the matching dimensions.

Auto

• Standard: 1920 × 300px
• High Quality (2x): 3840 × 600px
• Best for: Logo lockups, minimal headers

Small

• Standard: 1920 × 425px
• High Quality (2x): 3840 × 850px
• Best for: Compact headers

Medium

• Standard: 1920 × 850px
• High Quality (2x): 3840 × 1700px
• Best for: Balanced headers

Large

• Standard: 1920 × 1385px
• High Quality (2x): 3840 × 2770px
• Best for: Prominent headers

Full

• Standard: 1920 × 1935px
• High Quality (2x): 3840 × 3870px
• Best for: Full-screen immersive headers

Not sure which size you’re using?

• Check your page settings in Knapsack
• Easy default: Use 1920 × 1080px (standard) or 3840 × 2160px (high quality)

File Requirements

• Maximum: 5 MB
• Recommended: 150-400 KB
• Format: WebP or JPEG (80-85% quality)

Shortcut Tile Images

3 Columns (Most Common)

X-Small tiles:

• Standard: 428 × 80px
• High Quality (2x): 856 × 160px

Small tiles:

• Standard: 428 × 120px
• High Quality (2x): 856 × 240px

Medium tiles:

• Standard: 428 × 180px
• High Quality (2x): 856 × 360px

Large tiles:

• Standard: 428 × 270px
• High Quality (2x): 856 × 540px

Different Grid Layouts

If you changed your column count:

2 Columns

• Standard width: 668px
• High Quality width: 1336px
• Example (Small): 668 × 120px or 1336 × 240px

3 Columns

• Standard width: 428px
• High Quality width: 856px
• Example (Small): 428 × 120px or 856 × 240px

4 Columns

• Standard width: 318px
• High Quality width: 636px
• Example (Small): 318 × 120px or 636 × 240px

Height stays the same — just change the width based on your column count and quality level.

File Requirements

• Maximum: 5 MB
• Recommended: 50-150 KB
• Format: WebP or JPEG (80-85% quality)

Quick Reference — Do I Need to Change My Images?

You Changed Grid Columns (3 → 2 or 4)

Short answer: Probably not! Your images will scale automatically.

Only resize if:

• Images look blurry (switching to 2 columns)
• You want pixel-perfect quality
• File sizes are a concern

The easy fix: Design all tiles at 1336px width (2-column size). They’ll work perfectly at any column count.

You Changed Tile Size (Small → Medium)

Short answer: Yes, update the height.

Your image height needs to match your tile size setting:

• X-Small: 160px tall (at 2x)
• Small: 240px tall (at 2x)
• Medium: 360px tall (at 2x)
• Large: 540px tall (at 2x)

Best Practices

Do

• Design at 2x resolution for high-DPI displays
• Keep important content centered (edges may crop)
• Use WebP or JPEG format
• Compress images before uploading (TinyPNG, Squoosh)
• Export at 72-96 DPI for web

Don’t

• Upload images smaller than recommended
• Use PNG for photos (creates huge files)
• Put text/logos at the edges (will be cropped)
• Exceed 5 MB per image

Why These Specific Dimensions?

In short: Modern displays (Retina, 4K monitors) need 2× the pixels to look crisp.

We tested Knapsack sites and measured the actual rendered sizes:

• Page headers: 1920px wide on desktop → 3840px at 2x
• Tiles (3-column): 428px wide → 856px at 2x

These recommendations ensure images look sharp on all screens, not blurry or pixelated.

Troubleshooting

“My image looks blurry”

Fix: Make sure your image matches the recommended dimensions above. Don’t upscale small images, start with high-resolution originals.

“My image loads slowly”

Fix: Compress your images. Target 150-400 KB for headers, 50-150 KB for tiles. Use WebP or JPEG (not PNG for photos).

“Important parts are cut off”

Fix: Knapsack uses background-size: cover which crops images to fill containers. Keep logos and focal points in the center 80% of your image.

“I changed columns and images look weird”

Fix: Images scale automatically but may not be pixel-perfect. If quality bothers you, resize width to match your new column count.

File Optimization Tips

Target file sizes:

• Headers: 150-400 KB
• Tiles: 50-150 KB

How to compress:

1. Export as JPEG or WebP at 80% quality
2. Use TinyPNG (tinypng.com) or Squoosh (squoosh.app)
3. Keep compressing until you hit target size

File size too small? Increase quality to 85-90%. Quality matters more than hitting exact file sizes.

Common Scenarios

“I’m refreshing our design system homepage”

1. Choose “Large” or “Full” for header size
2. Create a 3840 × 2770px header image
3. Create 3-4 shortcut tiles at 856 × 360px each
4. Compress to 200-400 KB (header) and 100 KB each (tiles)
5. Upload to Knapsack

“I’m adding new shortcut tiles to an existing page”

1. Check what size setting is used (small, medium, large)
2. Check column count (2, 3, or 4)
3. Use the dimensions above to find what you need
4. Create images and compress
5. Upload

“I want one set of images that works everywhere”

Headers: Use 3840 × 2160px (16:9 ratio)

Tiles: Use 1336px width (2-column size) — works at any column count

These dimensions work universally, even if not pixel-perfect for every setting.

---

Related