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

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

thumbsor एक ओपन सोर्स इमेज CDN है, जो बिना किसी शुल्क के उपलब्ध है. इसकी मदद से, इमेज को कंप्रेस करना, उनका साइज़ बदलना, और उन्हें पूरी तरह बदलना आसान हो जाता है. इस पोस्ट की मदद से, बिना कुछ इंस्टॉल किए thumbsor को पहली बार इस्तेमाल किया जा सकता है. हमने आपके लिए एक थंबर सर्वर सेट अप किया है, जिसे http://34.67.235.246:8888 पर आज़माया जा सकता है. आपको जिस इमेज पर एक्सपेरिमेंट करना है वह http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg पर उपलब्ध है.

ज़रूरी शर्तें

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

थंबर यूआरएल फ़ॉर्मैट

जैसा कि इमेज ऑप्टिमाइज़ करने के लिए इमेज सीडीएन इस्तेमाल करें लेख में बताया गया है, हर इमेज सीडीएन, इमेज के लिए थोड़ा अलग यूआरएल फ़ॉर्मैट का इस्तेमाल करता है. पहली इमेज में थंबर के फ़ॉर्मैट के बारे में बताया गया है.

शुरुआत की जगह

सभी ऑरिजिन की तरह, thumbsor यूआरएल के ऑरिजिन के तीन हिस्से होते हैं: स्कीम (आम तौर पर, http या https होता है), होस्ट, और पोर्ट. इस उदाहरण में, आईपी पते का इस्तेमाल करके होस्ट की पहचान की गई है. हालांकि, अगर डीएनएस सर्वर का इस्तेमाल किया जा रहा है, तो यह thumbor-server.my-site.com जैसा दिख सकता है. डिफ़ॉल्ट रूप से, thumbsor इमेज दिखाने के लिए 8888 पोर्ट का इस्तेमाल करता है.

सुरक्षा कुंजी

यूआरएल के unsafe वाले हिस्से से पता चलता है कि दिख रहा है या नहीं, यह सुरक्षा कुंजी के बिना ही इस्तेमाल किया जा रहा है. सुरक्षा कुंजी, उपयोगकर्ता को आपकी इमेज के यूआरएल में बिना अनुमति के बदलाव करने से रोकती है. इमेज के यूआरएल को बदलने से, उपयोगकर्ता आपके सर्वर (और आपके होस्टिंग बिल) का इस्तेमाल करके अपनी इमेज का साइज़ बदल सकता है. इसके अलावा, नुकसान पहुंचाने के तरीके से, आपके सर्वर पर ओवरलोड हो सकता है. इस गाइड में, thumbsor की सुरक्षा कुंजी की सुविधा को सेट अप करने के बारे में नहीं बताया गया है.

साइज़

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

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

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 डिग्री घुमाएं: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg

इमेज में बदलाव किया जा रहा है

इस सेक्शन में, thumbsor की उन सुविधाओं पर फ़ोकस किया गया है जो आपके लिए सबसे ज़्यादा काम की हैं. जैसे, कंप्रेशन, साइज़ बदलना, और अलग-अलग फ़ाइल फ़ॉर्मैट में बदलाव करना.

संपीड़न

क्वालिटी फ़िल्टर, JPEG इमेज को अपने हिसाब से इमेज क्वालिटी लेवल (1-100) तक कंप्रेस कर देता है. अगर कोई क्वालिटी लेवल नहीं दिया गया है, तो thumbsor, इमेज को 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

ये तरीके, thumbsor के इमेज काटने और साइज़ बदलने के कुछ ही विकल्पों में से एक हैं. अन्य विकल्पों के बारे में जानने के लिए, इस्तेमाल करने से जुड़ी जानकारी देखें.

फ़ाइल फ़ॉर्मैट

फ़ॉर्मैट फ़िल्टर, इमेज को jpeg, webp, gif या png में बदल देता है. ध्यान रखें कि अगर परफ़ॉर्मेंस के लिए ऑप्टिमाइज़ किया जा रहा है, तो JPEG या WebP का इस्तेमाल करें. इसकी वजह यह है कि PNG और GIF फ़ाइलें काफ़ी बड़ी होती हैं और उन्हें कंप्रेस भी नहीं किया जाता है.

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

1. इमेज को WebP में बदलें. DevTools का नेटवर्क पैनल खोलने पर, दस्तावेज़ के Content-Type रिस्पॉन्स हेडर से पता चलता है कि सर्वर ने WebP इमेज दिखाई है: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg

अगले चरण

hero.jpg इमेज पर अन्य फ़िल्टर और ट्रांसफ़ॉर्मेशन आज़माएं.

अगर आपने thumbsor को इंस्टॉल करने का तरीका फ़ॉलो किया है, तो नीचे दिया गया अपेंडिक्स देखें. इसमें बताया गया है कि thumbor.conf फ़ाइल को कैसे और क्यों इस्तेमाल करें.

अपेंडिक्स: thumbor.conf

इस पोस्ट में बताए गए कई कॉन्फ़िगरेशन विकल्पों और कई दूसरे कॉन्फ़िगरेशन को thumbor.conf कॉन्फ़िगरेशन फ़ाइल को सेट अप और इस्तेमाल करके, डिफ़ॉल्ट के तौर पर सेट किया जा सकता है. thumbor.conf फ़ाइल की सेटिंग सभी इमेज पर लागू की जाएंगी. ऐसा तब तक होगा, जब तक यूआरएल स्ट्रिंग पैरामीटर की वजह से इन्हें बदल न दिया जाए.

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

   thumbor-config > ./thumbor.conf
   

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

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

   • QUALITY
   • AUTO_WEBP
   • MAX_WIDTH और MAX_HEIGHT
   • ALLOW_ANIMATED_GIFS

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

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