WordPress featured image का size कितना होना चाहिए?

ज़्यादातर लोग जो number ढूँढ रहे होते हैं वह है 1200 x 630 pixels। यही ratio Facebook, LinkedIn और X अपने link previews के लिए इस्तेमाल करते हैं (1.91:1), और Open Graph image भी इसी size की होनी चाहिए। अगर आप featured image मुख्य रूप से इसलिए set कर रहे हैं ताकि shared links सही दिखें, तो 1200 x 630 इस्तेमाल कीजिए और बात ख़त्म।

लेकिन यह number वह नहीं है जो आपकी theme असल में post पर दिखाती है। WordPress बहुत कम ही आपकी featured image को उसके original size पर दिखाता है। Theme एक ख़ास registered image size माँगती है, और WordPress जो pre-generated crop उससे मेल खाता है वही serve कर देता है। इसीलिए जो image Facebook पर बिल्कुल सही दिखती है, वही आपके single-post template के अंदर soft, खिंची हुई या ग़लत जगह से cropped दिख सकती है। “सही” size theme पर निर्भर करता है, किसी सार्वभौमिक नियम पर नहीं।

theme उस number को override क्यों कर देती है

जब आप कोई image upload करते हैं, तो WordPress सिर्फ़ एक file store नहीं करता। वह wp_generate_attachment_metadata() चलाता है और हर registered image size के लिए एक derivative बनाता है: तीन defaults (thumbnail, medium, large), block-editor का medium_large (768px चौड़ा), और कोई भी ऐसा size जिसे theme या किसी plugin ने add_image_size() से register किया हो।

जो theme चौड़ा 16:9 hero चाहती है, वह functions.php में कुछ ऐसा करेगी:

add_theme_support( 'post-thumbnails' );
add_image_size( 'hero-featured', 1200, 675, true );

चौथा argument, true, का मतलब है hard crop। WordPress आपकी image को ठीक 1200 x 675 पर crop करेगा, और जो कुछ भी उस 16:9 box में नहीं समाता उसे फेंक देगा। अगर आपका subject frame के ऊपर या नीचे की तरफ़ है, तो वह कट जाएगा। अगर false set करें (या छोड़ दें), तो image proportionally scale होती है और अंतिम dimensions आपके माँगे गए size से अलग हो सकती हैं।

फिर template तय करता है कि कौन-सा size pull करना है:

the_post_thumbnail( 'hero-featured' );

the_post_thumbnail() को जो भी नाम pass किया जाता है, वही crop render होता है। यानी आपकी साइट पर असली featured image size दो ऐसी जगहों पर तय होता है जिन्हें आपने लिखा ही नहीं: add_image_size() call और theme का the_post_thumbnail() call। बड़ी file upload करने से इन दोनों में से कुछ नहीं बदलता।

एक और परत है। WordPress एक srcset serve करता है, इसलिए छोटी screens पर browser पूरे crop की जगह medium या large derivative load कर सकता है। DevTools में आप जो dimension देखते हैं, वह अक्सर वह नहीं होती जो आपने upload की थी।

इसे कैसे ठीक करें, क्रम से

1. पता लगाइए कि आपकी theme असल में माँगती क्या है। अंदाज़ा लगाने से पहले देख लीजिए कि WordPress आपकी image से कौन-कौन से sizes generate करता है और उनमें से वह cropped hero कौन-सा है। अपनी image WordPress image sizes tool में डाल दीजिए — यह हर उस derivative को दिखाता है जो WP बनाएगा, ठीक pixel dimensions के साथ, ताकि आप अपने source को किसी काल्पनिक 1200x630 के बजाय असली target से match कर सकें।

2. इतना बड़ा upload कीजिए कि सबसे बड़ा crop भी cover हो जाए। अगर theme का hero 1200 x 675 है, तो कम से कम उतना upload कीजिए, और retina के लिए आदर्श रूप से 2x (2400 x 1350)। WordPress साफ़-सुथरे तरीक़े से downscale करता है; वह कभी upscale नहीं करता। छोटा source ही blurry featured image की सबसे आम वजह है।

3. अपने aspect ratio को theme के crop से match कीजिए। अगर theme 16:9 पर hard-crop करती है, तो उसे 16:9 ही दीजिए। Subject को center में रखकर compose कीजिए ताकि hard crop किसी का सिर न काट दे।

4. अगर registered size ही ग़लत है, तो उसे बदलिए और regenerate कीजिए। Child theme में add_image_size() की values edit कीजिए, फिर मौजूदा thumbnails rebuild कीजिए — नई dimensions सिर्फ़ आगे के uploads पर लगती हैं जब तक आप यह न करें:

wp media regenerate --yes

WP-CLI नहीं है? Regenerate Thumbnails plugin यही काम dashboard से कर देता है।

क्या नहीं करना चाहिए

सिर्फ़ एक 1200x630 image upload करके यह मत मान लीजिए कि सब सँभल गया। अगर theme का registered size 16:9 है, तो WordPress आपकी 1.91:1 image को hard-crop करेगा और आप ऊपर-नीचे का हिस्सा खो देंगे। Open Graph वाला number और display वाला number अलग-अलग काम के लिए हैं।

“original को बचाने” के लिए WordPress image sizes को disable मत कीजिए। लोग यह सलाह ढूँढते हैं कि intermediate sizes को 0 कर दें या the_post_thumbnail को unhook कर दें। फिर theme full-size file को browser में scale down करके serve करने लगती है — एक 4000px JPEG जो phone तक भेजा जाता है। इससे आपका load time और Core Web Vitals दोनों बिगड़ जाते हैं। Derivatives एक वजह से मौजूद हैं।

किसी plugin के “recommended size” पर अपनी theme के असली registered size से ज़्यादा भरोसा मत कीजिए। SEO plugins OG tag के लिए 1200x630 recommend करते हैं, जो उस tag के लिए सही भी है। पर वह इस बारे में कुछ नहीं कहता कि आपका single-post template किस पर crop करता है।

Sizes बदलने के बाद wp media regenerate मत छोड़िए। add_image_size() edit करने से पहले से upload की गई images पर कोई असर नहीं पड़ता। यही वह step है जिसे लोग भूल जाते हैं, और फिर नतीजा निकालते हैं कि code ने काम ही नहीं किया।

अभी भी अटके हुए हैं?

अगर dimensions match करने और regenerate करने के बाद भी image ग़लत दिख रही है, तो समस्या अक्सर crop mode (true बनाम false) होती है या ऐसा srcset जो आपकी उम्मीद से छोटा derivative serve कर रहा होता है। File को image sizes tool में डालिए ताकि देख सकें कि आपका setup ठीक कौन-से crops बनाता है, फिर उसकी तुलना DevTools में browser जो load कर रहा है उससे कीजिए। उन दोनों को मिला दीजिए और अंदाज़ा लगाना ख़त्म।