Lazy Load इमेज जनरेटर: ऑप्टिमाइज़्ड इमेज और LQIP
lazy loading के लिए इमेज तैयार करें: ऑप्टिमाइज़्ड फ़ुल-साइज़ फ़ाइल और ब्लर-अप इफ़ेक्ट के लिए बहुत छोटा लो-क्वालिटी प्लेसहोल्डर (LQIP), ब्राउज़र में बना।
Lazy Load इमेज जनरेटर (LQIP) लोड हो रहा है…
आपकी फ़ाइलें कभी आपके डिवाइस से बाहर नहीं जातीं
Lazy Load इमेज जनरेटर (LQIP) का इस्तेमाल कैसे करें
- 1
इस पेज पर Lazy Load इमेज जनरेटर (LQIP) खोलें। यह सीधे आपके ब्राउज़र में लोड होता है।
- 2
अपनी फ़ाइल, टेक्स्ट या वैल्यू जोड़ें और सेटिंग बदलें।
- 3
नतीजा कॉपी या डाउनलोड करें। कुछ भी अपलोड या स्टोर नहीं होता।
lazy loading के लिए इमेज और प्लेसहोल्डर कैसे बनाएँ
Lazy loading का मतलब है कि पेज के नीचे की इमेज तभी डाउनलोड होती हैं जब विज़िटर स्क्रॉल करके उनके पास पहुँचे। मॉडर्न ब्राउज़र img टैग पर loading="lazy" एट्रिब्यूट से इसे सीधे सपोर्ट करते हैं, और कई साइटें लो-क्वालिटी इमेज प्लेसहोल्डर (LQIP) जोड़ती हैं: इमेज का बहुत छोटा, धुंधला वर्ज़न जो तुरंत दिखता है और असली इमेज आते ही बदल जाता है। दोनों तकनीकें सही फ़ाइलों पर निर्भर हैं, और यही बनाने में यह पेज मदद करता है।
साफ़ समझ लें कि जनरेटर क्या करता है। यह आपकी इमेज को उनके ओरिजिनल फ़ॉर्मैट और साइज़ में क्वालिटी 80 पर कम्प्रेस करता है, lazy loading के लिए तैयार। दो सेटिंग बदलने पर यह प्लेसहोल्डर भी बनाता है: कुछ दर्जन पिक्सेल चौड़ा, कम क्वालिटी वाला वर्ज़न, आम तौर पर 1 KB से काफ़ी कम। यह HTML या CSS नहीं लिखता और इमेज को ख़ुद धुंधला नहीं करता; प्लेसहोल्डर को बड़ा दिखाने पर ब्लर ब्राउज़र में CSS से लगता है।
Lazy Load इमेज जनरेटर (LQIP) का इस्तेमाल कैसे करें
- अपनी इमेज अपलोड एरिया में खींचें, क्लिक करके फ़ाइलें चुनें या Ctrl+V से इमेज पेस्ट करें। यह पेज JPG, PNG, WebP, GIF और BMP फ़ाइलें लेता है, एक साथ कई, हर फ़ाइल 80 MB तक।
- पहला राउंड, पूरी इमेज: डिफ़ॉल्ट (क्वालिटी 80, ओरिजिनल साइज़) रखें या Format में WebP चुनें, फिर ऑप्टिमाइज़्ड फ़ाइलें डाउनलोड करें।
- दूसरा राउंड, प्लेसहोल्डर: Resize खोलें, Max चुनें और 32 × 32 डालें, क्वालिटी लगभग 30 से 40 करें और More options में नाम पैटर्न {name}-lqip रखें। ये छोटी फ़ाइलें भी डाउनलोड करें।
- पहले/बाद वाले स्लाइडर से नतीजा जाँचें: डिवाइडर को प्रीव्यू पर खींचें और नीचे नए डाइमेंशन, फ़ाइल साइज़, क्वालिटी और बचत का प्रतिशत देखें। सेटिंग में कोई भी बदलाव सभी इमेज को अपने-आप दोबारा प्रोसेस करता है।
- एक इमेज डाउनलोड करें या पूरे बैच के लिए Download all (ZIP) इस्तेमाल करें। More options में आप DPI वैल्यू और {name}, {w} व {h} वाला फ़ाइल नाम पैटर्न भी सेट कर सकते हैं।
Lazy loading टिप्स
- LCP इमेज को कभी lazy-load न करें। हीरो या पहली बड़ी इमेज तुरंत लोड होनी चाहिए; उसे lazy-load करने से Largest Contentful Paint देर से होता है। उसे वेबसाइट ऑप्टिमाइज़र से ऑप्टिमाइज़ करें।
- जगह पहले से रखें। हर lazy इमेज को width और height एट्रिब्यूट दें (After लाइन सटीक साइज़ दिखाती है), ताकि लोड होने पर कुछ उछले नहीं।
- प्लेसहोल्डर इनलाइन करें। कुछ सौ बाइट का प्लेसहोल्डर data URI के रूप में एम्बेड या CSS बैकग्राउंड के रूप में इस्तेमाल हो सकता है, और पूरी इमेज लोड होने तक CSS फ़िल्टर से धुंधला रखा जा सकता है।
- पूरी इमेज भी हल्की रखें। Lazy loading बाइट टालता है, हटाता नहीं; WebP में बदलें या बड़े फ़ोल्डर बल्क इमेज कम्प्रेसर से चलाएँ।
प्राइवेट, मुफ़्त और तेज़
पूरा काम आपके ब्राउज़र में होता है: इमेज आपके अपने डिवाइस पर डिकोड, रीसाइज़ और दोबारा एन्कोड होती हैं, इसलिए कुछ भी सर्वर पर अपलोड नहीं होता। न साइन-अप, न वॉटरमार्क, न रोज़ की सीमा, और हर नतीजे से लोकेशन और कैमरा डेटा (EXIF) हटा दिया जाता है।
विशेषताएं
- क्वालिटी 80 पर ऑप्टिमाइज़्ड फ़ुल-साइज़ इमेज
- Max रीसाइज़ से बहुत छोटे LQIP प्लेसहोल्डर
- {name}-lqip जैसे फ़ाइल नाम पैटर्न
- वैकल्पिक WebP या AVIF आउटपुट
- width और height के लिए सटीक आउटपुट डाइमेंशन
- ZIP डाउनलोड के साथ बैच प्रोसेसिंग
अक्सर पूछे जाने वाले सवाल
LQIP क्या है?
लो-क्वालिटी इमेज प्लेसहोल्डर: इमेज का बहुत छोटा, ज़्यादा कम्प्रेस्ड वर्ज़न जो तुरंत लोड होता है और पूरी इमेज आने तक, आम तौर पर धुंधला, दिखाया जाता है।
क्या यह टूल lazy loading कोड बनाता है?
नहीं। यह सिर्फ़ इमेज फ़ाइलें बनाता है। Lazy loading ख़ुद आपके HTML में loading="lazy" एट्रिब्यूट या JavaScript लाइब्रेरी से होता है।
प्लेसहोल्डर इमेज कितनी छोटी होनी चाहिए?
कम क्वालिटी पर लगभग 16 से 40 पिक्सेल चौड़ी, जिससे आम तौर पर कुछ सौ बाइट की फ़ाइल बनती है। Max को 32 × 32 और क्वालिटी को लगभग 30 से 40 पर रखें।
ब्लर-अप इफ़ेक्ट कैसे बनाएँ?
छोटे प्लेसहोल्डर को CSS ब्लर फ़िल्टर के साथ पूरे साइज़ तक फैलाकर दिखाएँ, फिर पूरी इमेज लोड होते ही उस पर फ़ेड करें। टूल दोनों फ़ाइलें देता है; इफ़ेक्ट आपकी CSS से आता है।
क्या हर इमेज lazy-load होनी चाहिए?
नहीं। पहली लोडिंग में दिखने वाली इमेज, ख़ासकर सबसे बड़ी, सामान्य रूप से लोड होनी चाहिए। Lazy loading पेज में नीचे की इमेज के लिए है।
क्या मेरी इमेज सर्वर पर अपलोड होती हैं?
नहीं। इमेज आपके ब्राउज़र में लोकल रूप से प्रोसेस होती हैं और कभी आपके डिवाइस से बाहर नहीं जातीं। टैब बंद करते ही वे हट जाती हैं।