छवियों के प्रारूप: WebP, PNG, JPG और SVG की तुलना
गलत छवि प्रारूप चुनने से आपके पेज के लोड होने का समय बढ़ सकता है या आपके ग्राफ़िक्स धुंधले हो सकते हैं। यहाँ बताया गया है कि संपीड़न, पारदर्शिता और स्पष्टता के मामले में आधुनिक वेब प्रारूप एक-दूसरे से कैसे तुलना करते हैं।
आपकी फ़ाइलें HTML5 कैनवास (Canvas) और वेबअसेंबली (WebAssembly) का उपयोग करके पूरी तरह से आपके वेब ब्राउज़र के भीतर ही प्रोसेस की जाती हैं। कोई भी डेटा कभी भी आपके डिवाइस से बाहर नहीं जाता है।
अपलोड और डाउनलोड कतारों को छोड़ें। रूपांतरण सर्वर सीमाओं के बिना स्थानीय स्तर पर पूरी मशीन हार्डवेयर गति से होते हैं।
आधुनिक ऑपरेटिंग सिस्टम में आउटपुट संगतता की गारंटी के लिए आधिकारिक ISO, W3C, और IETF विनिर्देशों के अनुरूप।
फ़ॉर्मेट तुलना और तकनीकी विनिर्देश
| आउटपुट फ़ॉर्मेट | MIME टाइप | विशिष्टता | प्रकार |
|---|---|---|---|
| PNG छवि | image/png | W3C-PNG | पोर्टेबल नेटवर्क ग्राफिक्स |
| JPG JPEG छवि | image/jpeg | ITU-T-T81-JPEG | जॉइंट फोटोग्राफिक एक्सपर्ट्स ग्रुप |
| WebP छवि | image/webp | RFC-6386-VP8 | Google WebP आधुनिक छवि प्रारूप |
| SVG वेक्टर | image/svg+xml | W3C-SVG | स्केलेबल्स वेक्टर ग्राफिक्स |
| HEIC फोटो | image/heic | ISO-IEC-23008-12-HEIF | उच्च दक्षता छवि कंटेनर |
| AVIF छवि | image/avif | AOMEDIA-AV1-AVIF | AV1 छवि फ़ाइल प्रारूप |
| PSD फ़ोटोशॉप दस्तावेज़ | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | एडोब फ़ोटोशॉप दस्तावेज़ |
| PSB फ़ोटोशॉप बड़ा दस्तावेज़ | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | एडोब फ़ोटोशॉप बड़ा फ़ॉर्मेट दस्तावेज़ |
| WMF विंडोज़ मेटाफ़ाइल | image/x-wmf | MS-WMF-SPEC | विंडोज़ मेटाफ़ाइल वेक्टर फ़ॉर्मेट |
| EMF उन्नत मेटाफ़ाइल | image/x-emf | MS-EMF-SPEC | उन्नत मेटाफ़ाइल वेक्टर फ़ॉर्मेट |
| JFIF छवि | image/jpeg | ITU-T-T81-JPEG | JPEG फ़ाइल इंटरचेंज फ़ॉर्मेट |
| TGA ट्रूविज़न | image/x-tga | TGA-SPEC | ट्रूविज़न एडवांस्ड रास्टर |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX बिटमैप |
तकनीकी विनिर्देश और कोडेक विवरण
त्वरित प्रारूप निर्णय नियम
आधुनिक वेबसाइटों के लिए WebP या AVIF का उपयोग करें (पारदर्शिता समर्थन के साथ JPEG से 30% छोटे)। उन तस्वीरों के लिए JPG का उपयोग करें जहाँ छोटे, नगण्य संपीड़न कलाकृतियाँ मायने नहीं रखतीं। स्क्रीनशॉट, UI ग्राफ़िक्स और स्पष्ट पिक्सेल-शार्प टेक्स्ट की आवश्यकता वाले चित्रों के लिए PNG का उपयोग करें। लोगो और आइकनों के लिए SVG का उपयोग करें जिन्हें अनंत स्केलिंग की आवश्यकता होती है।
रास्टर बनाम वेक्टर: SVG कभी धुंधले क्यों नहीं होते
रास्टर छवियाँ (JPG, PNG, WebP) निश्चित रंग पिक्सेल के ग्रिड हैं - बहुत अधिक ज़ूम करने पर वे धुंधली या पिक्सेलेटेड हो जाती हैं। SVG शुद्ध गणित है: यह गणितीय रेखाओं, वक्रों और रंगों को संग्रहीत करता है, जिससे मोबाइल स्क्रीन से लेकर 8K डिस्प्ले तक हर चीज़ पर छोटे फ़ाइल साइज़ के साथ आइकन और चित्र अत्यधिक स्पष्ट दिखाई देते हैं।
'उच्च DPI का मतलब बेहतर वेब छवि गुणवत्ता है' - एक मिथक
DPI (डॉट्स प्रति इंच) पूरी तरह से एक भौतिक मुद्रण निर्देश है और वेब ब्राउज़र द्वारा इसे पूरी तरह से नजरअंदाज कर दिया जाता है। फोन और कंप्यूटर मॉनिटर पर, छवि की स्पष्टता पूरी तरह से पिक्सेल आयामों (उदा., 1920x1080) और डिस्प्ले घनत्व द्वारा निर्धारित होती है, न कि एम्बेडेड DPI मेटाडेटा द्वारा।
अल्फा पारदर्शिता: PNG बनाम WebP
पारंपरिक JPG में पारदर्शिता का कोई समर्थन नहीं होता - पारदर्शी पृष्ठभूमि ठोस सफेद या काली हो जाती है। PNG ने स्वच्छ 8-बिट अल्फा पारदर्शिता की शुरुआत की, लेकिन WebP अब 40% तक छोटे फ़ाइल साइज़ पर समान पारदर्शी गुणवत्ता प्रदान करता है।
बाहरी सर्वर पर 0 बाइट अपलोड किए गए। सारी प्रोसेसिंग आपके ब्राउज़र सैन्डबॉक्स में स्थानीय रूप से हुई।