A pixel-dimension cheat sheet for hero sections, blog cards, product galleries and Open Graph social previews.

Standard pixel dimensions by page section

Uploading consistent dimensions keeps grids aligned and prevents Cumulative Layout Shift. These are the industry-standard values for modern responsive layouts.

  • Full-width hero banners: 1920x1080 px at a 16:9 ratio, compressed under 220 KB.
  • Blog featured cards and inline photos: 1200x675 px (16:9) or 1200x900 px (4:3), under 120 KB.
  • E-commerce product gallery images: 1080x1080 px or 1600x1600 px square for zoom clarity.
  • Open Graph social share preview: 1200x630 px.
  • Header logo: 200x50 px to 300x80 px, or SVG and WebP at double resolution.
Recommended free tool

Resize and crop your website images now

Use the free Image Resizer and Image Cropper to snap images to exact web presets.

Open Tool