ज़रूरत पड़ने पर इमेज का साइज़ बदलने, कंप्रेस करने, और उनमें बदलाव करने के लिए, थंबनेल का इस्तेमाल बिना किसी शुल्क के किया जा सकता है.
Thumbor एक मुफ़्त और ओपन सोर्स इमेज सीडीएन है, जिसकी मदद से इमेज को कंप्रेस करना, उनका साइज़ बदलना, और उन्हें बदलना आसान हो जाता है. इस पोस्ट के ज़रिए आप बिना कुछ इंस्टॉल किए, थंबनेल को इस्तेमाल कर सकते है. हमने एक सैंडबॉक्स थंबनेल सर्वर सेट अप किया है, जिसे http://34.67.235.246:8888
पर आज़माया जा सकता है. आपको जिस इमेज के साथ एक्सपेरिमेंट करना है वह यहां उपलब्ध है: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg.
ज़रूरी शर्तें
इस पोस्ट में हम यह मानते हैं कि आपको इस बात की जानकारी है कि इमेज सीडीएन, आपके पेज की लोड परफ़ॉर्मेंस को कैसे बेहतर बना सकते हैं. अगर ऐसा नहीं है, तो इमेज को ऑप्टिमाइज़ करने के लिए इमेज सीडीएन का इस्तेमाल करना लेख देखें. इसमें यह भी माना जाता है कि आपने पहले ही बेसिक वेबसाइटें बनाई हैं.
थंबर यूआरएल फ़ॉर्मैट
जैसा कि इमेज ऑप्टिमाइज़ करने के लिए इमेज सीडीएन का इस्तेमाल करना में बताया गया है, हर इमेज सीडीएन, इमेज के लिए थोड़े अलग यूआरएल फ़ॉर्मैट का इस्तेमाल करता है. पहली इमेज में थंबर का फ़ॉर्मैट दिखाया गया है.
शुरुआत की जगह
सभी ऑरिजिन की तरह, थंबनेल के यूआरएल के ऑरिजिन के तीन हिस्से होते हैं: एक स्कीम (जो करीब-करीब हमेशा http
या https
होता है), होस्ट, और पोर्ट. इस उदाहरण में, आईपी पते का इस्तेमाल करके होस्ट की पहचान की गई है. हालांकि, डीएनएस सर्वर का इस्तेमाल करने पर, यह thumbor-server.my-site.com
जैसा दिख सकता है. डिफ़ॉल्ट रूप से, थंबनेल इमेज दिखाने के लिए 8888
पोर्ट का इस्तेमाल करता है.
सुरक्षा कुंजी
यूआरएल का unsafe
वाला हिस्सा यह बताता है कि बिना सुरक्षा कुंजी के, थंबनेल का इस्तेमाल किया जा रहा है. सुरक्षा कुंजी, किसी उपयोगकर्ता को आपकी इमेज के यूआरएल में बिना अनुमति के बदलाव करने से रोकती है. इमेज का यूआरएल बदलने से, उपयोगकर्ता अपनी इमेज का साइज़ बदलने के लिए आपके सर्वर (और होस्ट करने वाले बिल) का इस्तेमाल कर सकते हैं. इसके अलावा, वे नुकसान पहुंचाने के लिए आपके सर्वर पर ओवरलोड हो सकते हैं. इस गाइड में, Thumbor की सुरक्षा कुंजी की सुविधा को सेट अप करने के बारे में जानकारी नहीं दी जाएगी.
साइज़
यूआरएल के इस हिस्से से आउटपुट इमेज के मनचाहे साइज़ के बारे में पता चलता है. अगर इमेज का साइज़ नहीं बदलना है, तो इसे हटाया जा सकता है. अन्य यूआरएल पैरामीटर के आधार पर, अपने हिसाब से साइज़ पाने के लिए थंबनेल, इमेज को काटने या स्केल करने जैसे अलग-अलग तरीकों का इस्तेमाल करेगा. इस पोस्ट के अगले सेक्शन में, इमेज का साइज़ बदलने के बारे में ज़्यादा जानकारी दी गई है.
इसे अभी आज़माएं:
दिखाई गई इमेज को उसके मूल साइज़ में नए टैब में देखने के लिए, इस यूआरएल पर क्लिक करें: 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
फ़िल्टर
फ़िल्टर, इमेज को बदल देते हैं. यूआरएल सेगमेंट का फ़िल्टर वाला हिस्सा filters:
से शुरू होता है. इसके बाद, कोलन से अलग किए गए फ़िल्टर की सूची होती है; अगर किसी भी फ़िल्टर का इस्तेमाल नहीं किया जा रहा है, तो इसे हटाया जा सकता है. अलग-अलग फ़िल्टर का सिंटैक्स, शून्य या ज़्यादा तर्क वाले किसी फ़ंक्शन कॉल (उदाहरण के लिए grayscale()
) के जैसा होता है.
इसे अभी आज़माएं:
सिर्फ़ एक फ़िल्टर लगाएं: 25 पिक्सल की रेडियस वाला गॉसियन ब्लर इफ़ेक्ट: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg
एक से ज़्यादा फ़िल्टर लागू करें. इमेज को ग्रेस्केल में बदलें और उसे 90 डिग्री rotate: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg
इमेज में बदलाव किया जा रहा है
इस सेक्शन में, थंबनेल की उन सुविधाओं पर फ़ोकस किया गया है जो परफ़ॉर्मेंस के लिहाज़ से सबसे सही हैं: कंप्रेस करना, साइज़ बदलना, और फ़ाइल फ़ॉर्मैट के बीच कन्वर्ज़न.
संपीड़न
क्वालिटी फ़िल्टर, JPEG इमेज को अपनी पसंद की इमेज क्वालिटी लेवल (1-100) तक कंप्रेस कर देता है. अगर कोई क्वालिटी लेवल नहीं दिया गया है, तो थंबनेल इमेज को 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
साइज़ बदला जा रहा है
किसी इमेज का मूल अनुपात बनाए रखते हुए उसका साइज़ बदलने के लिए, यूआरएल स्ट्रिंग के size
वाले हिस्से में $WIDTHx0
या 0x$HEIGHT
फ़ॉर्मैट का इस्तेमाल करें.
इसे अभी आज़माएं:
इमेज का साइज़ 200 पिक्सल की चौड़ाई में बदलें और ओरिजनल रेशियो में बदलाव करें: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg
इमेज का मूल अनुपात बनाए रखते हुए, इमेज की ऊंचाई 500 पिक्सल करें: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg
अनुपात फ़िल्टर का इस्तेमाल करके आप इमेज का साइज़ भी, मूल इमेज के प्रतिशत में बदल सकते हैं. अगर साइज़ को अनुपात वाले फ़िल्टर के साथ तय किया गया है, तो इमेज का साइज़ बदल दिया जाएगा. इसके बाद, अनुपात वाला फ़िल्टर लागू किया जाएगा.
इसे अभी आज़माएं:
इमेज का साइज़ बदलकर, ओरिजनल इमेज का 50% करें: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg
इमेज का साइज़ बदलकर 1000 पिक्सल करें. इसके बाद, इमेज को उसके मौजूदा साइज़ का 10% बदलें: http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg
ये तरीके, थंबनेल को इमेज में काट-छांट करने और साइज़ बदलने के थंबनेल में से कुछ हैं. अन्य विकल्पों के बारे में जानने के लिए, इस्तेमाल से जुड़ी जानकारी लेख पढ़ें.
फ़ाइल फ़ॉर्मैट
फ़ॉर्मैट फ़िल्टर, इमेज को jpeg
, webp
, gif
या png
में बदलता है. ध्यान रखें कि अगर बेहतर परफ़ॉर्मेंस के लिए ऑप्टिमाइज़ किया जा रहा है, तो JPEG या WebP में से किसी एक का इस्तेमाल करें. ऐसा इसलिए, क्योंकि PNG और GIF फ़ाइलों का साइज़ ज़्यादा बड़ा होता है और वे कंप्रेस नहीं होती हैं.
इसे अभी आज़माएं:
- इमेज को WebP में बदलें. DevTools का नेटवर्क पैनल खोलने पर, दस्तावेज़ के कॉन्टेंट-टाइप रिस्पॉन्स हेडर से पता चलता है कि सर्वर ने WebP इमेज दी है: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg
अगले चरण
hero.jpg
इमेज पर अन्य फ़िल्टर और ट्रांसफ़ॉर्मेशन आज़माएं.
अगर आपने खुद का थंबनेल इंस्टॉल करने का अनुरोध किया है, तो यहां दी गई अन्य जानकारी देखें. इसमें बताया गया है कि thumbor.conf
फ़ाइल को इस्तेमाल करने का तरीका क्या और क्यों है.
अपेंडिक्स: thumbor.conf
इस पोस्ट में बताए गए कॉन्फ़िगरेशन के कई विकल्पों के साथ-साथ कई अन्य विकल्पों को thumbor.conf
कॉन्फ़िगरेशन फ़ाइल को सेट अप और इस्तेमाल करके डिफ़ॉल्ट के तौर पर लागू किया जा सकता है. जब तक यूआरएल स्ट्रिंग पैरामीटर से बदलाव न किया जाए, तब तक thumbor.conf
फ़ाइल की सेटिंग सभी इमेज पर लागू होंगी.
नई
thumbor.conf
फ़ाइल बनाने के लिए,thumbor-config
कमांड चलाएं.thumbor-config > ./thumbor.conf
अपनी नई
thumbor.conf
फ़ाइल खोलें.thumbor-config
निर्देश ने एक फ़ाइल जनरेट की है. इसमें, क्या थंबनेल को कॉन्फ़िगर करने के सभी विकल्पों की सूची दी गई है और उनके बारे में बताया गया है.लाइनों को अनटिप्पणी करके और डिफ़ॉल्ट वैल्यू बदलकर, सेटिंग कॉन्फ़िगर करें. आपको नीचे दी गई सेटिंग को सेट करना मददगार लग सकता है:
QUALITY
AUTO_WEBP
MAX_WIDTH
औरMAX_HEIGHT
ALLOW_ANIMATED_GIFS
thumbor.conf
की सेटिंग इस्तेमाल करने के लिए, थंबनेल को--conf
फ़्लैग के साथ इस्तेमाल करें.thumbor --conf /path/to/thumbor.conf