Skip to main content
Skip to content
ALPHA IMAGEPremium

Resource Center

Free downloadable reference kit

Charts, tables and checklists you can keep next to your desk. Everything is free, printable and generated privately in your browser.

Image Size Chart

Reference dimensions for the most common web, print and product surfaces — in one printable card.

NameSize / TypeBest use
Website hero1920 × 1080 pxFull-bleed landing image
Blog cover1200 × 630 pxCard + OG share image
Product card800 × 800 pxEcommerce grid
Product zoom1600 × 1600 pxRetina zoom viewer
Email hero1200 × 600 pxNewsletter above the fold
Favicon512 × 512 pxPWA & browser tab

Social Media Dimensions

Every mainstream social platform’s current sizes for feed, story, cover and profile images.

NameSize / TypeBest use
Instagram Post1080 × 1080 pxSquare feed
Instagram Story / Reel1080 × 1920 pxVertical full-screen
YouTube Thumbnail1280 × 720 px16:9 video cover
Facebook Cover820 × 312 pxPage header
LinkedIn Banner1584 × 396 pxProfile header
TikTok Cover1080 × 1920 pxVertical cover frame
X / Twitter Header1500 × 500 pxProfile banner

Format Comparison Table

Side-by-side comparison of PNG, JPG, WEBP and AVIF for transparency, compression and browser support.

NameSize / TypeBest use
PNGLossless, alphaLogos, UI, screenshots
JPGLossy, no alphaPhotographs, email
WEBPLossless + lossy, alphaWeb delivery
AVIFLossy, best ratioBleeding-edge web
SVGVector, alphaIcons, illustrations
GIFPalette, animationLegacy animations

Compression Guide

Quality targets and format recommendations for every common export surface.

  • • Photographs on the web: WEBP at quality 78–82.
  • • Screenshots & UI: PNG or WEBP-lossless for perfect edges.
  • • Product galleries: WEBP at quality 82 with a JPG fallback.
  • • Email: JPG at quality 72–78, resized to true render width.
  • • Social media: PNG for graphics with text, JPG for photos.
  • • Print pipelines: keep an uncompressed TIFF/PSD master; ship JPG at 92.

Image Optimization Checklist

The 10-point checklist we run through before shipping any image to production.

  • • Resized to the true maximum render dimensions × 2 for retina.
  • • Converted to the best-fit format (WEBP, JPG, PNG).
  • • Compressed to the smallest size that still looks clean.
  • • Given explicit width and height attributes to prevent CLS.
  • • Loaded with loading="lazy" below the fold.
  • • Above-the-fold hero uses fetchpriority="high".
  • • Alt text describes the image, not just the file name.
  • • Cached with a long max-age and a content hash in the URL.
  • • Served over HTTPS with a modern image CDN when possible.
  • • Original master kept archived for future re-exports.