उच्च-घनत्व डिस्प्ले के लिए उपयोगी छवि आयाम चुनें

800 CSS पिक्सेल चौड़ाई पर प्रदर्शित एक कार्ड 2x उदाहरण के रूप में 1600 छवि पिक्सेल चौड़ी छवि उम्मीदवार का उपयोग कर सकता है। जब वेबसाइट प्रतिक्रियाशील छवि मार्कअप प्रदान करती है तो ब्राउज़र लेआउट, डिवाइस घनत्व और अन्य स्थितियों के आधार पर एक उपयुक्त स्रोत चुन सकता है। 1600-पिक्सेल फ़ाइल का मतलब यह नहीं है कि कार्ड को पृष्ठ पर 1600 CSS पिक्सेल पर कब्जा करना चाहिए।

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

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

यदि कोई स्रोत केवल 700 पिक्सेल चौड़ा है, तो 1600-पिक्सेल निर्यात लिखने से बड़े मूल का विवरण नहीं बनता है। बेहतर स्रोत का उपयोग करें या छोटे उम्मीदवार को स्वीकार करें। आकार बदलने के बाद लाइट शार्पनिंग की तुलना ऑफ से करें और इच्छित डिस्प्ले आकार पर बारीक बनावट का निरीक्षण करें। पारदर्शी ग्राफिक्स के लिए इसके बजाय PNG का उपयोग करें, क्योंकि यहां वर्तमान WebP निर्यात अपारदर्शी है। मूल डिज़ाइन या फ़ोटोग्राफ़ रखें ताकि आप बाद में अलग-अलग उम्मीदवार बना सकें।

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

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

मान लीजिए कि आपका सबसे चौड़ा कार्ड 400 CSS पिक्सेल है और उस चौड़ाई पर एक चित्रण स्पष्ट रहता है। एक 800-पिक्सेल उम्मीदवार एक संभावित 2x निर्यात है जब स्रोत इसका समर्थन करता है। कार्ड को संकीर्ण लेआउट पर भी जांचें, क्योंकि एक छवि जो पूरे फोन स्क्रीन पर फैली हुई है, उसकी डिस्प्ले चौड़ाई डेस्कटॉप कार्ड से भिन्न हो सकती है। सबसे छोटे उम्मीदवार को बड़ा करने के बजाय प्रत्येक आवश्यक उम्मीदवार के लिए मूल से निर्यात करें। पुष्टि करें कि ब्राउज़र वास्तविक पृष्ठ में कौन सी फ़ाइल चुनता है। वह अंतिम चयन जांच वह है जो स्थानीय आयाम गणना को उन बाइट्स से जोड़ती है जो विज़िटर वास्तव में छवि के लिए प्राप्त करते हैं।