मुखपृष्ठ/मार्गदर्शक/वेबसाइट अनुकूलन/विवरण

छवि अनुकूलन वर्डप्रेस प्रदर्शन के लिए निवेश पर सबसे अधिक प्रतिफल प्रदान करता है: समान पेज संरचनाओं और थीमों के साथ, केवल छवि का आकार, आयाम, प्रारूप और वितरण विधि सही रखने से अक्सर लोडिंग अनुभव में तत्काल सुधार हो सकते हैं।

हालाँकि, छवि अनुकूलन ही सबसे अधिक संभावना रखता है कि ऐसी स्थिति उत्पन्न हो जहाँ “जितना अधिक आप छेड़छाड़ करेंगे, उतना ही यह और खराब होता जाएगा”। इसका कारण यह नहीं है कि तकनीक बहुत कठिन है, बल्कि यह है कि जानकारी बहुत खंडित है:
आपने कई लेख पढ़े, आपको पता चला कि “कंप्रेस करना”, “WebP/AVIF”, “लेज़ी लोड” ज़रूरी हैं। फिर प्लगइन का परिचय देखा तो उसमें लिखा था “हर महीने 100 credits मुफ्त”, “मुफ्त 20MB”, “हर इमेज 1 credit”, और नतीजा यह कि आप जितना पढ़ते गए, उतना ही ज़्यादा उलझते गए—आख़िर मुफ्त में कितना काफ़ी है? शुल्क कैसे कटता है? क्या आपने “एक ही चीज़” को गलत समझ लिया? और सबसे अहम:क्या यह वास्तव में आपके काम पूरा करने के बाद प्रभावी हुआ?

यह लेख केवल तीन काम करता है:

  1. यहाँ आपके लिए एक क्रियान्वयन योग्य सुझाव है।सड़क-नक्शा(पहले क्या करें, फिर क्या करें)
  2. आप जिन विकल्पों को चुनना चाहते हैं, उन्हें स्पष्ट रूप से समझाएँ (मुफ्त और सशुल्क संस्करणों में वास्तव में क्या अंतर है, और कौन सा किसके लिए उपयुक्त है)।
  3. सबसे आम समस्याओं को पहले ही सूचीबद्ध करें (ताकि आप काम पूरा करने के बाद समाधान खोजने की झंझट से बच सकें)

1. कोर: वर्डप्रेस में डिफ़ॉल्ट रूप से क्या शामिल है, और इसमें क्या शामिल नहीं है।

यदि आप पहले यह नहीं समझते कि वर्डप्रेस कोर ने पहले से क्या लागू किया है, तो दो स्थितियाँ उत्पन्न होने की संभावना है:

  • तत्काल उपलब्ध “नि:शुल्क सुविधाओं” का उपयोग करने के बजाय, हमने पहिया को फिर से आविष्कार करने में समय और पैसा बर्बाद किया है।
  • मुझे लगा था कि वर्डप्रेस “स्वचालित रूप से सभी पुरानी छवियों को WebP/AVIF में बदल देगा”, लेकिन पता चला कि ऐसा नहीं होता।

WordPress कोर में पहले से ही ये आवश्यक क्षमताएँ शामिल हैं:

  • अनुकूलनीय छवियाँ (srcset/sizes)WordPress 4.4 से आगे, कोर छवियाँ आउटपुट करेगा। srcset 与 sizesऔर अपलोड के दौरान उत्पन्न बहु-आकार की छवियों का उपयोग करें, जिससे ब्राउज़र स्क्रीन की स्थितियों के आधार पर लोडिंग के लिए अधिक उपयुक्त संसाधनों का चयन कर सके।
  • नेटिव लेज़ी लोडिंगWordPress 5.5 और बाद के संस्करण, HTML मानकों का उपयोग करते हुए, डिफ़ॉल्ट रूप से छवियों के लिए नेटिव लेज़ी लोडिंग को सक्षम करते हैं। loading संपत्ति कार्यान्वयन।
  • WebP फ़ाइलों को अपलोड करने का समर्थन करता है।WordPress 5.8 से आगे, WebP फ़ाइलों को JPEG/PNG की तरह ही अपलोड करने और उपयोग करने की अनुमति देता है (बशर्ते होस्टिंग वातावरण WebP का समर्थन करता हो)।
  • AVIF अपलोड का समर्थन करता हैWordPress 6.5 और उसके बाद से AVIF फ़ाइलों को JPEG/PNG की तरह ही अपलोड करने और उपयोग करने की अनुमति देता है (होस्टिंग वातावरण के समर्थन के अधीन)।

हालाँकि, ध्यान दें:
“अपलोड/उपयोग के लिए समर्थन” ≠ “स्वचालित रूपांतरण/स्वचालित वितरण”
दूसरे शब्दों में: भले ही आप पहले से ही WP 6.5 चला रहे हों, आपकी मीडिया लाइब्रेरी में मौजूद JPG/PNG फ़ाइलें स्वचालित रूप से WebP/AVIF में परिवर्तित नहीं होंगी; न ही आपको स्वचालित रूप से वह पूरी क्षमता प्राप्त होगी कि “ब्राउज़र सपोर्ट के आधार पर AVIF/WebP आउटपुट करें, और असमर्थित ब्राउज़रों के लिए मूल छवि पर स्वचालित रूप से वापस लौटें” – इस कार्यक्षमता को पूरा करने के लिए आमतौर पर प्लगइन्स या अतिरिक्त सेवाओं की आवश्यकता होती है।

2. रोडमैप: 5 चरणों में इमेज ऑप्टिमाइज़ेशन

क्या करना है, क्यों करना है, संतोषजनक प्रदर्शन क्या है, और सामान्य त्रुटियाँ क्या हैं।

2.1 पहले आयामों को सही करें (सबसे आसानी से अनदेखा किया जाने वाला, फिर भी सबसे अधिक लाभ देने वाला)

कई साइटें धीमी इसलिए नहीं होतीं कि संपीड़न लागू नहीं किया गया है, बल्किडिस्प्ले क्षेत्र से काफी बड़ी एक छवि डाउनलोड की।：
उदाहरण के लिए, यदि कोई पेज वास्तव में केवल 900px चौड़ा दिखता है, फिर भी आप विज़िटर से पूरी 3000px इमेज डाउनलोड करवाते हैं, तो ब्राउज़र उसे डिस्प्ले के लिए स्केल करने से पहले पूरी तरह डाउनलोड कर लेगा। इससे बैंडविड्थ की बर्बादी होती है, डीकोडिंग का समय बढ़ जाता है, और पहली स्क्रीन लोड होने में देरी होती है।

वर्डप्रेस 4.4 और उससे ऊपरप्रतिक्रियाशील छवि तंत्र（srcset/sizes) ठीक इसी समस्या को संबोधित करने के लिए।

पास मार्क क्या होता है:

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

सबसे आम जाल:

  • कुछ थीम/बिल्डर छवियों को CSS बैकग्राउंड इमेज के रूप में मानकर या अनुकूलित आउटपुट विधियों का उपयोग करके इसे बाईपास कर सकते हैं। srcsetजिसके परिणामस्वरूप बड़ी छवियों का लगातार डाउनलोड होना
  • बाहरी इमेज होस्टिंग सेवाओं या तृतीय-पक्ष इमेज ब्लॉकों का उपयोग करके, आप मीडिया लाइब्रेरी द्वारा उत्पन्न बहु-आकार प्रणाली को बायपास कर सकते हैं।

2.2 संपीड़न (KB का आकार कम करें, लेकिन गुणवत्ता से समझौता न करें)

कंप्रेशन का सार “जितना छोटा उतना बेहतर” नहीं है, बल्कि “नग्न आंखों से मुश्किल से ही दिखाई देने वाला अंतर, फिर भी आयतन में महत्वपूर्ण कमी” है।

