कैसे अपनी वर्डप्रेस साइट पर इमेज लोड करने के लिए तेज़

04.06.2020
WordPress 'कैसे अपनी वर्डप्रेस साइट पर इमेज लोड करने के लिए तेज़
0 40 мин.

इसलिए आप चाहते हैं कि आपकी छवियां तेज़ी से लोड हों?


खैर, मैं बिलकुल नहीं कर पाया। चलो अच्छे सामान में गोता लगाएँ!

WordPress में छवियों को तेजी से लोड करने के तीन तरीके हैं:

  • आकार बदलें
  • संकुचित करें
  • हल्का भार

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

यह पहली तकनीक बेहद सरल है, लेकिन अक्सर वर्डप्रेस newbies द्वारा अनदेखी की जाती है.

WordPress में Images को कैसे Optimize करें

अपनी छवियों का आकार बदलें

आपकी छवियों को तेज़ी से लोड करने का सबसे सरल तरीका उन्हें आकार देना है। मुझे समझाने दो.

क्या आकार बदल रहा है?

जब मैं कहता हूं कि “आकार” मैं एक छवि के आयामों को बदलने का मतलब है, और इस मामले में, आप अत्यधिक छवियों के आयाम को कम करना चाहते हैं.

एक उदाहरण के रूप में, ब्लॉगर कभी-कभी अपने फोन या डिजिटल कैमरे पर तस्वीरें लेते हैं और उन्हें अपने ब्लॉग पर अपलोड करते हैं। तस्वीरों की संयुक्त प्रतियां 5,000px चौड़ी हो सकती हैं। अब इस पर विचार कीजिये…

आपकी साइट पर पोस्ट सेक्शन की चौड़ाई संभवतः 800px से अधिक चौड़ी नहीं है। अभी आप जो पाठ पढ़ रहे हैं, वह पूरे पृष्ठ में लगभग 700px तक फैला हुआ है, इसलिए यहाँ एक छवि जोड़ने की कल्पना कीजिए जो 5,000px चौड़ी है। यह होगा जिस तरह से बड़ा होने की जरूरत है और जब यह पृष्ठ को फिट करने के लिए डाउनस्कूल किया जाएगा, तो लोड की गई छवि फ़ाइल अभी भी बड़े पैमाने पर और बेहद बेकार है। और वह इसलिए…

बड़े आयाम वाले चित्र भी बड़े फ़ाइल आकार के होते हैं.

जब यह प्रदर्शन और आपकी छवियों को तेजी से लोड करने की बात आती है, तो आपकी छवि के आयामों को कम करना फ़ाइल के आकार को काफी कम करने का एक शानदार तरीका है, और इससे छवि का लोड तेजी से बढ़ता है.

आइए अपने उदाहरण पर वापस जाएं और मान लें कि छवि 5,000px चौड़ी और लंबी है। यदि आपने इसे 5,000px से घटाकर सिर्फ 700px कर दिया है, तो छवि वास्तव में 99% कम पिक्सेल का उपयोग करेगी। दूसरे शब्दों में, फ़ाइल का आकार लगभग 99% घट जाएगा। अगर छवि 5mb की थी, तो यह सिर्फ 50kb तक खत्म हो जाएगी और यह आपकी साइट पर 99% तेजी से लोड होगी.

छवियों का आकार बदलें

यदि आप अपनी छवियों का ध्यानपूर्वक उपयोग नहीं कर रहे हैं, तो निश्चित रूप से कुछ लाभ अवश्य प्राप्त होंगे.

साइट को पूरी तरह से फिट करने के लिए आपकी छवियों को आकार देने के कुछ तरीके हैं.

मैन्युअल रूप से अपनी छवियों का आकार बदलें

अपनी साइट पर एक नई छवि अपलोड करने से पहले, इसे अपने कंप्यूटर पर अंतर्निहित छवि संपादन टूल का उपयोग करके मैन्युअल रूप से आकार दें.

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

