Image Types
📂 Image Formats — Kaunsi Format Kab Use Kare
src="photo.webp" (best for web)
Jaise Hyderabad mein alag biryani styles hain — Dum, Kacchi, Pakki — images bhi alag formats mein aati hain. Har format ka ek purpose hai. Galat format use karna jaise customer ne Dum manga aur tumne Kacchi serve ki.
JPG/JPEG — Photos, gradients. Chhoti file size par transparency nahi. PNG — Logos, screenshots, jahan transparency chahiye. Badi files. WebP — Modern format, JPG/PNG se 25-35% chhoti same quality mein. Web ke liye best. SVG — Icons, logos. Vector (kabhi blurry nahi), chhoti file, kisi bhi size pe scale hota hai.
Biryani Analogy: JPG = Party biryani (zyada ke liye achha, chhota container). PNG = Special Dum biryani (premium quality, bada container). WebP = Naya smart packaging (same taste, 30% kam jagah). SVG = Recipe khud (khana nahi, instructions — kisi bhi scale pe kaam karta hai).
Code Example
HTML — Image Formats — Kaunsi Format Kab Use Kare
<!-- JPG — Photos -->
<img src="charminar-photo.jpg" alt="Charminar photo">
<!-- PNG — Transparency ke saath logo -->
<img src="paradise-logo.png" alt="Paradise Biryani logo">
<!-- WebP — Modern aur chhota (best practice) -->
<img src="biryani.webp" alt="Biryani">
<!-- SVG — Icons aur logos (vector, kabhi blurry nahi) -->
<img src="search-icon.svg" alt="Search icon">
<!-- Picture tag for format fallback -->
<picture>
<source srcset="biryani.webp" type="image/webp">
<source srcset="biryani.jpg" type="image/jpeg">
<img src="biryani.jpg" alt="Biryani">
</picture>.jpg / .jpegPhotos — chhoti size, transparency nahi.pngLogos/screenshots — transparency support, badi files.webpModern format — 30% chhota, same quality. YEH USE KARO..svgIcons/logos — vector, kabhi blurry nahi, chhoti size<picture>Browser support ke basis pe alag format serve karta hai✅ When to Use
- Website pe saari photos ke liye WebP (existing JPG/PNG convert karo)
- Icons aur logos ke liye SVG
- PNG tab hi jab transparency ZAROORI ho aur SVG use na ho sake
- JPG sirf old browsers ke liye fallback
❌ When NOT to Use
- Logos ke liye JPG (transparency nahi, fuzzy hota hai)
- Photos ke liye PNG (be zaroorat badi file)
- Complex photographs ke liye SVG (file size explode ho jaata hai)
Squoosh (Google ka tool) se saari images ko WebP mein convert karo — free hai. tag use karo WebP source ke saath aur JPG fallback. Page 30% faster load hoga zero quality loss ke saath.