JPG for Web
Complete guide to optimizing JPG images for websites — compression, sizing, performance, and modern best practices.
Recommended Image Sizes
| Use Case | Max Width | Quality | Target Size |
|---|---|---|---|
| Hero/Banner | 1920px | 80-85 | 150-300 KB |
| Content Images | 1200px | 80-85 | 80-150 KB |
| Blog Thumbnails | 600px | 75-80 | 30-60 KB |
| Product Images | 800px | 85-90 | 50-100 KB |
| Thumbnails | 300px | 70-75 | 10-25 KB |
Web Optimization Checklist
- Resize before upload — Don't upload 4000px images for 800px display
- Compress to 80-85 quality — Sweet spot for quality vs size
- Use progressive JPG — Loads visually faster
- Strip metadata — Remove EXIF data (saves 10-50KB)
- Implement lazy loading —
loading="lazy" - Use responsive images — srcset for different screen sizes
- Consider WebP — 25-35% smaller with same quality
JPG vs WebP vs AVIF
| Format | Size | Browser Support | Best For |
|---|---|---|---|
| JPG | Baseline | 100% | Universal fallback |
| WebP | 25-35% smaller | 97% | Modern browsers |
| AVIF | 50% smaller | 85% | Cutting-edge |
Recommendation: Serve WebP with JPG fallback using <picture> element.
Responsive Images Code
Serve different sizes based on screen:
<img
src="image-800.jpg"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1200px) 800px,
1200px"
alt="Description"
loading="lazy"
>Best Compression Tools
- TinyJPG — Best quality/compression ratio
- Squoosh — Side-by-side comparison, by Google
- ImageOptim — Mac app, batch processing
- ShortPixel — WordPress plugin, automatic
Core Web Vitals Impact
Properly optimized images improve:
- LCP (Largest Contentful Paint) — Faster hero image loading
- CLS (Cumulative Layout Shift) — Use width/height attributes
- Page Speed Score — Smaller images = faster pages
Always include width and height:
<img src="photo.jpg" width="800" height="600" alt="...">