थंबनेल सेफ एरिया और रेश्यो 2025 — CTR सुरक्षित रखने के लिए व्यावहारिक नियम

एक ही इमेज होने पर भी, प्लेसमेंट के अनुसार विज़िबल एरिया बदलता है. “सेफ एरिया” तय करें ताकि चेहरे, CTA और टेक्स्ट सुरक्षित रहें.

इस लेख में सामान्य रेश्यो के लिए सेफ गाइड, SNS/सर्च/कार्ड UI में आम कट‑ज़ोन, टेक्स्ट की भौतिक साइज टिप्स और एक हैंड्स‑ऑन फ्लो शामिल है. ऑटोमेशन पहली पास के लिए ठीक है, लेकिन CTR और रिटेंशन बचाने को त्वरित मानव समीक्षा ज़रूरी है.

सम्बंधित: बेहतर एंगेजमेंट के लिए स्मार्ट क्रॉपिंग — आस्पेक्ट रेशियो, फोकस पॉइंट और सोशल थंबनेल / OGP थंबनेल डिज़ाइन 2025 — पठनीय, हल्का, फ़्रेम में

रेश्यो और प्लेसमेंट

• 1:1: स्क्वायर. सब्जेक्ट सेंटर में; ऊपर/नीचे 12–15% सेफ पेडिंग
• 16:9: लैंडस्केप. टेक्स्ट को 40–60% बाएँ/मध्य में रखें
• 4:3: एक्सप्लेनर/पोर्ट्रेट के लिए संतुलित

व्हाइट‑स्पेस और F/Z स्कैन

F/Z आई‑स्कैन अक्सर दिखते हैं. “ऊपर‑बाएँ से मध्य” में टेक्स्ट/चेहरे तेज़ पहचान देते हैं. निचला‑दायाँ अक्सर डीके जोन होता है; वहाँ हल्के एलिमेंट्स रखें (जैसे छोटा लोगो).

सुझाए गए सेफ मार्जिन (रेश्यो अनुसार)

ये कंज़र्वेटिव डिफॉल्ट हैं; ब्रांड और मीडिया के अनुसार ट्यून करें.

प्रैक्टिकल फ्लो

1. इमेज क्रॉपर से रेश्यो प्रीसेट करें
2. मुख्य हिस्से सेफ बैंड में रखें (कस्टम गाइड भी ठीक)
3. OGP/SNS के लिए OGP थंबनेल मेकर से फाइनल करें

ऑटोमेशन बनाम मानव समीक्षा

• पास 1: फेस/सलायंसी के साथ स्मार्ट क्रॉप
• पास 2: नियम‑आधारित नजेस ताकि सेफ एरिया में आ जाए (कॉपी/लोगो)
• फाइनल: 30‑सेकेंड मानव जाँच

प्लेटफ़ॉर्म‑विशिष्ट नोट्स

• YouTube थंब (16:9): 10–15% वर्टिकल क्रॉप मानकर चलें; चेहरे/लोगो 60% सेंटर में

• X (पूर्व Twitter) कार्ड्स: ऑटो‑क्रॉप साइड्स दबाता है; सेंटर करें और ऊपर/नीचे पेडिंग रखें

• सर्च इमेज कार्ड्स: छोटा व्यूपोर्ट — टेक्स्ट क्षेत्र ~20–30% ही रखें

• Instagram फीड: 1:1 बेसलाइन; वर्टिकल स्क्रोल में फोकस 50–60% सेंटर

• Facebook/LinkedIn OGP: ~1200×630; 12% “कट बफर” ऊपर/नीचे रखें

• शॉपिंग कार्ड्स: प्राइस/बैज ओवरले — सब्जेक्ट/टेक्स्ट को केंद्र की ओर रखें

मैथ मेमो (सेफ गाइड्स)

यदि चौड़ाई W और ऊँचाई H है, तो 12% ऊपर/नीचे गाइड y = 0.12H और y = 0.88H होंगे. 10% बाएँ/दाएँ x = 0.1W और 0.9W.

const W = 1200, H = 630;
const guides = { left: 0.1*W, right: 0.9*W, top: 0.12*H, bottom: 0.88*H };

नज़र की दिशा में ≥0.1W व्हाइट‑स्पेस छोड़ें. कई चेहरों में मुख्य सब्जेक्ट को प्राथमिकता दें.

object-position चीटशीट

<div class="aspect">
  <img src="hero.jpg" alt="" />
</div>

.aspect { width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.aspect img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 45%; }

QA चेकलिस्ट

• [ ] मुख्य तत्व 10–15% इनसेट के भीतर हैं
• [ ] मोबाइल पर अनचाहे क्रॉप नहीं (रियल डिवाइस पर जाँच)
• [ ] टेक्स्ट ~14–16px समतुल्य पर पढ़ने योग्य

अतिरिक्त:

• [ ] कॉन्ट्रास्ट WCAG AA के अनुकूल
• [ ] चेहरे/नज़र दिशा में ≥10% व्हाइट‑स्पेस

त्वरित A/B आइडियाज़

• दो वेरिएंट: 6–9 मुख्य शब्द + 0–6 सहायक शब्द
• सब्जेक्ट स्केल 90% बनाम 75%
• ~1 सप्ताह / 1k इम्प्रेशन के बाद CTR × रिटेंशन की तुलना

सार

रेश्यो अनुसार सेफ जोन तय करने से गलतियाँ कम होती हैं और प्रोडक्शन स्थिर रहता है.