तुमच्यासोबतही असे घडले असेल. शॉपिफायमध्ये एखादे उत्पादन पृष्ठ आकर्षक दिसते, एडिटरमध्ये फोटो सुस्पष्ट दिसतात, पण तरीही मोबाईल वापरकर्ते पेज सोडून जाऊ लागतात आणि तुमचा पेजस्पीड स्कोअर मात्र साठच्या घरातच अडकून राहतो. समस्या सहसा 'वाईट डिझाइन'ची नसते. तर ती असते की लेआउटच्या मानाने चित्रांच्या फाईलचा आकार खूप मोठा असतो आणि ग्राहकाला उत्पादन, किंमत किंवा 'ॲड-टू-कार्ट' बटण दिसेपर्यंत प्रत्येक अतिरिक्त बाईटला प्रवास करावा लागतो.

म्हणूनच स्टोअरफ्रंटवरील इमेजचे निर्णय हे केवळ डिझाइनचे निर्णय नसतात. ते पेजचा वेग , व्हिज्युअल गुणवत्ता आणि गूगल पेजचा किती भाग महत्त्वाच्या ठरेल इतक्या वेगाने क्रॉल व रेंडर करू शकते, यावर परिणाम करतात. जर तुम्हाला अंदाज न लावता इमेजचा आकार बदलण्यासाठी एखादा सोपा मार्ग हवा असेल, तर यासिन माल्टीचे इमेज रिसायझिंग मार्गदर्शक एक उपयुक्त साथीदार आहे, कारण ते तुम्हाला पुढील बॅच अपलोड करण्यापूर्वी त्यामागील कार्यपद्धती समजून घेण्यास मदत करते.

अनुक्रमणिका

शॉपिफाय स्टोअरवर चित्रांच्या फाईलचा आकार का महत्त्वाचा असतो

एखादा व्यापारी शॉपिफाय ॲडमिनमधील आकर्षक उत्पादन पृष्ठ पाहूनही त्यातील मूळ समस्या ओळखू शकत नाही. ते पृष्ठ लॅपटॉपवर वाय-फायद्वारे व्यवस्थित चालू शकते, पण मोबाईलवर मात्र ते मंदावते, मुख्य प्रतिमा (hero image) उशिरा दिसते आणि पृष्ठ पूर्णपणे तयार झाल्यासारखे वाटण्यापूर्वी ग्राहक पुढील भागापर्यंत स्क्रोल करतो. एक चांगले दिसणारे पृष्ठ आणि वेगाने लोड होणारे पृष्ठ यांमधील हाच फरक चित्रांच्या फाईलच्या आकारावरून ठरतो की ग्राहकाच्या भेटीतून महसूल मिळेल की अडथळा निर्माण होईल.

प्रत्येक पानावरची छुपी स्पर्धा

स्टोअरफ्रंटवरील प्रत्येक इमेजला मजकूर, स्क्रिप्ट्स, स्कीमा आणि ग्राहकाच्या संयमाशी स्पर्धा करावी लागते. जर हिरो फोटो खूप मोठा असेल, तर तो केवळ बँडविड्थच वापरत नाही, तर तो ग्राहकाला ऑफरचे मूल्यांकन करण्याच्या क्षणालाही धीमा करतो. इमेजचा आकार हा एकाच वेळी रूपांतरणाचा (conversion) आणि कोअर वेब व्हायटल्सचा (Core Web Vitals) प्रश्न आहे.

शॉपिफाय विक्रेत्यांना याचा पहिला फटका सहसा प्रॉडक्ट पेजेस आणि कलेक्शन पेजेसवर बसतो. काही मोठ्या फोटोंमुळे संपूर्ण लेआउट जड वाटू शकतो, विशेषतः मोबाईल नेटवर्क्सवर, आणि हा भार सर्वात महत्त्वाच्या ठिकाणी, म्हणजेच हीरो इमेज, कलेक्शन ग्रिड, प्रॉडक्ट झूम आणि थंबनेल्स येथे दिसून येतो. हीरो इमेजचे काम थंबनेलपेक्षा वेगळे असते, त्यामुळे तिच्यावर फाईल-साईजचा तेवढाच भार असू नये. हीच गोष्ट कलेक्शन ग्रिडलाही लागू होते, जिथे पुन्हा पुन्हा वापरलेल्या इमेजेसचा ढिग लवकर वाढतो आणि प्रत्येक स्क्रोलवर त्रास होतो.

चित्राच्या फाईलचा आकार पृष्ठ किती लवकर वापरण्यायोग्य होते यावरही परिणाम करतो, म्हणूनच लेआउट नियोजनाप्रमाणेच याचाही विचार केला जातो. मूळ प्रतिमेचे आकारमान महत्त्वाचे आहे, परंतु ब्राउझरला जी फाईल मिळवून डीकोड करावी लागते, तिचा अंतिम आकार महत्त्वाचा असतो. यासीन माल्टी यांच्या इमेज रिसायझिंग मार्गदर्शिकेत स्पष्ट केल्याप्रमाणे, लहान आकाराची निर्यात केल्याने प्रतिमेचे दृश्य स्वरूप कायम राहते आणि अनावश्यक वजनही कमी होते.

व्यावहारिक फायदा

