References and walkthroughs for getting images right on the modern web — recommended dimensions by platform, format choices, and optimization workflows.
Recommended dimensions for hero, blog, thumbnail, OG, and favicon images.
The difference between an image's file size and how it's displayed.
Setting width and height in HTML, HTML vs CSS sizing, layout shift, and srcset.
When to use each format, with file size and quality comparisons.
Sourced data on image page weight, WebP/AVIF adoption, and LCP.
Product, collection, slideshow, and logo sizes for Shopify stores.
Featured image, default sizes, WebP support, and storage tips for WordPress.
Banner, gallery, product, and blog header sizes for Squarespace 7.1.
Hero, CMS, slider, and Ecommerce sizes for Webflow projects.
Strip, gallery, Wix Stores product, blog, and og:image sizes plus AVIF serving.
Cross-platform product image sizes — Shopify, WooCommerce, BigCommerce, Magento.
Main image size, the 1000px zoom threshold, white-background rule, and formats for Amazon listings.
Listing photo, thumbnail crop, shop icon, and banner sizes for Etsy sellers.
Profile, post, story, and cover sizes for Instagram, Facebook, X, LinkedIn, YouTube, Pinterest, and TikTok.
Per-platform OG image dimensions, required tags, and testing tools.
Above-the-fold dimensions, mobile art direction, and Core Web Vitals impact.
Per-client header image dimensions for Gmail, Outlook, and Apple Mail.
Audit the images on your live site in one scan.
Run a free scan →