नियम इस प्रकार हैं:

  • फोटोग्राफ/वास्तविक शॉट्स (पोर्ट्रेट, उत्पाद, परिदृश्य)लोसी कंप्रेशन को प्राथमिकता दें (लाभ को अधिकतम करता है)
  • विस्तृत पाठ वाला स्क्रीनशॉट/छविटेक्स्ट धुंधला न दिखे, इसके लिए संपीड़न अधिक रूढ़िवादी होना चाहिए।
  • लोगो/आइकनSVG को प्राथमिकता दें या लॉसलेस कंप्रेशन चुनें (लॉसी कंप्रेशन आसानी से किनारों को धुंधला कर देता है)

पास मार्क क्या होता है:

  • अधिकांश पृष्ठों पर छवियों का आकार काफी कम हो गया है।
  • कोई ध्यान देने योग्य शोर, धुंधले किनारे, रंगों में पट्टीदारता, या टेक्स्ट का धुंधलापन नहीं।

2.3 WebP / AVIF (फ़ॉर्मेट नीति: समान स्पष्टता के लिए छोटी फ़ाइल साइज़)

WordPress अब अपलोडिंग का समर्थन करता है। WebP (5.8) और AVIF (6.5)。
हालाँकि, “अगली पीढ़ी के प्रारूप” को वास्तव में व्यावहारिक रूप से उपयोग में लाने के लिए, आमतौर पर दो मामलों को संबोधित करने की आवश्यकता होती है:

  1. ऐतिहासिक मीडिया अभिलेखागारों को बैच में कैसे रूपांतरित करें(अन्यथा, आपने केवल “भविष्य में अपलोड की जाने वाली नई छवियाँ” का अनुकूलन किया है)
  2. क्या एक प्रतिलिपि बनाई जानी चाहिए, या मूल छवि को प्रतिस्थापित किया जाना चाहिए?(यह एक महत्वपूर्ण मोड़ है; हम बाद में Plus WebP के “मूल छवियों की प्रतिस्थापन और हटाने” पर ध्यान केंद्रित करेंगे।)