हे महत्त्वाचे असण्याचे कारण सोपे आहे. मूळ पिक्सेल संख्या आधारभूत पातळी ठरवते, आणि कॉम्प्रेशन व फॉरमॅट अंतिम फाईलचा आकार ठरवतात. 24-बिट RGB मधील 24-मेगापिक्सेलच्या प्रतिमेमध्ये सुमारे 72 दशलक्ष बाइट्सचा कच्चा पिक्सेल डेटा असतो, तर तीच प्रतिमा निर्यात पर्यायांनुसार ( Scantips ), 100% गुणवत्तेत JPEG स्वरूपात सुमारे 423.41 KB किंवा 90% गुणवत्तेत JPEG स्वरूपात अंदाजे 211.7 KB आकाराची असू शकते. याच फरकामुळे दोन स्टोअर्स जवळजवळ सारख्या दिसणाऱ्या प्रतिमा वापरूनही वेगाच्या बाबतीत खूप भिन्न परिणाम मिळवू शकतात.

व्यावहारिक नियम: जर एखादे चित्र सजावटीपेक्षा विक्रीसाठी अधिक महत्त्वाचे असेल, तर ते अपलोड करण्यापूर्वी त्याच्या फाईलच्या आकाराचे लक्ष्य निश्चित करा.

व्यापाऱ्यांनी हेच मानक वापरावे. प्रत्येक स्टोअरफ्रंट स्लॉटसाठी एक बजेट निश्चित करा, आणि मग फाईलला कामाशी जुळवा. थंबनेलपेक्षा हिरो बॅनरला अधिक महत्त्व देणे योग्य ठरू शकते, परंतु या दोन्हींमुळे पानाच्या उर्वरित भागावर अतिरिक्त भार पडू नये. एकदा ही सवय लागली की, प्रॉडक्ट पेजेस व्यवस्थापित करणे सोपे होते, आणि प्रत्येक नवीन अपलोडला एक छुपे ओझे बनण्याऐवजी सामावून घेण्यासाठी एक जागा मिळते.

इमेजचा आकार विरुद्ध फाईलचा आकार आणि दोन्ही का महत्त्वाचे आहेत

व्यापारी अनेकदा या संज्ञांचा वापर जणू काही त्यांचा अर्थ एकच आहे अशाप्रकारे करतात, आणि मग त्यांना आश्चर्य वाटते की एखादी प्रतिमा ॲडमिनमध्ये व्यवस्थित दिसत असूनही स्टोअरफ्रंटचा वेग का कमी करते. प्रतिमेचा आकार म्हणजे पिक्सेल परिमाणे, रुंदी भागिले उंची. फाईलचा आकार म्हणजे डिस्कवरील निर्यात केलेल्या फाईलचे बाइट्समधील वजन, जे सहसा KB किंवा MB मध्ये असते, आणि ते कॉम्प्रेशन, फॉरमॅट व बिट डेप्थनुसार बदलते. दोन प्रतिमांची परिमाणे सारखी असूनही, त्यांच्या लोडिंगचा खर्च खूप वेगळा असू शकतो.

डिजिटल फोटोग्राफी आणि ग्राफिक्ससाठी पिक्सेल्समधील प्रतिमेच्या आकाराची बाइट्समधील फाइलच्या आकाराशी तुलना करणारी आकृती.

पिक्सेल मर्यादा निश्चित करतात

पिक्सेल हे ठरवतात की फाईलमध्ये किती दृश्य तपशील सामावला जाऊ शकतो. 24-बिट RGB मधील 24-मेगापिक्सेलच्या प्रतिमेमध्ये सुमारे 72 दशलक्ष बाइट्स कच्चा पिक्सेल डेटा असतो, कारण 24 दशलक्ष पिक्सेल × 3 बाइट्स प्रति पिक्सेल = 72,000,000 बाइट्स . ही कच्ची संख्या निर्यातीसाठीचा प्रारंभिक बिंदू आहे, ब्राउझरला मिळणारे अंतिम वजन नव्हे.

एक्सपोर्टच्या पर्यायांमुळे परिणामात झटपट बदल होतो. तोच मूळ फोटो १००% गुणवत्तेत JPEG स्वरूपात सुमारे ४२३.४१ KB आणि ९०% गुणवत्तेत JPEG स्वरूपात अंदाजे २११.७ KB चा येऊ शकतो. पिक्सेल तेच राहतात, पण एक्सपोर्टमध्ये मूळ तपशील कमी-अधिक प्रमाणात जपला जातो.

कॉम्प्रेशन आणि फॉरमॅट परिणाम ठरवतात.

अनेक शॉपिफाय ऑडिटमध्ये इथेच चूक होते. व्यापाऱ्यांना वाटते की मोठी इमेज वेबसाठी खूप जड असेल, पण आकारमान आणि फाईलचे वजन हे वेगवेगळे निर्णय आहेत. जर मोठ्या आकाराची इमेज चांगल्या प्रकारे एक्सपोर्ट केली गेली, तर ती एक योग्य फाईल असू शकते. याउलट, एक साधी दिसणारी ग्राफिक चुकीच्या फॉरमॅटमध्ये किंवा चुकीच्या गुणवत्तेत सेव्ह केल्यास खूप मोठी दिसू शकते.

स्टोअरफ्रंटच्या भूमिकेनुसार हा फरक महत्त्वाचा ठरतो. थंबनेलपेक्षा हिरो बॅनर अधिक प्रभावी दिसू शकतो, परंतु पेज व्यवस्थित लोड होण्यासाठी कलेक्शन ग्रिड इमेज पुरेशी हलकी असणे आवश्यक असते. प्रॉडक्टच्या झूम शॉट्समध्ये जवळून पाहतानाही स्पष्ट दिसण्यासाठी पुरेसा पिक्सेल तपशील असणे आवश्यक असते, तर दुसरीकडे, जर एक्सपोर्टमध्ये लेआउट दाखवू शकणाऱ्या तपशिलापेक्षा खूप जास्त तपशील ठेवला गेला, तर थंबनेल स्लॉट्समुळे सहसा बँडविड्थ वाया जाते.

