दोस्तों अगर आपने भी अपना एक ब्लॉग या वेबसाइट बनाया है तो जाहिर है कि आप अपने उस ब्लॉग या वेबसाइट में Images का प्रयोग करते होंगे| लेकिन क्या आपको पता है कि आपकी इन Images के कारण आपकी वेबसाइट पर कितना ज्यादा लोड पड़ता है जिससे आपकी वेबसाइट खराब परफॉर्म कर सकती है | इसलिए आज हम Image Optimize For Website के विषय में चर्चा करने वाले है |
Image Optimize For Website:
अगर आप एक 300KB की Image को Characters में बदलते है तो आप 150,000 Characters लिख सकते है| और इन का साइज़ समान रहेगा और आपकी वेबसाइट पर इनका प्रभाव भी एक जैसा ही पड़ेगा | Pictures या Images वेबसाइट के सबसे भारी तत्वों में से एक होते है लेकिन इन्हें अपनी वेबसाइट में इस्तेमाल करना भी जरुरी है |
इस आर्टिकल में हम 10 ऐसे स्टेप्स पर प्रकाश डालेंगे जिनका अनुसरण करके आप अपनी वेबसाइट से अपनी Images को हटाये बिना ही अपनी वेबसाइट की परफॉरमेंस को बढ़ा सकते है यानि आप अपनी Images के साइज़ को अपनी वेबसाइट पर कम कर सकते है जिससे आपकी वेबसाइट को लोड होने में ज्यादा समय नहीं लगेगा |
काफी सारी बिज़नस श्रेणी ऐसी होती है जिसमे ज्यादा Images को यूज़ करना जरुरी होता है | अब हम बारी-बारी से उन जरुरी स्टेप्स को देखेंगे लेकिन उससे भी पहले हम ये जानेंगे कि आपको अपनी Images के Issues को पता कैसे करना है ताकि उस पेज में आप सबसे पहले अपनी इमेजेज के साइज़ को कम कर सके |
Images के Issues का पता लगाने के लिए एक जो सबसे बढिया और फ्री का टूल है वो है GtMetrix ये टूल आपके पेज की इमेजेज को काफी बारीकी से जाँच करके आपको ना सिर्फ प्रॉब्लम बताता है बल्कि उनके समाधान को भी साथ-साथ बताता है | इसलिए आप इस टूल की सहायता से अपनी वेबसाइट के पेजेज को Analyze करिये और देखिये कि कौन सी इमेज आपके पेज के लोडिंग टाइम को बढ़ा रही है |
10 Steps Of Image Optimize For Website ➠
1. Resize Images Well
अपनी वेबसाइट में इमेजेज को ऑप्टिमाइज़ करने का जो सबसे पहला तरीका है वो है उनके साइज़ को कम करना | यहाँ पर हम इमेजेज के KB या MB वाले साइज़ के बारे में बात नहीं कर रहे है बल्कि उनके Pixels के साइज़ के बारे में बात कर रहे है | अब वैसे तो आप CSS के जरिये भी अपनी इमेजेज के साइज़ को Resize कर सकते है लेकिन अगर आप सही-सही अपनी इमेजेज को पहले से ही Resize कर ले तो आप एक एक्स्ट्रा एरर से बच सकते है |
अब सवाल ये उठता है कि आखिर ये सही साइज़ क्या है? अपनी वेबसाइट के पेजेज में अगर आप निचे बताये गए इमेजेज के साइज़ का प्रयोग करेंगे तो आप इस एरर से बच सकते है :
| Icons | 16*16 Px. |
| Slider Image | 1800*400 Px. |
| Featured Image | 250*250 Px. |
| Blog Post Images | 680 Width*Height As You Want |
आप अपनी वेबसाइट के पेजेज की इमेजेज के साइज़ को इस लिस्ट के अनुसार resize करिये और उसके बाद उन Images को अपनी वेबसाइट में इस्तेमाल कीजिये|
2. LazyLoad Images
LazyLoad का अर्थ होता है कि आपकी इमेजेज को तभी लोड करना जब उनकी वास्तव में जरुरत हो| वैसे तो वर्डप्रेस अब मूल रूप से अपने आप इमेजेज को LazyLoad करने लगा है इसलिए आपको इसके लिए कोई अलग से प्लगइन यूज़ करने की आवश्यकता नहीं है | लेकिन इसके उपरांत भी आपकी वेबसाइट में LazyLoad का एरर दिखाई दे सकता है |
अब ऐसा क्यों होता है, आईये जानते है –
देखिये किसी भी वेबसाइट में Images को दिखने के दो तरीके होते है, एक होता है सामान्य रूप से अपने किसी पेज में इमेज का इस्तेमाल करना और दूसरा अपने किसी पेज के बैकग्राउंड में इमेज को यूज़ करना | वर्डप्रेस के स्वभाविक रूप से LazyLoad होने वाली इमेजेज में ये बैकग्राउंड में प्रयोग की गयी इमेजेज LazyLoad नहीं होती है यही कारण है कि आपकी वेबसाइट में ये LazyLoad Issues आते रहते है |
लेकिन ऐसा क्यों होता है ? आईये जानते है –
सामान्य रूप से प्रयोग की गयी Images:
देखिये, जब आप अपनी किसी इमेज को सामान्य रूप से किसी वेब पेज में दिखाते है तो आप <img src=“your/image/here.jpg”> के कोड का इस्तेमाल करते है और जैसे ही ब्राउज़र Img Src देखता है उस URL से आपकी इमेज को लोड करने लग जात है |
जब आप LazyLoad प्लगइन का इस्तेमाल करते है तो ये प्लगइन इस URL को बदलकर img src से img data-src कर देते है और आपका URL हो जाता है <img data-src=“your/image/here.jpg”>
अब ऐसे में ब्राउज़र को पता ही नहीं होता है कि यहाँ पर कोई इमेज है और जैसे ही जब कोई यूजर पेज को स्क्रॉल करता है और आपकी इमेज तक पहुंचता है तो उस वक्त आपका LazyLoad प्लगइन इस img data-src को वापिस img src में बदल देता है और आपका ब्राउज़र img src को देखते ही उसे डाउनलोड करके दिखाने लगता है |
बैकग्राउंड में प्रयोग की गयी Images:
जब आप बैकग्राउंड में यूज़ की गयी इमेज को ऑप्टिमाइज़ करते है या Image Optimize For Website तो जानते है ये प्रक्रिया कैसे होती है –
जो बैकग्राउंड इमेज होती है उसके अन्दर img src का प्रयोग नहीं किया जाता है बल्कि इसके स्थान पर Background-Image का प्रयोग किया जाता है इसलिए LazyLoad वहां पर काम नहीं करता है | अत: इसके समाधान के लिए हम अन्य प्लगइन का इस्तेमाल करते है जो इस Background-Image को तत्परता से हेरफेर करता है | WordPress में अगर आप इसके सन्दर्भ में प्लगइन खोजेंगे तो आपको अनेको ऐसे प्लगइन मिल जायेंगे जो आपको ये सुविधा मुफ्त में प्रोवाइड कर देंगे|
3. Effectively Encode Images
हमे अपनी इमेजेज को प्रभावशाली रूप से बदलने पर ध्यान केन्द्रित करना चाहिए | यहाँ पर हम KB और MB की बात कर रहे है | एक इमेज 500*500 Px की होते हुए भी फालतू में Heavy (भारी) हो सकती है |
अब इस समस्या को हल कैसे किया जा सकता है ?
A . आप अपनी Images या Pictures को एक-एक करके Compress कर सकते है जिससे website speed optimization में आपको मदद मिलेगी | काफी सारे ऐसे फ्री ऑनलाइन टूल्स मौजूद है जो आपको ये सुविधा प्रदान करते है | बल्कि गूगल ने अपना खुद का एक टूल लांच किया हुआ है Squoosh.app
B. अगर आप वर्डप्रेस यूजर है तो आपके पास अपनी इमेजेज को कॉम्प्रेस करने के सैकड़ो तरीके है | काफी सारे ऐसे फ्री प्लगइन मौजूद है जो आपकी इमेजेज को uploading के टाइम ही आटोमेटिक Compress कर देते है, जैसे – Resmush.it, Smush.
C. अगर आपकी वेबसाइट में सैकड़ो हजारो इमेजेज है और आप उनको एक-एक करके कॉम्प्रेस नहीं कर सकते तो आप Python language के जरिये भी अपनी इमेजेज को Resize कर सकते है |
4. Use Image CDN
आप अपनी इमेजेज को CDN (Content Delivery Network) के जरिये लोड करके भी आप अपने सर्वर से काफी सारा भार कम कर सकते है और अपनी Website Speed Optimization कर सकते है | CDN से इमेजेज को लोड करवाना थोडा लम्बा प्रोसेस है लेकिन आपको इससे काफी मदद मिलेगी |
5. Avoid Redirects
आपकी वेबसाइट के कंटेंट का शुरूआती URL और आपके कंटेंट में प्रयोग की गयी इमेजेज का शुरूआती URL एक जैसा होना चाहिए | निचे दिखाए सभी URLs आपको देखने में एक जैसे लग रहे होंगे लेकिन Google के लिए ये सभी अलग-अलग है |
- http://example.com/
- https://example.com/
- http://www.example.com/
- https://www.example.com/
इसलिए अगर आपकी वेबसाइट ‘https://example.com/‘ Version पर चल रही है लेकिन आपकी इमेजेज के URLs में ‘https://www.example.com/image.jpg‘ यूज़ हो रहा है तो आपकी वेबसाइट में इमेज दिखाई तो देंगी लेकिन इमेजेज को लम्बे रस्ते से घूम कर आना पड़ेगा | ऐसे में आपकी वेबसाइट की परफॉरमेंस पर फर्क पड़ेगा और Website Speed Optimization भी खराब हो जायेगा |
इसे हल करने के लिए आपको एक विशिष्ट URL फॉर्मेट का इस्तेमाल करना पड़ेगा | जैसे अगर आपकी वेबसाइट ‘https://example.com/‘ फॉर्मेट पर चल रही है तो आपकी इमेजेज भी ‘https://example.com/images.jpg‘ फॉर्मेट पर चलनी चाहिए |
अगर आपके पास कोई Custom Coded वेबसाइट है तो आप उसके एडिटर में जाकर Find और Replace कमांड के जरिये इसे एक जैसा कर सकते है और अगर आपकी वेबसाइट वर्डप्रेस पर है तो इसके लिए आप Better Search Replace प्लगइन का इस्तेमाल कर सकते है इसमें भी आपको Find/Replace कमांड के जरिये ही इसे ठीक करना है |
ऐसा करके आप अपनी वेबसाइट के कई सारे इश्यूज को एक साथ ठीक कर सकते है | अब देखे Image Optimize For Website का अगला स्टेप –
6. Use CSS Images Sprites
जब कभी भी आपकी वेबसाइट पर बहुत सारे छोटे-छोटे Icons एक साथ दिखाई देते है तो चाहे आपने इन Icons का साइज़ कितना भी कम कर लिया हो, वो फिर भी वेबसाइट की परफॉरमेंस पर असर डालता है |
जरा सोचिये, आपने 10-10 KB के 15 Icons को अपने पेज में लोड किया है तो इनका कुल भार तो 150 KB ही होगा लेकिन वेबसाइट को 15 request प्रोसेस करनी पड़ेगी | CSS Sprite इन 15 Icons को मिलाकर एक बना देती है जिससे आपकी वेबसाइट को सिर्फ एक ही रिक्वेस्ट को हैंडल करना पड़ता है |
अगर आप WordPress का उपयोग करते है तो आपके पास बहुत सारे विकल्प है इस CSS Sprite को यूज़ करने के लिए, आपको इसके लिए Plugins मिल जायेंगे | जो प्लगइन आपको ज्यादा useful लगे, आप उसका इस्तेमाल कर सकते है और अपनी website speed optimization को सुधार सकते है |
7. Avoid Embedding
अगर आप अपनी वेबसाइट की परफॉरमेंस को बेहतर बनाना चाहते है तो आपको अपनी वेबसाइट के कंटेंट में किसी दूसरी साईट की Images को Embed नहीं करना चाहिए| यहाँ पर आपकी इस इमेज का साइज़ चाहे जितना भी कम क्यों ना हो लेकिन आपकी वेबसाइट के लिए बेकार की एक और रिक्वेस्ट बढ़ जाती है|
अगर आपको किसी दूसरी वेबसाइट की Image को अपनी वेबसाइट में लोड ही करना है तो आप उसे सीधे डाउनलोड करके अपनी वेबसाइट में अपलोड कर सकते है| इससे उस इमेज का साइज़ तो वही रहेगा लेकिन आपकी वेबसाइट को एक और रिक्वेस्ट नहीं करनी पड़ेगी | इसलिए आप अपनी वेबसाइट में Embedding का प्रयोग ना करे तो आपके लिए ज्यादा अच्छा रहेगा | Image Optimize For Website के आवश्यक चरण.
8. Delete Image EXIF Data
जब भी आप कोई फोटो खींचते है तो उसमे लोकेशन, कैमरा, फोकल डिस्टेंस और वो सारी इनफार्मेशन होती है जिसकी आपकी वेबसाइट के विजिटर को कोई जरुरत नहीं होती है | इसलिए आपको इस डाटा को हटाना चाहिए ताकि आपकी इमेज को लोड होने में बेकार का समय ना लगे |
अधिकतर Image Optimization प्लगइन या स्क्रिप्ट्स इस डाटा को अपने आप हटा देते है लेकिन अगर आपकी इमेजेज में ये डाटा अभी भी दिखाई दे रहा है तो ये सुनिश्चित करे कि आपने अपने Image Optimization प्लगइन में EXIF Data से सम्बंधित सेटिंग को Turn On कर दिया हो |
आप अपनी इमेजेज में से इस EXIF Data को हटकर कोई भारी बचत नहीं करते है लेकिन जब आप हाई लेवल के ऑप्टिमाइजेशन पर पहुच जाते है तो इसका फर्क पड़ने लगता है और बात जब सिर्फ EXIF Data को हटाकर पॉइंट लेने की हो तो इसे हटा देना ही उचित होता है |
9. Disable Embedding
7th पॉइंट में हमने बताया है कि आपको अपनी वेबसाइट में इमेजेज को Embed नहीं करना चाहिए लेकिन क्या हो अगर बाकि लोग आपकी वेबसाइट की इमेजेज को अपनी Websites में Embed कर रहे हो ?
अगर कोई ऐसा कर रहा है तो इससे आपकी वेबसाइट की Bandwidth भी खर्च हो रही है और साथ में आपके सर्वर पर भी इसका लोड पड़ रहा है और इसका नतीजा होगा कि आपकी वेबसाइट खराब परफॉर्म करने लगेगी | इसके लिए आपको अपनी वेबसाइट की Embedding यानि Hotlinking को बंद करना है | इसे आप वर्डप्रेस में किसी प्लगइन की सहायता से भी बंद कर सकते है और आप अपने कण्ट्रोल पैनल में »File Manager » htaccess फाइल में बदलाव करके भी आप अपनी वेबसाइट की Hotlinking को रोक सकते है | अब देखिये Image Optimize For Website का अंतिम चरण:
10. Add Image Dimension
CSS में इमेज का सही साइज़ होना जरुरी है | इससे ब्राउज़र का Guess Work बच जाता है | ऐसा करने से आपकी वेबसाइट का CLS स्कोर नहीं बिगड़ता है| वर्डप्रेस में अधिकतर बिल्डर्स अपने आप इस वैल्यू को जोड़ देते है लेकिन Custom वेबसाइट में आपको अपनी सभी Images को ध्यानपूर्वक देखना होगा और ये सुनिश्चित करना होगा कि इमेज में Height और Width को जो महत्वता देनी चाहिए, कही वो छुट तो नहीं गयी है |
अगर आपको कोई ऐसी इमेज मिलती है जिसमे Height और Width को नहीं डाला गया है तो उसे ठीक करिये | अच्छी बात है ये है कि वर्डप्रेस में ये समस्या तब तक नहीं आती है जब तक आप खुद से मैन्युअली इमेजेज को कोड के द्वारा नहीं डालने लगते है | यहाँ से भी आपको Image Optimize For Website में मदद मिलेगी |
निष्कर्ष:
1. आपको आपनी वेबसाइट में इमेजेज के Pexels साइज़ को नियंत्रण में रखना चाहिए और आपको अपनी सामान्य इमेज और बैकग्राउंड में प्रयोग की जाने वाली इमेजेज के लिए LazyLoad की सुविधा को सक्रिय करना चाहिए |
2. आपो अपनी वेबसाइट में सभी इमेजेज को कॉम्प्रेस करके ही उनका प्रयोग करना चाहिए और इसी के साथ अपनी वेबसाइट की परफॉरमेंस को बरकरार रखने के लिए Image CDN का उपयोग करना चाहिए |
3. आपकी वेबसाइट और आपकी इमेजेज का URL समान होना अनिवार्य है अगर ऐसा नहीं होता है तो आपकी वेबसाइट का लोडिंग टाइम बढ़ सकता है | अगर आप अपनी वेबसाइट में अनेको Icons का इस्तेमाल करते है तो आपको CSS Sprite का प्रयोग जरुर करना चाहिए |
4. अपनी वेबसाइट में कभी भी किसी दूसरी वेबसाइट की इमेज को Embed ना करे, अगर आपको ऐसा करना ही है तो उस इमेज को डाउनलोड करके अपनी साईट में अपलोड करे | और ये भी देखे कि कही और कोई आपकी इमेजेज को अपनी वेबसाइट में Embed तो नहीं कर रहा है | अगर ऐसा है तो अपनी वेबसाइट की Embedding को बंद करे|
5. अपनी इमेजेज के फालतू के डाटा (EXIF Data) को जरुर हटाये और साथ ही अपनी इमेजेज के Dimension पर भी एक नज़र अवश्य डाले!
➠ तो दोस्तों ये थे कुछ आवश्यक स्टेप्स जिनका प्रयोग आप Image Optimize For Website के लिए कर सकते है| उपर बताये गए सभी स्टेप्स को फॉलो करके आप ये मान सकते है कि आपकी Images की वजह से आपकी वेबसाइट की परफॉरमेंस खराब नहीं होगी|
| Website Speed Optimization के विषय में भी हमने इस आर्टिकल में काफी चर्चा की है और देखा जाये तो ये पूरा आर्टिकल ही वेबसाइट की स्पीड को सुधारने के उपर ही आधारित था| अगर आपका इसके बारे में कोई सवाल या सुझाव है तो हमे आप Comment Section में जरुर बताये ! |
