Shopify प्रोडक्ट इमेज साइज़ जो सच में सही दिखें

Shopify प्रोडक्ट इमेज दो तरीकों में से किसी एक तरीके से फेल होती हैं। या तो वे बहुत छोटी होती हैं, जिससे जब कोई ग्राहक सीम या स्टोन सेटिंग को ध्यान से देखता है तो ज़ूम व्यू धुंधला हो जाता है। या फिर वे कैमरे से सीधे निकलते ही बहुत बड़ी होती हैं, जिससे फ़ोन पर पेज धीमा हो जाता है — जहाँ आपका ज़्यादातर ट्रैफ़िक आता है। एडमिन बिना कोई चेतावनी दिए दोनों को स्वीकार कर लेता है।

Shopify ज़्यादातर स्टोर मालिकों के अंदाज़े से कहीं ज़्यादा आपके लिए करता है: यह आपके स्टोर की अलग-अलग जगहों के लिए हर इमेज के कई साइज़ बनाता है, और जहाँ ब्राउज़र सपोर्ट करते हैं वहाँ इसका CDN WebP या AVIF जैसा मॉडर्न फ़ॉर्मेट खुद चुन लेता है। जो यह नहीं करेगा, वह है असंगत एस्पेक्ट रेशियो ठीक करना, यह अंदाज़ा लगाना कि कौन-सी फ़ोटो किस वैरिएंट की है, या किसी भद्दे कटआउट को सुधारना। यह वह हिस्सा है जो आपके हाथ में है।

2048 x 2048 पर शुरू करें और वहीं रुक जाएँ

Shopify की अपनी गाइडलाइन के मुताबिक: स्क्वेयर प्रोडक्ट इमेज के लिए आमतौर पर 2048 x 2048 px सबसे अच्छी दिखती है। सख़्त सीमाएँ इससे कहीं ज़्यादा ऊपर हैं — किसी प्रोडक्ट या कलेक्शन इमेज का साइज़ 20 MB से कम होना चाहिए, और यह 5000 x 5000 px यानी 25 मेगापिक्सल तक जा सकती है।

ये अधिकतम सीमाएँ कोई लक्ष्य नहीं हैं। Dawn थीम में, इनलाइन प्रोडक्ट गैलरी CDN से 1946 px से ज़्यादा चौड़ी कोई भी इमेज कभी नहीं माँगती, और ज़ूम लाइटबॉक्स भी 4096 px से ऊपर के साइज़ नहीं माँगता। 5000 px वाली मास्टर इमेज ज़्यादातर सिर्फ़ धीमी अपलोड और बीच में धीमी एडिटिंग दिलाती है। मुख्य गैलरी के लिए 2048 px वाले स्क्वेयर पर ही टिके रहें। सपोर्टेड अपलोड फ़ॉर्मेट में PNG, JPEG और WebP शामिल हैं, इसलिए Shopify को 6 MB वाली TIFF की बजाय कंप्रेस्ड फ़ाइल दें।

स्क्वेयर या टॉल: एक रेशियो चुनें और उसी पर टिके रहें

कलेक्शन ग्रिड में ही मिले-जुले एस्पेक्ट रेशियो साफ़ नज़र आते हैं, इसीलिए Shopify फ़ीचर्ड इमेज में एक जैसा रेशियो रखने की सलाह देता है। Dawn जैसी थीम आपको या तो हर इमेज के हिसाब से फ़्रेम एडजस्ट करने देती हैं, या सब कुछ एक फ़िक्स्ड रेशियो में लॉक करने देती हैं, और दोनों ही असंगति की सज़ा देते हैं: एडजस्ट करने से ग्रिड भद्दा दिखता है, लॉक करने से किसी बोतल का ऊपरी हिस्सा कट जाता है या किसी रिंग के चारों ओर खाली जगह रह जाती है।

इसलिए एक बार में फ़ैसला कर लें। स्क्वेयर (1:1) सबसे सुरक्षित डिफ़ॉल्ट है और संकरी स्क्रीन पर भी अच्छी तरह फिट बैठता है। 4:5 या 2:3 जैसे पोर्ट्रेट रेशियो अपैरल और लंबी बोतलों के लिए सही रहते हैं, क्योंकि ये मोबाइल पर ज़्यादा वर्टिकल जगह भरते हैं। जो आप नहीं कर सकते, वह है एक ही कलेक्शन में दोनों को साथ चलाना।

इसे लागू करने के लिए प्रोडक्ट का कटआउट बनाएँ और फ़्रेम को खुद फिर से बनाएँ। remover.bg पर एक फ़ोटो अपलोड करें, बैकग्राउंड हटाएँ, और उसकी जगह वही सॉलिड सफ़ेद या ब्रांड कलर लगाएँ जो बाकी हर लिस्टिंग में इस्तेमाल हो रहा है। फिर नतीजे को अपने चुने हुए फ़्रेम के हिसाब से, जो भी एक्सपोर्ट टूल आप पहले से इस्तेमाल करते हैं उसमें रीसाइज़ करें, ताकि हाथ में पकड़ा जाने वाला मग और फ़ुल-लेंथ कोट दोनों एक जैसे डाइमेंशन में आएँ। यही कटआउट Amazon व्हाइट बैकग्राउंड गाइड के सख़्त मार्केटप्लेस नियमों के लिए भी काम आता है, या आप इसे ट्रांसपेरेंट रखकर बाद में कंपोज़िट कर सकते हैं — देखें ट्रांसपेरेंट PNG कब सही आउटपुट है।

