वर्डप्रेस में स्केल छवियों को कैसे परोसें (GTmetrix में आइटम)

WordPress में स्केल की गई छवियों की सेवा करने की आवश्यकता है?


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

GTmetrix आपको बताता है कि किन छवियों को छोटा किया जाना चाहिए और उन्हें सही आकार देना चाहिए या उनका आकार बदलना चाहिए। इसके बाद, छवि का आकार बदलें (स्केल करें) और पुरानी छवियों को नए लोगों के साथ बदलें.

स्केल की गई छवियाँ परोसें

चूंकि GTmetrix केवल एकल पृष्ठ जिसे आप परीक्षण कर रहे हैं, के लिए अडॉप्ट की गई छवियां दिखाता है, स्केलिंग द्वारा प्रारंभ करें sitewide कई पृष्ठों पर दिखाई देने वाली छवियां (आपका लोगो, साइडबार और पाद चित्र)। अगला, GTmetrix के माध्यम से अपने अन्य पृष्ठों को चलाएं और उन पर अलग-अलग छवियों को स्केल करें.

क्या मैं छवियों को स्वचालित रूप से स्केल करने के लिए प्लगइन का उपयोग कर सकता हूं?
कम संभावना। आप अधिकतम छवि अनुकूलन प्लगइन्स में अधिकतम चौड़ाई + ऊंचाई सेट कर सकते हैं। लेकिन आपकी साइट के विभिन्न क्षेत्र विशिष्ट आयामों के लिए कॉल करते हैं (छवियों को तदनुसार स्केल करने की आवश्यकता होती है).

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

Contents

1. GTmetrix में ओवरसाइज इमेजेज को खोजें

GTmetrix के माध्यम से एक पृष्ठ चलाएं और PageSpeed ​​टैब में स्केल की गई छवि त्रुटियों को देखें। उनकी सिफारिशों का विस्तार करें और आप सही आयाम देखेंगे कि प्रत्येक छवि को आकार दिया जाना चाहिए। ध्यान रखें कि GTmetrix केवल आपके द्वारा परीक्षण किए जा रहे एकल पृष्ठ के लिए त्रुटियां दिखाएगा.

स्केल्ड छवियाँ GTmetrix परोसें

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

कॉपी इमेज एड्रेस

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

स्कैल्स्ड बनाम अनकल्ड इमेज

2. आयामों को ठीक करने के लिए छवियों का आकार बदलें

पुरानी छवि को डाउनलोड करें और इसे अपनी पसंद के संपादन उपकरण में खोलें (मैं GIMP का उपयोग करता हूं)। आकार और / या छवि को GTmetrix द्वारा सुझाए गए आयामों में क्रॉप करें। कई छवि संपादन उपकरण आपको छवियों को संपीड़ित करने और हटाने देते हैं डेटा EXIF जो छवि लोड को और भी तेज़ कर देगा.

स्केलिंग छवि GIMP

आप चित्रों को क्रॉप और आकार बदल सकते हैं सीधे वर्डप्रेस में:

वर्डप्रेस मीडिया एडिटर में स्केलिंग इमेज

3. पुरानी छवि को नए के साथ बदलें

अपनी नई छवि को वर्डप्रेस पर अपलोड करें, फिर पुरानी छवि को नए के साथ बदलें.

Unscaled विजेट छवि

स्केल्ड विजेट छवि

4. जीटीमेट्रिक्स में पेज को फिर से लिखें

GTmetrix में पृष्ठ को फिर से लिखें और आपको स्केल की गई छवि त्रुटियां नहीं करनी चाहिए.

100% स्केल की गई छवियाँ परोसें

5. मोबाइल पर स्केल की गई छवियाँ परोसें

स्केल की गई छवियों को सेव करना मोबाइल पर अलग है.

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

चरण 1: अपनी साइट को GTmetrix के Android टेस्ट के माध्यम से चलाएँ:

जीटीमेट्रिक्स मोबाइल टेस्ट

मोबाइल पर स्केल इमेजेज परोसें

चरण 2: GTmetrix द्वारा उपलब्ध कराए गए अपने मोबाइल पृष्ठभूमि आयामों का पता लगाएं:

अधिकतम पृष्ठभूमि चौड़ाई

चरण 3: से एक अनुकूली चित्र प्लगइन स्थापित करें ShortPixel या अनुकूली छवियाँ.

ShortPixel अनुकूली छवियाँ

चरण 4: GTmetrix द्वारा दिए गए आयामों को इस रूप में सेट करें पृष्ठभूमि अधिकतम चौड़ाई.

पृष्ठभूमि अधिकतम चौड़ाई

चरण 5: कोई त्रुटि नहीं है यह सुनिश्चित करने के लिए GTmetrix के मोबाइल परीक्षण के माध्यम से अपनी साइट को फिर से चलाएँ.

जीटीमेट्रिक्स मोबाइल टेस्ट

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

6. एकाधिक पृष्ठों पर छवियों का आकार बदलें

यदि आप एक से अधिक पृष्ठों पर एक ही छवि का उपयोग करते हैं और इसे स्केल करने की आवश्यकता है, तो आप छवि का आकार बदल सकते हैं, इसे HTML की प्रतिलिपि बना सकते हैं, फिर इसे कई पृष्ठों पर ठीक करने के लिए बेहतर खोज बदलें प्लगइन का उपयोग कर सकते हैं.