सर्वसाधारण नियम: पिक्सेल ठरवतात की प्रतिमेत किती दृश्य तपशील दिसू शकेल. फाईलचा आकार ठरवतो की तुमच्या ग्राहकाला किती डाउनलोड करावे लागेल.

ते दोन आकडे वेगळे ठेवा म्हणजे इमेज प्लॅनिंग सोपे होते. अरुंद थंबनेल स्लॉटला मोठ्या आकारमानाचा फायदा होत नाही. प्रॉडक्ट-पेजवरील झूम इमेज सुस्पष्ट दिसण्यासाठी पुरेसे पिक्सेल असणे आवश्यक आहे, पण एक्सपोर्ट केलेली फाईल कोअर वेब व्हायटल्ससाठी आणि तिच्या आजूबाजूला लोड होणाऱ्या पेजच्या उर्वरित भागासाठीही योग्य आकाराची राहिली पाहिजे.

JPEG, PNG, WebP आणि AVIF यांची तुलना

शॉपिफाय स्टोअरफ्रंटवर प्रत्येक इमेज फॉरमॅटचा एक वेगळा उद्देश असतो. प्रोडक्ट फोटो, लोगो आणि स्क्रीनशॉट हे सर्व एकाच थीममध्ये असले तरी, त्यांना वेगवेगळ्या प्रकारे हाताळण्याची गरज असते. सवयीनुसार नव्हे, तर पेजवर इमेजला जे काम करायचे आहे त्यानुसार फॉरमॅट निवडा.

JPEG, PNG, WebP आणि AVIF इमेज फॉरमॅट्सची तुलना करणारा एक इन्फोग्राफिक, ज्यामध्ये त्यांच्या वैशिष्ट्यांचे आणि वापराच्या उदाहरणांचे वर्णन आहे.

JPEG आणि PNG अजूनही आपले स्थान टिकवून आहेत.

फोटोंसाठी JPEG हा एक मानक पर्याय आहे. ते चांगले कॉम्प्रेस होते, जवळजवळ सर्वत्र चालते आणि सहसा उत्पादनांच्या प्रतिमा वेबसाठी पुरेशा हलक्या ठेवते. ज्या प्रतिमांना टोकदार कडा, एकसमान रंग, पारदर्शकता किंवा मजकूर आवश्यक असतो, त्यांच्यासाठी PNG योग्य आहे. म्हणूनच, जरी फाईल्स सहसा जड असल्या तरी, लोगो आणि UI ग्राफिक्स अनेकदा त्यातच समाविष्ट केले जातात.

शॉपिफायवर ही विभागणी महत्त्वाची आहे, कारण स्टोअर्स सहसा दोन्ही प्रकारच्या मालमत्ता एकत्र वापरतात. PNG म्हणून सेव्ह केलेला लाइफस्टाइल फोटो हा सहसा स्टोअरफ्रंटला आवश्यकतेपेक्षा जास्त महत्त्वाचा असतो. JPEG म्हणून सेव्ह केलेला लोगो ओबडधोबड दिसू शकतो किंवा त्याची पारदर्शकता कमी होऊ शकते, ज्यामुळे नंतर अनावश्यक साफसफाई करावी लागते. फॉरमॅट हा सवयीनुसार नव्हे, तर कामानुसार असावा.

कलेक्शन कार्ड हे एक चांगले उदाहरण आहे. जर प्रतिमा उत्पादनाचा सुस्पष्ट फोटो असेल, तर JPEG सामान्यतः खरेदीदारांना मिळणाऱ्या दृश्याला बाधा न आणता तिचे वजन कमी ठेवते. जर घटक रंगीत पार्श्वभूमीवर असलेला बॅज, आयकॉन किंवा लोगो असेल, तर PNG कडांचे अधिक चांगल्या प्रकारे संरक्षण करते आणि विद्रूप वलय टाळते.

WebP आणि AVIF फाईलचा आकार कमी करतात

आधुनिक फॉरमॅट्स सामान्यतः फाईलचा आकार आणखी कमी करतात. तुलनीय गुणवत्तेच्या एका उदाहरण प्रतिमेसाठी, 75% वर JPEG सुमारे 1.25–1.53 MB , WebP lossy सुमारे 0.72–0.88 MB , AVIF सुमारे 0.57–0.69 MB , आणि JPEG XL सुमारे 0.55–0.67 MB असतो ( W3Techs ). जुन्या निर्यात पद्धतींच्या तुलनेत ही एक लक्षणीय घट आहे, आणि यामुळेच अनेक स्टोअरफ्रंट्स फोटो अस्पष्ट न करता त्यांचे वजन कमी करू शकतात हे स्पष्ट होते.

मुद्दा असा आहे की फॉरमॅटची निवड ही मूळ मजकुरावरच अवलंबून असते. वेबपी (WebP) आणि एव्हीआयएफ (AVIF) हे प्रॉडक्ट फोटोग्राफीसाठी खूप चांगले काम करू शकतात, परंतु पारदर्शकता असलेल्या ग्राफिक्सच्या बाबतीत परिस्थिती वेगळी असू शकते. जर फाईलमध्ये मुख्यत्वे छायाचित्र असेल, तर अशा प्रकारच्या प्रतिमेला कार्यक्षमतेने संकुचित करणारा फॉरमॅट वापरा. जर तो लोगो किंवा पारदर्शकता असलेले ग्राफिक असेल, तर त्याच्या कडा सुस्पष्ट ठेवणारा फॉरमॅट वापरा.

