> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.knapsack.cloud/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.knapsack.cloud/_mcp/server.

# 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!

| Image Type             | Recommended Size | Max File Size |
| ---------------------- | ---------------- | ------------- |
| Page Headers           | 3840 × 2160px    | 400 KB        |
| Shortcut Tiles (3-col) | 856 × 360px      | 150 KB        |

Edges get cropped. Knapsack uses background-size: cover — keep logos and focal points in the center 80% of your image.

## 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](https://tinypng.com/), [Squoosh](https://squoosh.app/))
* 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](http://tinypng.com)) or Squoosh ([squoosh.app](http://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

#### [Shortcuts Block](/documentation/blocks-overview/managing-blocks/shortcuts-block)

Set up tile grids and navigation

#### [Page Settings](/administrative/team-management/page-settings)

Configure header size and other page options

#### [Name, Logo, and Favicon](/administrative/team-management/name-logo-and-favicon)

Workspace branding and logo uploads