चरण 1: स्थापित करें बेहतर खोज बदलें प्लगइन.

चरण 2: पुरानी छवि के HTML को कॉपी करें और बेहतर खोज बदलें प्लगइन में “खोज” फ़ील्ड में पेस्ट करें। आप उपयोग कर सकते हैं वर्डप्रेस टेक्स्ट एडिटर छवि का HTML देखने के लिए। नोट: बेहतर खोज प्रतिस्थापन केवल एक छवि को प्रतिस्थापित करेगा यदि इसमें प्लगइन में दर्ज सटीक HTML शामिल है.

चरण 3: नई छवि के HTML को कॉपी करें और “बदलें” फ़ील्ड में पेस्ट करें.

स्केल की गई छवि HTML परोसें

चरण 4: टेबल का चयन करें (जैसे। पोस्ट) आप स्कैन करना चाहते हैं और सूखी स्कैन को अनचेक करें.

चरण 5: “खोज / बदलें” पर क्लिक करें और प्लगइन पुरानी छवि को नए के साथ बदल देगा.

7. एक छवि आयाम धोखा शीट बनाएँ

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

उदाहरण:

  • स्लाइडर छवियाँ: 1900 (डब्ल्यू) x 400 (एच)
  • हिंडोला चित्र: 115 (डब्ल्यू)
  • विजेट छवियां: 414 (w)
  • फ़ुल विड्थ ब्लॉग पोस्ट छवियाँ: 680 (w)
  • विशेष रुप से प्रदर्शित चित्र: 250 (डब्ल्यू) x 250 (एच)
  • Yoast Facebook OG छवि: 1200 (w) x 628 (h) – चरण 11
  • Yoast Twitter OG छवि 1024 (w) x 512 (h) – चरण 11

680 पिक्सेल चौड़ाई आयत

मेरे ब्लॉग की चौड़ाई 680px है, इसलिए इस पोस्ट की हर एक छवि को 680px में बदल दिया गया है.

8. WordPress प्लग इन स्केल छवियों को सेवा करने के लिए

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

Smush

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

Imagify

इमेजेज इमेज का आकार बदलें

EWW छवि ऑप्टिमाइज़र

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

अन्य छवियाँ अनुकूलन

मैंने एक पूर्ण ट्यूटोरियल लिखा WordPress में छवियों का अनुकूलन जो भी शामिल:

  • छवियों का संपीडन
  • सीडीएन के माध्यम से छवियों की सेवा
  • GIFS का आकार बदलना
  • EXIF डेटा निकाल रहा है
  • आलसी लोडिंग चित्र + वीडियो
  • Cloudflare मिराज, पोलिश, हॉटलिंक संरक्षण

जीटीमेट्रिक्स में छवि अनुकूलन

अधिक वर्डप्रेस स्पीड ट्यूटोरियल की तलाश में?
यहाँ अन्य ट्यूटोरियल मैंने लिखे हैं:

  • WP रॉकेट कैसे सेटअप करें (मेरे द्वारा सुझाए गए कैश प्लगइन)
  • Cloudways बनाम SiteGround (मेरे द्वारा सुझाए गए दो शीर्ष होस्ट)
  • मैं 100% GTmetrix स्कोर कैसे प्राप्त किया (वर्डप्रेस स्पीड गाइड)

मेरे पास वर्डप्रेस गति अनुकूलन पर एक भयानक वीडियो भी है:

बार बार पूछे जाने वाले प्रश्न

&# X2705; क्या मैं स्केल की गई छवियों की सेवा करने के लिए एक प्लगइन का उपयोग कर सकता हूं?

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

&# X2705; इमेज स्केल करने का सबसे आसान तरीका क्या है?

फ़ोटो को डाउनलोड करें, फसल करें और इसे फ़ोटोशॉप या जिम्प जैसे कार्यक्रम में आकार दें, फिर पुरानी छवि को नए के साथ बदलें.

&# X2705; मुझे पहले किन छवियों को स्केल करना चाहिए?

अपने लोगो, साइडबार, चित्र, पाद चित्र, और अन्य जैसे कई पृष्ठों पर दिखाई देने वाली छवियों को स्केल करके प्रारंभ करें.

&# X2705; मुझे एक छवि के सही आयाम कहां मिलेंगे?

जब आप PageSpeed ​​टैब में आइटम का विस्तार करते हैं, तो GTmetrix आपको प्रत्येक छवि के सही आयाम बताता है.

&# X2705; मैं एक छवि को पूरी तरह से कैसे अनुकूलित करूं?

इसे सही आयामों में स्केल करें, इसे संपीड़ित करें और छवि प्रोग्राम या प्लगइन का उपयोग करके EXIF ​​डेटा निकालें, फिर सुनिश्चित करें कि आप HTML में छवि आयाम (छवि की चौड़ाई और ऊंचाई सेट करें) निर्दिष्ट करें.

मुझे आशा है कि आपको यह ट्यूटोरियल उपयोगी लगा होगा! यदि आपके पास अभी भी अपनी WordPress साइट पर स्केल की गई छवि त्रुटियां हैं, तो मुझे अपने प्रश्न के साथ एक टिप्पणी छोड़ दें और मैं वैसे भी आपकी मदद करूंगा.

चियर्स,
टॉम

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map