शॉपिफाय स्टोअरफ्रंटवर, याचा सामान्यतः अर्थ असा होतो की हीरो बॅनरसाठी एक फॉरमॅट, लोगोसाठी दुसरा आणि उत्पादनाच्या क्लोज-अप शॉट्ससाठी तिसरा फॉरमॅट वापरावा. योग्य निवड ही काय आधुनिक दिसते यापेक्षा, पेजचा वेग कायम ठेवत प्रतिमा तिच्या मूळ जागी स्पष्टपणे कशी दिसेल यावर अधिक अवलंबून असते.

निर्णय नियम: माणसे, उत्पादने किंवा टेक्स्चर असलेल्या फोटोंसाठी, JPEG किंवा WebP निवडा. फ्लॅट ग्राफिक्स, लोगो किंवा स्क्रीनशॉटसाठी, PNG निवडा. जर तुमच्या वर्कफ्लोमध्ये फॉलबॅकची सोय असेल, तर AVIF किंवा WebP हा लाइव्ह-स्टोअरसाठी अधिक स्वच्छ पर्याय आहे.

रिझोल्यूशन आणि कॉम्प्रेशनमुळे संख्यांमध्ये कसा बदल होतो

एखादी फाईल तुमच्या स्क्रीनवर व्यवस्थित दिसत असली तरी, ती गरजेपेक्षा खूप जड असू शकते. शॉपिफायमध्ये व्यापाऱ्यांना सर्वात आधी हाच भाग जाणवतो, कारण तीच प्रतिमा हीरो बॅनर, कलेक्शन ग्रिड टाइल, प्रोडक्ट झूम शॉट किंवा लहान थंबनेल म्हणून खूप वेगळ्या प्रकारे कार्य करू शकते. रिझोल्यूशन हे नियंत्रित करते की तुम्ही ब्राउझरला किती पिक्सेल वाहून नेण्यास सांगत आहात, आणि कॉम्प्रेशन हे नियंत्रित करते की पेज लोड होण्यापूर्वी त्या वजनापैकी किती भाग कमी केला जातो.

अधिक पिक्सेल म्हणजे अधिक डेटा

मोठी प्रतिमा म्हणजे केवळ एक मोठा कॅनव्हास नव्हे, तर ब्राउझरला प्रक्रिया करण्यासाठी तो अधिक कच्चा डेटा असतो. आधी दाखवल्याप्रमाणे, कॉम्प्रेशन सुरू होण्यापूर्वी एका २४ मेगापिक्सेलच्या प्रतिमेमध्ये सुमारे ७२ दशलक्ष बाइट्सचा कच्चा डेटा असतो . जर तुम्ही तेच दृश्य स्टोअरफ्रंटला आवश्यक असलेल्या पिक्सेल संख्येपेक्षा जास्त पिक्सेल संख्येवर निर्यात केले, तर प्रदर्शित झाल्यावर फोटो जवळपास सारखाच दिसत असला तरी फाईल जड होते.

त्यामुळेच, गरजेपेक्षा जास्त आकाराच्या एक्सपोर्टमुळे केवळ स्टोरेजमध्येच अडथळा येत नाही, तर त्यामुळे ट्रान्सफर वेट वाढते, ब्राउझरवर जास्त भार पडतो आणि नेमक्या त्याच ठिकाणी इमेजचा वेग मंदावतो, जिथे खरेदीदारांना पेज जलद चालण्याची अपेक्षा असते. कलेक्शन ग्रिड टाइलला झूम करता येणाऱ्या प्रोडक्ट इमेजइतक्याच पेलोडची गरज नसते आणि थंबनेलला तर त्या दोन्हींपेक्षा खूपच कमी पेलोडची आवश्यकता असते.

कॉम्प्रेशनमुळे तुमची बचत होते, पण त्यामुळे अतिरिक्त पिक्सेल मोफत मिळत नाहीत.

कॉम्प्रेशनमुळे एक मोठी सोर्स फाईल इतकी लहान होऊ शकते की शॉपिफाय ती कार्यक्षमतेने सर्व्ह करू शकेल, परंतु त्यामुळे आवश्यकतेपेक्षा जास्त पिक्सेल वापरण्याचा खर्च कमी होत नाही. जर एखादा प्रॉडक्ट फोटो झूम-सक्षम गॅलरीमध्ये जाणार असेल, तर चांगल्या स्क्रीनवर तो सुस्पष्ट दिसावा यासाठी त्यात पुरेसे तपशील असणे आवश्यक आहे. जर तीच इमेज फक्त कलेक्शन कार्डमध्ये जाणार असेल, तर तिची पूर्ण-आकाराची आवृत्ती पाठवणे हा व्यर्थ प्रयत्न आहे.

याचा सरळ आणि सोपा अर्थ असा आहे की, पिक्सेल अनावश्यक खर्चाची किमान मर्यादा ठरवतात , कारण अवाढव्य आकारमानामुळे अनावश्यक वजन वाढते. क्वालिटी सेटिंग बचतीची कमाल मर्यादा ठरवते , कारण एक्सपोर्टमध्ये किती तपशील कायम राहील हे ते ठरवते. फॉरमॅट हे नियंत्रित करतो की कॉम्प्रेशन किती मदत करते , कारण वेगवेगळ्या फाईल प्रकारांचा आकार सारख्याच प्रकारे कमी होत नाही.

