Why Images Affect SEO
- Core Web Vitals: images are the biggest cause of slow LCP. Google ranks slower sites lower.
- Google Image Search: properly labeled images generate organic traffic.
- Accessibility: correct alt text improves semantic context for Google.
Choosing the Right Format
| Image type | Format |
|---|---|
| Photographs | WebP or AVIF |
| Transparent images | WebP or PNG |
| Logos and icons | SVG |
| Animations | Animated WebP |
<picture>
<source type="image/avif" srcset="image.avif">
<source type="image/webp" srcset="image.webp">
<img src="image.jpg" alt="Complete description" loading="lazy">
</picture>
Compression
ffmpeg -i photo.jpg -q:v 82 photo.webp
for f in *.jpg; do ffmpeg -i "$f" -q:v 80 "${f%.jpg}.webp"; done
Responsive Images with Srcset
<img src="hero-800.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 80vw"
alt="Hero description" width="800" height="450" loading="lazy">
Width and Height: Prevent CLS
<!-- ✅ Correct — reserves space before loading -->
<img src="photo.webp" width="800" height="450" alt="...">
CLS (Cumulative Layout Shift) spikes without these attributes.
Alt Text Best Practices
<!-- ✅ Descriptive and natural -->
<img alt="Golden retriever playing with a ball in the park">
<!-- ❌ Keyword stuffing -->
<img alt="dog golden retriever buy adopt price cheap">
<!-- ✅ Decorative — empty alt -->
<img alt="" role="presentation">
Lazy Loading and Preload
<!-- Off-screen images -->
<img loading="lazy" ...>
<!-- LCP hero image — load immediately -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">
Descriptive File Names
❌ IMG_20240421_183042.jpg
✅ sagrada-familia-barcelona-sunset.webp
Core Web Vitals
| Metric | Target | Key action |
|---|---|---|
| LCP | < 2.5 s | Preload the hero image |
| CLS | < 0.1 | Include width + height |
Conclusion
Combine WebP/AVIF, 80% compression, responsive srcset, descriptive alt text, and width/height. Just switching from JPG to WebP can reduce total page weight by 30–40%.
Advanced Use Cases
Web optimization at scale: e-commerce sites with thousands of products can reduce bandwidth costs 60-80% by migrating from JPG to AVIF or WebP. Cloudflare Images, Imgix and Cloudinary offer on-the-fly transformation based on client Accept header — serving AVIF to modern Chrome/Edge, WebP to Safari/Firefox, JPG fallback to legacy browsers. Print-ready output: converting RGB to CMYK with ICC profile (US Web Coated SWOP v2 for commercial offset, FOGRA39 for European) ensures printed colors match preview on calibrated screen. PDF/X-1a and X-4 are formats required by professional printers. Professional photography: Adobe workflow consists of RAW (camera input) → DNG (archival) → PSD (non-destructive editing) → TIFF (deliverable) → JPG/WebP (web/social). Each stage preserves different capabilities. Vector graphics: SVG is preferred for logos, icons, flat illustrations — scales infinitely without loss and animates with CSS/JavaScript. For modern UIs, icon fonts (Font Awesome) are being replaced by SVG sprites for better accessibility and customization.
Best Practices and Professional Tips
Format selection by content: photographs → JPG (quality 85-95) or WebP (quality 80-90); graphics with text/fine lines → PNG or WebP lossless; flat illustrations → SVG; UI icons → SVG; screenshots → PNG; HDR → AVIF or JPEG XL. Color profile management: always embed ICC profile in professional files (Adobe RGB for pre-press photography, sRGB for web, Display P3 for Apple ecosystem). Without embedded profile, viewers assume sRGB which can cause visible color shifts. Resolution vs size: for web display, 72 DPI is sufficient; for professional print, 300 DPI minimum. Lazy loading + responsive images: combine <img loading="lazy" srcset> with AVIF/WebP fallback chain for bandwidth savings without sacrificing UX. Metadata privacy: smartphone JPG files contain GPS, camera model, exact date — use exiftool -all= to strip before uploading to social networks if privacy matters.
Compatibility and Technical Considerations
KaijuConverter supports more than 30 image formats (JPG, PNG, WebP, AVIF, HEIC/HEIF, GIF, BMP, TIFF, SVG, ICO, PSD, RAW from multiple vendors, JPEG XL) using ImageMagick 7.x, libvips, and format-specific libraries (libpng, libjpeg-turbo, libwebp, libavif, librsvg). We process images up to 100 MB with resolutions up to 16384×16384 pixels and depths of 8/10/12/16-bit per channel. EXIF and metadata: we read all embedded information (camera, lens, GPS, capture data, ICC profile) and migrate it to output when destination format supports it — critical for professional workflows that depend on provenance tracking. HDR: we support PQ and HLG transfer functions for AVIF/JPEG XL/HEIC HDR (rec.2020 color space). Performance: a typical 5 MB JPG→WebP conversion takes 1-3 seconds; iPhone 12 Mpix HEIC→JPG takes 2-5 seconds; multi-layer PSD→PNG flat may require 5-15 seconds depending on complexity. Privacy: TLS 1.3 encryption, isolated Docker containers, automatic deletion after 2 hours with multi-pass overwrite.
Related conversions
Most teams that read this guide convert images in one of these directions: