पूर्व-परिभाषित छवि आकार के साथ अपनी छवियों को अनुकूलित करें [वर्डप्रेस टिप]

एक वेबसाइट पर छवियों का अनुकूलन एक कठिन काम है। आप कम छवियों, संपीड़ित छवियों, स्प्राइट्स या svg का उपयोग करना चुन सकते हैं; सूची चलती जाती है। एक जगह जहां कई वर्डप्रेस साइट ट्रिप हो जाती हैं, वह इमेज साइज को परिभाषित करने में है, जो कि ए सामग्री-भारी साइटों के अनुकूलन का महत्वपूर्ण पहलू.

छवि के आकार महत्वपूर्ण हैं क्योंकि छवियों को स्वचालित रूप से बनाया जाता है जब छवियों को अपलोड किया जाता है। यह सुनिश्चित करता है कि यदि आपके पास 3000px चौड़ी मूल छवि है, तो भी इसका उपयोग कभी नहीं किया जाता है यदि 600px छवि पर्याप्त है। आदर्श रूप से एक 600px चौड़ी जगह एक 600px चौड़ी छवि का उपयोग करना चाहिए, ताकि एक बड़ा नीचे गिराया जा सके.

इस लेख में मैं आपके माध्यम से चलूँगा क्या छवि आकार हैं तथा उन्हें कैसे परिभाषित किया जाए.

कैसे वर्डप्रेस छवियों को संभालती है

यदि आपने कभी वर्डप्रेस लेख में एक छवि डाली है, तो आपको छवि आकार चयनकर्ता द्वारा आना चाहिए। इससे आप छवियों के छोटे, मध्यम और बड़े संस्करण सम्मिलित कर सकते हैं। इनके लिए वास्तविक आकार WordPress सेटिंग्स में संशोधित किया जा सकता है.

जब भी आप वर्डप्रेस के माध्यम से एक छवि अपलोड करते हैं, तो यह इन छवियों के संस्करण उत्पन्न करता है और उन्हें अलग से संग्रहीत करता है। उदाहरण के लिए, यदि आप 1200 × 800 छवि अपलोड करते हैं, तो वर्डप्रेस 100 × 100, 600 × 400 और 900 × 600 संस्करण बना सकता है। जब आप एक छवि सम्मिलित करते हैं और "मध्यम" चुनते हैं तो वास्तविक मध्यम संस्करण का उपयोग किया जाएगा, मूल के एक सिकुड़ डाउन संस्करण के विपरीत.

यह बेहद फायदेमंद है क्योंकि यह क्लाइंट कंप्यूटर पर सर्वर और प्रोसेसिंग समय पर बैंडविड्थ को संरक्षित करता है. मुझे लगता है कि यह कोई आश्चर्य की बात नहीं है कि 600 × 400 छवि डाउनलोड करना 1200 × 800 छवि डाउनलोड करने की तुलना में तेज़ है.

यदि एक बड़ी छवि का उपयोग किया जाता है जिसे नीचे स्केल करने की आवश्यकता होती है, ब्राउज़र को गणनाओं का ध्यान रखना होगा ऐसा करने के लिए। हालांकि इसमें घंटे नहीं लगेंगे, यह छवि-भारी वेबसाइटों पर ध्यान देने योग्य हो सकता है.

सही जगह में सही छवि

अंतिम लक्ष्य होना चाहिए हमेशा उचित छवि आकारों का उपयोग करें. यदि आपको 440 × 380 छवि की आवश्यकता है, तो सर्वर से उस सटीक आकार के साथ एक छवि को पकड़ो। दो मुख्य स्थान हैं जहाँ आप अपलोड की गई छवियों का उपयोग करेंगे: विशेष रुप से प्रदर्शित चित्र और इन-पोस्ट छवियां - मैं पहले चित्रित छवियों पर ध्यान देने की सलाह दूंगा.

सभी में, लेकिन सबसे अधिक नेत्रहीन निर्देशित लेख यह वास्तव में कोई फर्क नहीं पड़ता कि एक इन-पोस्ट छवि 220px या 245px चौड़ी है। आपके पास जो भी संस्करण उपलब्ध होगा वह उतना ही उपयोग करने योग्य होगा। विशेष रुप से प्रदर्शित छवियां आमतौर पर आम आकारों में दिखाई जाती हैं। लेख सूचियों के लिए आप 178 × 178 थंबनेल का उपयोग कर सकते हैं, लेख शीर्षकों के लिए आप 1200 × 600 चौड़ी छवि का उपयोग कर सकते हैं.

इनके अतिरिक्त आप सेटिंग में परिभाषित एक अलग थंबनेल / माध्यम / बड़े आकार को रखना चाह सकते हैं आपको विशिष्ट आयामों तक आसान पहुंच प्रदान करता है पोस्ट में छवियों को जोड़ते समय.

तो क्या यह सब करने के लिए नीचे फोड़ा है: यह बहुत अच्छा नहीं होगा अगर हमारे पास दो अतिरिक्त छवि आकार हैं जो हम चित्रित छवियों के लिए उपयोग कर सकते हैं? ये छवि आकार बाकी के साथ-साथ बनाए जाएंगे जब कोई छवि अपलोड की जाती है। अच्छी खबर यह है कि वर्डप्रेस ने आपको एक बहुत ही सरल फ़ंक्शन के साथ कवर किया है.

छवि आकार बनाना