यहां तक ​​कि अगर आप किसी लाइटबॉक्स या स्लाइडर में छवि का उपयोग करने जा रहे हैं, तो सामान्य रूप से इसका कोई कारण नहीं है कि 2,000 बॉक्स से अधिक व्यापक हो। यदि छवि पोस्ट या पृष्ठ सामग्री क्षेत्र में होने जा रही है, तो आप संभवतः 800px चौड़ी छवि के साथ अच्छा कर सकते हैं.

छवियों को आकार देने का यह तरीका ठीक काम करता है, लेकिन यह आपकी साइट पर पहले से अपलोड की गई छवियों के साथ मदद नहीं करता है। मौजूदा छवियों के लिए एक आसान तकनीक केवल एक अलग आकार चुनना है.

छोटे आकार का उपयोग करें

जब आप अपनी मीडिया लाइब्रेरी में एक छवि अपलोड करते हैं, तो वर्डप्रेस 3 अतिरिक्त संस्करण बनाता है: थंबनेल, मध्यम और बड़ा.

यदि आप अपने मीडिया सेटिंग पृष्ठ पर जाते हैं, तो आप देखेंगे कि आप उन आकारों को यहाँ चुन सकते हैं:

वर्डप्रेस मीडिया सेटिंग्स

जब आप सेटिंग्स को संशोधित कर सकते हैं, तो डिफ़ॉल्ट बड़ा आकार 1024px है, जो बहुत बेकार होने के बिना पोस्ट के लिए उपयोग करने के लिए पर्याप्त है। आप अपने पोस्ट में शामिल सभी छवियों के लिए इस आकार का उपयोग कर सकते हैं.

किसी पोस्ट में आपके द्वारा जोड़े गए किसी चित्र का आकार बदलने के लिए, संपादक में उस पर क्लिक करें, और आपको दाईं साइडबार में छवि आकार ड्रॉपडाउन दिखाई देगा.

WordPress Image Resize

“बड़े” आकार का चयन करें और पोस्ट को अपडेट करें। यदि आपके पास कोई ओवरसाइज़्ड चित्र हैं, तो यह तकनीक आपको जल्दी से अधिक उपयुक्त आकार प्रदान करने की अनुमति देगी, जो पुनः लोड करने और मूल को बदलने की आवश्यकता के बिना तेज़ी से लोड होगी.

अगर आपने दर्जनों छवियों के साथ दर्जनों पोस्ट किए हैं, तो यह भयानक रूप से थकाऊ हो सकता है। एक और भी तेज और अधिक प्रभावी तरीका उपलब्ध है.

एक प्लगइन के साथ स्वचालित आकार

अपने आप को छवियों को आकार देने के बजाय, आप अपने लिए एक प्लग-इन स्वचालित रूप से कर सकते हैं। जब यह स्वचालित छवि आकार देने की बात आती है, तो कुछ भी नहीं धड़कता है Optimole लगाना.

ऑप्टिमोल इमेज ऑप्टिमाइज़र

यह आपकी अपेक्षा के अनुरूप काम नहीं करता है.

अपनी मीडिया लाइब्रेरी में छवियों को संपादित करने के बजाय, ऑप्टिमोल आपकी छवियों की अपनी प्रतियां रखता है और उन्हें उच्च-प्रदर्शन वाले CDN से कार्य करता है। इस तरह, आपके मूल को कभी भी किसी भी तरह से संशोधित नहीं किया जाता है.

इसके अलावा, आपको अपनी छवियों के उपयोग के लिए ऑप्टिमोल को एक आकार नहीं देना होगा। बल्कि, यह विज़िटर की स्क्रीन के आकार को प्राप्त करता है और मक्खी पर प्रत्येक छवि का एक बेहतर आकार संस्करण उत्पन्न करता है। इसका मतलब है कि मोबाइल डिवाइस पर कोई व्यक्ति छवि के 400px संस्करण को लोड कर सकता है जबकि लैपटॉप पर किसी अन्य आगंतुक को उस छवि का 700px संस्करण मिलता है.

