Website images should be sized to match their display context. Common website image dimensions include hero images at 1920x1080 or 1200x600, blog featured images at 1200x800, content images at 800x600, sidebar images at 300x200, and thumbnails at 300x300.
For retina displays, serve images at 2x the CSS dimensions. A hero image displayed at 1200px CSS width should be 2400px for retina sharpness. Use srcset to provide multiple sizes.
With ImgTools, resize your images to the exact dimensions needed. Start with the largest variant and resize down for each breakpoint. Save as JPEG for photos, PNG for graphics, or WebP for best compression.
Always specify width and height attributes in your HTML to prevent layout shift (CLS). This is a critical Core Web Vitals metric.
All processing happens locally in your browser.