(कृपया ध्यान देंः कुछ लिंक में जानकारी अंग्रेज़ी में हो सकती है।)
आज, डेस्कटॉप कंप्यूटर की तुलना में मोबाइल डिवाइस पर अधिक लोग इंटरनेट ब्राउज़ करते हैं। विभिन्न स्क्रीन साइज़ के उपयोग में होने के कारण, जब आप अपनी वेबसाइट बनाते हैं, तो आपको सबसे बेहतर इमेज साइज़ चुनने की ज़रूरत होती है, ताकि आपके सभी विज़िटर्स को अच्छा यूज़र एक्सपीरियंस मिले, चाहे उनका डिवाइस कोई भी हो।
अगर आप अपनी इमेज को ऑप्टिमाइज़ नहीं करते हैं, तो आपकी वेबसाइट के विज़िटर्स को ऐसी इमेज दिख सकती हैं जो बहुत छोटी और धुंधली हों, या बहुत बड़ी हों, जिससे लोडिंग टाइम बढ़ जाता है और अनावश्यक स्क्रॉलिंग और ज़ूमिंग करनी पड़ती है।
अच्छी बात यह है कि अपनी इमेज को कई डिवाइस के साथ कम्पैटिबल बनाना आसान है। सही इमेज डाइमेंशन चुनकर, फ़ाइल साइज़ को कम रखकर, और रिस्पॉन्सिव वेबसाइट डिज़ाइन का उपयोग करके, आप शानदार ब्राउज़िंग एक्सपीरियंस दे सकते हैं।
मोबाइल और डेस्कटॉप डिवाइस के लिए अपनी इमेज को ऑप्टिमाइज़ करने के लिए नीचे दिए गए ट्यूटोरियल को फ़ॉलो करें।
वेबसाइट के लिए सबसे बेहतर इमेज साइज़
पिक्सेल चौड़ाई: डिस्प्ले एरिया पर निर्भर करता है, लेकिन सामान्य गाइडलाइन बैनर के लिए 1920px, मुख्य कंटेंट के लिए 1200px, और थंबनेल के लिए 400-800px सुझाती हैं। तेज़ लोडिंग स्पीड बनाए रखने के लिए WebP फ़ाइल टाइप में कंप्रेस्ड इमेज सबसे बेहतर हैं।
इमेज साइज़: आपकी इमेज का सबसे बेहतर समग्र (पिक्सेल) साइज़ आपके उपयोग के मामले पर निर्भर करता है, जैसे, बैकग्राउंड इमेज को ब्लॉग पोस्ट इमेज से बड़ा होना चाहिए।
फ़ाइल साइज़: 20 मेगाबाइट से बड़ी कोई भी चीज़ आपकी वेबसाइट स्पीड को नाटकीय रूप से प्रभावित कर सकती है। छोटी इमेज (दो मेगाबाइट तक साइज़ में, लेकिन लगभग 500 किलोबाइट) ज़्यादातर मामलों में बेहतर होती हैं।
इमेज एट्रिब्यूट: इमेज एट्रिब्यूट (alt text या alt tag) टेक्स्ट-बेस्ड होते हैं और आपकी वेबसाइट के परफ़ॉर्मेंस को प्रभावित नहीं करते हैं। हालांकि, इनका उपयोग स्क्रीन-रीडर सॉफ़्टवेयर के माध्यम से इमेज को समझने के लिए किया जाता है और ये वेब एक्सेसिबिलिटी का एक प्रमुख तत्व हैं। एट्रिब्यूट टेक्स्ट के साथ संक्षिप्त रहें, alt text को स्पेस सहित 100 कैरेक्टर से कम रखना सबसे अच्छा अभ्यास है।
डेस्कटॉप और मोबाइल डिवाइस के लिए सबसे बेहतर इमेज डाइमेंशन
नीचे दी गई टेबल डेस्कटॉप और मोबाइल वेबसाइट दोनों पर इमेज के लिए अनुशंसित डाइमेंशन प्रदान करती है:
| वेबसाइट इमेज टाइप | डेस्कटॉप इमेज डाइमेंशन (W x H) | मोबाइल इमेज डाइमेंशन (W x H) | अनुशंसित आस्पेक्ट रेशियो |
|---|---|---|---|
| बैकग्राउंड इमेज | 2560 x 1400 पिक्सेल | 360 x 640 पिक्सेल | 16:9 |
| हीरो इमेज | 1280 x 720 पिक्सेल | 360 x 200 पिक्सेल | 16:9 |
| वेबसाइट बैनर | 1200 x 400 पिक्सेल | 360 x 120 पिक्सेल | 3:1 |
| ब्लॉग इमेज | 1200 x 800 पिक्सेल | 360 x 240 पिक्सेल | 3:2 |
| लोगो (आयताकार) | 400 x 100 पिक्सेल | 160 x 40 पिक्सेल | 4:1 |
| लोगो (वर्गाकार) | 100 x 100 पिक्सेल | 60 x 60 पिक्सेल | 1:1 |
| फ़ेविकॉन | 16 x 16 पिक्सेल | 16 x 16 पिक्सेल | 1:1 |
| सोशल मीडिया आइकन | 32 x 32 पिक्सेल | 48 x 48 पिक्सेल | 1:1 |
| लाइटबॉक्स इमेज (फ़ुल स्क्रीन) | 1920 x 1080 पिक्सेल | 360 x 640 पिक्सेल | 16:9 |
| थंबनेल इमेज | 300 x 300 पिक्सेल | 90 x 90 पिक्सेल | 1:1 |
| प्रोडक्ट थंबनेल | 150–300 px | 150–300 px | 1:1 (वर्गाकार) |
ये सुझाए गए साइज़ हैं, जिन्हें इस आधार पर एडजस्ट करने की आवश्यकता हो सकती है कि आप रिस्पॉन्सिव वेबसाइट डिज़ाइन का उपयोग करते हैं या नहीं।
आपकी इमेज का रेंडर साइज़ उनके अपलोड साइज़ से छोटा होना लगभग हमेशा एक अच्छा विचार है।
वेबसाइट इमेज साइज़ गाइडलाइन
वेबसाइट पर आपको पांच मुख्य प्रकार की इमेज दिखाई देंगी:
वेब इमेज के प्रत्येक प्रकार पर अलग-अलग साइज़ आवश्यकताएं लागू होती हैं। आइए वेबसाइट इमेज के सामान्य प्रकारों के लिए सबसे बेहतर इमेज साइज़ पर एक नज़र डालें।
बैकग्राउंड इमेज साइज़
बैकग्राउंड इमेज आमतौर पर वेबसाइट पर सबसे बड़ी इमेज होती हैं। यह इमेज होमपेज या अन्य लैंडिंग पेज के बैकड्रॉप के रूप में काम करती हैं।
उदाहरण के लिए, साइकिल रिटेलर काउबॉय अपने प्रोडक्ट को होमपेज बैकग्राउंड के रूप में उपयोग करके केंद्र में रखता है। यह स्क्रीन को भर देता है, चाहे इसे किसी भी डिवाइस पर देखा जाए।
अनुशंसित इमेज चौड़ाई: 2560 पिक्सेल
अनुशंसित इमेज ऊंचाई: 1400 पिक्सेल
आस्पेक्ट रेशियो: 16:9
अनुशंसित फ़ाइल साइज़: 20 MB
हीरो इमेज साइज़
हीरो इमेज बैकग्राउंड इमेज के समान होती हैं लेकिन ऊंचाई में छोटी होती हैं, लगभग आधे साइज़ की होती है। बिना यूज़र को इसे देखने के लिए स्क्रॉल करने की ज़रूरत के अगर आपको स्क्रीन पर अधिक टेक्स्ट दिखाने की आवश्यकता है, तो हीरो इमेज एक बेहतरीन विकल्प है।
ऊपर दिए गए उदाहरण में, BLK और बोल्ड स्क्रीन को भरने के लिए कम आस्पेक्ट रेशियो वाली हीरो इमेज का उपयोग करता है, फिर भी नीचे कंटेंट के लिए जगह छोड़ता है।
अनुशंसित इमेज चौड़ाई: 1280 पिक्सेल और 2500 पिक्सेल के बीच
अनुशंसित इमेज ऊंचाई: 720 पिक्सेल और 900 पिक्सेल के बीच
आस्पेक्ट रेशियो: 16:9
अनुशंसित फ़ाइल साइज़: 10 MB
बैनर इमेज साइज़
बैनर इमेज अलग-अलग साइज़ और आकार की हो सकती हैं, यह इस बात पर निर्भर करता है कि वे कहां हैं और आप अपने विज़िटर्स को क्या दिखाना चाहते हैं। वेबसाइट बैनर का सबसे सामान्य प्रकार बैनर विज्ञापन है। बैनर विज्ञापनों को प्रमोट करने के लिए सबसे लोकप्रिय सेवाओं में से एक गूगल विज्ञापन है।
गूगल मोबाइल पर दिखने वाले बैनर विज्ञापनों के लिए सही इमेज साइज़िंग गाइडलाइन की सलाह देता है।
डेस्कटॉप ब्राउज़र पर डिस्प्ले विज्ञापनों के लिए गूगल की इमेज साइज़िंग गाइडलाइन।
अगर आप किसी बैनर इमेज के बारे में सोच रहे हैं जो विज्ञापन नहीं है, तो आयताकार विकल्प (जैसे, 300 x 200 पिक्सेल या 970 x 90 पिक्सेल) आमतौर पर बेहतर होते हैं।
अनुशंसित इमेज चौड़ाई: विज्ञापन प्लेटफ़ॉर्म से जांचें
अनुशंसित इमेज ऊंचाई: विज्ञापन प्लेटफ़ॉर्म से जांचें
आस्पेक्ट रेशियो: विभिन्न
अनुशंसित फ़ाइल साइज़: 150 KB (विज्ञापन प्लेटफ़ॉर्म से जांचें)
ब्लॉग इमेज साइज़
ब्लॉग इमेज प्रकार और साइज़ में बहुत अलग हो सकती हैं। ऊपर दी गई पोस्ट मार्केटिंग इंटेलिजेंस प्लेटफ़ॉर्म, व्हाटाग्राफ़ से आती है, और जबकि फ़ीचर्ड इमेज का अपलोड साइज़ 1880 x 1058 पिक्सेल है, रेंडर किया गया साइज़ छोटा है, 589 × 331 पिक्सेल पर।
अपने वेबपेज के लिए रेंडर साइज़ सेट करना आपके डिज़ाइन को परिष्कृत करने में मदद करता है और फ़ाइलों को छोटा रखता है (कुलाला पोस्ट में इमेज केवल 37.5 KB है)।
जब आपकी ब्लॉग पोस्ट की मुख्य हेडर इमेज (पेज के शीर्ष पर वाली) की बात आती है, तो उन्हें आपके ब्लॉग में समान रूप से साइज़ किया जाना चाहिए।
अनुशंसित इमेज चौड़ाई: 1200 पिक्सेल
अनुशंसित इमेज ऊंचाई: 800 पिक्सेल
आस्पेक्ट रेशियो: 3:2
अनुशंसित फ़ाइल साइज़: 3 MB
लोगो साइज़
आपका लोगो संभवतः आपकी वेबसाइट पर सबसे छोटी इमेज में से एक होगा (जब तक कि आप टैब बार में फ़ेविकॉन की गिनती नहीं करते)। आपके लोगो डिज़ाइन के आधार पर, आपको आयताकार या वर्गाकार आस्पेक्ट रेशियो का विकल्प चुनना चाहिए।
अधिकांश लोगो वर्गाकार 1:1 रेशियो के लिए उपयुक्त होते हैं, जिसे आप ऊपर कुलाला उदाहरण के निचले-बाएं में देख सकते हैं।
आयताकार रेशियो लंबे ब्रांड नामों के लिए या जहां लोगो ग्राफ़िक के बजाय शब्दों से बना हो, अच्छी तरह से काम करते हैं। Shopify की अपनी वेबसाइट लोगो लंबे 4:1 रेशियो का उपयोग करती है।
अनुशंसित इमेज चौड़ाई: 100 पिक्सेल
अनुशंसित इमेज ऊंचाई: 100 पिक्सेल
आस्पेक्ट रेशियो: 1:1, 2:3, 4:1
अनुशंसित फ़ाइल साइज़: 1 MB
मोबाइल इमेज साइज़ की सिफ़ारिशें
सही इमेज डाइमेंशन चुनें
छोटी मोबाइल स्क्रीन पर, कई यूज़र इमेज पर ज़ूम इन करने में सक्षम होने की सराहना करते हैं। इसलिए, इमेज साइज़ और फ़ाइल साइज़ के बीच संतुलन बनाने का प्रयास करें।
हाई-रिज़ॉल्यूशन इमेज आपकी वेबसाइट को शानदार ज़ूम क्षमताओं के साथ एक पेशेवर और सुव्यवस्थित लुक देती हैं। समान इमेज के आस्पेक्ट रेशियो को समान रखें ताकि पेज प्रकारों में एक समान डिज़ाइन बना रहे।
उदाहरण के लिए, आप ईकॉमर्स स्टोर में सभी प्रोडक्ट इमेज को वर्गाकार बना सकते हैं। वर्गाकार इमेज को छोटी स्क्रीन पर रीपोज़िशन करना आसान होता है। इसके अतिरिक्त, वर्गाकार और वर्टिकल इमेज मोबाइल स्क्रीन पर अच्छी तरह से फ़िट होती हैं, जिससे विज़िटर्स को स्क्रॉल करने की आवश्यकता के बिना आपकी अधिक इमेज देखने की अनुमति मिलती है।
Shopify पर, आप 20 MB तक की फ़ाइल साइज़ के साथ 5000 x 5000 पिक्सेल तक की इमेज अपलोड कर सकते हैं।
वर्गाकार प्रोडक्ट इमेज के लिए, 2048 x 2048 पिक्सेल का साइज़ अनुशंसित है।
याद रखें कि ज़ूम फ़ंक्शनैलिटी काम करने के लिए, आपकी इमेज 800 x 800 पिक्सेल से अधिक होनी चाहिए।
फ़ाइल साइज़ को ध्यान में रखें
बड़े फ़ाइल साइज़ वाली इमेज आपकी साइट की स्पीड को प्रभावित कर सकती हैं, खासकर जब विज़िटर स्मार्टफ़ोन का उपयोग कर रहे हों। कई वेबसाइट-बिल्डिंग प्लेटफ़ॉर्म में अपलोड पर अधिकतम फ़ाइल साइज़ की बाधाएं भी होती हैं। उदाहरण के लिए, Shopify 20 MB की अधिकतम फ़ाइल साइज़ का उपयोग करता है।
अगर आपको अपनी इमेज को उनके साइज़ को कम करने के लिए कंप्रेस करने की आवश्यकता है, तो ऑनलाइन इमेज रीसाइज़िंग टूल हैं जो मदद कर सकते हैं। इन टूल के साथ, आप बड़ी इमेज फ़ाइलों को नए डाइमेंशन या फ़ाइल टाइप में रीफ़ॉर्मेट कर सकते हैं।
अधिकांश भाग के लिए, आप हेडर बैकग्राउंड इमेज को 10 MB से नीचे रखना चाहेंगे, जबकि प्रोडक्ट फ़ोटो लगभग 300 KB के आसपास बहुत छोटी होनी चाहिए।
मोबाइल स्क्रीन डाइमेंशन के लिए फ़ोटो रीसाइज़ करें
Shopify आपकी इमेज को छोटी स्क्रीन पर सही दिखाने के लिए अपने आप रीसाइज़ कर देता है। लेकिन दूसरे प्लेटफ़ॉर्म पर आपको इमेज को मोबाइल के लिए खुद एडिट करना पड़ सकता है। ध्यान रखें कि डेस्कटॉप और मोबाइल स्क्रीन का ओरिएंटेशन अलग होता है।
यह भी याद रखें कि बड़ी फ़ाइलें आपकी वेबसाइट को धीरे लोड करती हैं। लॉसलेस कंप्रेशन से इमेज की क्वालिटी अच्छी रहती है, लेकिन फ़ाइल साइज़ बड़ा हो सकता है, जिससे साइट लोड होने में ज़्यादा समय लगता है। इसलिए बेहतर है कि अच्छे रिज़ॉल्यूशन के साथ छोटी फ़ाइल साइज़ वाली इमेज का इस्तेमाल करें।
Shopify का रिस्पॉन्सिव डिज़ाइन आपकी इमेज को अलग-अलग डिवाइस पर सही दिखाता है, लेकिन अगर आप सही फ़ाइल साइज़ का ध्यान रखेंगे, तो यूज़र को और भी स्मूद शॉपिंग अनुभव मिलेगा।
वेबसाइट के लिए इमेज साइज़ क्यों महत्वपूर्ण है?
वेबसाइट के लिए, इमेज साइज़ तीन मुख्य कारणों से महत्वपूर्ण है:
- यह बेहतर यूज़र एक्सपीरियंस बनाता है।
- यह वेबसाइट पेज स्पीड में सुधार करता है।
- यह वेबसाइट रैंकिंग में मदद करता है।
बेहतर यूज़र एक्सपीरियंस बनाता है
आपकी वेबसाइट पर हर उपयोग के लिए सही साइज़ की इमेज होना यूज़र एक्सपीरियंस को बेहतर बनाता है। विज़िटर्स उचित स्तर का विवरण देख सकते हैं और उन्हें पूरी इमेज देखने के लिए स्क्रॉल नहीं करना पड़ता।
कम गुणवत्ता वाली, पिक्सेलेटेड या बहुत छोटी इमेज आपके कंटेंट की गुणवत्ता को प्रभावित करती हैं। ईकॉमर्स वेबसाइट पर इससे ग्राहक आपके बिज़नेस या प्रोडक्ट की गुणवत्ता पर सवाल उठा सकते हैं। इसके विपरीत, उच्च गुणवत्ता और सही साइज़ की इमेज प्रोडक्ट का मूल्य बढ़ाती हैं और संभावित ग्राहकों को अधिक विज़ुअल जानकारी देती हैं।
उदाहरण के लिए, देखें कि कैसे सस्टेनेबल शू ब्रांड ऑलबर्ड्स से नीचे दी गई इमेज अपने प्रोडक्ट की विभिन्न विशेषताओं को स्पष्ट रूप से इंगित करके यूज़र एक्सपीरियंस को बढ़ाती हैं।
वेबसाइट पेज स्पीड में सुधार करता है
जब आप अपनी वेबसाइट पर बड़ी इमेज अपलोड करते हैं, तो पेज लोड होने में ज़्यादा समय लगता है। छोटी इमेज (डाइमेंशन और फ़ाइल साइज़ दोनों में) डिवाइस पर तेज़ी से लोड होती हैं।
इमेज लोडिंग स्पीड को अक्सर "कंटेंटफ़ुल पेंट" के रूप में संदर्भित किया जाता है। आप गूगल के पेजस्पीड इनसाइट्स का उपयोग करके अपने वेबपेज के कंटेंटफ़ुल पेंट और अन्य पेज-स्पीड मेट्रिक्स की जांच कर सकते हैं।
बड़ी इमेज के कारण धीमी पेज-लोडिंग स्पीड के इस उदाहरण में, सर्वर ने पहली इमेज को लोड करने में 2.1 सेकंड और सबसे बड़ी इमेज को लोड करने में 4.1 सेकंड का समय लिया।
कुल मिलाकर, उच्च बाउंस रेट से बचने के लिए अपनी पेज स्पीड को ऑप्टिमाइज़ करें।
वेबसाइट रैंकिंग में मदद करता है
वेबसाइट रैंकिंग सर्च इंजन रिज़ल्ट पेज (SERP) में आपकी वेबसाइट की स्थिति को दर्शाती है। सर्च के लिए ऑप्टिमाइज़ की गई वेबसाइटें प्रासंगिक यूज़र सर्च क्वेरी (जिन्हें कीवर्ड कहा जाता है) के लिए SERP पर ऊँची रैंक प्राप्त करती हैं।
गूगल यह तय करने के लिए कई मेट्रिक्स का उपयोग करता है कि कौन-से वेबपेज उसके सर्च रिज़ल्ट के शीर्ष पर आएंगे। इमेज की गुणवत्ता (या अधिक सटीक रूप से, बेहतर यूज़र एक्सपीरियंस देने वाली इमेज) भी गूगल के एल्गोरिदम में एक संभावित कारक होती है।
उपयोग करने के लिए सबसे बेहतर इमेज फ़ाइल टाइप कौन सा है?
सही इमेज फ़ाइल टाइप उच्च गुणवत्ता वाली इमेज सुनिश्चित करता है, जबकि बेहतर वेबसाइट परफ़ॉर्मेंस के लिए फ़ाइल साइज़ को प्रबंधनीय रखता है। यहां सबसे सामान्य इमेज फ़ाइल फ़ॉर्मेट और उनके सबसे अच्छे उपयोग के मामले हैं:
WebP
WebP एक इमेज फ़ॉर्मेट है जिसे गूगल द्वारा विकसित किया गया। यह वेब पर इमेज के लिए लॉसलेस कंप्रेशन प्रदान करता है, अक्सर JPEG या PNG की तुलना में फ़ाइल साइज़ को 30% से अधिक कम करता है।
यह वेबसाइट के लोड टाइम को काफी बेहतर कर सकता है, लेकिन ध्यान रखें कि WebP को अभी सभी ब्राउज़र पूरी तरह सपोर्ट नहीं करते।
JPEG
JPEG (या JPG) सबसे व्यापक रूप से उपयोग किए जाने वाले डिजिटल इमेज फ़ाइल फ़ॉर्मेट में से एक है क्योंकि यह फ़ाइल साइज़ और इमेज गुणवत्ता के बीच संतुलन प्रदान करता है। यह कई रंगों के साथ फ़ोटोग्राफ़ और जटिल इमेज प्रदर्शित करने के लिए एक लोकप्रिय विकल्प है।
हालांकि, JPEG लॉसी कंप्रेशन का उपयोग करता है, जिसका अर्थ है कि जब इमेज को कंप्रेस किया जाता है तो कुछ इमेज गुणवत्ता खो जाती है।
PNG
PNG एक लॉसलेस कंप्रेशन फ़ॉर्मेट है, यानी यह इमेज की गुणवत्ता कम किए बिना फ़ाइल साइज़ घटाता है। यह पारदर्शिता को भी सपोर्ट करता है, इसलिए पारदर्शी बैकग्राउंड वाली इमेज के लिए यह अच्छा विकल्प है।
हालाँकि PNG का फ़ाइल साइज़ अक्सर JPEG से बड़ा होता है, लेकिन स्पष्टता बनाए रखने की क्षमता इसे विस्तृत ग्राफिक्स और लोगो के लिए उपयुक्त बनाती है।
SVG
SVG (स्केलेबल वेक्टर ग्राफ़िक) एक वेक्टर इमेज फ़ॉर्मेट है, जिसका अर्थ है कि यह इमेज को रेंडर करने के लिए गणितीय समीकरणों का उपयोग करता है। यह SVG इमेज को गुणवत्ता हानि के बिना किसी भी साइज़ में स्केल करने की अनुमति देता है।
SVG लोगो, आइकन और अन्य ग्राफ़िक्स के लिए एक आदर्श फ़ॉर्मेट है जिन्हें कई स्थानों पर उपयोग करने की आवश्यकता होती है। SVG आमतौर पर अन्य फ़ॉर्मेट की तुलना में फ़ाइल साइज़ में छोटे होते हैं, जो लोड टाइम में सुधार करने में मदद करते हैं।
AVIF
AVIF (AV1 इमेज फ़ाइल फ़ॉर्मेट) वेब के लिए डिज़ाइन किया गया एक आधुनिक इमेज फ़ॉर्मेट है।
यह बेहतर कंप्रेशन प्रदान करता है, जो उच्च विज़ुअल गुणवत्ता बनाए रखते हुए अत्यंत छोटे फ़ाइल साइज़ बनाता है। AVIF फ़ाइलें अक्सर उनके WebP या JPEG समकक्षों की तुलना में बहुत छोटी होती हैं।
इसका उपयोग किसी भी वेब इमेज के लिए करें जहां सबसे तेज़ संभव परफ़ॉर्मेंस और सबसे छोटा फ़ाइल साइज़ प्राथमिक लक्ष्य हैं। इसकी मुख्य सीमा यह है कि यह एक नया फ़ॉर्मेट है और अभी तक सभी पुराने वेब ब्राउज़र द्वारा समर्थित नहीं है।
GIF
GIF एक बिटमैप इमेज फ़ॉर्मेट है जो सरल एनिमेशन का समर्थन करने की अपनी क्षमता के लिए जाना जाता है। यह लॉसलेस कंप्रेशन का उपयोग करता है और इमेज को अधिकतम 256 रंगों तक कम करता है, जिसके परिणामस्वरूप छोटे फ़ाइल साइज़ होते हैं।
जबकि GIF को स्थिर इमेज के लिए PNG द्वारा काफ़ी हद तक बदल दिया गया है, यह छोटे, लूपिंग एनिमेशन के लिए एक लोकप्रिय विकल्प बना हुआ है और ब्राउज़र द्वारा सार्वभौमिक रूप से पहचाना जाता है।
वेबसाइट पर इमेज साइज़ कैसे पता करें
किसी भी वेबपेज पर इमेज के साइज़ को देखने का सबसे तेज़ तरीका (इमेज को डाउनलोड किए बिना) आपके ब्राउज़र के इंस्पेक्ट टूल का उपयोग करना है।
यह विधि Mac और Windows पर, Safari, Chrome, या Firefox ब्राउज़र के साथ काम करती है।
वेबपेज पर जाएं और उस इमेज पर होवर करें जिसके बारे में आप जानकारी चाहते हैं। विकल्प मेनू लाने के लिए अपने माउस से राइट-क्लिक करें और इंस्पेक्ट देखें:
इंस्पेक्ट पर क्लिक करने से पेज का HTML कोड सामने आएगा (यह थोड़ा मुश्किल लग सकता है, लेकिन चिंता की बात नहीं है)।
इंस्पेक्शन पैनल में, आपके द्वारा क्लिक की गई इमेज के बारे में जानकारी हाइलाइट की जानी चाहिए। प्रासंगिक कोड पर होवर करते समय, इमेज भी हाइलाइट हो जाएगी:
इस स्थिति में ब्राउज़र आपको बताता है कि इमेज कितने पिक्सेल का उपयोग कर रही है। अगर आप वेबपेज का साइज़ बदलते हैं, तो यह संख्या भी उसी अनुसार बदल जाती है।
अगर आप इमेज के मूल अपलोड गुणों की तलाश कर रहे हैं, तो इमेज स्टोरेज लिंक पर होवर करें:
इंस्पेक्टर पैनल से बाहर निकलने के लिए, बस ऊपरी-दाएं कोने में X पर क्लिक करें।
इमेज ऑप्टिमाइज़ेशन टूल
ऑनलाइन इमेज ऑप्टिमाइज़र टूल आपकी वेबसाइट की इमेज को रीसाइज़ करने का एक सरल, तेज़ (और आमतौर पर फ्री) तरीका हैं। यहां तीन लोकप्रिय इमेज ऑप्टिमाइज़ेशन टूल हैं:
इमेज रीसाइज़र
Shopify का फ्री ऑनलाइन इमेज रीसाइज़िंग टूल मार्केटिंग चैनल और सोशल मीडिया में उपयोग के लिए आपकी इमेज को एडजस्ट करने का एक सुविधाजनक तरीका है।
आप Instagram पोस्ट और स्टोरीज़, YouTube थंबनेल और अन्य प्रकार के सोशल कंटेंट के लिए विभिन्न आधिकारिक सही डाइमेंशन में से चुन सकते हैं।
स्क्वीराई द्वारा इमेज ऑप्टिमाइज़र
स्क्वीराई का इमेज ऑप्टिमाइज़र टूल यह सुनिश्चित करने के लिए स्पीड-टेस्टेड है कि आपकी इमेज SEO-रेडी हैं। यह आपकी वेबसाइट पर सभी इमेज को स्वचालित रूप से ऑप्टिमाइज़ करता है, जिसमें नई इमेज भी शामिल हैं जिन्हें आप बाद में जोड़ते हैं।
इसके अलावा, आप किसी भी कोड को जाने बिना अपनी प्रोडक्ट फ़ोटोग्राफ़ी की सुरक्षा के लिए वॉटरमार्क को कस्टमाइज़ और लागू कर सकते हैं।
लॉयल्टीहार्बर इमेज ऑप्टिमाइज़र
लॉयल्टीहार्बर इमेज ऑप्टिमाइज़र स्क्वीराई द्वारा टूल के समान काम करता है, आपकी वेबसाइट पर इमेज को स्वचालित रूप से कंप्रेस करता है।
इसके अलावा, डैशबोर्ड आपको स्वचालित रूप से इमेज alt text सेट करने और बेहतर पेज स्पीड के लिए सबसे अच्छे इमेज फ़ाइल टाइप में कन्वर्ट करने की अनुमति देता है।
वैकल्पिक रूप से, अगर आपके पास क्षमता है, तो आप फ़ाइल साइज़ को कम करने में मदद के लिए Photoshop का भी उपयोग कर सकते हैं। लेकिन यह उपरोक्त टूल की तुलना में अधिक जटिल प्रक्रिया हो सकती है।
ट्रबलशूटिंग: इमेज फ़ॉर्मेटिंग समस्याएं
जैसे ही आप अपनी वेबसाइट का प्रबंधन करते हैं, आपको शायद किसी बिंदु पर इमेज फ़ॉर्मेटिंग समस्याओं का सामना करना पड़ेगा। इमेज के साथ समस्याएं गलत साइज़िंग से लेकर टूटे हुए लिंक तक हो सकती हैं।
आइए वेबसाइट इमेज के साथ कुछ सामान्य समस्याओं के समाधान देखें।
गलत इमेज साइज़
समस्या: इमेज बहुत बड़ी या छोटी दिखाई देती हैं, और वेबपेज के लेआउट को तोड़ सकती है, जिसके परिणामस्वरूप यूज़र एक्सपीरियंस से समझौता होता है।
समाधान: अगर आप वेबसाइट थीम या टेम्पलेट का उपयोग कर रहे हैं, तो अपने डिज़ाइन के लिए सही इमेज डाइमेंशन पर संसाधन खोजें। अपने वेबसाइट बिल्डर में, प्रत्येक इमेज के लिए रेंडर साइज़ चुनना सुनिश्चित करें ताकि इमेज अपने पूर्ण, मूल साइज़ में प्रदर्शित न हों।
धीमा लोडिंग टाइम
समस्या: इमेज वेबपेज के बाकी हिस्सों की तुलना में अधिक धीरे लोड होती हैं, या बिल्कुल नहीं।
समाधान: गलत फ़ाइल फ़ॉर्मेट अनावश्यक रूप से बड़े फ़ाइल साइज़ का कारण बन सकता है जो लोडिंग टाइम को प्रभावित करते हैं। अपनी इमेज के फ़ाइल फ़ॉर्मेट को बदलने के लिए इमेज एडिटिंग या कन्वर्ज़न टूल का उपयोग करें। ग्राफ़िक्स या लोगो के लिए, गुणवत्ता की हानि के बिना स्केलेबिलिटी के लिए SVG का उपयोग करने पर विचार करें। अन्य इमेज के लिए, बड़ी फ़ाइलों को कंप्रेस करने के लिए WebP में कन्वर्ट करने पर विचार करें।
खराब इमेज गुणवत्ता
समस्या: इमेज पिक्सेलेटेड या धुंधली दिखाई देती हैं।
समाधान: अगर आपकी इमेज पिक्सेलेटेड या धुंधली दिखाई देती हैं, तो उच्च-रिज़ॉल्यूशन वर्ज़न प्राप्त करने का प्रयास करें। याद रखें, इमेज रिज़ॉल्यूशन इमेज साइज़ से अलग है। रिज़ॉल्यूशन एक इमेज में मौजूद विवरण की मात्रा को संदर्भित करता है, अक्सर प्रति इंच पिक्सेल (PPI) में मापा जाता है। उच्च रिज़ॉल्यूशन का मतलब है एक तेज़ इमेज, साइज़ की परवाह किए बिना।
अगर कंप्रेशन द्वारा इमेज गुणवत्ता कम की जा रही है, तो इसकी कंप्रेशन सेटिंग्स को एडजस्ट करें या PNG जैसे लॉसलेस कंप्रेशन फ़ॉर्मेट पर स्विच करें।
इमेज बिल्कुल प्रदर्शित नहीं हो रही हैं
समस्या: टूटे हुए इमेज लिंक के परिणामस्वरूप कोई इमेज दिखाई नहीं देती है।
समाधान: अपनी इमेज के स्रोत URL को सत्यापित करें। यह URL सीधे आपकी इमेज फ़ाइल के स्थान पर ले जाना चाहिए। URL में इमेज फ़ाइल नाम की तुलना अपनी इमेज फ़ाइल के वास्तविक नाम से करें। उन्हें फ़ाइल एक्सटेंशन (.jpg, .png, .svg) सहित बिल्कुल मेल खाना चाहिए।
सफलता के लिए वेबसाइट इमेज को ऑप्टिमाइज़ करें
अपनी वेबसाइट पर इमेज जोड़ना केवल चीज़ों को अच्छा दिखाने के बारे में नहीं है, यह यूज़र एक्सपीरियंस को बढ़ाने और सर्च इंजन रैंकिंग को बढ़ावा देने के लिए एक प्रमुख कारक है।
आपकी इमेज का साइज़ इन दोनों चीज़ों को प्रभावित करता है। बहुत बड़ी इमेज होने पर वेबपेज धीरे लोड होता है। बहुत छोटी इमेज होने पर वह पिक्सेलेटेड या धुंधली दिख सकती है।
अपनी वेबसाइट डिज़ाइन की इमेज डाइमेंशन आवश्यकताओं को समझना सुनिश्चित करें, और इमेज रिज़ॉल्यूशन और फ़ाइल साइज़ को संतुलित करने के लिए सही फ़ाइल फ़ॉर्मेट चुनें।
पहली बार विक्रेताओं से लेकर वैश्विक रिटेलर तक, Shopify सभी के लिए काम करता है। प्लान और प्राइसिंग देखें।
वेबसाइट के लिए सबसे बेहतर इमेज साइज़ FAQ
वेबसाइट के लिए सबसे बेहतर इमेज साइज़ क्या है?
फ़ुल-स्क्रीन इमेज में कम से कम 2500 पिक्सेल की चौड़ाई होनी चाहिए। वेबसाइट के लिए सबसे बेहतर इमेज साइज़ इमेज के उपयोग और रेंडर साइज़ के साथ-साथ पेज लोडिंग टाइम पर इमेज फ़ाइल साइज़ के प्रभाव पर निर्भर करता है।
वेबसाइट के लिए सबसे बेहतर इमेज फ़ॉर्मेट क्या है?
तेज़ परफ़ॉर्मेंस सुनिश्चित करने के लिए WebP वेबसाइट के लिए एक लोकप्रिय इमेज फ़ॉर्मेट है। गूगल द्वारा विकसित, WebP वेब पर इमेज के लिए लॉसलेस कंप्रेशन प्रदान करता है, JPEG और PNG की तुलना में फ़ाइल साइज़ को 30% तक कम करता है। हालांकि, यह ध्यान देने योग्य है कि WebP को सभी ब्राउज़र द्वारा सार्वभौमिक रूप से समर्थित नहीं किया गया है।
इमेज साइज़ और रिज़ॉल्यूशन के बीच क्या अंतर है?
इमेज साइज़ एक इमेज के डाइमेंशन को संदर्भित करता है, आमतौर पर पिक्सेल में इसकी चौड़ाई और ऊंचाई से मापा जाता है। इमेज रिज़ॉल्यूशन एक इमेज में मौजूद विवरण की मात्रा को संदर्भित करता है, अक्सर प्रति इंच पिक्सेल (PPI) में मापा जाता है। उच्च रिज़ॉल्यूशन का मतलब है अधिक विवरण और एक तेज़ इमेज, इसके साइज़ की परवाह किए बिना।
इमेज साइज़ वेबसाइट लोड टाइम को कैसे प्रभावित करता है?
इमेज का फ़ाइल साइज़ जितना बड़ा होगा, इमेज को डाउनलोड करने और यूज़र की स्क्रीन पर प्रदर्शित होने में उतना ही अधिक समय लगेगा। यह वेबपेज के लोडिंग टाइम को धीमा कर सकता है, जो यूज़र एक्सपीरियंस और सर्च इंजन परफ़ॉर्मेंस को नकारात्मक रूप से प्रभावित कर सकता है। इसलिए, गुणवत्ता और फ़ाइल साइज़ को संतुलित करके इमेज को ऑप्टिमाइज़ करना महत्वपूर्ण है।
मैं गुणवत्ता खोए बिना इमेज के फ़ाइल साइज़ को कैसे कम कर सकता हूं?
आप लॉसलेस कंप्रेशन का उपयोग करके गुणवत्ता खोए बिना इमेज के फ़ाइल साइज़ को कम कर सकते हैं, जो इमेज की उपस्थिति को प्रभावित किए बिना इमेज फ़ाइल से अनावश्यक डेटा को हटा देता है। Adobe Photoshop या ऑनलाइन इमेज ऑप्टिमाइज़र जैसे टूल लॉसलेस कंप्रेशन के लिए विकल्प प्रदान करते हैं।
