What Image Size Should You Use for Websites?
What Image Size Should You Use for Websites? Quick Reference: Recommended Image Sizes Here are the numbers you came for. Bookmark this table. Image Type Dimensions (px) File Size Target Format Hero...

Source: DEV Community
What Image Size Should You Use for Websites? Quick Reference: Recommended Image Sizes Here are the numbers you came for. Bookmark this table. Image Type Dimensions (px) File Size Target Format Hero / banner 1920×1080 200–400 KB WebP Blog post header 1200×630 100–200 KB WebP Product image 800×800 80–150 KB WebP Thumbnail 400×300 20–50 KB WebP Background image 1920×1080 200–500 KB WebP Logo 200×60 10–20 KB SVG or WebP Favicon 32×32, 180×180 Under 5 KB PNG or ICO Open Graph (social share) 1200×630 Under 200 KB JPG or WebP Avatar / profile photo 400×400 20–40 KB WebP These are real-world targets — not theoretical minimums. Use them as your baseline, then tighten where your content allows. Why Image Size Matters for Web Performance A 5 MB hero image and a 200 KB optimized version look identical at most screen sizes. The difference? The 5 MB version takes 4–10 seconds to load on a typical mobile connection. The 200 KB version loads in under a second. Google's Core Web Vitals measure Largest