Optimal dimensions for hero images, thumbnails, and blog posts
Using the right image dimensions improves page speed and ensures your site looks sharp. Uploading a 4000×3000 photo for an 800px-wide content area wastes space. This guide covers recommended sizes for common web use cases.
Typical widths: 1920px for full-width, 1200px for contained layouts. 1920×1080 or 1920×640 are safe choices. Compress to 80–85% quality.
Use 1200–1600px for content images. Featured images: 1200×630 for Open Graph and Twitter Card compatibility.
Product grids: 400×400 or 600×600. Use square (1:1) for consistency.
Every platform crops differently, and a size that looks right on one often gets cut off on another. Open Graph / Facebook and LinkedIn link previews use 1200×630 (1.91:1) — this is the one size worth setting as your default featured image since it also covers most auto-generated Twitter/X cards. Instagram feed posts are square at 1080×1080 or portrait at 1080×1350; Instagram Stories and Reels are full-screen vertical at 1080×1920. Posting a 1200×630 landscape image directly to an Instagram Story crops the sides off — export a separate vertical version rather than letting the platform crop it for you.
A "100px" image on a standard display is genuinely 100 pixels wide, but on a 2x retina display the browser renders it at 200 physical pixels to keep it sharp — so a source image saved at exactly the display size looks soft on modern phones and laptops. The fix is to export at 2x the intended display size (a 400px-wide thumbnail slot gets an 800px source image) and let CSS scale it down; the extra resolution is what makes text and edges look crisp rather than slightly blurred.
WebP produces roughly 25-35% smaller files than JPEG at equivalent visual quality, and virtually every current browser supports it — there's rarely a reason to ship JPEG as the only format anymore. PNG is still the right choice specifically for images that need transparency (logos, icons, product cutouts) or flat colors with sharp edges (screenshots, diagrams); using PNG for a photograph produces a needlessly large file since PNG's lossless compression doesn't handle photographic gradients efficiently.