शॉपिफायच्या वापराशी संबंधित इमेजच्या आकारमानाबद्दलच्या मार्गदर्शनासाठी, ही शॉपिफाय इमेज एसइओ मार्गदर्शिका एक उपयुक्त साथीदार आहे. प्रत्येक स्टोअरफ्रंट इमेजला एकच काम करते असे मानण्याऐवजी, ही मार्गदर्शिका एक्सपोर्टचा निर्णय प्रत्यक्ष प्लेसमेंटशी जोडण्यास मदत करते.

हीरो इमेज, कलेक्शन टाइल आणि थंबनेल या सर्वांना वेगवेगळ्या स्तरावरील तपशिलाची आवश्यकता असते. हाच तो भाग आहे जो व्यापारी सहसा विसरतात, आणि म्हणूनच रिझोल्यूशनमधील एक छोटासा बदल एडिटरमध्ये निरुपद्रवी वाटू शकतो, पण तरीही ब्राउझरमध्ये स्टोअरचा आकार मोठा करतो.

कोअर वेब व्हायटल्स आणि हेवी इमेजेसचा एसईओ खर्च

जड इमेजेस एसईओला (SEO) थेट नुकसान पोहोचवतात, कारण गूगल अपलोडमागील हेतू नव्हे, तर मिळणारा अनुभव मोजते. अनेक शॉपिफाय पेजेसवर, सर्वात मोठी दिसणारी इमेजच लोडिंगचा अनुभव नियंत्रित करण्याची सर्वाधिक शक्यता असते. जर ती इमेज खूप जड असेल, तर 'लार्जेस्ट कंटेंटफुल पेंट' (Largest Contentful Paint) मंदावतो आणि पेज वापरण्यायोग्य वाटेपर्यंत व्हिजिटरला जास्त वेळ थांबावे लागते.

इमेज फाईलचा आकार वाढल्याने लार्जेस्ट कंटेंटफुल पेंट पेज लोड होण्याच्या वेळेवर कसा नकारात्मक परिणाम होतो, हे दर्शवणारा बार चार्ट.

एलसीपीवर सहसा चुकीच्या गोष्टीसाठी दोष टाकला जातो.

व्यापारी अनेकदा सर्वप्रथम ॲप्स, स्क्रिप्ट्स किंवा थीम कोडला दोष देतात आणि कधीकधी ते बरोबरही असतात. पण हिरो इमेज हा अनेकदा सर्वात सोपा आणि एकमेव उपाय असतो. एक मोठा हिरो फोटो पेजला अर्थपूर्ण बनवणाऱ्या क्षणाला रोखून धरू शकतो, विशेषतः मोबाईलवर, जिथे कनेक्शनची गुणवत्ता कमी-जास्त होत असते आणि व्ह्यूपोर्ट इतका लहान असतो की गरजेपेक्षा जास्त मोठे घटक सहज नजरेस पडतात.

इमेजच्या वजनाचा परिणाम होणारा दुसरा मापदंड म्हणजे 'क्युम्युलेटिव्ह लेआउट शिफ्ट' . जर तुमच्या थीमने इमेजेससाठी योग्य प्रकारे जागा राखून ठेवली नसेल, तर असेट्स लोड होताना लेआउटमध्ये बदल होतो. खरेदीदारांना हे अव्यवस्थित वाटते आणि त्यामुळे पेज वापरणे अधिक कठीण होते. शॉपिफाय थीम्स अनेकदा हे काम आधीपासूनच करत असतात, परंतु व्यापाऱ्याला खराब इमेज वर्कफ्लोपासून वाचवण्यासाठी ते नेहमीच पुरेसे नसते.

आकाराची लक्ष्ये यादृच्छिक नसतात.

वेब डिलिव्हरीसाठीच्या तांत्रिक मार्गदर्शनानुसार सामान्यतः प्रॉडक्ट फोटो सुमारे ८०० ते १००० पिक्सेल आणि ८० ते १५० केबी , हीरो इमेज २०० केबी पेक्षा कमी आणि एकूण पेज इमेज बजेट ५०० केबी पेक्षा कमी असावे असे सांगितले जाते. याच मार्गदर्शनानुसार जेपीईजी (JPEG) साधारणपणे २०० ते ६०० केबी , वेबपी (WebP) १५० ते ४५० केबी , एव्हीआयएफ (AVIF) ८० ते ३०० केबी आणि पीएनजी (PNG) ५०० केबी ते ३ एमबी ( Vizua ) असावे असे ठरवले जाते. इमेजचे वजन आणि पेजची कार्यक्षमता यांचा एकमेकांशी संबंध असल्यामुळे या मर्यादा निश्चित केल्या जातात.

एखादे पान जलद होण्यासाठी ते कृत्रिमरित्या लहान असण्याची गरज नाही. ते शिस्तबद्ध असणे मात्र आवश्यक आहे. जर तुमचे इमेज लोड होण्यास जास्त वेळ लागत असेल, तर तुम्ही ब्राउझरला असे काम करायला लावत आहात ज्यामुळे ग्राहकाच्या अनुभवात काहीही सुधारणा होत नाही. हा एसईओचा थेट तोटा आहे, केवळ सैद्धांतिक नाही.

व्यापक ऑडिट प्रक्रियेबद्दल शॉपिफाय-केंद्रित दृष्टिकोनासाठी, शॉपिफायसाठीची ही इमेज एसइओ मार्गदर्शिका एक उपयुक्त संदर्भबिंदू आहे.

शॉपिफाय प्लेसमेंटनुसार लक्ष्यित चित्र फाईल आकार

अंदाज लावणे थांबवण्याचा सर्वात सोपा मार्ग म्हणजे स्टोअरफ्रंटवरील प्रत्येक व्हिज्युअल भूमिकेसाठी फाइल-आकाराचे बजेट निश्चित करणे. हिरो बॅनरचे काम थंबनेलपेक्षा वेगळे असते, आणि कलेक्शन ग्रिडला झूम करता येणाऱ्या उत्पादन प्रतिमेइतकेच महत्त्व देऊन निर्यात करू नये. एकदा व्यापाऱ्यांनी चित्रांच्या फाइल आकारांना त्यांच्या प्रत्यक्ष जागांसाठी निश्चित केले की, स्टोअरचा वेग कायम ठेवणे आणि त्याचे ऑडिट करणे अधिक सोपे होते.

स्टोअरफ्रंटच्या मांडणीनुसार तुमचे निर्यातीचे पर्याय ठरवा.

पूर्ण-रुंदीच्या प्रतिमांना सहसा लहान लेआउट ब्लॉक्सपेक्षा जास्त जागेची आवश्यकता असते. रिस्पॉन्सिव्ह इमेज मार्गदर्शनानुसार सामान्यतः सुमारे १६०० पिक्सेल आणि २०० ते ३०० केबी आकाराच्या पूर्ण-रुंदीच्या प्रतिमा, ८०० पिक्सेल आणि ७० ते ३५० केबी आकाराच्या २५% ते ५०% लेआउटच्या लहान प्रतिमा, आणि डिस्प्ले स्पेसच्या सुमारे २ पट आकाराच्या प्रतिमा सुचवल्या जातात, जेणेकरून त्या उच्च-घनतेच्या स्क्रीनवरही सुस्पष्ट दिसतील. व्यवहारात, याचा अर्थ असा होतो की एकाच मूळ फोटोसाठी अनेकदा वेगवेगळ्या एक्सपोर्ट्सची आवश्यकता असते; एक तो फोटो जी जागा भरतो त्यासाठी आणि दुसरा दाट स्क्रीनला अपेक्षित असलेल्या अधिक सुस्पष्ट रेंडरिंगसाठी.

शॉपिफाय प्लेसमेंटनुसार चित्र फाईल आकाराचे लक्ष्य प्लेसमेंट लक्ष्य रुंदी लक्ष्यित फाईल आकार शिफारस केलेले स्वरूप
हिरो बॅनर पृष्ठाच्या शीर्षस्थानी असलेला नायक सुमारे १६०० पिक्सेल २०० ते ३०० केबी JPEG किंवा WebP
संग्रह ग्रिड थंबनेल संग्रह टाइल्स सुमारे ४०० ते ६०० पिक्सेल ४० ते ८० केबी JPEG किंवा WebP
उत्पादन पृष्ठाचा फोटो मुख्य उत्पादन गॅलरी सुमारे ८०० ते १२०० पिक्सेल १०० ते २०० केबी JPEG, WebP, किंवा AVIF
थंबनेल किंवा स्वॉच इमेज लहान आधार देणारा स्लॉट सुमारे २०० ते ४०० पिक्सेल शक्य तितके हलके रहा सामग्रीनुसार JPEG किंवा PNG

हीरो इमेज अधिक प्रभावी ठरू शकते कारण ती व्ह्यूपोर्टचा अधिक भाग व्यापते. कलेक्शन टाइलच्या बाबतीत असे होऊ शकत नाही. शॉपिफाय सेक्शन्ससाठी इमेजेस एक्सपोर्ट करताना व्यापाऱ्यांनी हा फरक लक्षात ठेवला पाहिजे, कारण फाईलचा आकार पेजवर इमेजने व्यापलेल्या जागेइतकाच असायला हवा.

एकाच इमेजला एकापेक्षा जास्त एक्सपोर्टची गरज का भासू शकते

प्रोडक्ट पेजवर अनेकदा रिस्पॉन्सिव्ह मार्कअपद्वारे एकाच फाईलच्या अनेक आवृत्त्या दाखवल्या जातात. हे सामान्य आहे. ब्राउझरला लहान स्क्रीनसाठी एक लहान फाईल आणि जिथे लेआउटला गरज आहे तिथेच एक मोठी फाईल मिळायला हवी. या रचनेमुळे प्रत्येक व्हिजिटरला अनावश्यक आकार न पाठवता झूमची गुणवत्ता अबाधित राहते.

हाच तर्क प्रॉडक्ट गॅलरीच्या पलीकडेही लागू होतो. स्टोअरफ्रंटवर अनेकदा मुख्य हिरो इमेजसाठी एक, कलेक्शन कार्ड्ससाठी दुसरी आणि क्लोज-अप डिटेल इमेजेससाठी तिसरी ट्रीटमेंट आवश्यक असते. जर तुम्हाला सोशल आणि शेअरिंगसाठी लागणारे असेट्स स्टोअरफ्रंटच्या व्हिज्युअल्सशी जुळवून ठेवायचे असतील, तर हे शॉपिफाय सोशल इमेज गाइड प्रॉडक्ट पेजच्या बाहेरील गरजांना त्याच इमेज वर्कफ्लोशी जोडण्यास मदत करते.

शॉपिफायचा सर्वसाधारण नियम: एक्सपोर्ट कसा करायचा हे स्लॉटवर अवलंबून ठेवा. एक मोठा स्लॉट (हिरो) मोठा स्लॉट देऊ शकतो. पण ग्रिड थंबनेल देऊ शकत नाही.

तो नियम एक मोठी इमेज अपलोड करून थीम ते सांभाळून घेईल या आशेवर राहण्याची सामान्य चूक टाळतो. थीम्स मदत करू शकतात, पण त्या निर्यातीचा चुकीचा निर्णय बदलू शकत नाहीत.

दुकानांचा वेग मंद ठेवणारे सामान्य गैरसमज

अनेक धीम्या शॉपिफाय स्टोअर्सचे काम धीमे असण्याचे कारण म्हणजे, कोणीतरी एका अर्धसत्य नियमावर विश्वास ठेवला आणि त्याची वारंवार पुनरावृत्ती केली. ह्या सवयी ऑडिटमध्ये वारंवार दिसून येतात, कारण सुरुवातीला तो सल्ला योग्य वाटतो आणि स्टोअर कसे लोड होते याच्या तुलनेत त्याची कधीच पडताळणी केली जात नाही. एकदा का तुम्ही सवय आणि कार्यक्षमता यांतील फरक ओळखलात, की त्यावरील उपाय सहसा सरळसोपे असतात.

टाळता येण्याजोग्या पोटफुगीस कारणीभूत ठरणारे पाच गैरसमज.

  • उच्च रिझोल्यूशनचा अर्थ नेहमीच उत्तम गुणवत्ता असतो. पण जेव्हा प्रतिमा तिच्या जागेपेक्षा मोठी होते, तेव्हा हे सत्य राहत नाही. अतिरिक्त पिक्सेल्स खरेदीदाराच्या दृष्टीकोनासाठी काहीही करत नाहीत, ते फक्त प्रतिमेचे वजन वाढवतात.
  • PNG नेहमीच JPEG पेक्षा अधिक सुस्पष्ट असते. लोगो आणि टोकदार कडा असलेल्या ग्राफिक्ससाठी PNG हा योग्य पर्याय आहे, परंतु उत्पादनांच्या फोटोंना सहसा त्या लॉसलेस ओव्हरहेडची गरज नसते.
  • शॉपिफाय आपोआप सर्वकाही ऑप्टिमाइझ करते. काही बाबतीत शॉपिफाय मदत करते, परंतु मालमत्तेचे वजन किती असू शकते याची मर्यादा मूळ अपलोडच ठरवते.
  • वेबपी (WebP) एसईओला (SEO) हानी पोहोचवते कारण गूगल ते वाचू शकत नाही. हा समज आता कालबाह्य झाला आहे. शोध प्रणाली सामान्य प्रतिमांप्रमाणे आधुनिक फॉरमॅट्सना देखील रेंडर करू शकतात.
  • इमेजचा आकार फक्त डेस्कटॉपवरच महत्त्वाचा असतो. मोबाईलवरून खरेदी करणाऱ्यांना आधी फाईलचा अनावश्यक भार जाणवतो, कारण त्यांच्या डिव्हाइस आणि कनेक्शनमध्ये चुकांना कमी वाव असतो.

व्यापारी तात्काळ वापरू शकतील अशी दुरुस्ती

सुधारणा सवयीने नव्हे, तर भूमिकेने सुरू होते. हिरो इमेज पानाच्या शीर्षस्थानी टिकून राहण्यासाठी पुरेशी दर्जेदार असली पाहिजे. कलेक्शन टाइल हलकी असली पाहिजे, जेणेकरून ग्रिड व्यवस्थित लोड होईल. झूम इमेजमध्ये अधिक तपशील असू शकतो, कारण तिचे कार्य वेगळे असते, तर थंबनेल किंवा स्वॉच लेआउटमध्ये शक्य तितके लहान ठेवले पाहिजे.

त्यामुळेच प्रत्येक प्रतिमेसाठी एकच निर्यात नियम समस्या निर्माण करतो. जर मालमत्ता फोटो असेल, तर वेग आणि विश्वासार्ह रंगांसाठी निर्यात करा. जर ते मजकूर किंवा पारदर्शकतेसह ग्राफिक असेल, तर कडा संरक्षित करा आणि फाईल मोठी होऊ शकते हे स्वीकारा. जर ते अरुंद स्लॉटमध्ये बसत असेल, तर पूर्ण-रुंदी प्रदर्शनासाठी असलेली फाईल अपलोड करू नका.

रिझोल्यूशन विभागात सांगितल्याप्रमाणे, कॉम्प्रेस केल्यानंतर २४ मेगापिक्सेलच्या प्रतिमेचा आकार २ ते ८ एमबी पर्यंत असू शकतो, आणि यावरून हे स्पष्ट होते की केवळ पिक्सेल संख्येवरून एखादी प्रतिमा वेबसाठी तयार आहे की नाही हे कळत नाही. मुख्य प्रश्न हा आहे की, ती फाईल शॉपिफायवर ज्या ठिकाणी ठेवली जाते, त्याच्याशी जुळते का. एक 'हीरो' (मुख्य प्रतिमा) ग्रिड कार्डपेक्षा अधिक जागा घेऊ शकते, आणि एक झूम प्रतिमा थंबनेलपेक्षा अधिक जागा घेऊ शकते. निर्यात (एक्सपोर्ट) त्या भूमिकेशी जुळणारी असायला हवी.

यासंबंधित एक चूक म्हणजे प्रत्येक मालमत्तेला सारख्याच मेटाडेटा स्वच्छतेची गरज आहे असे गृहीत धरणे. जर प्रतिमा दर्शविण्याइतकी महत्त्वाची असेल, तर तिचे आधी ऑडिट करणेही तितकेच महत्त्वाचे आहे. कार्यप्रवाहाचा तो भाग सुसंगत ठेवण्यासाठी शॉपिफाय प्रतिमांकरिता ऑल्ट टेक्स्ट जनरेटरचा वापर करा, आणि मग ती ज्या जागेत ठेवली जाईल, त्या जागेच्या तुलनेत फाईलच्या आकाराचे मूल्यांकन करा.

बहुतेक दुकानांकडून हीच गोष्ट दुर्लक्षित राहते. फाईल लहान असण्याची गरज नाही. ती योग्य असली पाहिजे.

तुमच्या पुढील इमेज बॅचसाठी पुन्हा वापरता येण्याजोगी चेकलिस्ट

सर्वात सुव्यवस्थित इमेज वर्कफ्लो तोच असतो, जो तुमची टीम कोणताही अंदाज न लावता पुन्हा पुन्हा करू शकते. प्रत्येक वेळी त्याच तपासण्या त्याच क्रमाने झाल्यामुळे, तुम्हाला अनावश्यक मोठे अपलोड्स, लेआउटमधील अनपेक्षित बदल आणि कॅटलॉगमध्ये लपून बसणारी संथ उत्पादन पृष्ठे यांसारख्या समस्या कमी आढळतात. जर तुम्ही नवीन उत्पादन सादर करण्याची तयारी करत असाल किंवा एखादी थीम अद्ययावत करत असाल, तर काहीही प्रत्यक्ष वापरात आणण्यापूर्वी सर्व प्रतिमा या प्रक्रियेतून चालवून घ्या.

शॉपिफायला अनुकूल असलेली एक सोपी निर्यात प्रक्रिया

  1. प्लेसमेंटसाठी आवश्यक असलेल्या रुंदीनुसार निर्यात करा. हीरो, कलेक्शन कार्ड, प्रॉडक्ट झूम इमेज आणि थंबनेल या प्रत्येकाची कामे वेगवेगळी असतात, त्यामुळे केवळ मूळ इमेज परवानगी देते म्हणून मोठी फाईल अपलोड करू नका.
  2. भूमिकेनुसार फॉरमॅट निवडा. फोटोंसाठी सहसा JPEG, WebP किंवा AVIF फॉरमॅट योग्य ठरतो. जेव्हा पारदर्शकता किंवा टोकदार कडा महत्त्वाच्या असतात, तेव्हा लोगो आणि जास्त मजकूर असलेल्या ग्राफिक्ससाठी PNG फॉरमॅट अधिक चांगला ठरतो.
  3. गरज भासल्यास लाइव्ह-स्टोअर आवृत्ती आणि झूम आवृत्ती जतन करा. झूम फाइलमध्ये अधिक तपशील ठेवता येतो, परंतु लेआउटला खरोखर गरज असल्याशिवाय दृश्यमान पृष्ठावर तेवढे महत्त्व नसावे.
  4. शक्य असेल तेव्हा हलका आधुनिक फॉरमॅट वापरा. थेट प्रतिमेसाठी WebP किंवा AVIF वापरा आणि जिथे सुसंगतता महत्त्वाची आहे तिथे JPEG ला पर्यायी म्हणून ठेवा.
  5. प्रकाशित करण्यापूर्वी इमेज मेटाडेटा आणि ऑल्ट टेक्स्ट तपासा. जर असेट वैशिष्ट्यीकृत करण्याइतके महत्त्वाचे असेल, तर ते ऑडिट करण्याइतकेही महत्त्वाचे आहे. वर्कफ्लोचा तो भाग सुसंगत ठेवण्यासाठी रँकइंजिनच्या ऑल्ट टेक्स्ट जनरेटरचा वापर करा.

https://rankengine.app वरून घेतलेला स्क्रीनशॉट

सातत्यामुळे काय मिळते

संपूर्ण कॅटलॉगमध्ये लहान-सहान सुधारणांचा एकत्रित परिणाम होतो. केवळ एक हलकी हिरो इमेज स्टोअरमध्ये स्वतःहून मोठे परिवर्तन घडवू शकत नाही, परंतु योग्य आकाराचे प्रॉडक्ट शॉट्स, कलेक्शन टाईल्स आणि थंबनेल्स यांचा संपूर्ण संच स्टोअरफ्रंटला अधिक स्वच्छ, वेगवान आणि खरेदीसाठी सोपे बनवू शकतो. ग्राहक फाईलच्या आकाराबद्दल कधीही बोलले नाहीत तरीही ही गोष्ट त्यांच्या लक्षात येते.

जर तुमची टीम मोठ्या प्रमाणावर इमेज मेटाडेटा हाताळत असेल, तर रँकइंजिनचा ऑल्ट टेक्स्ट जनरेटर प्रत्येक अपलोडला एक किचकट काम न बनवता, वर्कफ्लोचा तो भाग सुरळीत चालू ठेवू शकतो.

ही पद्धत तुमच्या पुढच्या बॅचवर लागू करा, आणि तुमचे स्टोअरफ्रंट लगेचच अधिक वेगाने लोड होईल.