Guides
Web performance guide
Images are often the largest assets on a page. Optimizing size and format improves loading speed, Core Web Vitals, and conversion rates.
How images affect Core Web Vitals
Large images can delay LCP and cause layout shifts if dimensions are missing. Always specify sizes and avoid oversized files.
Suggested targets
- Hero images: 200-500 KB when possible.
- Content images: 100-300 KB for blogs and docs.
- Thumbnails: 20-80 KB for lists and galleries.
- Use width-based sizing to avoid serving oversized files.
Format guidance
- JPG for photos and gradients with broad compatibility.
- PNG for transparency or sharp UI assets.
- WebP when you need smaller files for modern browsers.
Performance FAQ
What size is too large for web images?
Anything consistently above 1 MB is usually too large. Aim lower unless the asset is critical.
Does format matter more than quality?
Both matter. Start with the right format, then tune quality to reach your target size.
Should I always use WebP?
WebP is great for modern browsers, but keep JPG or PNG when compatibility is required.
Next steps
Ready to put these guidelines into practice? Jump directly to the tool you need and apply the checklist.