SVG को WebP में बदलें
वेक्टर फ़ाइल को ठीक उतनी पिक्सल चौड़ाई वाली WebP में बदलें, जितनी आपके लेआउट को चाहिए। यह तब काम आता है जब CMS SVG अपलोड नहीं लेता, सोशल प्रीव्यू के लिए बिटमैप इमेज चाहिए, या किसी इलस्ट्रेशन में इतने पाथ हैं कि ब्राउज़र उसे धीरे-धीरे बनाता है।
इमेज कन्वर्टर
या JPG, JPEG, JPE … फ़ाइलें यहाँ ड्रop करें ·
प्रति फ़ाइल अधिकतम 95 MB· अधिकतम 20 फ़ाइलें· 30 मिनट बाद हटा दी जाती हैं
फ़ाइलें हमारे सर्वर पर प्रोसेस होती हैं और 30 मिनट बाद हटा दी जाती हैं।
85 पर फ़ोटो देखने में मूल जैसी ही रहती हैं। छोटी फ़ाइल चाहिए तभी इसे घटाएँ।
JPG, BMP और EPS में ट्रांसपेरेंसी नहीं होती। पारदर्शी पिक्सल इस रंग से भरे जाते हैं।
पारदर्शी पिक्सल के पीछे इस्तेमाल होने वाला हेक्स रंग, जैसे #FFFFFF।
इस फ़ॉर्मैट में सिर्फ़ एक इमेज होती है। एनिमेशन रखना हो तो GIF या WebP आउटपुट चुनें।
मल्टी-साइज़ आइकन एक फ़ाइल में कई रिज़ॉल्यूशन रखता है; ब्राउज़र और ऑपरेटिंग सिस्टम अपनी ज़रूरत का चुन लेते हैं।
मूल डाइमेंशन रखें, या एक साइड डालें और आस्पेक्ट रेशियो बना रहेगा।
ऊपर चुनी गई साइड के पिक्सल।
मूल डाइमेंशन का प्रतिशत।
स्क्रीन और वेब के लिए sRGB सही है। प्रिंट वर्कफ़्लो के लिए मूल रखें; ग्रेस्केल रंग हटा देता है।
सिर्फ़ मेटाडेटा, 0 मूल मान रखता है। प्रिंटर और कुछ पोर्टल यह संख्या पढ़ते हैं; इससे पिक्सल डाइमेंशन नहीं बदलते।
इस टूल का उपयोग कैसे करें
- 1
SVG अपलोड करें
Figma, Illustrator, Inkscape या किसी चार्ट लाइब्रेरी से एक्सपोर्ट की गई 20 तक .svg फ़ाइलें जोड़ें, हर फ़ाइल 95 MB तक।
- 2
आउटपुट की चौड़ाई तय करें
आउटपुट इमेज रीसाइज़ करें में चौड़ाई 1200 px से शुरू होती है; इसे पेज पर इमेज की चौड़ाई से दोगुना कर दें। क्वालिटी 90 है, या फ़्लैट लोगो और आइकन के लिए एडवांस्ड सेटिंग में जाकर लॉसलेस चुनें।
- 3
WebP में कन्वर्ट करें
WebP में बदलें दबाएँ और फ़ाइलें या एक ZIP डाउनलोड करें। पारदर्शी हिस्से पारदर्शी ही रहते हैं।
SVG को किसी खास साइज़ में WebP में कैसे बदलें?
SVG अपलोड करें, आउटपुट इमेज रीसाइज़ करें में ज़रूरी चौड़ाई पिक्सल में सेट करें (डिफ़ॉल्ट 1200 px) और WebP में बदलें दबाएँ। वेक्टर उसी चौड़ाई पर नए सिरे से बनता है, इसलिए कुछ भी खिंचता या धुंधला नहीं होता।
SVG को WebP में कब बदलना चाहिए
SVG 2001 में W3C Recommendation बना और ज़्यादातर लोगो और आइकन के लिए सही फ़ॉर्मेट है: कुछ किलोबाइट का टेक्स्ट जो किसी भी ज़ूम पर शार्प रहता है। दिक्कत तब शुरू होती है जब फ़ाइल आपके अपने कोड से बाहर जाती है। WordPress और कई होस्टेड शॉप बिल्डर SVG अपलोड नहीं लेते, Facebook, LinkedIn और X पर लिंक प्रीव्यू बिटमैप के रूप में लिए जाते हैं, और डिज़ाइन टूल ऐसी इलस्ट्रेशन एक्सपोर्ट करते हैं जिनमें एम्बेडेड रास्टर इफ़ेक्ट होते हैं और वेक्टर फ़ाइल कई मेगाबाइट की मार्कअप बन जाती है।
WebP, जिसे Google ने 2010 में जारी किया और जिसे Safari ने आख़िरकार 2020 में वर्शन 14 में सपोर्ट किया, इसी काम के लिए बना बिटमैप है: वही लुक रखते हुए PNG से छोटा, और असली अल्फ़ा चैनल के साथ। SVG को सीधे उसके अंतिम साइज़ पर WebP में रेंडर करने से बड़े PNG एक्सपोर्ट का आम चक्कर बच जाता है। उल्टा भी चाहिए तो हमारा WebP से SVG पेज बताता है कि उस दिशा में कन्वर्ज़न नहीं, ट्रेसिंग चाहिए।
आम वेब जगहों के लिए SVG से WebP साइज़
1200 × 630 px
Open Graph लिंक प्रीव्यू
पेज शेयर होने पर दिखने वाली इमेज
1920 × 1080 px
फ़ुल-विड्थ हीरो इलस्ट्रेशन
1× पर ज़्यादातर डेस्कटॉप स्क्रीन को कवर करती है
1600 × 900 px
ब्लॉग कॉलम की इमेज 2× पर
800 px के कंटेंट कॉलम के लिए
400 × 100 px
हेडर लोगो 2× पर
200 × 50 px के लोगो स्लॉट के लिए
SVG
Scalable Vector Graphics
SVG एक XML-आधारित वेक्टर फ़ॉर्मेट है, जिसे W3C ने 2001 में मानकीकृत किया। यह पिक्सल की जगह आकृतियों, पाथ और टेक्स्ट को बताता है, इसलिए किसी भी साइज़ पर तीखा रहता है और लोगो व आइकन के लिए आमतौर पर बहुत छोटा होता है। यह ट्रांसपेरेंसी, CSS स्टाइलिंग, स्क्रिप्टिंग और एनिमेशन को सपोर्ट करता है, और हर ब्राउज़र इसे सीधे रेंडर करता है। SVG फ़ोटो के लिए उपयुक्त नहीं है, और जटिल इलस्ट्रेशन रेंडर होने में धीमे हो सकते हैं। Illustrator, Inkscape, Figma और ब्राउज़र इसे खोल और एडिट कर सकते हैं।
- कंप्रेशन
- –
- ट्रांसपेरेंसी (पारदर्शिता)
- हाँ
- एनिमेशन
- हाँ
- शुरुआत का वर्ष
- 2001 · W3C
WEBP
WebP इमेज
WebP एक इमेज फ़ॉर्मैट है जिसे Google ने 2010 में वेब पेज तेज़ लोड करने के लिए जारी किया। यह एक ही फ़ॉर्मैट में लॉसी और लॉसलेस कंप्रेशन, अल्फ़ा ट्रांसपेरेंसी और एनिमेशन को सपोर्ट करता है। लॉसी WebP फ़ाइलें समान दृश्य क्वालिटी वाली JPEG से आमतौर पर 25–35% छोटी होती हैं, और लॉसलेस WebP आमतौर पर PNG से छोटी होती है। सभी मौजूदा ब्राउज़र इसे सपोर्ट करते हैं, पर कुछ पुराने डेस्कटॉप सॉफ़्टवेयर, प्रिंट सेवाएँ और अपलोड फ़ॉर्म अब भी इसे अस्वीकार करते हैं। Windows, macOS और ज़्यादातर आधुनिक इमेज एडिटर WebP फ़ाइलें खोल सकते हैं।
- कंप्रेशन
- लॉसी या लॉसलेस
- ट्रांसपेरेंसी (पारदर्शिता)
- हाँ
- एनिमेशन
- हाँ
- शुरुआत का वर्ष
- 2010 · Google
लोग SVG को WebP में इसलिए बदलते हैं कि उन्हें हल्का, तय साइज़ का बिटमैप चाहिए उन जगहों के लिए जो वेक्टर फ़ाइलें नहीं लेतीं या धीरे दिखाती हैं, जैसे CMS, सोशल प्रीव्यू या भारी लैंडिंग पेज; WebP से SVG बनाना ट्रेसिंग का काम है, फ़ॉर्मेट बदलना नहीं।
SVG कैसे रास्टराइज़ होती है और क्या जाँचें
कन्वर्टर SVG की अपनी width, height और viewBox पढ़ता है, फिर हर पाथ को आपकी तय की गई चौड़ाई पर बनाता है; ऊँचाई आस्पेक्ट रेशियो से तय होती है। ड्रॉइंग अंतिम साइज़ पर होती है, इसलिए पतली लाइनें और छोटा टेक्स्ट सही स्केल पर एक ही बार एंटी-एलियास होते हैं। बाद में छोटे PNG को बड़ा करने पर नतीजा कभी इतना साफ़ नहीं आता।
फ़ॉन्ट अक्सर चौंकाते हैं। अगर SVG ऐसे टाइपफ़ेस का नाम लेती है जो एम्बेड नहीं है या आउटलाइन में नहीं बदला गया, तो फ़ॉलबैक फ़ॉन्ट इस्तेमाल होता है और लाइनों की लंबाई बदल जाती है। एक्सपोर्ट से पहले अपने डिज़ाइन टूल में टेक्स्ट को आउटलाइन करें। SVG के अंदर URL से जुड़ी बाहरी इमेज नहीं ली जातीं, इसलिए उन्हें एम्बेड करें या पहले आर्टवर्क को फ़्लैट करें।
SVG को WebP में बदलें: क्या करें और क्या न करें
| करें | न करें |
|---|---|
| दिखने वाली CSS चौड़ाई से 2× पर रेंडर करें | सरल इनलाइन आइकन न बदलें, जो SVG में छोटे रहते हैं |
| कम रंगों वाले फ़्लैट लोगो के लिए लॉसलेस इस्तेमाल करें | 600 px के स्लॉट के लिए 4000 px पर रेंडर न करें |
| आगे के साइज़ के लिए SVG मास्टर संभालकर रखें | ईमेल न्यूज़लेटर में WebP न भेजें |
| लेआउट शिफ़्ट से बचने के लिए WebP में width और height एट्रिब्यूट दें | लाइव टेक्स्ट की उम्मीद न रखें: WebP में पिक्सल होते हैं, चुना जा सकने वाला टेक्स्ट नहीं |
SVG से WebP: सवाल-जवाब
SVG को WebP में बदलते समय कितनी पिक्सल चौड़ाई रखें?
इमेज जिस चौड़ाई पर CSS पिक्सल में दिखती है, उसे दोगुना करें, ताकि हाई-डेंसिटी फ़ोन और लैपटॉप स्क्रीन पर भी वह शार्प रहे। 800 px के कॉलम में दिखने वाली इलस्ट्रेशन को 1600 px पर रेंडर करना चाहिए। वेब पर 3× शायद ही फ़ायदेमंद होता है, क्योंकि फ़ाइल बड़ी हो जाती है और दिखने वाला सुधार बहुत कम होता है।
वेबसाइट के लिए WebP बेहतर है या SVG?
सरल लोगो, आइकन और डायग्राम के लिए नहीं: साफ़ SVG बहुत छोटी होती है और हर साइज़ पर शार्प दिखती है, इसलिए उसे ही रखें। ग्रेडिएंट, फ़िल्टर या हज़ारों पाथ वाली जटिल इलस्ट्रेशन के लिए, और ऐसी जगहों के लिए जहाँ सिर्फ़ बिटमैप चलता है (जैसे सोशल प्रीव्यू या SVG सपोर्ट के बिना CMS), WebP बेहतर रहता है।
क्या WebP में मेरी SVG का ट्रांसपेरेंट बैकग्राउंड बना रहता है?
हाँ। WebP के लॉसी और लॉसलेस, दोनों मोड में पूरा अल्फ़ा चैनल होता है, इसलिए SVG में जिन हिस्सों में फ़िल नहीं है वे पारदर्शी रहते हैं। आकृतियों के किनारे पारदर्शिता के मुताबिक एंटी-एलियास होते हैं, जो किसी भी बैकग्राउंड रंग पर सही दिखते हैं।
वेक्टर आर्टवर्क के लिए लॉसी WebP चुनें या लॉसलेस?
लॉसलेस फ़्लैट लोगो, आइकन और कुछ ही ठोस रंगों वाले चार्ट के लिए ठीक रहता है; ये बहुत अच्छी तरह कंप्रेस होते हैं और किनारे बिल्कुल साफ़ रहते हैं। ग्रेडिएंट, शैडो या टेक्सचर वाली इलस्ट्रेशन के लिए क्वालिटी 85 से 90 वाला लॉसी ठीक है, क्योंकि उनमें लॉसलेस फ़ाइलें भारी हो जाती हैं। एक ही फ़ाइल पर दोनों आज़माएँ और जो छोटा नतीजा साफ़ दिखे, उसे रखें।
WordPress पर SVG अपलोड क्यों नहीं होती?
WordPress अपलोड के मान्य प्रकारों में SVG को नहीं रखता, क्योंकि SVG में स्क्रिप्ट हो सकती है। वह 2021 में आए वर्शन 5.8 से WebP स्वीकार करता है, इसलिए बदलने पर आपको ऐसी फ़ाइल मिलती है जिसे मीडिया लाइब्रेरी बिना किसी सिक्योरिटी प्लगइन के ले लेती है। जिन साइटों को असली वेक्टर चाहिए, वे सैनिटाइज़ करने वाले प्लगइन से SVG सपोर्ट जोड़ सकती हैं।
क्या ईमेल न्यूज़लेटर में WebP इस्तेमाल कर सकते हैं?
इससे बचें। Windows के डेस्कटॉप Outlook समेत कई ईमेल क्लाइंट WebP नहीं दिखाते, और Gmail SVG भी रेंडर नहीं करता। ईमेल के लिए आर्टवर्क को SVG से PNG से रेंडर करें।
