Guides
Everything you need to know to serve lightweight images without sacrificing quality: formats, compression, responsive markup and performance metrics.
- Formats
WebP vs AVIF vs JPEG XL: which format to use in 2026
A practical comparison of WebP, AVIF and JPEG XL: compression, quality, speed, transparency and browser support, with recommendations for each type of image.
4 min readRead guide - Performance
How to improve LCP by optimizing images
Largest Contentful Paint is usually an image. Learn to measure it, prioritize it with fetchpriority and preload, cut its size and avoid the most common mistakes.
4 min readRead guide - HTML
Responsive images with srcset and sizes
Learn how to use srcset with w and x descriptors, how to calculate the sizes attribute correctly and how to choose variant widths so you don't waste bytes.
3 min readRead guide - HTML
The picture element and fallback formats
How to use <picture> to serve AVIF, WebP and JPEG XL with a JPEG fallback, do art direction per screen size and avoid the most common mistakes.
2 min readRead guide - Performance
Lazy loading and fetchpriority for images
How loading="lazy", fetchpriority and decoding="async" work, which images should load first and the mistakes that hurt LCP.
3 min readRead guide - Fundamentals
Lossy and lossless compression, explained
The difference between lossy and lossless compression, how JPEG, WebP, AVIF and PNG work internally, and what 4:2:0 versus 4:4:4 chroma subsampling means.
3 min readRead guide - Frameworks
Image optimization in Next.js
How to configure next/image with AVIF and WebP, use priority and sizes correctly, when to pre-optimize static images and how to avoid optimization costs.
3 min readRead guide - CMS
Optimizing images in WordPress
How to upload optimized images to WordPress, use WebP and AVIF natively, take advantage of automatic srcset and avoid lazy-loading mistakes on the featured image.
3 min readRead guide - Privacy
EXIF metadata and image privacy
What EXIF metadata stores (GPS location, camera, date), the risks of publishing it and how to remove it before uploading images to the web.
3 min readRead guide - Performance
Image checklist for Core Web Vitals
An image checklist to improve LCP, CLS and INP: formats, dimensions, priority, lazy loading, width/height and measurement tools.
1 min readRead guide - Performance
Image placeholders: LQIP, BlurHash, ThumbHash and dominant color
How to show something useful while images load without hurting performance. Technique comparison, implementation in HTML, Next.js and React, and mistakes to avoid.
4 min readRead guide - HTML
Favicon guide 2026: the sizes and files you actually need
Favicon.ico, SVG, apple-touch-icon, PWA and maskable icons explained. Which files to create, how to link them in HTML, Next.js and WordPress, and how to get Google to show your icon.
4 min readRead guide