थंबर के इस्तेमाल से, मांग पर इमेज का साइज़ बदलने, उन्हें कंप्रेस करने, और उन्हें बदलने के लिए मुफ़्त में इस्तेमाल किया जा सकता है.
thumbsor एक ओपन सोर्स इमेज CDN है, जो बिना किसी शुल्क के उपलब्ध है. इसकी मदद से, इमेज को कंप्रेस करना, उनका साइज़ बदलना, और उन्हें पूरी तरह बदलना आसान हो जाता है. इस पोस्ट की मदद से, बिना कुछ इंस्टॉल किए thumbsor को पहली बार इस्तेमाल किया जा सकता है. हमने आपके लिए एक थंबर सर्वर सेट अप किया है, जिसे http://34.67.235.246:8888
पर आज़माया जा सकता है. आपको जिस इमेज पर एक्सपेरिमेंट करना है वह http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg पर उपलब्ध है.
ज़रूरी शर्तें
इस पोस्ट में शायद आपको पता है कि इमेज सीडीएन आपके लोड की परफ़ॉर्मेंस को कैसे बेहतर बना सकते हैं. अगर ऐसा नहीं है, तो इमेज ऑप्टिमाइज़ करने के लिए इमेज सीडीएन इस्तेमाल करें देखें. इसमें यह भी माना जाता है कि आपने पहले सामान्य वेबसाइटें बना ली हैं.
थंबर यूआरएल फ़ॉर्मैट
जैसा कि इमेज ऑप्टिमाइज़ करने के लिए इमेज सीडीएन इस्तेमाल करें लेख में बताया गया है, हर इमेज सीडीएन, इमेज के लिए थोड़ा अलग यूआरएल फ़ॉर्मैट का इस्तेमाल करता है. पहली इमेज में थंबर के फ़ॉर्मैट के बारे में बताया गया है.
![thumbsor यूआरएल में ये कॉम्पोनेंट होते हैं: ऑरिजिन, सुरक्षा कुंजी, साइज़, फ़िल्टर, और इमेज.](https://web.dev/static/articles/use-thumbor/image/a-thumbor-url-has-follow-485047f95e001.jpg?authuser=6&hl=hi)
शुरुआत की जगह
सभी ऑरिजिन की तरह, thumbsor यूआरएल के ऑरिजिन के तीन हिस्से होते हैं: स्कीम (आम तौर पर, http
या https
होता है), होस्ट, और पोर्ट. इस उदाहरण में, आईपी पते का इस्तेमाल करके होस्ट की पहचान की गई है. हालांकि, अगर डीएनएस सर्वर का इस्तेमाल किया जा रहा है, तो यह thumbor-server.my-site.com
जैसा दिख सकता है. डिफ़ॉल्ट रूप से, thumbsor इमेज दिखाने के लिए 8888
पोर्ट का इस्तेमाल करता है.
सुरक्षा कुंजी
यूआरएल के unsafe
वाले हिस्से से पता चलता है कि दिख रहा है या नहीं, यह सुरक्षा कुंजी के बिना ही इस्तेमाल किया जा रहा है. सुरक्षा कुंजी, उपयोगकर्ता को आपकी इमेज के यूआरएल में बिना अनुमति के बदलाव करने से रोकती है. इमेज के यूआरएल को बदलने से, उपयोगकर्ता आपके सर्वर (और आपके होस्टिंग बिल) का इस्तेमाल करके अपनी इमेज का साइज़ बदल सकता है. इसके अलावा, नुकसान पहुंचाने के तरीके से, आपके सर्वर पर ओवरलोड हो सकता है. इस गाइड में, thumbsor की सुरक्षा कुंजी की सुविधा को सेट अप करने के बारे में नहीं बताया गया है.
साइज़
यूआरएल का यह हिस्सा, आउटपुट इमेज का मनचाहा साइज़ तय करता है. अगर आपको इमेज का साइज़ नहीं बदलना है, तो इसे हटाया जा सकता है. अन्य यूआरएल पैरामीटर के आधार पर, अपनी पसंद का साइज़ हासिल करने के लिए, थंब टूल कई तरीकों का इस्तेमाल करता है. जैसे, फ़ोटो को काटना या स्केल करना. इस पोस्ट के अगले सेक्शन में, इमेज का साइज़ बदलने के तरीके के बारे में ज़्यादा जानकारी दी गई है.
इसे अभी आज़माएं:
इमेज को नए टैब में उसके ओरिजनल साइज़ में देखने के लिए, इस यूआरएल पर क्लिक करें: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg
ओरिजनल इमेज इमेज का साइज़ बदलकर 100x100 पिक्सल करें: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg
![100x100 पिक्सल वाली इमेज](https://web.dev/static/articles/use-thumbor/image/image-100x100-pixels-3848e03e36905.jpg?authuser=6&hl=hi)
फ़िल्टर
फ़िल्टर, इमेज में बदलाव कर सकते हैं. यूआरएल सेगमेंट का फ़िल्टर वाला हिस्सा filters:
से शुरू होता है. इसके बाद, फ़िल्टर की सूची कोलन से अलग की गई सूची होती है. अगर किसी फ़िल्टर का इस्तेमाल नहीं किया जा रहा है, तो इस फ़िल्टर को हटाया जा सकता है. अलग-अलग फ़िल्टर का सिंटैक्स, किसी ऐसे फ़ंक्शन कॉल (उदाहरण के लिए, grayscale()
) जैसा होता है जिसमें शून्य या ज़्यादा आर्ग्युमेंट होते हैं.
इसे अभी आज़माएं:
सिर्फ़ एक फ़िल्टर लागू करें: 25 पिक्सल के दायरे वाला गौसियन धुंधला इफ़ेक्ट: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg
धुंधली इमेज एक से ज़्यादा फ़िल्टर लागू करें. इमेज को ग्रेस्केल में बदलें और इमेज को 90 डिग्री घुमाएं: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg
![90 डिग्री घुमाई गई ग्रेस्केल इमेज](https://web.dev/static/articles/use-thumbor/image/grayscale-image-has-been-787f2eb50dfd7.jpg?authuser=6&hl=hi)
इमेज में बदलाव किया जा रहा है
इस सेक्शन में, thumbsor की उन सुविधाओं पर फ़ोकस किया गया है जो आपके लिए सबसे ज़्यादा काम की हैं. जैसे, कंप्रेशन, साइज़ बदलना, और अलग-अलग फ़ाइल फ़ॉर्मैट में बदलाव करना.
संपीड़न
क्वालिटी फ़िल्टर, JPEG इमेज को अपने हिसाब से इमेज क्वालिटी लेवल (1-100) तक कंप्रेस कर देता है. अगर कोई क्वालिटी लेवल नहीं दिया गया है, तो thumbsor, इमेज को 80 के क्वालिटी लेवल तक कंप्रेस कर देता है. यह एक अच्छा डिफ़ॉल्ट है: आम तौर पर, इमेज क्वालिटी लेवल 80 से 85 का होने पर, इमेज क्वालिटी पर थोड़ा ज़्यादा असर पड़ता है. हालांकि, आम तौर पर इसका साइज़ 30 से 40% तक कम हो जाता है.
इसे अभी आज़माएं:
इमेज को कंप्रेस करके, 1 (बहुत खराब) की क्वालिटी में बदलें: http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg
खराब क्वालिटी की इमेज थंबर की डिफ़ॉल्ट कंप्रेशन सेटिंग का इस्तेमाल करके इमेज को कंप्रेस करें: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg
![कंप्रेस की गई इमेज, जिसमें क्वालिटी से जुड़ी कोई खास समस्या नहीं है](https://web.dev/static/articles/use-thumbor/image/compressed-image-no-noti-ba38af80f42a4.jpg?authuser=6&hl=hi)
साइज़ बदला जा रहा है
किसी इमेज के मूल अनुपात को बनाए रखते हुए उसका साइज़ बदलने के लिए, यूआरएल स्ट्रिंग के size
वाले हिस्से में $WIDTHx0
या 0x$HEIGHT
फ़ॉर्मैट का इस्तेमाल करें.
इसे अभी आज़माएं:
ओरिजनल रेशियो को बनाए रखते हुए, इमेज का साइज़ बदलकर 200 पिक्सल करें: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg
इमेज का साइज़ बदलकर 200 पिक्सल किया गया मूल अनुपात को बनाए रखते हुए, इमेज का साइज़ बदलकर 500 पिक्सल करें: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg
![इमेज जो 500 पिक्सल लंबी है](https://web.dev/static/articles/use-thumbor/image/image-is-500-pixels-tall-992a9e041c75d.jpg?authuser=6&hl=hi)
अनुपात फ़िल्टर का इस्तेमाल करके भी इमेज का साइज़ बदलकर, ओरिजनल इमेज के कुछ प्रतिशत हिस्से पर सेट किया जा सकता है. अगर अनुपात फ़िल्टर के साथ साइज़ की जानकारी दी जाती है, तो इमेज का साइज़ बदल दिया जाएगा और फिर अनुपात वाला फ़िल्टर लागू किया जाएगा.
इसे अभी आज़माएं:
इमेज का साइज़ बदलकर, ओरिजनल इमेज के 50% करें: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg
इमेज का साइज़ बदलकर, ओरिजनल इमेज के साइज़ से 50% किया गया इमेज का साइज़ बदलकर, 1000 पिक्सल की चौड़ाई करें. इसके बाद, इमेज का साइज़ बदलकर, मौजूदा साइज़ का 10% करें: http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg
![इमेज जो 100 पिक्सल चौड़ी है](https://web.dev/static/articles/use-thumbor/image/image-is-100-pixels-wide-07aa661c4581b.jpg?authuser=6&hl=hi)
ये तरीके, thumbsor के इमेज काटने और साइज़ बदलने के कुछ ही विकल्पों में से एक हैं. अन्य विकल्पों के बारे में जानने के लिए, इस्तेमाल करने से जुड़ी जानकारी देखें.
फ़ाइल फ़ॉर्मैट
फ़ॉर्मैट फ़िल्टर, इमेज को jpeg
, webp
, gif
या png
में बदल देता है. ध्यान रखें कि अगर परफ़ॉर्मेंस के लिए ऑप्टिमाइज़ किया जा रहा है, तो JPEG या WebP का इस्तेमाल करें. इसकी वजह यह है कि PNG और GIF फ़ाइलें काफ़ी बड़ी होती हैं और उन्हें कंप्रेस भी नहीं किया जाता है.
इसे अभी आज़माएं:
- इमेज को WebP में बदलें. DevTools का नेटवर्क पैनल खोलने पर, दस्तावेज़ के Content-Type रिस्पॉन्स हेडर से पता चलता है कि सर्वर ने WebP इमेज दिखाई है: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg
![DevTools का स्क्रीनशॉट, जिसमें किसी इमेज का कॉन्टेंट-टाइप (WebP) दिखाया गया है](https://web.dev/static/articles/use-thumbor/image/devtools-screenshot-showi-0e757c2215957.jpg?authuser=6&hl=hi)
content-type
रिस्पॉन्स हेडरअगले चरण
hero.jpg
इमेज पर अन्य फ़िल्टर और ट्रांसफ़ॉर्मेशन आज़माएं.
अगर आपने thumbsor को इंस्टॉल करने का तरीका फ़ॉलो किया है, तो नीचे दिया गया अपेंडिक्स देखें. इसमें बताया गया है कि thumbor.conf
फ़ाइल को कैसे और क्यों इस्तेमाल करें.
अपेंडिक्स: thumbor.conf
इस पोस्ट में बताए गए कई कॉन्फ़िगरेशन विकल्पों और कई दूसरे कॉन्फ़िगरेशन को thumbor.conf
कॉन्फ़िगरेशन फ़ाइल को सेट अप और इस्तेमाल करके, डिफ़ॉल्ट के तौर पर सेट किया जा सकता है. thumbor.conf
फ़ाइल की सेटिंग सभी इमेज पर लागू की जाएंगी. ऐसा तब तक होगा, जब तक यूआरएल स्ट्रिंग पैरामीटर की वजह से इन्हें बदल न दिया जाए.
नई
thumbor.conf
फ़ाइल बनाने के लिए,thumbor-config
कमांड चलाएं.thumbor-config > ./thumbor.conf
अपनी नई
thumbor.conf
फ़ाइल खोलें.thumbor-config
कमांड से एक फ़ाइल जनरेट हुई है. इसमें thumbsor के कॉन्फ़िगरेशन के सभी विकल्पों की जानकारी दी गई है और उनके बारे में जानकारी दी गई है.लाइनों को हटाकर और डिफ़ॉल्ट वैल्यू बदलकर, सेटिंग कॉन्फ़िगर करें. इन सेटिंग को सेट करने से आपको मदद मिल सकती है:
QUALITY
AUTO_WEBP
MAX_WIDTH
औरMAX_HEIGHT
ALLOW_ANIMATED_GIFS
thumbor.conf
की सेटिंग इस्तेमाल करने के लिए,--conf
फ़्लैग के साथ thumbsor चलाएं.thumbor --conf /path/to/thumbor.conf