वेबसाइट छवि जांच
वेबसाइट छवियों का अनुकूलन: प्रकाशन से पहले पृष्ठ जांचें
इस गाइड का उपयोग करें यह देखने के लिए कि ब्राउज़र वास्तव में क्या लोड करता है, प्रत्येक छवि के लिए सही आकार चुनें, HTML ठीक करें, और प्रकाशन से पहले पृष्ठ जांचें।
त्वरित उत्तर
दूसरी फ़ाइल निर्यात करने से पहले लाइव पृष्ठ जांचें
सबसे तेज़ छवि सुधार अक्सर नया कनवर्टर नहीं होता। पहले भारी अनुरोध, गायब आकार, लेज़ी-लोडेड LCP छवि, या पुरानी फ़ाइल की ओर इशारा करने वाला मेटाडेटा खोजें। पृष्ठ से शुरू करें, फिर केवल आवश्यक परिवर्तन निर्यात करें।
पहले जांचें
ब्राउज़र जो डाउनलोड करता है उससे शुरू करें
डिज़ाइन फ़ाइलें और मीडिया फ़ोल्डर उपयोगकर्ताओं को जो मिलता है वह नहीं दिखाते। ब्राउज़र दिखाता है कि कौन सा छवि URL लोड होता है, यह कितना बड़ा दिखता है, क्या पृष्ठ स्थान आरक्षित करता है, और क्या बड़ी फ़ाइल को छोटे की जगह पुनः उपयोग किया गया है।
कौन सा URL लोड होता है?
पृष्ठ खोलें और वास्तविक छवि URL, ट्रांसफर आकार, दिखाए गए आकार, और क्या ब्राउज़र ने अपेक्षित संस्करण चुना, लिखें।
छवि कितनी बड़ी है?
स्रोत फ़ाइल से अनुमान लगाने के बजाय दृश्य क्षेत्र मापें। कार्ड, सामग्री कॉलम, और सोशल छवियां एक ही निर्यात साझा न करें।
क्या यह पहली स्क्रीन में है?
संभावित LCP छवि खोजें, गलती से लेज़ी लोडिंग से बचें, और कम महत्वपूर्ण छवियों को पहली लोड से बाहर रखें।
क्या मेटाडेटा मेल खाता है?
वैकल्पिक पाठ, Open Graph छवि, JSON-LD छवि, आस-पास का पाठ, और फ़ाइल नाम जांचें ताकि पृष्ठ एक स्पष्ट कहानी बताए।
छवि योजना
रूपांतरण से पहले प्रत्येक महत्वपूर्ण छवि की योजना बनाएं
एक छवि योजना इस गाइड को कनवर्टर लेखों से अलग रखती है। यह पूछती है कि प्रत्येक छवि क्षेत्र को क्या चाहिए: आकार, लोडिंग क्रम, फॉलबैक, मेटाडेटा भूमिका, और अंतिम जांच जो साबित करती है कि पृष्ठ सही फ़ाइल का उपयोग करता है।
| छवि क्षेत्र | निर्णय | जोखिम | जांचें |
|---|---|---|---|
| मुख्य छवि | संभावित LCP छवि, सटीक आयाम, लोडिंग क्रम, और फॉलबैक पथ सेट करें। | लेज़ी लोडिंग या बड़े फ़ाइलें पहली उपयोगी छवि को देरी से लोड कर सकती हैं। | पहली स्क्रीन में दिखाए गए आकार, अनुरोध आकार, और लोडिंग व्यवहार की तुलना करें। |
| लेख सामग्री छवि | सामग्री-चौड़ाई संस्करण परिभाषित करें और चौड़ाई व ऊँचाई के साथ स्थान आरक्षित करें। | पृष्ठ एक स्रोत छवि लोड कर सकता है जो पढ़ने वाले कॉलम से बहुत चौड़ी हो। | डेस्कटॉप और मोबाइल चौड़ाई जांचें और चुने गए srcset उम्मीदवार को सत्यापित करें। |
| दोहराई गई कार्ड छवि | सूचियों, हब्स, संबंधित कार्ड, और संग्रह पृष्ठों के लिए छोटे संस्करण बनाएं। | एक पुन: उपयोग की गई लेख छवि सूची पृष्ठ का भार बढ़ा सकती है। | सूची पृष्ठ स्कैन करें और पुष्टि करें कि दोहराए गए कार्ड पूर्ण लेख छवियां लोड नहीं करते। |
| मेटाडेटा छवि | Open Graph और JSON-LD छवियों को योजनाबद्ध फ़ाइलों के रूप में तैयार करें, आकस्मिक अवशेषों के रूप में नहीं। | खोज और साझा करने के पूर्वावलोकन पुरानी, कटे हुए, या असंबंधित छवियां दिखा सकते हैं। | अंतिम URL के लिए रेंडर किए गए मेटा टैग और संरचित डेटा जांचें। |
जब योजना कहती है कि फ़ाइलों को नए संस्करणों की आवश्यकता है, तो अगला कदम चुनने के लिए छवि रूपांतरण गाइड का उपयोग करें। सामान्य WebP कार्य के लिए JPG से WebP गाइड का उपयोग करें और AVIF गाइड केवल बड़ी तस्वीरों के लिए जो अभी भी अधिक बचत की जरूरत है।
छवि आकार
प्रत्येक छवि क्षेत्र के लिए स्पष्ट आकार सेट करें
उत्तरदायी छवियां तभी काम करती हैं जब HTML लेआउट से मेल खाता हो। क्षेत्र मापें, कुछ उपयोगी चौड़ाई चुनें, पहलू अनुपात आरक्षित करें, और केवल इसलिए बड़ी मूल फ़ाइल न भेजें क्योंकि वह पहले से मौजूद है।
सरल जांच: यदि 360 px कार्ड 2400 px फ़ाइल डाउनलोड करता है, तो संपीड़न मुख्य समस्या नहीं है। पृष्ठ को छोटी छवि संस्करण चाहिए या HTML गलत फ़ाइल की ओर इशारा करता है।
लोडिंग क्रम
पहली छवि जानबूझकर लोड करें
पहली स्क्रीन को आकार देने वाली छवि को पृष्ठ के निचले हिस्से की छवियों से अलग नियम की आवश्यकता होती है। संभावित LCP छवि खोजें, गलती से लेज़ी लोडिंग से बचें, और निचली छवियों को आवश्यक होने तक शांत रखें।
- 1
LCP छवि का नाम दें
यदि पहली महत्वपूर्ण छवि Largest Contentful Paint बनने वाली है, तो गलती से इसे लेज़ी लोड न करें।
- 2
निचली छवियों को शांत रखें
पहली व्यूपोर्ट के नीचे की छवियों को सामान्यतः लेज़ी लोडिंग और असिंक्रोनस डिकोडिंग का उपयोग करना चाहिए।
- 3
CSS पृष्ठभूमि जांचें
कटे हुए बैकग्राउंड से भी भारी फ़ाइल डाउनलोड हो सकती है। दृश्य क्षेत्र के लिए सही आकार की फ़ाइल का उपयोग करें।
- 4
दोहराए गए अनुरोध जांचें
जब एक ही बड़ा फ़ाइल दर्जनों बार दोहराई जाती है तो छोटी कार्ड छवि महंगी हो जाती है।
HTML
मापे गए क्षेत्र के लिए उत्तरदायी HTML का उपयोग करें
महत्वपूर्ण छवियों के लिए ब्राउज़र विकल्प स्पष्ट करें। नीचे उदाहरण में चौड़ाई विकल्प, आकार, निश्चित आयाम, और फॉलबैक दिखाए गए हैं। क्षेत्र के आधार पर लोडिंग व्यवहार बदलें, आदत से नहीं।
<picture>
<source
type="image/avif"
srcset="/images/article/product-640.avif 640w,
/images/article/product-960.avif 960w,
/images/article/product-1280.avif 1280w"
sizes="(max-width: 768px) 100vw, 720px" />
<source
type="image/webp"
srcset="/images/article/product-640.webp 640w,
/images/article/product-960.webp 960w,
/images/article/product-1280.webp 1280w"
sizes="(max-width: 768px) 100vw, 720px" />
<img
src="/images/article/product-960.jpg"
alt="डैशबोर्ड स्क्रीनशॉट जो अपलोड प्रवाह दिखाता है"
width="960"
height="540"
loading="lazy"
decoding="async" />
</picture>खोज और साझा करना
छवियां, वैकल्पिक पाठ, और मेटाडेटा एक कहानी बताएं
छवि SEO केवल कीवर्ड जोड़ना नहीं है। दृश्य छवि, आस-पास का पाठ, सहायक वैकल्पिक पाठ, Open Graph टैग, और JSON-LD छवि लिंक एक ही पृष्ठ को स्पष्ट रूप से वर्णित करें। सजावटी छवियां सजावटी ही रहें।
जब जांच कमजोर सामाजिक पूर्वावलोकन पाती है, तो ग्राफ़ छवि मार्गदर्शिका खोलें के साथ जारी रखें। जब स्कीमा और मेटा टैग समस्या हों, तो JSON-LD और पृष्ठ मेटाडेटा को संगत रखने के लिए Blazor मेटाडेटा गाइड का उपयोग करें।
कदम
प्रत्येक पृष्ठ के लिए सरल छवि जांच
- 1
वास्तविक पृष्ठ खोलें
वर्तमान URL से शुरू करें, एसेट फ़ोल्डर से नहीं। जो छवियां वास्तव में लोड होती हैं उन्हें रिकॉर्ड करें।
- 2
छवि योजना बनाएं
प्रत्येक महत्वपूर्ण छवि के लिए लक्ष्य चौड़ाई, पहलू अनुपात, लोडिंग क्रम, फॉलबैक, और मेटाडेटा भूमिका लिखें।
- 3
केवल बदले हुए को कनवर्ट करें
पूरे मीडिया फ़ोल्डर को पुनः निर्यात करने के बजाय केवल उन फ़ाइलों के लिए रूपांतरण उपकरणों का उपयोग करें जिन्हें जांच ने पाया।
- 4
HTML और मेटाडेटा अपडेट करें
srcset, आकार, आयाम, Open Graph, और JSON-LD छवि लिंक तैयार फ़ाइलों की ओर निर्देशित करें।
- 5
ब्राउज़र आउटपुट सत्यापित करें
पृष्ठ, नेटवर्क अनुरोध, सामाजिक मेटाडेटा, संरचित डेटा, और मोबाइल लेआउट जांचें।
- 6
अगली बार के लिए नियम रखें
छवि निर्णयों को दस्तावेज़ित करें ताकि भविष्य के अपडेट अनुमान से शुरू न हों।
टूल टिप
जाने कि किन फ़ाइलों को कनवर्ट करना है, उसके बाद PixelPress का उपयोग करें
जब जांच दिखाती है कि किसी फ़ोल्डर को नए WebP या AVIF फ़ाइलों की आवश्यकता है, तो PixelPress उन्हें स्थानीय रूप से कनवर्ट कर सकता है। मूल अपरिवर्तित रहते हैं, और आउटपुट फ़ोल्डर समीक्षा के लिए आसान होता है।
चेकलिस्ट
प्रकाशन से पहले छवि चेकलिस्ट
लेख, लैंडिंग पृष्ठ, या उत्पाद पृष्ठ लाइव होने से पहले इस सूची का उपयोग करें। यह पृष्ठ समस्याओं को पकड़ता है जिन्हें केवल रूपांतरण से नहीं पकड़ा जा सकता।
अक्सर पूछे जाने वाले सवाल
वेबसाइट छवि जांच क्या है?
वेबसाइट छवि जांच वास्तविक पृष्ठ द्वारा लोड की गई छवियों को देखती है, फिर उन्हें दृश्य लेआउट, लोडिंग क्रम, उत्तरदायी HTML, वैकल्पिक पाठ, मेटाडेटा, और संरचित डेटा लिंक से तुलना करती है।
क्या छवि अनुकूलन WebP या AVIF में कनवर्ट करने के समान है?
नहीं। रूपांतरण केवल एक चरण है। पृष्ठ तब भी धीमा हो सकता है यदि HTML गलत फ़ाइल की ओर इशारा करता है, आकार गायब हैं, LCP छवि लेज़ी लोड होती है, या मेटाडेटा पुराना है।
मैं सबसे अधिक प्रदर्शन प्रभावित करने वाली छवि कैसे खोजूं?
पहली स्क्रीन और नेटवर्क अनुरोधों से शुरू करें। सबसे बड़ी दृश्य छवि, बड़े दोहराए गए कार्ड छवियां, CSS पृष्ठभूमि, और ऐसी फ़ाइलें देखें जिनका दिखाया गया आकार डाउनलोड की गई छवि से बहुत छोटा है।
क्या हर छवि को वैकल्पिक पाठ मिलना चाहिए?
नहीं। उपयोगी छवियों में सहायक वैकल्पिक पाठ होना चाहिए। सजावटी छवियां सामग्री कहानी से बाहर रहें, कीवर्ड कंटेनर न बनें।
PixelPress इस कार्यप्रवाह में कहाँ फिट होता है?
PixelPress तब फिट होता है जब जांच दिखाती है कि किन फ़ाइलों को नए WebP या AVIF आउटपुट की आवश्यकता है। यह स्थानीय बैच रूपांतरण में मदद कर सकता है, जबकि पृष्ठ जांच आकार, लोडिंग क्रम, मेटाडेटा, और अंतिम जांच तय करती है।