थंबर की मदद से इमेज ऑप्टिमाइज़ करें

ज़रूरत पड़ने पर इमेज का साइज़ बदलने, कंप्रेस करने, और उनमें बदलाव करने के लिए, थंबनेल का इस्तेमाल बिना किसी शुल्क के किया जा सकता है.

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 की सुरक्षा कुंजी की सुविधा को सेट अप करने के बारे में जानकारी नहीं दी जाएगी.

साइज़

यूआरएल के इस हिस्से से आउटपुट इमेज के मनचाहे साइज़ के बारे में पता चलता है. अगर इमेज का साइज़ नहीं बदलना है, तो इसे हटाया जा सकता है. अन्य यूआरएल पैरामीटर के आधार पर, अपने हिसाब से साइज़ पाने के लिए थंबनेल, इमेज को काटने या स्केल करने जैसे अलग-अलग तरीकों का इस्तेमाल करेगा. इस पोस्ट के अगले सेक्शन में, इमेज का साइज़ बदलने के बारे में ज़्यादा जानकारी दी गई है.

इसे अभी आज़माएं:

1. दिखाई गई इमेज को उसके मूल साइज़ में नए टैब में देखने के लिए, इस यूआरएल पर क्लिक करें: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg

   

2. इमेज का साइज़ बदलकर 100x100 पिक्सल करें: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg

फ़िल्टर

फ़िल्टर, इमेज को बदल देते हैं. यूआरएल सेगमेंट का फ़िल्टर वाला हिस्सा filters: से शुरू होता है. इसके बाद, कोलन से अलग किए गए फ़िल्टर की सूची होती है; अगर किसी भी फ़िल्टर का इस्तेमाल नहीं किया जा रहा है, तो इसे हटाया जा सकता है. अलग-अलग फ़िल्टर का सिंटैक्स, शून्य या ज़्यादा तर्क वाले किसी फ़ंक्शन कॉल (उदाहरण के लिए grayscale()) के जैसा होता है.

इसे अभी आज़माएं:

1. सिर्फ़ एक फ़िल्टर लगाएं: 25 पिक्सल की रेडियस वाला गॉसियन ब्लर इफ़ेक्ट: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg

   

2. एक से ज़्यादा फ़िल्टर लागू करें. इमेज को ग्रेस्केल में बदलें और उसे 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. इमेज को 1 की क्वालिटी में कंप्रेस करें (बहुत खराब): http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg

   

2. थंबनेल की डिफ़ॉल्ट कंप्रेशन सेटिंग का इस्तेमाल करके इमेज को कंप्रेस करें: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg

साइज़ बदला जा रहा है

किसी इमेज का मूल अनुपात बनाए रखते हुए उसका साइज़ बदलने के लिए, यूआरएल स्ट्रिंग के size वाले हिस्से में $WIDTHx0 या 0x$HEIGHT फ़ॉर्मैट का इस्तेमाल करें.

इसे अभी आज़माएं:

1. इमेज का साइज़ 200 पिक्सल की चौड़ाई में बदलें और ओरिजनल रेशियो में बदलाव करें: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg

   

2. इमेज का मूल अनुपात बनाए रखते हुए, इमेज की ऊंचाई 500 पिक्सल करें: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg

अनुपात फ़िल्टर का इस्तेमाल करके आप इमेज का साइज़ भी, मूल इमेज के प्रतिशत में बदल सकते हैं. अगर साइज़ को अनुपात वाले फ़िल्टर के साथ तय किया गया है, तो इमेज का साइज़ बदल दिया जाएगा. इसके बाद, अनुपात वाला फ़िल्टर लागू किया जाएगा.

इसे अभी आज़माएं:

1. इमेज का साइज़ बदलकर, ओरिजनल इमेज का 50% करें: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg

   

2. इमेज का साइज़ बदलकर 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 फ़ाइलों का साइज़ ज़्यादा बड़ा होता है और वे कंप्रेस नहीं होती हैं.

इसे अभी आज़माएं:

1. इमेज को 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 फ़ाइल की सेटिंग सभी इमेज पर लागू होंगी.

1. नई thumbor.conf फ़ाइल बनाने के लिए, thumbor-config कमांड चलाएं.

   thumbor-config > ./thumbor.conf
   

2. अपनी नई thumbor.conf फ़ाइल खोलें. thumbor-config निर्देश ने एक फ़ाइल जनरेट की है. इसमें, क्या थंबनेल को कॉन्फ़िगर करने के सभी विकल्पों की सूची दी गई है और उनके बारे में बताया गया है.

3. लाइनों को अनटिप्पणी करके और डिफ़ॉल्ट वैल्यू बदलकर, सेटिंग कॉन्फ़िगर करें. आपको नीचे दी गई सेटिंग को सेट करना मददगार लग सकता है:

   • QUALITY
   • AUTO_WEBP
   • MAX_WIDTH और MAX_HEIGHT
   • ALLOW_ANIMATED_GIFS

4. thumbor.conf की सेटिंग इस्तेमाल करने के लिए, थंबनेल को --conf फ़्लैग के साथ इस्तेमाल करें.

   thumbor --conf /path/to/thumbor.conf