Shopify का CDN रीसाइज़ करता है, लेकिन आपका सोर्स ठीक नहीं कर सकता

थीम, Liquid के image_url और image_tag फ़िल्टर के ज़रिए इमेज माँगती हैं, जो एक srcset बनाते हैं ताकि CDN हर डिवाइस के हिसाब से सही साइज़ और सही फ़ॉर्मेट वाली फ़ाइल दे सके। यही वजह है कि अच्छी तरह बनी थीम आपकी 2048 px वाली फ़ाइल कभी 390 px वाले फ़ोन को नहीं भेजती।

दो चीज़ें इसमें शामिल नहीं हैं। अपलोड के समय फ़ॉर्मेट का चुनाव अब भी मायने रखता है: WebP में एक्सपोर्ट करने से फ़ाइलें CDN तक पहुँचने से पहले ही छोटी रहती हैं, और Shopify बिना किसी कन्वर्ज़न के WebP स्वीकार करता है, बिल्कुल उसी तरह जैसे remover.bg शुरू से आख़िर तक WebP संभालता है। और सैकड़ों SKU के लिए कोई फ़ोल्डर-खींचकर-छोड़ने वाला शॉर्टकट नहीं है; यह काम बैकग्राउंड रिमूवल API के लिए लिखी स्क्रिप्ट का है, जिसे आपके CSV इम्पोर्ट के साथ चलाया जाए।

ज़ूम तभी काम आता है जब पिक्सल मौजूद हों

Shopify कहता है कि ज़ूम को सही तरीके से काम करने के लिए इमेज का साइज़ 800 x 800 px से ज़्यादा होना चाहिए। Dawn में, प्रोडक्ट टेम्पलेट की ज़ूम सेटिंग में क्लिक और होवर, ओपन लाइटबॉक्स, या बिल्कुल भी ज़ूम न रखने का विकल्प मिलता है।

जब टेक्सचर ही बिकने की वजह हो तो ज़ूम ऑन रखें: निटवियर, लेदर का दाना, एनग्रेविंग, जेमस्टोन के फ़ेसेट, लकड़ी। फ़्लैट ग्राफ़िक्स और छोटे आइकन के लिए इसे बंद रखें, क्योंकि वहाँ ज़ूम सिर्फ़ कंप्रेशन आर्टिफ़ैक्ट्स को उजागर करता है। किनारों के मामले में भी ज़ूम बिल्कुल माफ़ नहीं करता — फ़र ट्रिम, बिखरे बाल और महीन स्ट्रैप हर गलती दिखा देते हैं, और यहीं एक साफ़-सुथरा कटआउट अपनी कीमत वसूल करता है।

वैरिएंट इमेज और मीडिया का क्रम

हर वैरिएंट को ठीक एक असाइन की गई इमेज सपोर्ट करती है — सिर्फ़ इमेज, कोई वीडियो या 3D मॉडल नहीं — और जब कोई ग्राहक वह ऑप्शन चुनता है तो यही प्रीव्यू बन जाती है।

क्योंकि हर वैरिएंट के लिए एक इमेज शायद ही कभी काफ़ी होती है, इसके इर्द-गिर्द गैलरी का इस्तेमाल करें। हर शॉट को प्रोडक्ट मीडिया में जोड़ें, उन्हें इस तरह क्रम में रखें कि जुड़े हुए शॉट साथ-साथ रहें, और सबसे दमदार इमेज को सबसे पहले रखें: पहला मीडिया आइटम ही प्रोडक्ट कार्ड और डिफ़ॉल्ट व्यू तय करता है।

Alt टेक्स्ट: 512 कैरेक्टर की इजाज़त है, 125 काफ़ी हैं

Shopify alt टेक्स्ट को अधिकतम 512 कैरेक्टर तक सीमित रखता है और 125 या उससे कम कैरेक्टर की सलाह देता है। यह पढ़ने में आसानी की गाइडलाइन है, स्क्रीन-रीडर की कोई सीमा नहीं: लंबा alt टेक्स्ट सुनने में थकाऊ होता है, क्योंकि सुनने वाला उसे तिरछी नज़र से नहीं देख सकता। फ़्रेम का वर्णन करें, वैरिएंट सहित। "नेवी लिनन शर्ट, फ़्रंट व्यू, बटन बंद" "शर्ट" से बेहतर है। "इमेज ऑफ़" जैसे शब्द छोड़ें और कीवर्ड लिस्ट भी न लगाएँ। Alt टेक्स्ट को प्रोडक्ट-दर-प्रोडक्ट की बजाय CSV अपलोड के ज़रिए एक साथ भी एडिट किया जा सकता है।

अपलोड से पहले की एक छोटी चेकलिस्ट

किसी बैच को Shopify में डालने से पहले: जब तक आपने पोर्ट्रेट न चुना हो, 2048 px पर स्क्वेयर एक्सपोर्ट करें, 20 MB की सीमा से काफ़ी नीचे रहें, पूरे कलेक्शन में एक ही बैकग्राउंड ट्रीटमेंट रखें, हर वैरिएंट को एक इमेज असाइन करें और उसके इर्द-गिर्द गैलरी को क्रम में रखें, और alt टेक्स्ट को 125 कैरेक्टर से कम रखें। इनमें से कुछ भी शानदार नहीं लगता, लेकिन जैसे ही आप इसमें गड़बड़ करते हैं, वह कलेक्शन पेज पर तुरंत दिख जाता है।