लेख
गति और Core Web Vitals के लिए वेबसाइट मीडिया को ऑप्टिमाइज़ करें
इमेज आमतौर पर किसी वेब पेज के कुल भार का लगभग 40 प्रतिशत हिस्सा होती हैं, जो किसी भी अन्य संसाधन प्रकार से ज़्यादा है, और मीडिया-भारी पेजों पर वीडियो इसमें काफी और जोड़ देता है. इन्हें सही करना लोडिंग गति, Core Web Vitals स्कोर और सर्च रैंकिंग के लिए सबसे ज़्यादा प्रभाव डालने वाली एकमात्र चीज़ है. अच्छी खबर यह है: इसमें से किसी के लिए भी विशेष सॉफ्टवेयर या सर्वर की ज़रूरत नहीं, और आपकी फाइलों को कभी आपके डिवाइस से बाहर जाने की ज़रूरत नहीं.
किसी भी चीज़ से पहले सही फॉर्मैट चुनें
फॉर्मैट का चुनाव किसी भी गुणवत्ता स्लाइडर से ज़्यादा मायने रखता है. किसी वेब पेज पर फोटो के लिए, WebP सही डिफ़ॉल्ट है: यह समान दृश्य गुणवत्ता पर JPEG से 25 से 35 प्रतिशत छोटा होता है और हर आधुनिक ब्राउज़र इसका समर्थन करता है. AVIF इससे भी आगे कंप्रेस करता है, JPEG से 50 प्रतिशत तक बेहतर, धीमी एन्कोडिंग की कीमत पर. उन हीरो इमेज और प्रोडक्ट फोटो के लिए AVIF का उपयोग करें जिन्हें आप एक बार कंप्रेस करते हैं; जो कुछ भी आप बैच में प्रोसेस करते हैं या जल्दी चाहिए उसके लिए WebP का उपयोग करें. PNG की जगह केवल वहीं है जहां आपको लॉसलेस सटीकता या पारदर्शी बैकग्राउंड चाहिए. लोगो, आइकन और चित्रण के लिए SVG ही एकमात्र समझदार विकल्प है: यह किसी भी आकार तक स्केल होता है और अक्सर कुछ किलोबाइट का होता है जबकि किसी रास्टराइज़्ड समकक्ष के लिए सैकड़ों किलोबाइट लगते हैं.
बिना दिखने वाली गुणवत्ता खोए इमेज कंप्रेस करें
वास्तविक प्रदर्शन आयामों तक रीसाइज़ करके शुरुआत करें: 1280 पिक्सेल चौड़ी प्रदर्शित होने वाली हीरो इमेज को 4000 पिक्सेल डेटा की ज़रूरत नहीं. पहले रीसाइज़ करें, फिर कंप्रेस करें. फोटो के लिए, WebP या JPEG में गुणवत्ता 80 व्यावहारिक न्यूनतम है जिसके नीचे सामान्य दर्शक फर्क महसूस करने लगते हैं, इसलिए 75 से 85 का लक्ष्य रखें और प्रकाशित करने से पहले आउटपुट को पूरे ज़ूम पर देखें. टेक्स्ट और सपाट क्षेत्रों वाले ग्राफिक्स के लिए, PNG लॉसलेस या SVG उस तीखेपन को बनाए रखता है जिसे लॉसी फॉर्मैट धुंधला कर देते हैं. इस साइट का इमेज कंप्रेसर इन सभी फॉर्मैट को संभालता है, पूरी तरह आपके ब्राउज़र में चलता है, और समर्पित डेस्कटॉप टूल जैसे ही एल्गोरिदम लागू करता है.
बिना अपलोड किए वेब के लिए वीडियो कन्वर्ट करें
बैकग्राउंड लूप और एम्बेड किए गए वीडियो वहीं हैं जहां वेब मीडिया ऑप्टिमाइज़ेशन अक्सर अधूरा रह जाता है. H.264 के साथ एक MP4 हर जगह चलता है, और WebM हर आधुनिक ब्राउज़र द्वारा समर्थित रॉयल्टी-फ्री विकल्प है. इस साइट का वीडियो कन्वर्टर WebM को VP8 के साथ एन्कोड करता है, जो H.264 जैसी ही compression class में आता है: सिर्फ container बदलने से फाइल छोटी नहीं होती, असली फायदा एक पूरी तरह रॉयल्टी-फ्री codec chain और alpha channel के native support का है. व्यावहारिक तरीका यह है कि एक बार WebM में कन्वर्ट करें, इसे वीडियो एलिमेंट में पसंदीदा स्रोत के रूप में परोसें, और पुराने ब्राउज़रों के लिए MP4 को फॉलबैक के रूप में रखें. कन्वर्ज़न WebAssembly में संकलित FFmpeg के जरिए आपके ब्राउज़र के भीतर चलता है: कुछ भी अपलोड नहीं होता, और 500 MB तक की फाइलें बिना किसी कतार के कन्वर्ट होती हैं. इनलाइन बैकग्राउंड वीडियो के लिए, एन्कोडिंग से पहले मृत सेकंड काटने के लिए वीडियो ट्रिमर पर भी विचार करें: फाइल आकार का सबसे बड़ा कारक अवधि होती है.
इनलाइन एसेट: base64 और SVG
HTML या CSS में सीधे base64 स्ट्रिंग के रूप में एम्बेड की गई बहुत छोटी इमेज, आइकन और फ़ेविकॉन प्रति एसेट एक नेटवर्क राउंड-ट्रिप समाप्त कर देती हैं. यह उन एसेट के लिए समझदारी है जो लगभग 2 KB से कम हैं और हर पेज पर दिखती हैं, जैसे एक लोगो स्प्राइट या लोडिंग संकेतक. बड़े एसेट को अलग फाइलों के रूप में ही रहना चाहिए क्योंकि base64, बाइनरी से 33 प्रतिशत बड़ा एन्कोड होता है, और ब्राउज़र फाइल संदर्भों को कैश करते हैं लेकिन इनलाइन डेटा को स्वतंत्र रूप से नहीं. SVG ऑप्टिमाइज़र, एक्सपोर्ट किए गए SVG से एडिटर का कचरा हटाता है बिना दृश्य आउटपुट को छुए. image-to-base64 कन्वर्टर आपके ब्राउज़र में चिपकाने के लिए तैयार data URI तैयार करता है.
सही आकार परोसें और उसे पहले लोड करें
दो डिलीवरी विवरण उतने ही महत्वपूर्ण हैं जितनी स्वयं फाइलें। पहला है रिस्पॉन्सिव साइजिंग। width डिस्क्रिप्टर की srcset सूची (image-400.webp 400w, image-800.webp 800w और इसी तरह) के साथ, ब्राउज़र सबसे छोटी फाइल चुनता है जो अभी भी स्क्रीन को कवर करे, CSS चौड़ाई को device pixel ratio (डिवाइस पिक्सल अनुपात) से गुणा करके कुछ भी अनुरोध करने से पहले। 390px चौड़े लेआउट और 3x स्क्रीन वाले फोन को लगभग 1170 पिक्सल चाहिए, इसलिए वह 1200w वर्शन लाता है और डेस्कटॉप ओरिजनल छोड़ देता है। दूसरा है प्राथमिकता। ब्राउज़र एक preload scanner (आगे पढ़ने वाला स्कैनर) चलाते हैं जो मुख्य पार्सर तक पहुंचने से पहले ही इमेज डाउनलोड शुरू कर देता है; अपनी सबसे बड़ी above-the-fold (पेज के शुरुआती दृश्य भाग की) इमेज में fetchpriority="high" जोड़ने से ब्राउज़र को उसे पहले खींचने का निर्देश मिलता है, जो आमतौर पर आपके Largest Contentful Paint को तय करता है।
इस लेख में उल्लेखित टूल्स
- इमेज संपीड़ित करेंबिना अपलोड किए इमेज का फ़ाइल आकार कम करें। गुणवत्ता स्लाइडर या KB में लक्ष्य आकार। बैच समर्थित।
- छवियाँ रीसाइज़ करेंअपनी छवियों (JPEG, PNG, WebP) को अपलोड किए बिना रीसाइज़ और कन्वर्ट करें।
- SVG ऑप्टिमाइज़रSVGO के साथ सीधे अपने ब्राउज़र में SVG फ़ाइलें अनुकूलित और minify करें। कोई अपलोड नहीं।
- वीडियो कन्वर्टरअपने ब्राउज़र में MP4, WebM, MKV और MOV (H.264/VP8) के बीच video convert करें। कोई upload नहीं।
- Image से Base64छवियों को सीधे अपने ब्राउज़र में Base64 data URI में (और वापस) बदलें। कॉपी करें, CSS स्निपेट, कोई अपलोड नहीं।
- छवि तुलना स्लाइडरदो छवियों की साइड-बाय-साइड या स्लाइडर के साथ तुलना करें (पहले/बाद)। कोई अपलोड नहीं।
अक्सर पूछे जाने वाले सवाल
क्या इमेज कंप्रेशन मेरी सर्च रैंकिंग को प्रभावित करता है?
Google, Core Web Vitals का उपयोग एक रैंकिंग संकेत के रूप में करता है, और Largest Contentful Paint लगभग हमेशा एक इमेज या वीडियो पोस्टर होता है. वह पेज जिसकी हीरो इमेज एक सेकंड से कम में लोड होती है, उससे बेहतर स्कोर करता है जहां इसमें तीन सेकंड लगते हैं. कंप्रेशन और सही फॉर्मैट सीधे इस मेट्रिक को प्रभावित करते हैं, इसलिए हां, इमेज ऑप्टिमाइज़ेशन का मापने योग्य SEO प्रभाव होता है. यह प्रभाव मोबाइल पर सबसे ज़्यादा होता है, जहां कनेक्शन धीमे होते हैं और भारी इमेज का दंड बड़ा होता है.
वेब सेवा के बजाय मीडिया को स्थानीय रूप से क्यों प्रोसेस करें?
ज़्यादातर ऑनलाइन मीडिया टूल आपकी फाइलों को किसी दूरस्थ सर्वर पर अपलोड करवाते हैं, जिसमें समय लगता है, बैंडविड्थ खर्च होती है, और इसका मतलब है कि आपकी फाइल की एक प्रति ऐसे बुनियादी ढांचे पर मौजूद है जिसे आप नियंत्रित नहीं करते. इस साइट के टूल पूरी तरह आपके ब्राउज़र में चलते हैं: आपकी इमेज और वीडियो आपके डिवाइस पर प्रोसेस होते हैं और आउटपुट सीधे डाउनलोड हो जाता है. कोई खाता नहीं, कोई अपलोड इंतज़ार नहीं, और आपकी फाइलों के बारे में कुछ भी कभी किसी सर्वर पर नहीं भेजा जाता.