आपकी वेबसाइट अक्सर पहला जगह है जहां क्लाइंट्स, एडिटर्स और ऑडिएंसेस आपका वर्क देखते हैं। बहुत बड़ा इमेजेस साइट स्लो करती हैं; बहुत छोटा या ओवरकंप्रेस्ड इमेजेस सॉफ्ट और चीप लगती हैं; मिसिंग डिस्क्रिप्शन्स सर्च इंजन्स और स्क्रीन रीडर्स इस्तेमाल करने वाले लोगों के लिए इनविजिबल बनाती हैं। यह लेसन समझाता है कि वेबसाइट्स के लिए स्पेसिफिकली फोटो कैसे प्रिपेयर करें: डाइमेंशन्स चुनना, अलग स्क्रीन्स के लिए वर्जन्स प्रिपेयर करना, फॉर्मेट्स पिकिंग, फाइल्स नेमिंग और उपयोगी अल्टरनेटिव टेक्स्ट राइटिंग।
वेब तैयारी में क्या शामिल है
वेबसाइट्स के लिए इमेजेस प्रेपेरिंग मतलब उन्हें राइट डायमेंशन्स, क्वालिटी, फॉर्मेट और कलर स्पेस पर एक्सपोर्टिंग, हेल्पफुल नेम्स और डिस्क्रिप्शन्स के साथ। बेसिक एक्सपोर्ट सेटिंग्स वेब और सोशल मीडिया के लिए एक्सपोर्ट सेटिंग्स में कवर किए गए थे और कलर वेब और डिजिटल डिलीवरी के लिए कलर मैनेजमेंट में। यह लेसन वेबसाइट-स्पेसिफिक डिसीजन्स ऐड करता है; कंप्रेशन और स्पीड इमेज कंप्रेशन और वेब परफॉर्मेंस में कवर की गई है।
डायमेंशन चुनना
- लेआउट मैच करें: अपनी साइट पर हर इमेज के डिस्प्ले होने वाली सबसे बड़ी चौड़ाई ढूंढें (उदाहरण के लिए, फुल-विड्थ बैनर या गैलरी कॉलम)।
- हाई-डेंसिटी स्क्रीन्स के लिए अलाउ करें: कई फोन्स और लैपटॉप्स में लगभग दोगुने पिक्सेल्स वाले स्क्रीन्स होते हैं, इसलिए इमेजेज़ को क्रिस्प दिखने के लिए डिस्प्लेड विड्थ का लगभग दोगुना चाहिए।
- ह्यूज ओरिजिनल्स अपलोड करने से बचें: एक फुल कैमरा फाइल बैंडविड्थ वेस्ट करती है और पेजेस स्लो करती है।
| यूज | डिस्प्लेड चौड़ाई | कॉमन एक्सपोर्ट चौड़ाई |
|---|---|---|
| फुल-विड्थ हीरो इमेज | करीब 1400–1600 px | करीब 2000–2560 px |
| गैलरी या पोर्टफोलियो इमेज | करीब 800–1200 px | करीब 1600–2400 px |
| टेक्स्ट कॉलम में ब्लॉग इमेज | करीब 700–900 px | करीब 1400–1800 px |
| थंबनेल्स | करीब 200–400 px | करीब 400–800 px |
रिस्पॉन्सिव इमेज वर्जन
फोन्स डेस्कटॉप-साइज़्ड इमेजेस डाउनलोड नहीं करने चाहिए। मॉडर्न वेबसाइट्स समान इमेज के कई वर्शन्स डिफरेंट विड्थ्स पर ऑफर कर सकती हैं, और ब्राउज़र सबसे सूटेबल चुनता है। कई वेबसाइट बिल्डर्स और कंटेंट मैनेजमेंट सिस्टम्स सिंगल, वेल-प्रेपर्ड इमेज अपलोड करने पर ये वर्शन्स ऑटोमैटिकली क्रिएट करते हैं।
Tip:अपनी साइट की नीड सबसे बड़े साइज़ पर एक हाई-क्वालिटी इमेज अपलोड करें, और गुड प्लेटफॉर्म को छोटे वर्शन्स जेनरेट करने दें। अगर आप खुद साइट्स बिल्ड करते हैं, अपने डेवलपर से रिस्पॉन्सिव इमेजेस यूज़ करने को कहें।
फॉर्मेट
| फॉर्मेट | स्ट्रेंथ्स | नोट्स |
|---|---|---|
| JPEG | यूनिवर्सल, रिलायबल | फोटो के लिए गुड डिफॉल्ट |
| WebP | सिमिलर क्वालिटी पर JPEG से छोटा फाइल्स; वाइडली सपोर्टेड | कॉमन आधुनिक चुनाव |
| AVIF | अक्सर और भी छोटा फाइल्स; गुड क्वालिटी | आधुनिक ब्राउज़र्स में वाइडली सपोर्टेड; कुछ प्लेटफॉर्म्स अभी कन्वर्ट करते हैं |
| PNG | लॉसलेस, ट्रांसपेरेंसी सपोर्ट करता है | आमतौर फोटो के लिए बहुत बड़ा; ग्राफिक्स और कट-आउट्स के लिए यूज |
कई प्लेटफॉर्म इमेज को आधुनिक फॉर्मेट में कन्वर्ट करते हैं। देखें: RAW बनाम JPEG और दूसरे इमेज फॉर्मेट।
फाइल नाम और ऑल्ट टेक्स्ट
- डिस्क्रिप्टिव फाइल नेम्स: city-market-spice-seller.jpg जैसे शब्द इस्तेमाल करें DSC_1234.jpg के बजाय; वे सर्च इंजन्स और ऑर्गेनाइज़ेशन की मदद करते हैं।
- ऑल्ट टेक्स्ट (अल्टरनेटिव टेक्स्ट): इमेज का एक छोटा राइटेन डिस्क्रिप्शन, स्क्रीन रीडर्स द्वारा विज़ुअल इम्पेयरमेंट्स वाले लोगों के लिए पढ़ा जाता है और सर्च इंजन्स द्वारा इस्तेमाल किया जाता है।
- मतलब के लिए ऑल्ट टेक्स्ट लिखें: कॉन्टेक्स्ट में क्या मायने रखता है डिस्क्राइब करें, जैसे "Spice seller weighing saffron at a market stall at dusk"।
- कीवर्ड स्टफिंग से बचें: नेचुरली लिखें; सर्च ऑप्टिमाइज़ेशन फोटोग्राफी SEO फंडामेंटल में कवर किया गया है।
Remember:ऑल्ट टेक्स्ट मुख्य रूप से एक्सेसिबिलिटी के बारे में है। लोगों के लिए पहले उसे राइटिंग आमतौर पर सर्च इंजन्स को भी आपकी इमेजेस अंडरस्टैंड करने में मदद करता है।
मेटाडेटा और प्राइवेसी
एक्सपोर्टेड फाइल्स में कॉपीराइट और क्रिएटर इंफॉर्मेशन कीप करें, लेकिन प्राइवेट प्लेसेस और चिल्ड्रन के लिए GPS लोकेशन रिमूव करें, जैसा फोल्डर्स, नेमिंग सिस्टम्स और मेटाडेटा में। कुछ वेबसाइट प्लेटफॉर्म्स मेटाडेटा ऑटोमैटिकली स्ट्रिप करते हैं; जहां अप्प्रोप्रिएट अपनी साइट पर विजिबल कॉपीराइट नोटिस ऐड करें, जैसा फोटोग्राफी में कॉपीराइट अंडरस्टैंडिंग में।
वीडियो बनाने वालों के लिए
वेबसाइट्स पर वीडियो आमतौर पर डायरेक्टली अपलोडेड के बजाय वीडियो प्लेटफॉर्म से एम्बेडेड होता है, जो पेजेस फास्ट रखता है। पोस्टर इमेज ऐड करें और साउंड के साथ ऑटोप्लेइंग अवॉइड करें, जैसा वीडियो ऑनलाइन पब्लिशिंग में।
आम गलतियां
- फुल-रेज़ोल्यूशन कैमरा फाइल्स अपलोड करना: स्लो पेजेस।
- एक्जैक्ट डिस्प्लेड विड्थ पर एक्सपोर्ट करना: हाई-डेंसिटी स्क्रीन्स पर सॉफ्ट इमेजेज़।
- कैमरा फाइल नेम्स और खाली ऑल्ट टेक्स्ट: एक्सेसिबिलिटी और सर्च वैल्यू लॉस्ट।
- एक्सीडेंटली लोकेशन डेटा शेयर करना: प्राइवेसी रिस्क्स।
प्रोफेशनल वेब इमेज कैसे तैयार करते हैं
प्रोफेशनल फोटोग्राफर्स हर वेबसाइट यूज़ के लिए एक्सपोर्ट प्रीसेट्स क्रिएट करते हैं, सेंसिबल मैक्सिमम साइज़ेस पर इमेजेस अपलोड करते हैं, रिस्पॉन्सिव वर्शन्स और मॉडर्न फॉर्मैट्स जेनरेट करने वाले प्लेटफॉर्म्स पर रिलाय करते हैं, फाइल्स डिस्क्रिप्टिवली नेम करते हैं और मीनिंगफुल ऑल्ट टेक्स्ट राइट करते हैं। पोर्टफोलियो पेज डिज़ाइन और ऑप्टिमाइज़ेशन पोर्टफोलियो पेजेस और इमेज ऑप्टिमाइज़ेशन में कवर की गई है।
प्रैक्टिकल उदाहरण
स्लो पोर्टफोलियो होमपेज
- स्थिति
- आपकी होमपेज हीरो इमेज 9 MB कैमरा फाइल है।
- क्या करें
- आप इसे sRGB में हाई-क्वालिटी WebP या JPEG के रूप में 2400 px वाइड पर एक्सपोर्ट करते हैं और उसके बजाय अपलोड करते हैं।
- यह क्यों काम करता है
- इमेज हाई-डेंसिटी स्क्रीन्स के लिए काफी बड़ा है बैंडविड्थ वेस्ट किए बिना।
- नतीजा
- पेज बहुत फास्टर लोड होता है और इमेज अभी भी शार्प लगती है।
सर्च के लिए इनविजिबल इमेजेस
- स्थिति
- आपकी ट्रैवल ब्लॉग इमेजेस IMG_4521.jpg नाम वाली हैं कोई ऑल्ट टेक्स्ट के बिना।
- क्या करें
- आप उन्हें डिस्क्रिप्टिवली रीनैम करते हैं और हर सीन डिस्क्राइबिंग नैचुरल ऑल्ट टेक्स्ट ऐड करते हैं।
- यह क्यों काम करता है
- डिस्क्रिप्टिव नेम्स और ऑल्ट टेक्स्ट स्क्रीन-रीडर यूजर्स और सर्च इंजिन्स मदद करते हैं।
- नतीजा
- ज्यादा एक्सेसिबल पेज्स जो ढूंढना आसान हैं।
मुख्य बातें
- वेब इमेज को लेआउट के हिसाब से साइज़ करें, हाई-डेंसिटी स्क्रीन के लिए दिखने वाली चौड़ाई के लगभग दोगुने तक।
- रेस्पॉन्सिव वर्ज़न इस्तेमाल करें ताकि फोन छोटी फाइलें डाउनलोड करें।
- JPEG हर जगह चलता है; WebP और AVIF छोटे आधुनिक फॉर्मेट हैं; PNG ग्राफिक्स और पारदर्शिता के लिए सही है।
- वर्णन करने वाले फाइल नाम और सार्थक ऑल्ट टेक्स्ट इस्तेमाल करें।
- कॉपीराइट जानकारी रखें और संवेदनशील लोकेशन डेटा हटाएँ।
अक्सर पूछे जाने वाले सवाल
वेबसाइट के लिए फोटो किस साइज़ की होनी चाहिए?
क्या मुझे WebP या JPEG इस्तेमाल करना चाहिए?
ऑल्ट टेक्स्ट क्या है?
मेरी वेबसाइट इमेज फोन पर धुंधली क्यों लगती हैं?
निष्कर्ष
वेबसाइट इमेजेस हर लेआउट और स्क्रीन के लिए राइट साइज होनी चाहिए, एफिशिएंट फॉर्मेट्स में, डिस्क्रिप्टिव नेम्स और सार्थक ऑल्ट टेक्स्ट के साथ, प्राइवेसी बचाते हुए। अगला, आप सीखेंगे कि सोशल मीडिया के लिए इमेजेस कैसे प्रिपेयर करें।
पढ़ लिया? प्रिंटिंग, प्रेज़ेंटेशन और डिजिटल पब्लिशिंग में अपनी प्रगति दर्ज करें।