Images are usually the largest performance bottleneck on small business websites. Optimizing them correctly can dramatically improve load times, SEO, and conversions—without hurting visual quality.
Here’s a modern, practical workflow that works across CMSs and frameworks.
Step 1: Use Modern Image Formats
Best options today:
- AVIF – smallest file sizes, best compression
- WebP – excellent fallback support
- JPEG / PNG – legacy formats only when required
Rule of thumb:
AVIF first, WebP second, JPEG last.
Step 2: Resize Images Before Uploading
Never upload:
- Camera originals
- 4000–6000px wide images
- Uncropped screenshots
Common max widths:
- Hero images: 1920px
- Content images: 1200px
- Thumbnails: 400–600px
Oversized images waste bandwidth even when compressed.
Step 3: Use srcset
for Responsive Images
srcsetsrcsetBenefits:
- Faster mobile load times
- Smaller downloads
- Better Core Web Vitals scores
Most modern CMSs generate
srcsetStep 4: Enable Lazy Loading
Lazy loading delays offscreen images until they’re needed.
Why it matters:
- Faster initial page load
- Reduced bandwidth usage
- Improved Largest Contentful Paint (LCP)
Modern browsers support this natively:
loading="lazy"