आकार बदलने की यह विधि लागू करने के लिए आसान है और मोबाइल उपकरणों के लिए अधिक प्रभावी है जो विशेष रूप से महत्वपूर्ण है क्योंकि मोबाइल आगंतुक अक्सर धीमी कनेक्शन पर होते हैं.

यदि आप ऑप्टिमोल का उपयोग करना सीखना चाहते हैं, तो आप मेरी पूरी वॉकथ्रू वीडियो का अनुसरण कर सकते हैं:

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

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

अपनी छवियों को संपीड़ित करें

संपीड़न एक छवि का फ़ाइल आकार कम करने का एक तरीका है, इसके आयामों को बदले बिना.

दो प्रकार की छवि संपीड़न उपलब्ध हैं.

पहले प्रकार की छवि संपीड़न को “दोषरहित” संपीड़न कहा जाता है.

दोषरहित संपीड़न

दोषरहित अनुकूलन के साथ, छवि वास्तव में संपादित नहीं होती है। बल्कि, यह तकनीक छवि फ़ाइल में संग्रहीत सभी मेटाडेटा को हटा देती है। उदाहरण के लिए, छवियां अक्सर छवि को लेने के लिए उपयोग किए जाने वाले डिवाइस के नाम को संग्रहीत करती हैं, जिस तारीख को फोटो लिया गया था, और कभी-कभी शॉट के जीपीएस निर्देशांक भी।.

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

वास्तविक लाभ हानिपूर्ण अनुकूलन से आते हैं.

हानिपूर्ण संपीड़न

जैसा कि आप उम्मीद कर सकते हैं, हानिपूर्ण संपीड़न छवि को ही अनुकूलित करता है और गुणवत्ता में गिरावट का परिणाम है। लेकिन यहाँ बात है …

संपीड़न एल्गोरिदम इन दिनों इतने अच्छे हैं कि आप अक्सर किसी भी अलग-अलग अंतर के बिना छवि के फ़ाइल आकार को 50-70% तक कम कर सकते हैं। जब तक आप एक पेशेवर फोटोग्राफर नहीं हैं और आपकी छवियों को 4k मॉनिटर पर पूरी तरह से कुरकुरा होने की आवश्यकता है, तब तक आपको गुणवत्ता के नुकसान की सूचना नहीं होगी.

अपनी छवियों को कैसे संपीड़ित करें

आप मैन्युअल रूप से अपनी छवियों को एक उपकरण की तरह संकुचित कर सकते हैं TinyPNG इससे पहले कि आप उन्हें अपलोड करें, या चीजों को स्वचालित करने के लिए एक प्लगइन का उपयोग करें.

ShortPixel आपकी साइट पर छवियों के अनुकूलन के लिए एक बढ़िया प्लगइन है। जब आप उन्हें अपलोड करते हैं, तो यह उन्हें तुरंत ऑप्टिमाइज़ कर सकता है और आपके मीडिया लाइब्रेरी में पहले से मौजूद सभी छवियों को थोक में बदल सकता है.

shortpixel

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

आप यहाँ कुछ और छवि अनुकूलन प्लगइन्स पा सकते हैं.

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

आलसी लोडिंग को लागू करें

आलसी लोडिंग आपकी छवियों को और अधिक अनुकूलित करने का एक बहुत ही स्मार्ट तरीका है.

मान लें कि आपके पास इसमें 12 छवियों के साथ एक ब्लॉग पोस्ट है। जब कोई आपकी साइट पर जाता है, तो वे सभी चित्र उनकी स्क्रीन पर तुरंत दिखाई देने वाले नहीं होते हैं। उनमें से अधिकांश को दिखाने के लिए उन्हें और नीचे स्क्रॉल करने की आवश्यकता होगी। तो क्यों सभी 12 सही दूर लोड?

