10 min
How to Optimize Images for the Web
WebP, AVIF, lazy loading, CDN and srcset.
Images are usually 60-80% of total page weight. Optimizing them is the single biggest performance win you can get. WebP and AVIF cut file size by 25-50% versus JPEG and PNG without visible quality loss, lazy loading defers off-screen images, and srcset serves the right size per device. This guide covers each technique with practical settings.
How to Optimize Images for the Web
Choose the right format — WebP/AVIF
WebP: 25-35% smaller than JPEG, supported in all modern browsers. AVIF: 30-50% smaller than WebP but still partial support — use with WebP/JPEG fallback. PNG only for transparency. SVG for logos and icons.
Resize before upload
Never upload a 6000x4000 px DSLR photo to display at 800 px wide. Resize to actual display dimensions × 2 for retina. Bulk resize hundreds of files with FastStone Photo Resizer.
Compress with smart tools
WordPress: ShortPixel, Imagify, Smush, EWWW. Outside WordPress: TinyPNG, Squoosh. Target 70-85% JPEG quality — visually identical to 100% at much smaller size.
Enable lazy loading
Native: <img loading="lazy">. WordPress 5.5+ adds this automatically. For older browsers, use Lazysizes JS library. Lazy load defers off-screen images — massive Core Web Vitals boost.
Use srcset for responsive images
<img srcset="img-400.jpg 400w, img-800.jpg 800w, img-1600.jpg 1600w" sizes="(max-width: 600px) 400px, 800px"> — browser picks right size. WordPress generates srcset automatically.
Serve from CDN
A CDN (Cloudflare, BunnyCDN) serves images from a server close to the visitor — cuts latency 50-200 ms. Cloudflare Polish auto-converts to WebP/AVIF. BeoHosting integrates with QUIC.cloud CDN for LiteSpeed Cache users.
Ready to launch your website?
Join 4,000+ satisfied customers. Free migration and 30-day money-back guarantee.
FAQ
Answers to the most common questions about our services.
Call us: support works 24/7, by phone and through tickets.
(+381) 60 3535 720WebP or AVIF — which one in 2026?
WebP is universally supported and cuts size 25-35%. AVIF is even smaller (30-50%) but missing in some older browsers. Best: serve AVIF with WebP fallback, JPEG/PNG as final fallback.
How much can I shrink images?
Typical: JPEG → WebP 30%, PNG → WebP 40%, WebP → AVIF 30%. Combined with resizing, a 2 MB DSLR photo becomes 150-300 KB at the same visual quality.
Does lazy loading hurt SEO?
No — Google understands native lazy loading. Just make sure above-the-fold images are NOT lazy loaded (they should load immediately for LCP).
Best WordPress image plugin?
ShortPixel for the best compression-to-quality ratio. Imagify is a close second. Smush is free and fine for basic needs. EWWW keeps files local without external API.
What are Core Web Vitals and how do images affect them?
Core Web Vitals are Google's user-experience metrics: LCP (Largest Contentful Paint — load time of the largest element), CLS (Cumulative Layout Shift — visual stability) and INP (Interaction to Next Paint — interactivity). Images directly affect LCP because the largest element on a page is most often an image. Optimized images with defined width/height attributes improve both LCP and CLS.
Our guarantees for your peace of mind
Protected from every angle
30-day guarantee
We refund without questions in the first 30 days.
Free migration
We migrate your site with no downtime — you do nothing.
24/7 support
Our experts are here 24/7 via tickets and live chat.