अनुशंसित लेखन शैली:

  • WebP: सामान्यतः डिफ़ॉल्ट पसंदीदा विकल्प (अधिक स्थिर संगतता प्रदान करता है)
  • AVIF: संपीड़न में एक और कदम, जो बड़ी छवियों/पहली स्क्रीन के बैनरों/एल्बम की तस्वीरों के लिए उपयुक्त है (हालांकि और भी...पर्यावरणीय सहायता पर निर्भर）

2.4 लेज़ी लोडिंग का सही तरीके से उपयोग किया जाना चाहिए (एक समान दृष्टिकोण से बचें)

वर्डप्रेस 5.5 सेडिफ़ॉल्ट रूप से आलसी लोडिंगछवि।
यह प्रारंभिक रेंडरिंग के दौरान बैंडविड्थ की खपत को कम करता है:

  • लेज़ी लोडिंग “ऑफ-स्क्रीन संसाधनों” के लिए उपयुक्त है।”
  • पहली स्क्रीन पर सबसे महत्वपूर्ण छवि (अक्सर पहली स्क्रीन पर प्राथमिक छवि) अक्सर विलंबित लोडिंग के लिए उपयुक्त नहीं होती।

2.5 वितरण परत: CDN / छवि CDN

कंप्रेसन, आकार और प्रारूप “छोटी, अधिक उपयुक्त फ़ाइलों” की आवश्यकता को पूरा करते हैं।
लेकिन अगर तस्वीरें हमेशा मूल साइट से दूरस्थ रूप से लानी पड़ें, तो नेटवर्क विलंबता अनुभव को स्पष्ट रूप से प्रभावित करेगी। ऐसे में “डिलीवरी लेयर” समाधान (CDN/तस्वीर CDN) की जरूरत होती है।

दो सामान्य दृष्टिकोण:

  • Cloudflare पॉलिश：क्लाउडफ्लेयर दस्तावेज़ीकरणयह लेख पोलिश के संपीड़न तरीकों (नो-लॉस/लॉस/WebP) का परिचय देता है और उनका उपयोग करने का उल्लेख करता है। format=auto WebP/AVIF प्रारूपों का उपयोग अनुमत है।
  • जेटपैक साइट एक्सेलेरेटर：जेटपैक दस्तावेज़ीकरणयह छवियों को अनुकूलित करेगा और उन्हें अपने नेटवर्क के माध्यम से स्थिर संसाधनों के साथ वितरित करेगा।

छवि अनुकूलन आकार कम करने और उपयुक्तता सुनिश्चित करने के लिए जिम्मेदार है।CDN: और करीब से और अधिक विश्वसनीय रूप से सेवा प्रदान करना

3. चयन: केवल दो मुख्य मार्गों पर ही आगे बढ़ा जाना है।

छवि अनुकूलन में सबसे आम जाल “प्लगइन्स इंस्टॉल न करना” नहीं, बल्कि बहुत अधिक प्लगइन्स इंस्टॉल करना है, जिससे अनावश्यक प्रोसेसिंग होती है:
A संपीड़ित कर रहा है, B भी संपीड़ित कर रहा है; A WebP/AVIF में रूपांतरित कर रहा है, B भी रूपांतरित कर रहा है; A URLs बदल रहा है, B उन्हें फिर से लिख रहा है— अंत में, आप खुद भी यह नहीं समझा पाते कि साइट पर क्या हो रहा है।

नियम:

आगे बढ़ने का केवल एक ही रास्ता है: या तो पूरी तरह से मुफ्त स्थानीय स्टोरेज, या चुनने के लिए तीन विकल्पों के साथ क्लाउड कंप्रेशन।

  • मार्ग A (पूरी तरह से मुफ्त स्थानीय):इसके अलावा WebP या AVIF + EWWW इमेज ऑप्टिमाइज़र(या उनमें से केवल एक चुनें)
  • मार्ग बी (तीन क्लाउड संपीड़न विकल्पों में से एक चुनें):शॉर्टपिक्सल / इमेजाइफ़ी / टाइनपीएनजी

3.1 मार्ग A: पूरी तरह से मुफ्त स्थानीय (साथ में WebP या AVIF या EWWW)

इस मार्ग की प्रमुख विशेषताएँ हैं:

  • आप उन तृतीय-पक्ष संपीड़न सेवाओं पर निर्भर नहीं करते जो मासिक कोटा या प्रति-फ़ाइल आधार पर संचालित होती हैं (हालाँकि कुछ सुविधाएँ वैकल्पिक सेवाएँ प्रदान कर सकती हैं)।
  • बदले में, बैच प्रोसेसिंग CPU/IO के संदर्भ में सर्वर पर अधिक भार डाल सकती है, जिससे आपको “रणनीति और जोखिम” पर अधिक ध्यान देना पड़ता है।”

3.1.1 साथ ही WebP या AVIFमुख्य अवधारणा “जनरेशन/रिप्लेसमेंट” है, जो पारंपरिक “कंप्रेशन टूल” नहीं है।”

  • पूर्ण-रिज़ॉल्यूशन छवियाँ उत्पन्न करते समय:मूल इमेज फ़ाइल आईडी वेबपी/एवीआईएफ फ़ाइल द्वारा ओवरराइट कर दी जाएगी, मूल फ़ाइल हटा दी जाएगी, और सामग्री के भीतर का URL भी बदल दिया जाएगा।。
  • यह प्लगइन WP-CLI कमांड्स प्रदान करता है और सलाह देता है: जब बड़ी संख्या में फ़ाइलों से निपटना हो, तो WP-CLI अधिक विश्वसनीय साबित होता है।

इसका मतलब है: यह आपके लिए चुपचाप WebP उत्पन्न नहीं करता, बल्कि यह एक बार ही हो सकता है।संपत्ति स्थानांतरण(विशेष रूप से जब आप “मूल छवि को प्रतिस्थापित करें और हटाएँ” विकल्प सक्षम करते हैं)।

दोनों मोड के बीच का अंतर

मोड 1: मूल छवि को बनाए रखें + WebP/AVIF प्रति उत्पन्न करें (अधिक स्थिर)

  • लाभ: अनुकूलता संबंधी समस्याओं की स्थिति में वापस करना आसान।
  • लागत: डिस्क स्थान का उपयोग बढ़ जाएगा (मूल छवि + नया प्रारूप + विभिन्न आकार के थंबनेल)

मोड 2: मूल छवि को प्रतिस्थापित और हटाएं (अधिक आक्रामक)

  • लाभ: डिस्क इतनी तेजी से नहीं बढ़तीं; आंतरिक संदर्भ स्वचालित रूप से नए प्रारूप में परिवर्तित हो जाते हैं।
  • जोखिम: जब संपत्तियों और संदर्भों को एक साथ संशोधित किया जाता है, तो संगतता समस्याओं का निवारण काफी महंगा हो जाता है (विशेषकर जब बाहरी सिस्टम या थीम लॉजिक मूल फ़ाइल नामों/पथों/स्वरूपों पर निर्भर करते हैं)।

सिफ़ारिश

“मूल छवि को प्रतिस्थापित और हटाएँ” चुनने से पहले, पहले एक छोटे पैमाने का परीक्षण करें और सुनिश्चित करें कि बैकअप उपलब्ध हैं; तुरंत पूरे डेटाबेस प्रतिस्थापन के साथ आगे न बढ़ें।

WebP या AVIF के साथ आम समस्याएँ

  1. पूर्ण डेटाबेस प्रतिस्थापन के बाद, कुछ पेज इमेज गलत तरीके से प्रदर्शित हो रही हैं।
    कारण आमतौर पर यह नहीं होता कि “छवि दूषित” है, बल्कि यह होता है कि श्रृंखला के किसी लिंक – जैसे URL प्रतिस्थापन, कैशिंग, या थंबनेल रणनीतियाँ – को ठीक से संरेखित नहीं किया गया है।
  2. जितनी अधिक थंबनेल होंगी, परिवर्तनों का दायरा उतना ही व्यापक होगा।
    WordPress में एक छवि अपलोड करने पर कई आकार उत्पन्न होते हैं; थीम या प्लगइन्स अतिरिक्त आयाम जोड़ सकते हैं। पूर्ण प्रतिस्थापन का अर्थ है कि आप फ़ाइलों के एक बड़े संग्रह में संशोधन कर सकते हैं।
  3. केवल फॉर्मेट माइग्रेशन करने से सबसे कम संभव वॉल्यूम की गारंटी नहीं मिलती।
    WebP/AVIF फ़ाइलें आम तौर पर छोटी होती हैं, लेकिन “आकार रणनीति” और “संपीड़न रणनीति” महत्वपूर्ण बनी रहती हैं। Plus WebP को “तेज़ लोडिंग के लिए एक-क्लिक समाधान” न समझें।

3.1.2 ईवव इमेज ऑप्टिमाइज़रनि:शुल्क स्थानीय संपीड़न समाधान

EWWW प्लगइन पेज की स्थिति बहुत स्पष्ट है:

  • यह आपके सर्वर पर अनुकूलन के लिए उपकरणों का एक समूह (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp आदि) का उपयोग कर सकता है।
  • यदि आपको उच्च संपीड़न की आवश्यकता है या आप CPU की बचत करना चाहते हैं, तो आप CPU का उपभोग करने वाली प्रक्रिया को अपने सर्वर पर भी ऑफलोड कर सकते हैं (वैकल्पिक)।

रूट A में EWWW को क्या भूमिका निभानी चाहिए?

यदि आप “फ़ॉर्मेट माइग्रेशन/रिप्लेसमेंट रणनीति” के लिए Plus WebP का उपयोग कर रहे हैं, तो EWWW इस कार्य को करने के लिए अधिक उपयुक्त है:

  • संपीड़न और आयतन अनुकूलन(विशेष रूप से JPG/PNG फ़ाइलों जैसे कच्चे संसाधनों के आकार में कमी)
  • ऐतिहासिक मीडिया लाइब्रेरियों का बैच अनुकूलन(यूआरएल प्रतिस्थापन के बजाय “वॉल्यूम रिडक्शन” का लक्ष्य)

कृपया ध्यान दें

प्लस वेबपी 和उफ़! सभी को AVIF या WebP में परिवर्तित किया जा सकता है।
केवल एक को ही स्थापित करना उचित है, क्योंकि दोनों को स्थापित करने से संघर्ष हो सकते हैं।

EWWW के क्लासिक जाल

  1. बैच अनुकूलन के दौरान सर्वर लोड बढ़ जाता है।
    यह इसलिए है क्योंकि स्थानीय कंप्रेशन CPU/IO की खपत करता है। समाधान इसे “इस्तेमाल करना बंद करना” नहीं है, बल्कि “ऑफ-पीक घंटों के दौरान बैचों में प्रोसेस करना और जहाँ आवश्यक हो ऑफलोडिंग या क्लाउड समाधानों का विकल्प चुनना” है।
  2. “WebP जेनरेट करने का मतलब जरूरी नहीं कि फ्रंटएंड WebP सर्व कर रहा है।
    कई प्लगइन्स इस भ्रांति का शिकार हैं: जनरेशन एक बात है, डिलीवरी रणनीति (पुनर्लेखन, इमेज टैग्स, कैश हिट्स आदि) बिलकुल दूसरी।
  3. अन्य प्लगइन्स की समान कार्यक्षमता की नकल करना
    यदि आप मार्ग A लेते हैं, तो ShortPixel/Imagify/TinyPNG जैसी क्लाउड कम्प्रेशन सेवाओं को एक साथ इस्तेमाल करने से बचें; यदि आप मार्ग B लेते हैं, तो Plus WebP प्रतिस्थापन लॉजिक को अक्षम करें। मुख्य सिद्धांत:एक ही कार्रवाई पर कायम रहें।

3.2 मार्ग बी: तीन क्लाउड कम्प्रेशन सेवाओं (ShortPixel / Imagify / TinyPNG) में से एक चुनें।

यह मार्ग उन लोगों के लिए उपयुक्त है जो सर्वर संसाधनों को संरक्षित करना चाहते हैं, बैच प्रोसेसिंग के लिए अधिक परेशानी-मुक्त दृष्टिकोण पसंद करते हैं, और पे-एज़-यू-गो मूल्य निर्धारण के साथ सहज हैं।
हालाँकि, क्लाउड कंप्रेशन के संबंध में सबसे आम गलतफहमी का बिंदु है:मुफ्त भत्ता केवल “मुफ्त शीट्स” की बात नहीं है।थंबनेल के आकारों की संख्या, WebP/AVIF फॉर्मेट बनाए जाते हैं या नहीं, और क्या दोबारा कंप्रेसिंग की जाती है, ये सभी संसाधन खपत को काफी प्रभावित करेंगे।

नीचे हम समझाएंगे: मुफ्त/भुगतान किए गए स्तर कैसे काम करते हैं, कोटा कैसे घटाए जाते हैं, सबसे आम समस्याओं से कैसे बचें, और कौन सी साइट प्रकार सबसे उपयुक्त हैं।

3.2.1 शॉर्टपिक्सलप्रति माह 100 मुफ्त क्रेडिट्स, लेकिन थंबनेल और WebP/AVIF बड़े आकार के लिए क्रेडिट्स खर्च होंगे।

मुफ्त/भुगतान वाले का क्या मामला है?

ShortPixel प्लगइन का विवरण स्पष्ट रूप से कहता है:

  • प्रति माह 100 मुफ़्त क्रेडिट्स
  • इसके अलावा “अतिरिक्त असीमित मासिक क्रेडिट” भी हैं (प्लगइन पेज पर संबंधित मूल्य निर्धारण जानकारी दी गई है)।
  • साथ ही “अवधि-मुक्त एक-बार का क्रेडिट पैकेज” भी प्रदान करता है (प्रारंभिक मूल्य निर्धारण जानकारी सहित)

नोट:

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

ShortPixel का आधिकारिक ज्ञान आधार “एक-बार के पैकेज बनाम असीमित मासिक योजनाओं” की तुलना को भी संबोधित करता है।स्पष्ट व्याख्याअनलिमिटेड मंथली प्लान का बिल मासिक (या वार्षिक) रूप में जारी किया जाता है, जिसमें असीमित क्रेडिट्स और एक निश्चित CDN कोटा शामिल है; एकमुश्त क्रेडिट्स की समाप्ति नहीं होती, जिससे आवश्यकता पड़ने पर आपको उपयोग पर अधिक नियंत्रण मिलता है।

सिफ़ारिश

  • पुरानी साइट इन्वेंटरी निकासी: एकमुश्त पैकेजों को प्राथमिकता दें
  • निरंतर अपडेट: मासिक/असीमित प्लान के लिए अधिक उपयुक्त (यदि आप क्रेडिट्स गिनना नहीं चाहते हैं, तो असीमित चुनें)

सबसे महत्वपूर्ण बिंदु: ShortPixel क्रेडिट्स की गणना कैसे की जाती है?

ShortPixel आधिकारिक दस्तावेज़ीकरण केबी ने इसे बहुत स्पष्ट रूप से कहा:

  • WordPress में एक छवि अपलोड करने पर कई थंबनेल बनते हैं;
  • प्रत्येक थंबनेल अनुकूलन एक क्रेडिट के रूप में गिना जाता है।；
  • यदि आप WebP या AVIF उत्पन्न करना चुनते हैं,मूल छवि और उसके थंबनेल के प्रत्येक WebP/AVIF संस्करण के लिए एक अतिरिक्त क्रेडिट खर्च होगा।；
  • आप क्रेडिट की खपत कम करने के लिए कुछ थंबनेलों को अनुकूलन से बाहर कर सकते हैं।

श्रेय उदाहरण：

मान लीजिए आप एक छवि अपलोड करते हैं, और थीम/प्लगइन आठ थंबनेल बनाता है:

  • मूल छवि + थंबनेल का अनुकूलन केवल: 1 (मूल छवि) + 8 (थंबनेल) = 9 क्रेडिट्स
  • यदि WebP/AVIF जेनरेशन भी आवश्यक है: उपरोक्त 9 प्रारूपों में से प्रत्येक के लिए एक अगली पीढ़ी का संस्करण जोड़ें → फिर अतिरिक्त 9 क्रेडिट जोड़ें।
    दूसरे शब्दों में, जिसे आप “एक इमेज” मान सकते हैं, वह वास्तव में लगभग “दहाई अंकों के क्रेडिट” खर्च कर सकता है।

अतः:“मुफ्त 100 क्रेडिट्स” का मतलब “मुफ्त 100 छवियाँ” नहीं है।

ShortPixel की सबसे आम समस्याएँ

  1. मुफ्त 100 क्रेडिट्स जल्दी खत्म हो जाते हैं
    मूल कारण: WebP/AVIF जेनरेशन के लिए कई थंबनेल + अतिरिक्त क्रेडिट्स की आवश्यकता।
    सिफ़ारिश：
  • सबसे पहले साइट पर थंबनेल की संख्या का आकलन करें।
  • अनावश्यक थंबनेल आकारों को हटाएँ (केवल उन आकारों का अनुकूलन करें जो वास्तव में उपयोग किए जाएँगे)
  • बatches में चलाने से पहले संपीड़न रणनीति निर्धारित करें, ताकि संसाधन खपत करने वाले दोहराए गए परीक्षण-त्रुटि प्रयासों से बचा जा सके।
  1. एक साथ अन्य प्रारूप रूपांतरण प्लगइन्स ओवरले करें
    यदि आप Plus WebP प्रतिस्थापन सक्षम करते हैं और साथ ही ShortPixel को अगली पीढ़ी के टैग उत्पन्न/स्थापित करने का निर्देश देते हैं, तो तर्क परतबद्ध हो जाता है, जिससे समस्या निवारण अधिक कठिन हो जाता है। Route B में ShortPixel इसे स्वतंत्र रूप से संभालता है।
  2. यह मान लेना कि केवल इसे इंस्टॉल करने से यह गारंटी मिल जाती है कि “फ्रंटएंड WebP/AVIF सर्व कर रहा है”।”
    ShortPixel प्लगइन पृष्ठयह WebP/AVIF प्रारूपों को रूपांतरित कर सकता है और अगली पीढ़ी की छवियों को फ्रंट-एंड पेजों में एकीकृत कर सकता है (उदाहरण के लिए, टैग कार्यान्वयन के माध्यम से)।
    हालाँकि, एक बार पूरा हो जाने के बाद भी, परिणामों का सत्यापन करना आवश्यक है।

3.2.2 इमेजिफाय: प्रति माह 20MB मुफ्त; कोटा “मूल छवि आकार + थंबनेल की संख्या” के आधार पर घटाया जाता है; पुनः संपीड़न से कटौती दोहरी हो जाएगी

नि:शुल्क भत्ता और स्थिति निर्धारण

इमेजिफाय आधिकारिक मूल्य निर्धारण पृष्ठयह स्पष्ट रूप से लिखा गया है:मुफ्त खातों में 20MB का मासिक कोटा होता है।。
इसके प्लगइन पेज पर भी स्पष्ट रूप से लिखा है कि यह WebP/AVIF फ़ाइलों को संपीड़ित, आकार बदल और रूपांतरित कर सकता है।

कोटा कैसे घटाए जाते हैं?

इमेजिफाय आधिकारिक दस्तावेज़ीकरण “कोटा उपयोग की गणना कैसे की जाती है?” कटौती तंत्र को स्पष्ट रूप से समझाता है:

  • थंबनेलों की संख्या खपत को प्रभावित करेगी।उदाहरण के लिए, यदि आपके पास 10 थंबनेल आकार हैं, तो एक छवि का अनुकूलन करना 11 छवियों का अनुकूलन बन जाता है (मूल छवि और 10 थंबनेल), जो सभी कोटा की खपत में योगदान करते हैं।
  • मूल फ़ाइल आकार के आधार पर कोटा घटाएँउदाहरण के लिए, यदि आप Imagify को 100KB की छवि भेजते हैं, तो आपके कोटा से 100KB घटा दिया जाएगा।
  • कंप्रेसन स्तर बदलने और पुनः अनुकूलन करने से कोटा फिर से खर्च होगा।。
  • एक ही API कुंजी कई साइटों पर उपयोग की जा सकती है, लेकिन कोटा इन साइटों के बीच साझा किए जाएंगे।

यह इमैजिफाई का “मुख्य समझने का दृष्टिकोण” है:
यह एक डेटा पैकेज की तरह है: आप जो कुछ भी भेजते हैं, वह उतना ही डेटा घटाता है; जितने अधिक थंबनेल, उतना ही अधिक डेटा घटाता है; बार-बार भारी अपलोड करने पर बार-बार डेटा कटौती होगी।

समझने में आसान इमैजिफाई कोटा उदाहरण

मान लीजिए आप 800KB की एक मूल छवि अपलोड करते हैं, और साइट 8 थंबनेल बनाती है।

  • जब आप Imagify के साथ ऑप्टिमाइज़ करते हैं, तो मूल छवि और आठ थंबनेल दोनों शामिल होते हैं (यदि आप “सभी को ऑप्टिमाइज़ करें” चुनते हैं)। इसका मतलब है कि यह एक ही ऑपरेशन इन सभी फ़ाइलों के संयुक्त कुल मूल आकार के लगभग बराबर कोटा उपभोग करेगा।
    यही वजह है कि कुछ साइटों को लगता है कि “20MB बहुत जल्दी खत्म हो जाता है”: ऐसा नहीं है कि Imagify कम पड़ रहा है, बल्कि हर बार अपलोड की जाने वाली आपकी तस्वीरें बहुत बड़ी हैं, थंबनेल बहुत ज़्यादा हैं, और संभव है कि आप बार-बार अलग-अलग संपीड़न स्तर भी आज़मा रहे हों।

Imagify के साथ आम समस्याएँ

  1. मुफ़्त 20MB “पूरी साइट के इतिहास की सफ़ाई” के लिए पर्याप्त नहीं है”
    20MB सामान्यतः परीक्षण और छोटे अपडेट के लिए अधिक उपयुक्त है; यदि आपकी मीडिया लाइब्रेरी पहले से ही बड़ी है, तो एक साथ सब कुछ साफ़ करने के लिए संभवतः अपग्रेड की आवश्यकता होगी।
  2. कंप्रेसन स्तर को बार-बार समायोजित करने से बार-बार कोटा की खपत होती है।
    Imagify स्पष्ट रूप से कहता हैपुनः अनुकूलन फिर से कोटा खर्च कर देगा।
    इस पृष्ठ पर रणनीति को स्पष्ट रूप से रेखांकित करना उचित है:
  • सबसे पहले, संपीड़न स्तर और दृश्य गुणवत्ता निर्धारित करने के लिए कुछ ही छवियों का उपयोग करें।
  • बैचों में चलाने से पहले रणनीति को अंतिम रूप दें।
    पूरे डेटाबेस में बार-बार परीक्षण-त्रुटि परीक्षण से बचें।
  1. कई साइटों पर साझा की गई API कुंजियाँ कोटा रहस्यमय ढंग से घट जाने का कारण बनती हैं।“
    यदि आप एक ही API कुंजी का उपयोग कई साइटों पर करते हैं, तो कोटा साझा किए जाएंगे।
    इसलिए, टीम/मल्टी-साइट परिदृश्यों में, यह स्पष्ट रूप से परिभाषित करना उचित है कि कौन सी साइटें संसाधन साझा करती हैं और कौन सी स्वतंत्र रूप से काम करती हैं, जिससे बजटीय अनियंत्रण को रोका जा सके।

3.2.3 टिनीपीएनजी(छोटी संपीड़ित छवियाँ): प्रति माह 500 मुफ़्त क्रेडिट; WebP/AVIF में रूपांतरण पर “प्रति आकार 1 अतिरिक्त क्रेडिट” लगता है।”

मुफ्त भत्ता और इसका बिलिंग दृष्टिकोण

TinyPNG वर्डप्रेस प्लगइन का पेज बहुत स्पष्टता के साथ लिखा गया है:

  • हर महीने 500 क्रेडिट मुफ्त
  • एक “मानक वर्डप्रेस इंस्टॉलेशन” में, इसे लगभग संपीड़ित किया जा सकता है। लगभग 100 छवियाँ प्रति माह
  • हालाँकि, यदि AVIF या WebP रूपांतरण सक्षम है:प्रत्येक छवि आकार पर अतिरिक्त क्रेडिट शुल्क लगेगा।इसलिए, इसे शायद केवल संपीड़ित और रूपांतरित ही किया जा सकता है। लगभग 50 छवियाँ प्रति माह(यह इस बात पर निर्भर करता है कि आपके पास कितने थंबनेल आकार हैं)।

इस बीच, टिनिफाई (TinyPNG/TinyJPG का डेवलपर) ने भी अपनी ओर से घोषणा की है। एपीआई मूल्य निर्धारण पृष्ठनोट: प्रति माह 500 मुफ्त संपीड़न प्राप्त करने के लिए पंजीकरण करें। इस सीमा से अधिक होने पर सफल संपीड़न की संख्या के आधार पर शुल्क लागू होंगे, बिना किसी अनिवार्य सदस्यता के।

TinyPNG का एक वाक्य में सारांश:
यह क्रेडिट्स के आधार पर काम करता है; आपके पास जितने अधिक थंबनेल आकार होंगे और जितने अधिक WebP/AVIF फॉर्मेट्स आप सक्षम करेंगे, आपके क्रेडिट्स उतनी ही तेजी से समाप्त हो जाएंगे।

TinyPNG क्रेडिट्स का एक आसानी से समझ में आने वाला उदाहरण

मान लीजिए कि आपकी साइट प्रत्येक छवि के लिए आठ थंबनेल आकार उत्पन्न करती है:

  • केवल संपीड़न: मूल छवि + 8 थंबनेल → 9 क्रेडिट्स की आवश्यकता है
  • यदि WebP/AVIF रूपांतरण सक्षम है: प्रत्येक आकार पर अतिरिक्त क्रेडिट कटौती लागू होती है → इससे लागत लगभग दोगुनी हो सकती है।
    यह ठीक उसी तरह है जैसा प्लगइन पेज के विवरण में बताया गया है: रूपांतरण सक्षम करने पर मुफ्त कोटा लगभग “प्रति माह 100 छवियाँ” से बदलकर “प्रति माह 50 छवियाँ” हो जाता है।

TinyPNG के साथ आम समस्याएँ

  1. मान लीजिए कि 500 क्रेडिट्स = 500 छवियाँ
    नहीं। यह “इमेज साइज़/वेरिएंट” के आधार पर क्रेडिट्स खर्च करता है। प्लगइन पेज स्पष्ट रूप से कहता है: “कन्वर्ज़न प्रत्येक इमेज साइज़ पर अतिरिक्त 1 क्रेडिट घटाता है”।
  2. थीम/ई-कॉमर्स प्लगइन अत्यधिक आयाम उत्पन्न करता है, जिससे मुफ्त कोटा में काफी कमी हो जाती है।
    आयाम जितने बड़े होंगे, क्रेडिट्स उतनी ही आसानी से बढ़ते और खर्च होते हैं।
  3. परिवर्तन सक्षम करने के बाद, मैंने पाया कि क्रेडिट सीमा अचानक अपर्याप्त हो गई।
    यह कोई बग नहीं है; यह इसकी बिलिंग प्रणाली है।
    रणनीतिक सिफारिशें:
  • यदि मुफ्त स्तर का उपयोग मुख्यतः संपीड़न और वजन कम करने के लिए किया जाता है, तो आप प्रारंभ में केवल संपीड़न पर ही ध्यान केंद्रित कर सकते हैं। एक बार जब आप यह सुनिश्चित कर लें कि साइट की संरचना स्थिर है और नेक्स्ट-जेन वास्तव में आवश्यक है, तब आप रूपांतरण आरंभ कर सकते हैं।

4. संदर्भ-आधारित सिफ़ारिशें: विभिन्न साइट प्रकारों के लिए कैसे चुनें

जबकि सभी वर्डप्रेस, कंटेंट साइट्स, ई-कॉमर्स प्लेटफ़ॉर्म्स, पोर्टफोलियो और मेंबरशिप साइट्स का उपयोग करते हैं, प्रत्येक में छवि-संबंधी विशिष्ट दबाव बिंदु होते हैं।

4.1 सामग्री-केंद्रित वेबसाइटें/ब्लॉग (प्रति लेख कई छवियों और मध्यम अपडेट आवृत्ति वाली)

प्राथमिकता वाली सिफारिशें:

  1. आयामी रणनीति (चरण 1)
  2. संकुचन (चरण 2)
  3. WebP (चरण 3)

एक अधिक उपयुक्त मार्ग:

  • बिना झंझट के विकल्प के लिए: तीन विकल्पों (ShortPixel / Imagify / TinyPNG) में से एक चुनें।
  • नि:शुल्क विकल्प: मार्ग A (Plus WebP + EWWW), लेकिन यह सलाह दी जाती है कि “संरक्षित मोड (मूल छवियों को हटाए बिना)” में जोखिमों का आकलन करके शुरुआत करें।

सामान्य जाल:

4.2 ई-कॉमर्स/उत्पाद साइटें (अनेक थंबनेल, कई छवि प्रकार, स्थिरता सर्वोपरि)

ई-कॉमर्स में सबसे आम समस्याएँ “खराब कंप्रेशन परिणामों” से नहीं, बल्कि “ऑप्टिमाइज़ेशन के बाद गलत आयाम, थंबनेल का गायब होना, और फ्रंट-एंड कंपोनेंट्स द्वारा छवियाँ प्राप्त करने में विफलता” से होती हैं।

प्राथमिकता वाली सिफारिशें:

  1. सावधानीपूर्वक आगे बढ़ें: संपीड़न रणनीतियों के लिए एक रूढ़िवादी दृष्टिकोण अपनाएँ; तुरंत पूरे डेटाबेस को प्रतिस्थापित करने से बचें।
  2. थंबनेल आयामों का आकलन करें: ई-कॉमर्स थीम आमतौर पर अधिक आकार उत्पन्न करते हैं, जिससे कोटा की खपत बढ़ जाती है (विशेष रूप से ShortPixel/TinyPNG के साथ ध्यान देने योग्य)।
  3. पैमाना बढ़ाने से पहले छोटे स्तर पर सत्यापन करें (अत्यंत महत्वपूर्ण)

एक अधिक उपयुक्त मार्ग:

  • रूट बी अक्सर अधिक सरल होता है: ShortPixel, Imagify और TinyPNG सभी बैच प्रोसेसिंग का समर्थन करते हैं। मुख्य बात यह है कि उनके कोटा तंत्र को समझें और लागत का पूर्वानुमान लगाएँ।
  • रूट A भी व्यवहार्य है, लेकिन Plus WebP के “ID ओवरराइड करने/मूल छवियों को हटाने/URL बदलने” के व्यवहार के संबंध में अधिक सावधानी बरतनी चाहिए: यह संपत्ति स्थानांतरण के अंतर्गत आता है, और आरंभ से ही व्यापक प्रतिस्थापन करना अनुचित है।

4.3 पोर्टफोलियो/फोटोग्राफी वेबसाइट (व्यक्तिगत छवि गुणवत्ता, बड़ी फ़ाइल आकार, उच्च दृश्य मानकों के प्रति संवेदनशील)

प्राथमिकता वाली सिफारिशें:

  1. आयाम रणनीति (प्रदर्शन क्षेत्र नियंत्रण)
  2. संपीड़न रणनीति (विवरण खोने की तुलना में थोड़ा बड़ा होना बेहतर है)
  3. WebP/AVIF (बड़ी छवियों के मामलों में महत्वपूर्ण लाभ प्रदान करता है, हालांकि दृश्य गुणवत्ता की पुष्टि आवश्यक है)

एक अधिक उपयुक्त मार्ग:

  • इमेजिफाय“मूल छवि आकार” के आधार पर कोटा आवंटित करने से ऐसी साइटें “बजट नियंत्रण” के लिए अधिक अनुकूल हो जाती हैं (क्योंकि आप मोटे तौर पर जान सकते हैं कि प्रत्येक बड़ी छवि कितनी जगह लेगी), लेकिन उन्हें बार-बार संपीड़ित करने से बचें।
  • शॉर्टपिक्सलयदि थंबनेल आकारों की संख्या सीमित हो, तो क्रेडिट की खपत प्रबंधनीय रहती है; हालांकि, जब अगली पीढ़ी की संपत्तियों के साथ कई आकार उत्पन्न किए जाते हैं, तो क्रेडिट का उपयोग काफी बढ़ जाता है, जिससे पूर्व नियोजन आवश्यक हो जाता है।

5. भत्ता/बिलिंग तुलना: यह समझाना कि क्या मुफ्त भत्ता पर्याप्त है

कौन सा अधिक लागत-कुशल है, और मुफ्त अवधि कितनी देर तक चलेगी?

5.1 तीन शुल्क कटौती मॉडल

  • शॉर्टपिक्सल(श्रेय)क्रेडिट्स की गणना मूल छवियों और थंबनेल्स की संख्या के आधार पर की जाती है; प्रत्येक संबंधित फॉर्मेट के लिए WebP/AVIF संस्करण उत्पन्न करने पर अतिरिक्त क्रेडिट कटौती होगी।
  • इमेजिफाय(MB कोटा)कोटा कटौती मूल फ़ाइल आकार के आधार पर की जाती है; अधिक थंबनेल होने पर कटौती अधिक होती है; पुनः संपीड़न से और कटौती होगी।
  • टिनीपीएनजी(श्रेय): प्रति माह 500 क्रेडिट्स; WebP/AVIF रूपांतरण सक्षम करने पर प्रति छवि आकार अतिरिक्त क्रेडिट्स लगेंगे।

5.2 त्वरित अनुमान विधियाँ

आप इसे निम्नलिखित प्रकार से अनुमानित कर सकते हैं:

  1. कोई भी “मूल छवि जिसे आप अक्सर अपलोड करते हैं” चुनें और उसका अनुमानित आकार जांचें (उदा. 300KB / 1MB / 3MB)
  2. अनुमान लगाएँ कि आपकी साइट कितने थंबनेल आकार उत्पन्न करती है (उदाहरण के लिए, 5 / 10 / 20)
  3. निर्धारित करें कि WebP/AVIF उत्पन्न करना है या नहीं (हाँ/नहीं)

फिर खपत को समझने के लिए निम्नलिखित “मानसिक गणित” का उपयोग करें:

  • शॉर्टपिक्सलप्रत्येक छवि के लिए लगभग (1 + थंबनेल की संख्या) क्रेडिट्स; यदि WebP/AVIF जेनरेट कर रहे हैं, तो लगभग दोगुने (क्योंकि अगली पीढ़ी के संस्करणों के लिए भी क्रेडिट्स की आवश्यकता होती है)।
  • इमेजिफायप्रत्येक छवि लगभग (मूल छवि का आकार + सभी थंबनेलों का कुल आकार) के बराबर कोटा उपभोग करती है; एक अलग संपीड़न स्तर पर पुनः संपीड़ित करने पर अतिरिक्त कोटा कटौती होगी।
  • टिनीपीएनजीमुफ्त: 500 क्रेडिट्स; यदि आपकी साइट प्रत्येक छवि के लिए कई आकार उत्पन्न करती है और कनवर्ज़न सक्षम है, तो मुफ्त कोटा काफी कम हो जाएगा (प्लगइन पेज पर “लगभग 100 छवियाँ प्रति माह” बनाम “लगभग 50 छवियाँ प्रति माह” का एक सहज अनुमान दिया गया है)।

6. जोखिम प्रकटीकरण

जोखिम 1: एक ही कार्य को कई प्लगइन्स द्वारा अनावश्यक रूप से दोहराए जाने से बचें।

यह आपदाओं का सबसे आम स्रोत है।“

  • मार्ग A:इसके अलावा WebP या AVIF + EWWW(दोनों के बीच जिम्मेदारियाँ बाँटें; समान परिवर्तनों और डिलीवरी को एक साथ न करें, या केवल एक ही स्थापित करें।)
  • मार्ग बी: शॉर्टपिक्सल / इमेजाइफ़ी / टाइनपीएनजी तीन में से एक चुनें(कंप्रेशन और अगली पीढ़ी के लिए एक को चुनें)

जोखिम 2: प्लस वेबपी की “ओवरराइड आईडी / मूल छवि हटाएँ / URL बदलें” कार्यक्षमता संपत्ति स्थानांतरण के अंतर्गत आती है।

एक बार फिर, इस बात पर जोर देना आवश्यक है:प्लस वेबपी विवरण में स्पष्ट रूप से कहा गया है कि पूर्ण जेनरेशन के दौरान मूल इमेज आईडी ओवरराइट कर दी जाएगी, मूल फ़ाइल हटा दी जाएगी, और सामग्री URL बदल दिया जाएगा।
यह दर्शाता है कि यह “किसी भी समय वापस लिया जा सकने वाला एक मामूली समायोजन” नहीं है, बल्कि संपत्ति स्तर पर एक संशोधन है।

अनुशंसित रणनीति होनी चाहिए:

  • प्रारंभिक छोटे पैमाने पर परीक्षण (दस से सैकड़ों आइटम)
  • यह पुष्टि करें कि फ्रंट-एंड डिस्प्ले, थंबनेल और कैश अपडेट सही ढंग से काम कर रहे हैं।
  • पूर्ण-डेटाबेस प्रसंस्करण पर विचार करें

जोखिम 3: क्लाउड कंप्रेशन के “मुफ्त आवंटन” का वास्तविक उपयोग चयनित थंबनेल और अगली पीढ़ी के विकल्पों की संख्या पर निर्भर करता है।

  • शॉर्टपिक्सलथंबनेल और अगली पीढ़ी क्रेडिट्स पर महत्वपूर्ण प्रभाव डालेंगे।
  • टिनीपीएनजीWebP/AVIF सक्षम करने पर प्रत्येक छवि आकार के लिए अतिरिक्त क्रेडिट कटौती होगी।
  • इमेजिफायमूल छवि के आकार के अनुसार कटौती करें; जितने अधिक थंबनेल होंगे, कटौती उतनी ही अधिक होगी। भारी संपीड़न से बार-बार कटौती होगी।

जोखिम 4: “जेनरेट किया गया WebP/AVIF” का मतलब “फ्रंटएंड द्वारा WebP/AVIF डिलीवर करना” नहीं है।”

कई उपयोगकर्ताओं ने बताया है कि रूपांतरण के बाद उनकी साइट तेज़ नहीं हुई है, जिसका मूल कारण यह है कि फ्रंटएंड JPG/PNG फ़ाइलें आउटपुट करना जारी रखता है (प्रक्रिया के किसी भी चरण में असंगतता के कारण: कैशिंग, पुनर्लेखन, टैग्स, या ब्राउज़र नेगोशिएशन)।

7. कार्य पूरा करने के बाद मैं कैसे सत्यापित करूँ कि यह प्रभावी हो गया है?

चार बहुत ही सरल सत्यापन बिंदु:

  1. एक ही पेज को दूसरी बार रिफ्रेश करने पर क्या लोडिंग प्रक्रिया अधिक स्थिर और तेज़ होती है?(कैशिंग और अनुकूलन की कथित प्रभावशीलता)
  2. क्या मोबाइल और डेस्कटॉप पर लोड होने पर छवि के आयामों में कोई ध्यान देने योग्य अंतर है?(प्रतिक्रियाशील) स्रोतसेट/आकार क्या यह प्रभावी है
  3. कई छवियों की त्वरित जाँच करें: क्या कोई WebP या AVIF फ़ाइलें/संसाधन मौजूद हैं?क्या साइट वास्तव में इसका उपयोग कर रही है? अगली पीढ़ी）
  4. कई छवियों की अचानक जाँच करें: ज़ूम करके देखें कि क्या वे स्पष्ट रूप से धुंधली दिखती हैं या क्या टेक्स्ट धुंधला दिखता है।(क्या संपीड़न गुणवत्ता अत्यधिक है?)

यदि सभी चार मानदंड पूरे हो गए हैं, तो यह दर्शाता है कि आपने जो मार्ग चुना है वह अब संचालित हो रहा है। अगले चरण पर आगे बढ़ें। CDN “डिलीवरी परत”समग्र स्थिरता बढ़ जाएगी।

8. कार्रवाई के लिए सिफारिशें

  1. सबसे पहले अपना मार्ग चुनें:
  • मैं इसे यथासंभव मुफ्त रखना चाहूंगा।प्लस WebP या AVIF + EWWW (या इनमें से सिर्फ एक इंस्टॉल करें)
  • सर्वर संसाधनों की बचत करें और पे-एज़-यू-गो बिलिंग के साथ अधिक मानसिक शांति का आनंद लें।निम्नलिखित में से एक चुनें: शॉर्टपिक्सल / इमेजाइफ़ी / टाइनपीएनजी
  1. एक छोटे पैमाने का परीक्षण (कुछ दर्जन आइटम) करें
  2. बैच के साथ आगे बढ़ने से पहले सुनिश्चित करें कि सब कुछ ठीक है।
  3. वितरण स्थिरता को बढ़ाने के लिए और सुधार आवश्यक हैं:पढ़ें CDN त्वरण

अक्सर पूछे जाने वाले प्रश्न

1. मुझे कितने प्लगइन्स इंस्टॉल करने चाहिए? क्या मैं वे सभी इंस्टॉल कर सकता हूँ?

एक ही मार्ग पर बने रहने की कोशिश करें।

  • मार्ग A: प्लस वेबपी या एवीआईएफ + EWWW इमेज ऑप्टिमाइज़र (या इनमें से केवल एक इंस्टॉल करें)
  • मार्ग बी: ShortPixel / Imagify / TinyPNG में से एक चुनें
    एक ही साइट में एक साथ कई प्लगइन्स द्वारा “कंप्रेसन/WebP/AVIF में रूपांतरण/URL संशोधन/डिलीवरी पुनर्लेखन” करना अत्यधिक अव्यवस्थित हो जाएगा और इसे ट्रबलशूट करना सबसे कठिन होगा।

2. क्या वर्डप्रेस पहले से ही WebP/AVIF का समर्थन नहीं करता है? क्या मुझे फिर भी एक प्लगइन की आवश्यकता है?

भेद करना आवश्यक है:
“अपलोड/उपयोग के लिए समर्थन” ≠ “स्वचालित रूपांतरण/स्वचालित वितरण”
WordPress 6.5 पुराने JPG/PNG फ़ाइलों को स्वचालित रूप से WebP/AVIF में बैच-कन्वर्ट नहीं करेगा, और न ही यह “ब्राउज़र क्षमताओं के आधार पर फॉलबैक के साथ AVIF/WebP आउटपुट करने” के पूरे वर्कफ़्लो को स्वचालित रूप से संभाल पाएगा। ऐतिहासिक मीडिया लाइब्रेरियों को अपडेट करने के लिए, इस प्रक्रिया को पूरा करने के लिए आमतौर पर प्लगइन्स या सेवाओं की आवश्यकता होती है।

3. इमेज ऑप्टिमाइज़ेशन में, कौन सा कदम निवेश पर सबसे अधिक प्रतिफल प्रदान करता है?

यह आमतौर पर सबसे पहले, आयाम सही रखें (srcset/sizes)。
कई साइटें धीमी गति से चलती हैं, क्योंकि उनमें संपीड़न की कमी नहीं होती, बल्कि पेज केवल 900px दिखाते हैं जबकि उपयोगकर्ताओं को पूरी 3000px इमेज डाउनलोड करनी पड़ती है। संपीड़न किलोबाइट्स बचाता है, लेकिन असंगत आयाम बिना किसी अच्छे कारण के कई गुना अधिक डेटा बर्बाद कर सकते हैं।

4. मैं कैसे पुष्टि कर सकता हूँ कि वर्तमान में लोड हो रही छवि “छोटी वाली” है, न कि हमेशा मूल वाली डाउनलोड हो रही है?

दो घटनाओं का अवलोकन करें:

  • मोबाइल डिवाइस पर पेज खोलने पर, डाउनलोड की गई छवि का आकार डेस्कटॉप की तुलना में स्पष्ट रूप से छोटा होता है।
  • एक ही छवि का संसाधन आकार विभिन्न उपकरणों पर लोड होने पर भिन्न होता है।
    यदि मूल छवियाँ हमेशा डाउनलोड होती हैं, तो इसका एक सामान्य कारण यह है कि थीम/बिल्डर छवि को CSS पृष्ठभूमि छवि या कस्टम आउटपुट के रूप में मानता है, जिससे मीडिया लाइब्रेरी की बहु-आकार क्षमताओं और srcset कार्यक्षमता को बाईपास कर दिया जाता है।

5. क्या “जेनरेटेड WebP/AVIF” का मतलब ज़रूरी तौर पर यह है कि फ्रंटएंड WebP/AVIF आउटपुट कर रहा है?

यह समान नहीं है।
जनरेशन केवल “फ़ाइल लेयर” का पूरा होना है; क्या फ्रंटएंड वास्तव में WebP/AVIF डिलीवर करता है, यह रीराइटिंग, इमेज टैग रणनीति, कैश हिट्स और ब्राउज़र नेगोशिएशन के प्रभावी होने जैसे कारकों पर निर्भर करता है। एक बार जब आप समाप्त कर लें, तो आपको कई छवियों के रिसोर्स प्रकारों की “स्पॉट-चेक” करनी चाहिए।

6. WebP या AVIF के साथ वास्तव में जोखिम क्या है? क्या मैं पूरी लाइब्रेरी पर एक-क्लिक कन्वर्ज़न चला सकता हूँ?

इसका जोखिम बिंदु “संपीड़न” नहीं है, बल्किसंपत्ति प्रवासन स्तर में संशोधन：

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

7. प्लस WebP के दो मोड्स में से कैसे चुनें: मूल छवि बनाए रखें बनाम मूल छवि बदलें और हटाएँ?

सरल शब्दों में:

  • मोड 1: मूल छवि को बनाए रखें + WebP/AVIF प्रति उत्पन्न करें (अधिक स्थिर)रोलबैक के लिए सुविधाजनक, लेकिन डिस्क स्थान बढ़ जाएगा (मूल छवि + नया प्रारूप + विभिन्न आकार के थंबनेल)।
  • मोड 2: मूल छवि को प्रतिस्थापित और हटाएं (अधिक आक्रामक)डिस्क का विस्तार आसानी से संभव नहीं है, लेकिन जब आप एसेट्स और संदर्भों को एक साथ संशोधित करते हैं, तो अनुकूलता संबंधी समस्याओं का निवारण करने की लागत काफी बढ़ जाती है।
    साइट जितनी अधिक जटिल होगी (ई-कॉमर्स/कई प्लगइन्स/विभिन्न आकार), उतना ही अधिक उचित होगा कि एक अधिक स्थिर दृष्टिकोण से शुरुआत की जाए।

8. क्या EWWW इमेज ऑप्टिमाइज़र का मुफ्त लोकल कंप्रेशन पर्याप्त है? क्या यह सर्वर पर ओवरलोड डाल सकता है?

EWWW अधिकतर एक “स्थानीय संपीड़न उपकरण” जैसा है: यह CPU/IO की खपत करता है।
बैच अनुकूलन के दौरान लोड बढ़ना सामान्य है। इसका यह मतलब नहीं कि यह दृष्टिकोण अपर्याप्त है, बल्कि यह कि रणनीति उपयुक्त होनी चाहिए: बैचों में कार्यान्वयन करें, ऑफ-पीक घंटों में, और आवश्यकता पड़ने पर अनलोडिंग या क्लाउड समाधान चुनें।
यदि आप बिना झंझट का समाधान ढूंढ रहे हैं या सर्वर संसाधनों की कमी का सामना कर रहे हैं, तो मार्ग बी अधिक सर्वर-कुशल है।

9. ShortPixel के प्रति माह 100 मुफ्त क्रेडिट्स – ऐसा क्यों लगता है कि ये कुछ ही छवियों के बाद खत्म हो जाते हैं?

क्योंकि क्रेडिट्स “छवियों की संख्या” नहीं हैं।”थंबनेल बनाया जाएगा और अगली पीढ़ी में बड़ा किया जाएगा:

  • मूल छवि + प्रत्येक थंबनेल को क्रेडिट माना जाता है।
  • यदि WebP/AVIF उत्पन्न होता है, तो प्रत्येक संबंधित संस्करण पर अतिरिक्त क्रेडिट की खपत होगी।
    तो आप सोच सकते हैं कि “1 इमेज” वास्तव में लगभग “दोहरे अंकों के क्रेडिट्स” तक खर्च कर सकती है। ShortPixel

10. इमैजिफाई की मुफ्त 201 TP234T प्रति माह इतनी जल्दी क्यों खत्म हो जाती है?

Imagify एक “डेटा पैकेज” के समान है:

  • आपके संदेश के अनुसारमूल फ़ाइल आकारकोटा घटाएँ
  • जितने अधिक थंबनेल, उतनी अधिक खपत।
  • कंप्रेसन स्तर को पुनः अनुकूलित करने के लिए बदलने पर फिर से कोटा खर्च होगा।
  • एक ही API कुंजी कई साइटों पर साझा की जाती है, और कोटा भी उसी के अनुसार साझा किए जाते हैं।
    तो “20MB जल्द ही समाप्त हो जाएगा” संदेश अक्सर बहुत बड़ी छवियों, बहुत अधिक थंबनेल, या बार-बार परीक्षण और त्रुटि के कारण आता है।

11. TinyPNG प्रति माह 500 मुफ्त क्रेडिट प्रदान करता है, तो प्लगइन यह क्यों कहता है कि यह प्रति माह केवल लगभग 100 छवियाँ हैं? और WebP/AVIF सक्षम करने के बाद यह प्रति माह 50 छवियों तक क्यों घट जाता है?

क्योंकि TinyPNG के क्रेडिट्स भी “size/variant” द्वारा बढ़ाए जाते हैं:

  • एक मानक वर्डप्रेस इंस्टॉलेशन आम तौर पर प्रति माह लगभग 100 छवियों को संपीड़ित करता है।
  • AVIF या WebP रूपांतरण सक्षम करें:प्रत्येक छवि आकार पर अतिरिक्त क्रेडिट शुल्क लगेगा।इसलिए, थंबनेल साइज़ों की संख्या के आधार पर, प्रति माह लगभग 50 छवियों को संपीड़ित और परिवर्तित करना ही संभव हो पाएगा।
    इसलिए, 500 क्रेडिट्स ≠ 500 छवियाँ।

12. मेरी साइट पर कितने थंबनेल हैं? इसका इतना महत्वपूर्ण प्रभाव क्यों है?

WordPress में एक छवि अपलोड करने पर कई आकार उत्पन्न होते हैं; थीम/प्लगइन्स (विशेषकर ई-कॉमर्स वाले) अतिरिक्त आयाम जोड़ सकते हैं।
क्लाउड कंप्रेशन क्रेडिट/कोटा आमतौर पर “मूल छवि + थंबनेल संयुक्त” के रूप में गणना किए जाते हैं, इसलिए जितने अधिक थंबनेल होंगे, मुफ्त कोटा उतनी ही जल्दी समाप्त हो जाएगा।

13. क्या लेज़ी लोडिंग हमेशा चीज़ों को तेज़ करती है? कुछ लोग ऐसा क्यों कहते हैं कि यह वास्तव में चीज़ों को धीमा कर देती है?

लेज़ी लोडिंग स्क्रीन से बाहर के संसाधनों के लिए उपयुक्त है।
यदि पहली स्क्रीन पर सबसे महत्वपूर्ण बड़ी छवि को भी विलंबित किया जाता है, तो यह प्रारंभिक लोडिंग अनुभव को धीमा कर सकता है। जबकि वर्डप्रेस 5.5 का डिफ़ॉल्ट लेज़ी लोडिंग आम तौर पर स्वीकार्य है, एक समान दृष्टिकोण अपनाने से बचें।

14. यदि मैं मार्ग A या B लेता हूँ तो मुझे CDN / इमेज CDN की आवश्यकता कब होगी?

कंप्रेसन, आकार और प्रारूप “छोटी, अधिक उपयुक्त फ़ाइलों” की आवश्यकता को पूरा करते हैं।
CDN तेज़ और अधिक विश्वसनीय डिलीवरी सुनिश्चित करता है।。
जब दूरस्थ ओरिजिन सर्वर से छवियाँ प्राप्त करने के कारण महत्वपूर्ण विलंब होता है, तो प्रत्येक छवि में CDN जोड़ने (उदाहरण के लिए Cloudflare Polish / Jetpack Site Accelerator) से आम तौर पर अधिक स्थिर अनुभव मिलता है, जिससे सामग्री पढ़ने में आसान हो जाती है। वर्डप्रेस CDN एक्सेलेरेशन。

15. मैंने इसे करने के बाद यह सत्यापित करने का सबसे सरल तरीका क्या है कि यह वास्तव में काम कर गया है?

सबसे समय-बचत सत्यापन विधि:

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