आपने Block Editor से Article लिखना सीखा। अब उसमें लगी Images को साफ, तेज और सभी पाठकों के लिए उपयोगी बनाना सीखेंगे। बड़ी फोटो सीधे Upload कर देने से Page भारी हो सकता है; बिना अर्थ का Alt Text समझने में मदद नहीं करता।
इसे स्कूल की किताब समझिए: Diagram में सही Label और नीचे Caption हो, तभी विद्यार्थी को चित्र का मतलब पता चलता है। इस पाठ में File Format, Dimensions, Media Library, Alt Text, Accessibility और Copyright को एक साथ सीखेंगे।
इस पाठ में आप क्या सीखेंगे?
- Media Library में Image Upload और Attachment Details समझना
- JPEG/PNG/WebP/AVIF Formats में सही चुनाव करना
- Dimensions और File Size को Theme के अनुसार रखना
- Alt Text, Caption, Title और Description में फर्क समझना
- Featured Image, Responsive Image और Lazy Loading की भूमिका जानना
- Copyright तथा Screenshot Privacy के नियम अपनाना
1. WordPress Media Library क्या है?
Media → Library में Website पर Upload की गई Images और दूसरे Media Files का संग्रह मिलता है। Grid View में Thumbnails और List View में Columns दिख सकते हैं। किसी Item को खोलकर Filename, Dimensions, Type और Alt Text जैसे विवरण देख सकते हैं।
नया चित्र Upload करने के लिए Media → Add New Media File या Post के Image Block में Upload विकल्प लें। Live Site में एक जैसी Image कई बार Upload करने के बजाय पहले Media Library Search करें।
2. Image Upload से पहले की जरूरी जाँच
चित्र सही विषय का है? क्या उसमें व्यक्तिगत Email या Phone दिख रहा है? उसकी Width पर्याप्त है? क्या File बहुत भारी है? और क्या उसे इस्तेमाल करने की अनुमति है? Upload से पहले यह Checklist पूरी करें।
Course Chart के लिए Portrait Image मोबाइल पर अच्छी पढ़ी जा सकती है, जबकि Header/Featured Image अक्सर Landscape होती है। सिर्फ इसलिए 4000px चौड़ी Image न रखें कि कैमरे ने इतनी बनाई थी।
3. Dimensions और File Size में अंतर
Dimensions = चित्र की Width और Height, जैसे 1200×675 pixels। File Size = Storage/Network पर उसका आकार, जैसे 150 KB। एक जैसी Dimensions की दो Images का File Size Format और Compression से अलग हो सकता है।
Theme में Content Width और Page Layout देखें। जरूरत से बहुत बड़ी Images समय, Data और Speed खर्च कर सकती हैं। बहुत छोटी Image को जबरन Stretch करने पर अक्षर धुँधले दिखेंगे।
4. JPEG, PNG, WebP और AVIF कब?
JPEG आम Photographs के लिए उपयोगी है, लेकिन Transparency नहीं देता। PNG Logo या Sharp Graphic के कुछ मामलों में काम आता है, पर File भारी हो सकती है। WebP Photos और Graphics के लिए अच्छा आधुनिक विकल्प है, अक्सर Size कम करता है।
AVIF भी प्रभावी Format हो सकता है, लेकिन Hosting/Editor Pipeline और Compatibility जाँचें। Format चुनते समय केवल Extension नहीं, वास्तविक Image Quality और Browser Support देखें। सभी Images को बिना जाँचे एक ही Format में Convert करना जरूरी नहीं।
5. WordPress 7.1 में Image Handling
WordPress 7.1 में Image Processing के लिए Browser-side Compression/Resizing और नया Media Editing Workflow आया है। इसके विकल्प Hosting, Permissions, Browser और Site Version के अनुसार अलग अनुभव दे सकते हैं; आपके Dashboard में कोई Control अलग हो तो Screenshot मिलाकर ही निर्णय लें।
नए Media Editor में Crop, Rotate, Flip और Aspect-Ratio जैसे काम एक ही स्थान पर किए जा सकते हैं। लेकिन पहले मूल Image की Copy सुरक्षित रखें। किसी Chart का किनारा Crop करते समय महत्वपूर्ण Hindi Text न कटे।
6. Alt Text क्या है? और किसके लिए?
Alternative Text (Alt Text) Image का छोटा, अर्थपूर्ण वर्णन है, खासकर जब कोई Screen Reader इस्तेमाल कर रहा हो या चित्र Load न हो। Alt Text का पहला उद्देश्य Accessibility है, केवल SEO Keywords भरना नहीं।
उदाहरण: गलत: “image1”, “best wordpress seo hosting cheap”। सही: “WordPress Media Library में चुने हुए चित्र के Alt Text और Caption Fields”। जो चित्र सिर्फ सजावट है और कोई नई जानकारी नहीं देता, उसे जरूरत के अनुसार खाली Alt Text दिया जा सकता है।
7. File Name, Title, Caption और Description
File Name Upload से पहले रखें: wordpress-media-library-alt-text.webp। Title Media Library में पहचान के लिए होता है। Caption चित्र के नीचे पाठक को दिखाई दे सकता है; Description अतिरिक्त मीडिया विवरण हो सकता है।
चारों Fields में एक ही Keyword को बार-बार Copy करना अच्छी रणनीति नहीं। Caption पाठक को समझाने के लिए; Alt Text चित्र के महत्वपूर्ण अर्थ को बताने के लिए; File Name छोटा, स्पष्ट और English hyphens वाला रख सकते हैं।
8. Image Block के अंदर Alt Text कहाँ?
Post Editor में Image Block चुनें, दाईं ओर Block Settings का Alt Text Field देखें। Media Library में Default Alt Text Set करने से अगली बार Insert पर वह उपयोग हो सकता है; Editor में किसी एक Image Block का Alt Text बदलने से वही Post/Block प्रभावित हो सकता है।
Teacher वाले Chart में यदि Arrow या Step का मतलब जरूरी है, तो Alt Text में सिर्फ “रंगीन चित्र” न लिखें। जैसे “Photo से Upload तक: Resize, WebP, File Name, Alt Text का क्रम” पाठक को वास्तविक जानकारी देता है।
9. Image Optimization का सही क्रम
पहले Original Photo/Screenshot लें → निजी जानकारी हटाएँ → Target Width तय करें → Resize/Crop करें → Quality देखकर Compression करें → उचित Format चुनें → स्पष्ट Filename रखें → Upload करें → Alt Text लिखें।
File Size कम होने के बाद भी Text साफ है या नहीं, फोन पर Zoom और बिना Zoom दोनों तरह देखें। खासकर शिक्षा वाले Diagrams में ज़रूरी बात **पढ़ने योग्य होना** है, सिर्फ 20 KB बनाना नहीं।
10. Featured Image और Article Image अलग हो सकती हैं
Featured Image Theme की Blog Listings, Archive, Social Preview या Post Header में उपयोग हो सकती है; उसका दिखाई देना Theme/Template पर निर्भर है। Post के अंदर अलग Image Block लगाना अलग काम है।
यदि Featured Image Single Post पर नहीं दिखती, तो बिना जाँच Theme बदलना जरूरी नहीं। Article में जरूरी Diagram को Body में भी रखें। Social Preview के लिए SEO Plugin या Social Tags अलग Image चुन सकते हैं।
11. Responsive Images और Lazy Loading
WordPress उचित Setup पर अलग Image Sizes और srcset जैसी Responsive तकनीक का इस्तेमाल करता है, जिससे Browser अपनी Screen के अनुसार उपयुक्त Image चुन सकता है। लेकिन Theme, Image Size और Plugins इस व्यवहार को बदल सकते हैं।
Lazy Loading से पेज के नीचे की Images बाद में Load हो सकती हैं। Page के ऊपर की महत्वपूर्ण Image (खासकर LCP Element) के लिए Blindly Lazy Loading लगाना अच्छा नहीं। Speed की सही जाँच Lesson 24 में करेंगे।
12. Copyright और AI/Stock Images की सावधानी
Google Images में मिल जाना उपयोग की अनुमति नहीं है। अपनी Photo, स्वयं बनाए Diagram, स्पष्ट License वाली Image या उचित Attribution वाली Source लें। Openverse जैसे Search Tool में भी Final License और Attribution Requirements जाँचें।
Screenshots में निजी Email, Customer Orders, Address, Phone, API Keys या OTP कभी सार्वजनिक न करें। UI सिखाने के लिए नकली Screenshot बनाकर असली WordPress Screen बताना भी गलत है। Illustrated Diagrams को स्पष्ट “शैक्षिक चित्र” कहें।
13. Practical Exercise: तीन Images सुधारें
Lesson 17 के Test Draft के लिए तीन अलग Images चुनें: Featured Illustration, एक छोटे Menu का Screenshot और एक Classroom Chart। प्रत्येक का Original Size और नया File Size अलग से लिखें; फिर appropriate Format और स्पष्ट File Name चुनें।
हर Image के लिए एक अलग अर्थपूर्ण Alt Text और जरूरत के अनुसार Caption लिखें। 320px और 390px पर Paragraph तथा Diagram Readability जाँचें। किसी असली DealYou.in Image को इस अभ्यास के लिए Replace न करें।
14. शुरुआती पाँच गलतियाँ
Phone की बहुत बड़ी Photo सीधे Upload करना; हर Image में एक जैसा Alt Text; Google Search से बिना License के Photo उठाना; Screenshots में निजी जानकारी छोड़ना; और Chart Text को इतना छोटा कर देना कि फोन पर पढ़ा न जाए—ये पाँच समस्याएँ आम हैं।
सही उपाय: Upload से पहले Cleanup, अर्थपूर्ण Filename, Dimensions की योजना, Preview, Alt Text और Copyright Check। जरूरत से ज्यादा Compression भी खराब गुणवत्ता का कारण बन सकती है।
15. Quick Revision
Dimensions = Pixel Width/Height। File Size = KB/MB। Alt Text = Image का अर्थपूर्ण विकल्प। Caption = चित्र के नीचे की व्याख्या। Featured = Post की पहचान, लेकिन उसका Display Theme पर निर्भर।
बेहतर Image = तेज + साफ + Accessible + Legal। अगले Lesson में Plugins समझेंगे, ताकि Image Optimization या Security के लिए अनावश्यक Plugins न लगा दें।
अक्सर पूछे जाने वाले सवाल (FAQ)
Alt Text हिंदी में लिखें या English में?
यदि Article हिंदी में है तो हिंदी Alt Text उपयोगी है; Technical Terms जरूरत के अनुसार English में रह सकते हैं।
क्या हर Image में Alt Text जरूरी है?
हर Image में alt attribute होना चाहिए; अर्थपूर्ण चित्र का अर्थपूर्ण Alt Text रखें, सजावटी चित्र के लिए खाली alt उपयुक्त हो सकता है।
Featured Image का एक निश्चित Size है?
नहीं। Theme, Card Layout और Aspect Ratio के अनुसार तय करें; पूरे Course में Consistent Dimensions उपयोगी हैं।
WebP और AVIF में कौन बेहतर है?
दोनों अच्छे विकल्प हैं। Quality, Compatibility और Hosting/Browser Support के अनुसार वास्तविक फ़ाइल जाँचें।
क्या Image Compression Plugin जरूरी है?
हमेशा नहीं। WordPress और Hosting पहले से Image Processing कर सकते हैं। जरूरत और परिणाम जाँचकर ही Plugin लें।
निष्कर्ष और अगला पाठ
इस पाठ में आपने Images और Alt Text को आसान उदाहरणों में समझा। अब अगले पाठ में इसी जानकारी को आगे बढ़ाएँगे। अपने Live WordPress की महत्वपूर्ण Settings बदलने से पहले हमेशा Backup और जाँच करें।
पिछला पाठ: पाठ 17 — Block Editor से पहला Post
अगला पाठ: पाठ 19 — WordPress Plugins Guide
संबंधित पढ़ें: पाठ 5 — WordPress का परिचय
Official Sources और आगे की पढ़ाई
- Media Library Screen — Official Documentation
- Image Block — Official Documentation
- WordPress 7.1 Release — Official Documentation
- Google Image SEO — Official Documentation
- Web.dev Responsive Images — Official Documentation
- WordPress Media Add New — Official Documentation
नोट: Interface WordPress Version, Theme, Plugins और User Permissions के अनुसार अलग हो सकता है। चित्र शिक्षण के लिए बनाए गए हैं, वास्तविक WordPress Screenshots नहीं।