Shopify इमेज साइज और 500 KB का नियम
Shopify allows 20 MB per image. That is the limit, not the target. Here is the size your storefront actually wants.
अपने Shopify मास्टर के रूप में 2048 by 2048 pixels का उपयोग करें और प्रत्येक डिलीवर की गई फ़ाइल को 500 KB से कम रखें। Shopify 20 MB और 4472 pixels square तक की छवियों की अनुमति देता है, लेकिन वे संख्याएं यह बताती हैं कि प्लेटफ़ॉर्म क्या सहन कर सकता है, न कि यह कि एक तेज़ स्टोरफ़्रंट को क्या चाहिए।
20 MB का आंकड़ा वह संख्या है जिसे अधिकांश गाइड उद्धृत करते हैं, और इसके आधार पर डिज़ाइन करना गलत है। Shopify जिसकी अनुमति देता है और Shopify जिसके लिए पुरस्कृत करता है, वे अलग-अलग चीजें हैं। एक उत्पाद पृष्ठ जिसमें प्रत्येक 3 MB की 8 छवियां हैं, वह 24 MB का पृष्ठ है, और मोबाइल खरीदार इसके लोड होने से पहले ही चले जाते हैं।
प्लेसमेंट के अनुसार Shopify छवि आकार
उत्पाद छवियां 2048 pixels पर वर्गाकार होनी चाहिए, जबकि बैनर, संग्रह टाइल और लोगो प्रत्येक को अपने स्वयं के आयामों की आवश्यकता होती है। हर जगह एक ही आकार का उपयोग करने से बैनर खिंचे हुए और संग्रह छवियां कटी हुई दिखाई देती हैं।
| प्लेसमेंट | अनुशंसित pixels | लक्षित फ़ाइल आकार | नोट्स |
|---|---|---|---|
| उत्पाद फोटो | 2048 x 2048 | 300 KB से कम | वर्गाकार ग्रिड को व्यवस्थित रखता है |
| संग्रह टाइल | 1200 x 1200 | 200 KB से कम | अधिकांश थीम द्वारा वर्गाकार में काटा गया |
| होमपेज बैनर | 1920 x 1080 | 400 KB से कम | सबसे बड़ा कंटेंटफुल पेंट तत्व |
| स्लाइडशो छवि | 1920 x 800 | 350 KB से कम | मोबाइल पर परीक्षण करें, किनारे कट जाते हैं |
| लोगो | 500 x 250 | 50 KB से कम | यदि पारदर्शिता की आवश्यकता हो तो PNG |
| फेविकॉन | 96 x 96 | 10 KB से कम | केवल PNG |
थीम छवियों को अलग तरह से क्रॉप करते हैं, और एक बैनर जो डेस्कटॉप पूर्वावलोकन पर सही दिखता है, वह अक्सर फोन पर बीच से कट जाता है। बैनर के महत्वपूर्ण हिस्से को केंद्रीय 60 प्रतिशत में रखें ताकि कोई भी थीम इसे क्रॉप न कर सके।
500 KB वह संख्या क्यों है जो मायने रखती है
पृष्ठ का वजन यह तय करता है कि स्टोरफ़्रंट कितनी तेज़ी से लोड होता है, और एक सामान्य उत्पाद पृष्ठ पर अधिकांश वजन छवियों का होता है। कुल 2 MB से कम का पृष्ठ मोबाइल डेटा पर आसानी से लोड हो जाता है, जबकि 24 MB का पृष्ठ नहीं होता।
अधिकांश स्टोरों के लिए फोन पर खरीदारी करने वाले लोग ही अधिकांश ट्रैफ़िक बनाते हैं, और मोबाइल कनेक्शन ऑफिस ब्रॉडबैंड की तुलना में बहुत अधिक भिन्न होते हैं। लोड समय का हर सेकंड रूपांतरणों को प्रभावित करता है, जो छवि के वजन को एक तकनीकी प्रश्न के बजाय राजस्व का प्रश्न बनाता है। 8 उत्पाद छवियों को 3 MB से घटाकर 300 KB करने से पृष्ठ से 21 MB कम हो जाता है और ऐसा कुछ भी नहीं बदलता जिसे कोई खरीदार देख सके।
क्या Shopify आपके लिए छवियों को संपीड़ित करता है
Shopify अपने कंटेंट डिलीवरी नेटवर्क (CDN) के माध्यम से आकार बदले गए वेरिएंट परोसता है और सहायक ब्राउज़रों के लिए स्वचालित रूप से WebP में परिवर्तित करता है। प्लेटफ़ॉर्म एक उचित काम करता है, और यह आपके द्वारा अपलोड की गई किसी भी चीज़ से काम करता है।
यही अंतिम बिंदु इसकी सीमा है। Shopify आपके मूल से छोटे वेरिएंट उत्पन्न करता है, इसलिए खराब तरीके से संपीड़ित 5 MB का अपलोड एक अच्छी तरह से तैयार किए गए 400 KB के अपलोड की तुलना में बड़े वेरिएंट उत्पन्न करता है। अपलोड करने से पहले संपीड़ित करना आपके स्वयं के स्टोरेज उपयोग को भी कम करता है और बल्क आयात को बहुत तेज़ बनाता है, क्योंकि 500 उत्पादों का आयात 2.5 GB के बजाय 200 MB स्थानांतरित करता है।
Shopify के लिए छवियां कैसे तैयार करें
एक तेज़ उत्पाद पृष्ठ बनाने के लिए, इन 6 चरणों का पालन करें।
- अपने फोटो एडिटर से 2048 by 2048 pixels पर एक वर्गाकार मास्टर निर्यात करें।
- किसी भी बैनर या लाइफस्टाइल छवि का आकार उसकी वास्तविक डिस्प्ले चौड़ाई में बदलें, उच्च घनत्व वाली स्क्रीन के लिए इसे दोगुना करें।
- तस्वीरों को WebP में बदलें, या यदि आपका वर्कफ़्लो इस पर निर्भर करता है तो JPG रखें, क्योंकि Shopify दोनों तरह से परिवर्तित करता है।
- उत्पाद तस्वीरों के लिए 300 KB और बैनर के लिए 400 KB का उपयोग करके एक लक्षित आकार में संपीड़ित करें।
- उत्पाद कोड और दृश्य के अनुसार फ़ाइलों का नाम रखें ताकि एक बल्क CSV आयात छवियों को सही उत्पादों से मैप कर सके।
- अपलोड करें और केवल डेस्कटॉप पूर्वावलोकन के बजाय फोन पर उत्पाद पृष्ठ की जांच करें।
Shopify पर WebP
Shopify वर्षों से मूल रूप से WebP परोस रहा है और इसे समर्थन देने वाले ब्राउज़रों के लिए अपलोड की गई JPG और PNG फ़ाइलों को स्वचालित रूप से परिवर्तित करता है। सीधे WebP अपलोड करना स्वीकार्य है और यह आपको इसे प्लेटफ़ॉर्म पर छोड़ने के बजाय संपीड़न पर नियंत्रण देता है।
WebP 25 से 35 प्रतिशत छोटे फ़ाइल आकारों में JPG के समान दृश्य गुणवत्ता प्राप्त करता है, जो 8 तस्वीरों वाले पृष्ठ पर रखने योग्य है। एक मामला जिससे बचना चाहिए वह है WebP अपलोड करना जहां फ़ाइल को बाद में किसी आपूर्तिकर्ता द्वारा डाउनलोड किया जाना है या प्रिंट शॉप पर भेजा जाना है, क्योंकि वे स्थान अभी भी JPG की उम्मीद करते हैं।
धीमे उत्पाद पृष्ठ को ठीक करना
पृष्ठ पर सबसे बड़ी छवि से शुरुआत करें, क्योंकि सबसे बड़ी एकल फ़ाइल आमतौर पर अधिकांश देरी के लिए ज़िम्मेदार होती है। Shopify स्टोरफ़्रंट पर यह सामान्य रूप से होमपेज बैनर या पहली उत्पाद तस्वीर होती है।
- संपीड़ित करने से पहले आकार बदलें। 1920 pixel के स्लॉट में 4000 pixel का बैनर अपने 75 प्रतिशत डेटा को बर्बाद करता है।
- एबव-द-फ़ोल्ड छवियों की संख्या कम करें। एक साथ लोड होने वाली 12 छवियों की गैलरी बाकी सब चीजों में देरी करती है।
- जांचें कि लेज़ी लोडिंग चालू है बिलो-द-फ़ोल्ड छवियों के लिए, जिसे अधिकांश आधुनिक थीम डिफ़ॉल्ट रूप से संभालते हैं।
- एनिमेटेड GIF फ़ाइलों को वीडियो से बदलें, क्योंकि एक छोटा GIF अक्सर पूरे बाकी पृष्ठ से अधिक भारी होता है।
- ऐप्स का ऑडिट करें। समीक्षा विजेट, पॉपअप और ट्रस्ट बैज अक्सर अपनी खुद की छवियां और स्क्रिप्ट लोड करते हैं।
ऑल्ट टेक्स्ट और छवि फ़ाइल नाम
स्क्रीन रीडर का उपयोग करने वाले खरीदारों के लिए उत्पाद का वर्णन करने वाला ऑल्ट टेक्स्ट लिखें, और फ़ाइलों का नाम कैमरे के बजाय उत्पाद के नाम पर रखें। IMG_4821.jpg नामक फ़ाइल खोज इंजनों और खरीदारों को कुछ नहीं बताती।
navy-linen-shirt-front.jpg जैसे पैटर्न का उपयोग करें, जो बल्क आयात में पठनीय रहता है, फ़ोल्डर में अनुमानित रूप से सॉर्ट होता है और खोज परिणामों में छवि का वर्णन करता है। ऑल्ट टेक्स्ट में यह बताना चाहिए कि तस्वीर क्या दिखाती है, जिसमें रंग, सामग्री और दृश्य शामिल हैं, बिना उत्पाद के शीर्षक को शब्द-दर-शब्द दोहराए। दोनों फ़ील्ड प्रति उत्पाद कुछ सेकंड लेते हैं और छवि खोज में स्टोर के दिखने के तरीके को बेहतर बनाते हैं।
बदलावों को लागू करने से पहले उनका परीक्षण करना
पहले 5 उत्पादों को प्रोसेस करें, उन्हें प्रकाशित करें, और पूरे कैटलॉग को चलाने से पहले एक वास्तविक फोन पर पृष्ठों की जांच करें। 500 उत्पादों पर लागू की गई सेटिंग्स की गलती को रोकने की तुलना में पूर्ववत करने में बहुत अधिक समय लगता है।
परीक्षण उत्पादों पर 3 चीजों की जांच करें। पुष्टि करें कि छवियां पूर्ण ज़ूम पर तीक्ष्ण दिखती हैं, क्योंकि खरीदार कपड़ों और गहनों पर ज़ूम का भारी उपयोग करते हैं। पुष्टि करें कि संग्रह ग्रिड सुसंगत क्रॉप दिखाता है। पुष्टि करें कि पृष्ठ ऑफिस ब्रॉडबैंड के बजाय मोबाइल डेटा पर तेज़ी से लोड होता है। केवल तभी बाकी सब चीजों पर समान सेटिंग्स लागू करें।
छवि ऐप्स बनाम अपलोड करने से पहले इसे स्वयं करना
संपीड़न ऐप्स उस समस्या को हल करने के लिए मासिक शुल्क लेते हैं जिसे आप अपलोड करने से पहले एक बार में हल कर सकते हैं। ऐप्स तब उपयोगी होते हैं जब किसी स्टोर को कई लोगों से लगातार नई छवियां प्राप्त होती हैं और कोई भी यह नियंत्रित नहीं करता कि क्या अपलोड किया जा रहा है।
एक स्थिर कैटलॉग और छवियों का प्रबंधन करने वाले एक व्यक्ति वाले स्टोर को आवर्ती शुल्क की आवश्यकता नहीं होती है। लाइब्रेरी को एक बार संपीड़ित करना और नई तस्वीरों के आने पर उन्हें संपीड़ित करना समान परिणाम प्राप्त करता है। तब पुनर्विचार करें जब कैटलॉग उस सीमा से आगे बढ़ जाए जिसे आप हाथ से प्रोसेस कर सकते हैं, या जब कई कर्मचारी बिना किसी विनिर्देश का पालन किए छवियां अपलोड करते हैं।
सामान्य Shopify छवि गलतियाँ
सीधे कैमरे से अपलोड करना सबसे महंगी गलती है, क्योंकि एक 24 megapixel की तस्वीर में स्टोरफ़्रंट द्वारा प्रदर्शित किए जा सकने वाले डेटा से 10 गुना अधिक डेटा होता है। प्लेटफ़ॉर्म फ़ाइल को स्वीकार करता है, और पृष्ठ को इसके लिए भुगतान करना पड़ता है।
दो अन्य गलतियाँ नियमित रूप से दिखाई देती हैं। एक संग्रह में छवि आकृतियों को मिलाने से एक असमान ग्रिड बनता है, क्योंकि थीम वर्गाकार में क्रॉप करते हैं और एक पोर्ट्रेट तस्वीर अपना ऊपर और नीचे का हिस्सा खो देती है। उत्पाद तस्वीरों के लिए PNG का उपयोग करने से बिना किसी दृश्य लाभ के फ़ाइल का आकार 3 से 5 गुना बढ़ जाता है, क्योंकि PNG हर pixel को बिल्कुल वैसे ही संग्रहीत करता है और एक तस्वीर में शोषण करने के लिए कोई सपाट क्षेत्र नहीं होता है।
एक सुसंगत कैटलॉग बनाए रखना
पूरे कैटलॉग को एक बैच में प्रोसेस करें ताकि हर उत्पाद की तस्वीर समान आयाम, संपीड़न और फ़्रेमिंग साझा करे। उत्पादों की तुलना करने वाले खरीदार विसंगति को नोटिस करते हैं, भले ही वे इसका नाम न बता सकें।
संगति संग्रह ग्रिड में भी मदद करती है, जहां मिलान आकार और चमक की छवियां एक इकट्ठे पृष्ठ के बजाय एक डिज़ाइन किए गए पृष्ठ के रूप में पढ़ी जाती हैं। आयाम और आकार का लक्ष्य एक बार सेट करें, फिर प्रत्येक उत्पाद को व्यक्तिगत रूप से समायोजित करने के बजाय उन्हें हर फ़ाइल पर लागू करें।
एक बार में कैटलॉग को प्रोसेस करना
एक बार में 500 तक छवियां डालें, या सीधे अपने फोटोग्राफर से एक ZIP संग्रह खींचें, और हर फ़ाइल उसी विनिर्देश के अनुसार आकार बदलकर और संपीड़ित होकर वापस आती है। डेस्कटॉप सॉफ़्टवेयर में एक दोपहर लेने वाला कैटलॉग कुछ ही मिनटों में समाप्त हो जाता है।
सब कुछ आपके अपने प्रोसेसर पर आपके ब्राउज़र के अंदर चलता है, इसलिए अप्रकाशित उत्पाद, मौसमी अभियान शॉट्स और आपूर्तिकर्ता फोटोग्राफी कभी भी सर्वर तक नहीं पहुंचते हैं। प्रतिबंध के तहत लॉन्च की तैयारी करने वाले स्टोर के लिए, फ़ाइलों को स्थानीय रखना एक नियंत्रित घोषणा और लीक के बीच का अंतर है, और इसमें कुछ भी अतिरिक्त खर्च नहीं होता है।