वेबपेज पर इमेज डिस्प्ले के लिए HTML लेआउट

 वेबपेज पर इमेज डिस्प्ले के लिए HTML लेआउट

ऑप्टिमाइज़्ड इमेज वर्ज़न और बेसिक HTML कोड

जब हम वेबसाइट के लिए इमेज तैयार करते हैं, तो अलग-अलग स्क्रीन साइज़ के लिए कई वर्ज़न बनाना ज़रूरी होता है। इससे छोटी स्क्रीन वाले डिवाइस को बड़ी इमेज डाउनलोड नहीं करनी पड़ती, जिससे पेज की लोडिंग स्पीड बेहतर होती है।^[1][2][3]

चार ऑप्टिमाइज़्ड वर्ज़न की जानकारी

मान लीजिए हमने एक इमेज के चार अलग-अलग साइज़ बनाए हैं, जिनकी चौड़ाई इस प्रकार है:^[4][5]

· 960 पिक्सेल - टैबलेट और छोटे डेस्कटॉप स्क्रीन के लिए

· 480 पिक्सेल - मोबाइल डिवाइस के लिए

· 1440 पिक्सेल - बड़े डेस्कटॉप स्क्रीन के लिए

· 1920 पिक्सेल - फुल HD स्क्रीन के लिए

ये सभी वर्ज़न 16:9 के आस्पेक्ट रेश्यो को फॉलो करते हैं, जो वेब डिज़ाइन में सबसे आम और स्टैंडर्ड रेश्यो है।^[6][5][4]

Different common aspect ratios with their typical uses and descriptions on a yellow background.

पुराने ब्राउज़र के लिए स्टैंडर्ड HTML कोड

सबसे पहले हम बेसिक HTML कोड लिखते हैं, जो पुराने ब्राउज़र में भी अच्छे से काम करता है। इस तरीके में हम सिर्फ <img> टैग का इस्तेमाल करते हैं, जिसे सभी ब्राउज़र सपोर्ट करते हैं।^[7][8][9]

<img
src=”image-960w.jpg”
alt=”एक सुंदर लैंडस्केप फोटो”
width=”960”
height=”540”
>

ज़रूरी एट्रिब्यूट की जानकारी

src एट्रिब्यूट: यह सबसे महत्वपूर्ण एट्रिब्यूट है, जिसमें हम अपना बेसलाइन इमेज का पाथ देते हैं। यह 1x रेज़ोल्यूशन वाली इमेज होती है, जो स्टैंडर्ड स्क्रीन के लिए उपयुक्त है।^{[7][10][11][12]}

alt एट्रिब्यूट: यह इमेज का विवरण देता है, जो स्क्रीन रीडर और सर्च इंजन के लिए बेहद ज़रूरी है। अगर इमेज लोड नहीं होती, तो यह टेक्स्ट दिखाई देता है। हमेशा साफ और सटीक alt टेक्स्ट लिखें।^{[13][14][12][7]}

width और height एट्रिब्यूट: ये एट्रिब्यूट देना बहुत महत्वपूर्ण है। इनसे ब्राउज़र को पहले से पता चल जाता है कि इमेज के लिए कितनी जगह छोड़नी है।^{[10][3][15][7]}

परफॉर्मेंस में सुधार

width और height एट्रिब्यूट देने से पेज की परफॉर्मेंस में काफी सुधार होता है। जब ब्राउज़र को पहले से इमेज का साइज़ पता होता है, तो वह उसके लिए जगह रिज़र्व कर लेता है। इससे पेज लोड होते समय लेआउट शिफ्ट नहीं होता, जो यूज़र एक्सपीरियंस के लिए अच्छा है।^[7][10][3]

आस्पेक्ट रेश्यो की अहमियत

पिक्सेल साइज़ एकदम सटीक न हो तो भी कोई बात नहीं, लेकिन आस्पेक्ट रेश्यो सही होना चाहिए। 16:9 का आस्पेक्ट रेश्यो वेब के लिए सबसे बेहतर माना जाता है। यह HD वीडियो और वाइडस्क्रीन डिस्प्ले के लिए स्टैंडर्ड है।^{[4][6][12][5]}

इस रेश्यो में:

· अगर चौड़ाई 960px है, तो ऊंचाई 540px होगी

सभी वर्ज़न को आसानी से विज़ुअली कंपेयर करने के लिए, हम एक ही HTML स्ट्रक्चर को कॉपी कर सकते हैं:

<!-- 480px वर्ज़न -->
<img src=”image-480w.jpg” alt=”मोबाइल के लिए इमेज” width=”480” height=”270”>

<!-- 960px वर्ज़न (बेसलाइन) -->
<img src=”image-960w.jpg” alt=”टैबलेट के लिए इमेज” width=”960” height=”540”>

<!-- 1440px वर्ज़न -->
<img src=”image-1440w.jpg” alt=”बड़े डेस्कटॉप के लिए इमेज” width=”1440” height=”810”>

<!-- 1920px वर्ज़न -->
<img src=”image-1920w.jpg” alt=”फुल HD के लिए इमेज” width=”1920” height=”1080”>

बेसिक तरीके के फायदे

यह तरीका पुराने ब्राउज़र के साथ पूरी तरह कम्पैटिबल है। सभी ब्राउज़र - Internet Explorer 6 से लेकर आधुनिक ब्राउज़र तक - इस कोड को समझ सकते हैं।^[8][9]

इस बेसिक लेआउट से शुरुआत करके, हम बाद में responsive image techniques जैसे srcset और sizes एट्रिब्यूट का इस्तेमाल करके इसे और बेहतर बना सकते हैं। लेकिन यह स्टैंडर्ड तरीका हर स्थिति में काम करता है और पेज की परफॉर्मेंस को बेहतर बनाता है।^{[1][10][3][12]}

⁂

1.