आलसी लोडिंग के साथ, केवल स्क्रीन पर दिखाई देने वाली छवियां लोड की जाती हैं। 12 छवियों को लोड किए जाने के बजाय, शायद केवल 2-3 लोड किए गए हैं। फिर जैसे ही आगंतुक पृष्ठ को नीचे स्क्रॉल करता है, शेष चित्र स्क्रीन में आते ही लोड हो जाते हैं। इसका मतलब है कि प्रारंभिक भार बहुत तेज़ है, और चूंकि अधिकांश आगंतुक पृष्ठ के सभी तरह से स्क्रॉल नहीं करते हैं, इसलिए बहुत सारी छवियां कभी भी लोड नहीं होती हैं जो आपको मूल्यवान सर्वर संसाधनों को बचाता है।.

इस वीडियो में विज़ुअलाइज़ेशन है जो इसे बेहतर तरीके से समझाता है यदि आप स्पष्ट चित्र चाहते हैं कि आलसी लोडिंग कैसे काम करता है:

अब जब आप अवधारणा पर बिक गए हैं, तो यहां बताया गया है कि आप अपनी साइट पर आलसी लोडिंग को कैसे लागू कर सकते हैं.

आलसी लोडिंग का उपयोग कैसे करें

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

यदि आप एक मुफ्त विकल्प की तलाश में हैं तो ऑप्टिमोल या बाहर की कोशिश करें a3 आलसी लोड.

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

इसके अतिरिक्त, अगर आपको भुगतान करने में कोई दिक्कत नहीं है, तो देखें WP रॉकेट. इसमें उच्च-प्रदर्शन कैशिंग और विभिन्न गति उपकरण हैं.

WP रॉकेट के साथ आलसी लोडिंग चालू करने के लिए, आपको बस इस स्विच को फ्लिप करना है:

WP रॉकेट मीडिया

यह आसान नहीं हो सकता!

अपनी तेज़ लोडिंग छवियों का आनंद लें

संक्षेप में बताएं कि आपने अभी क्या सीखा है …

आपकी साइट पर अपलोड की गई ओवरसाइज़्ड छवियां बेहद धीमी हैं। बस इन छवियों में से एक आपकी साइट को एक डरावना पड़ाव में ला सकता है.

सबसे महत्वपूर्ण बात यह है कि आप अपनी छवियों को गति देने के लिए बड़ी छवियों का आकार बदल सकते हैं ताकि वे आपकी साइट के लिए एक उपयुक्त आकार हों। आप इसे मैन्युअल रूप से कर सकते हैं या इसे ऑप्टिमोल के साथ स्वचालित कर सकते हैं.

अगला, छवि संपीड़न एल्गोरिदम एक लंबा रास्ता तय कर चुके हैं और इन दिनों, आप ध्यान देने योग्य तरीके से गुणवत्ता को प्रभावित किए बिना एक छवि के फ़ाइल आकार को 50-70% तक कम कर सकते हैं। यह कोई ब्रेनर नहीं है। अपनी साइट पर प्रत्येक छवि को संपीड़ित करने के लिए ShortPixel या ऑप्टिमोल का उपयोग करें.

अंत में, आलसी लोडिंग चुनिंदा छवियों को लोड करने का एक शानदार तरीका है। आप अपनी साइट पर आलसी लोडिंग को तुरंत लागू करने के लिए ऑप्टिमोल, ए 3 आलसी लोड या WP रॉकेट का उपयोग कर सकते हैं.

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

क्या आपके पास इस पोस्ट में अवधारणाओं और तकनीकों के बारे में कोई प्रश्न हैं? साझा करने के लिए एक और टिप है? नीचे टिप्पणी अनुभाग में पोस्ट करें!

आपको यह भी पसंद आ सकता हैं,

कैसे एक धीमी WordPress साइट और व्यवस्थापक पैनल को ठीक करने के लिए (स्थायी रूप से)

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector