स्वागत है मेरे होमपेज पर !
) } निर्यात default घर ``` एक मार्कडाउन फ़ाइल के लिए, डिफ़ॉल्ट छवि टैग का उपयोग किया जा सकता है और डिफ़ॉल्ट `img` टैग को इससे बदल दिया जाता है `छवि` बिल्ड प्रक्रिया में घटक। मान लीजिए कि हमारे पास एक फ़ाइल है जिसका नाम है `ocean.jpg`में `static/images/ocean.jpg`, निम्नलिखित कोड लाइन अनुकूलित छवि उत्पन्न करेगी। ```  ``` वैकल्पिक रूप से, चूंकि हम mdx का उपयोग कर रहे हैं, हम सीधे छवि घटक का उपयोग कर सकते हैं! ध्यान दें, कि आपको एक निश्चित चौड़ाई और ऊंचाई प्रदान करनी होगी। `img` टैग विधि आयामों को स्वचालित रूप से पार्स करती है। ``` <छवि alt ="ocean" src ="/static/images/ocean.jpg" चौड़ाई ={256}ऊंचाई ={128} /> ``` *ध्यान दें* : यदि आप छवि को सहेजने का प्रयास करते हैं, तो यह webp प्रारूप में है, यदि आपका ब्राउज़र इसका समर्थन करता है!  द्वारा फोटो YUCAR FotoGrafik पर अनस्प्लैश # लाभ - छोटी इमेज साइज़ वेबपी के साथ (~30% छोटी जेपीईजी से) - रिस्पॉन्सिव इमेज - उपयोगकर्ता के व्यूपोर्ट के आधार पर सही इमेज साइज़ सर्व किया जाता है - आलसी लोडिंग - छवियां तब लोड होती हैं जब उन्हें व्यूपोर्ट तक स्क्रॉल किया जाता है - बचता है संचयी लेआउट शिफ्ट - बिल्ड-टाइम के बजाय मांग पर अनुकूलन - बिल्ड समय में कोई वृद्धि नहीं! # सीमाएं - इसकी निर्भरता के कारण `next/image` , जब तक कि आप Cloudinary या Imgix जैसे बाहरी छवि CDN का उपयोग नहीं कर रहे हों, Vercel का उपयोग होस्टिंग के लिए लगभग आवश्यक है। ऐसा इसलिए है क्योंकि घटक एक सर्वर रहित फ़ंक्शन की तरह काम करता है जो एक अत्यधिक अनुकूलित छवि CDN को कॉल करता है। यदि आप Vercel से बंधे नहीं रहना चाहते हैं, तो आप हटा सकते हैं `imgToJsx` में `remarkPlugins` में `lib/mdx.js`. यह डिफ़ॉल्ट को प्रतिस्थापित करने से बचाएगा `img` टैग। वैकल्पिक रूप से, कोई बिल्ड टाइम पर इमेज ऑप्टिमाइज़ेशन के सपोर्ट की प्रतीक्षा कर सकता है। एक अलग लाइब्रेरी, next-optimized-images ऐसा करता है, हालांकि इसके लिए छवियों को वेबपैक के माध्यम से बदलने की आवश्यकता होती है जो यहां नहीं किया गया है। - बाहरी लिंक से छवियां पास नहीं की जाती हैं `next/image` - सभी छवियों को इसमें संग्रहीत किया जाना चाहिए `public` फ़ोल्डर उदा `/static/images/ocean.jpeg` ट्विटर पर चर्चा करें • गिटहब पर देखें