का उपयोग करके add_image_size () फ़ंक्शन आप अपनी वेबसाइट की जरूरतों के अनुसार सभी छवि आकारों को परिभाषित कर सकते हैं। आइए ऊपर बताए गए दो उदाहरण बनाएं। अपनी थीम के functions.php फ़ाइल के नीचे या एक प्लगइन की फ़ाइल में कोड रखें.

 add_image_size ('विशेष रुप से प्रदर्शित', 178, 178, सच); add_image_size ('विशेष रुप से प्रदर्शित', 1200, 600); 

जैसा कि आप देख सकते हैं, यह फ़ंक्शन चार पैरामीटर लेता है। पहला पैरामीटर आपको आकार के लिए एक नाम सेट करने की अनुमति देता है। दूसरा पैरामीटर अधिकतम चौड़ाई, तीसरा, अधिकतम ऊंचाई है। चौथा पैरामीटर हार्ड क्रॉपिंग सेट करता है। अगर सच में सेट किया गया है, छवि आपके द्वारा निर्दिष्ट सटीक आकार में बनाई जाएगी.

एक बार जब यह आपके विषय या प्लगइन में जुड़ जाता है तो आपके द्वारा अपलोड की जाने वाली प्रत्येक फ़ाइल के दो नए संस्करण वर्डप्रेस द्वारा बनाए जाएंगे.

छवि आकार का उपयोग करना

इन छवि आकारों का उपयोग कई कार्यों में किया जा सकता है जो मीडिया को पुनः प्राप्त करने से संबंधित हैं। आइए पहले चित्रित चित्रों को देखें. the_post_thumbnail () आमतौर पर पोस्ट की चित्रित छवि प्रदर्शित करने के लिए उपयोग किया जाता है। निम्नलिखित कोड वर्डप्रेस लूप में रखा जा सकता है:

 the_post_thumbnail ('विशेष रुप से प्रदर्शित'); 

इस फ़ंक्शन का पहला पैरामीटर आपको छवि आकार का उपयोग करने की अनुमति देता है। चूंकि मैंने "फ़ीचर_थंबनेल" निर्दिष्ट किया है, इसलिए इस फ़ाइल के 178 × 178 संस्करण का उपयोग किया जाएगा.

कई अन्य कार्य हैं जैसे कि wp_get_attachment_image ()तथा wp_get_attachment_image_src () जो छवि आकार पैरामीटर का भी उपयोग करता है। जब भी आप ऐसे फ़ंक्शन का उपयोग करते हैं तो आपको हमेशा एक उचित छवि आकार निर्दिष्ट करना चाहिए.

थंबनेल को पुनर्जीवित करना

यदि आपके पास पहले से कोई साइट है, तो आप केवल छवि आकार को परिभाषित करके अपने लेखों को पूर्वव्यापी रूप से अनुकूलित नहीं कर पाएंगे। छवि का आकार केवल तब ध्यान में रखा जाता है जब एक नई छवि अपलोड की जाती है, इसलिए वे पहले से ही सिस्टम में मौजूद छवियों पर लागू नहीं होते हैं.

डर नहीं, पुनर्जीवित थंबनेल प्लगइन सब कुछ बेहतर कर देगा! यह प्लगइन आपके सभी छवियों के लिए थंबनेल को पुन: उत्पन्न कर सकता है, सभी परिभाषित छवि आकारों को ध्यान में रखता है। यह भी हो सकता है एक विशिष्ट छवि को लक्षित करें, जो उपयोगी है यदि आपके पास बस कुछ है, या आप कुछ परीक्षण कर रहे हैं.

एक बार जब आपके थंबनेल पुनर्जीवित हो जाते हैं, तो आपको अपनी साइट पर लोड किए गए अनुकूलित संस्करणों को देखना चाहिए। आप छवि के स्रोत को देखकर इसकी जांच कर सकते हैं। यदि आपने 'example.jpeg' अपलोड किया है और आप अपनी चुनिंदा छवि के स्रोत के रूप में 'example.jpeg' देखते हैं, तो कुछ सही नहीं है। अगर आप देखें “उदाहरण-178 × 178.jpeg” फिर सब ठीक है; अनुकूलित छवि दिखाई गई है.

उत्तरदायी छवियां

एक अनुकूलित साइट बनाए रखने में एक कठिनाई जवाबदेही है। जब मुझे आईपैड पर एक लेख दिखाई देता है तो बड़े आकार की एक-इन-पोस्ट छवि नीचे की ओर गिरा दी जाएगी क्योंकि अधिकतम चौड़ाई 786px या तो होगी.

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

आगे की छवि अनुकूलन

जैसा कि मैंने परिचय में बताया कि छवियों के अनुकूलन के अनगिनत तरीके हैं। स्प्राइट्स से लेकर इमेज कंप्रेशन तक बहुत सारी तकनीकों का इस्तेमाल लोड के समय को कम करने के लिए किया जा सकता है जो चित्रों के साथ हाथ में आते हैं। आशुतोष केएस ने एक शानदार लेख लिखा है जिसमें 9 वर्डप्रेस प्लगइन्स को छवि प्रदर्शन में सुधार के लिए दिखाया गया है, मेरा सुझाव है कि इसे पढ़ें!

मैं यह भी सुझाव देता हूं कि हेसल फ्री रिस्पॉन्सिव इमेज पर एक नज़र डालें जो आपको दिखाता है कि चित्र तत्व के लिए समर्थन कैसे जोड़ा जाए, कुछ आप जो उपयोग करना चाहते हैं यदि आप अपना कोड लिखना चाहते हैं.