ابعاد استاندارد و مشخصی تحت عنوان سایز تصویر شاخص در سیستم مدیریت محتوای وردپرس وجود ندارد. وردپرس بهصورت پیشفرض اندازهای با نام دقیق featured ثبت نمیکند، بلکه قالب فعال وبسایت تعیین میکند که تصویر شاخص در چه ابعادی نمایش داده شود. به همین دلیل ممکن است یک تصویر در یک قالب بهزیبایی نمایش داده شود اما در قالب دیگر دچار برش نامناسب یا افت کیفیت گردد. در این مطلب، پرشیا وب، ارائه دهنده خدمات طراحی سایت در اصفهان، نحوه تشخیص اندازه واقعی تصویر شاخص قالب و اصول بهینهسازی ابعاد تصاویر را بررسی میکند.
ابعاد پیشفرض تصاویر در وردپرس
هنگامی که تصویری در کتابخانه رسانه بارگذاری میشود، وردپرس چند نسخه با ابعاد مختلف از آن ایجاد میکند. در تنظیمات پایه وردپرس، اندازههای زیر بهصورت پیشفرض تعریف شدهاند:
- تصویر مصور (Thumbnail): ابعاد ۱۵۰ در ۱۵۰ پیکسل که بهصورت مربع برش داده میشود.
- میانه (Medium): حداکثر ۳۰۰ در ۳۰۰ پیکسل بدون برش و با حفظ نسبت ابعاد.
- میانه بزرگ (Medium Large): عرض ۷۶۸ پیکسل با ارتفاع متناسب.
- بزرگ (Large): حداکثر ۱۰۲۴ در ۱۰۲۴ پیکسل بدون برش.
- اندازههای ۱۵۳۶ در ۱۵۳۶ و ۲۰۴۸ در ۲۰۴۸ پیکسل: برای نمایش شفاف در نمایشگرهای با تراکم پیکسل بالا که در بخش تنظیمات رسانه قابل مشاهده نیستند.
بسیاری از قالبها، افزونههای فروشگاهی نظیر ووکامرس و صفحهسازها ابعاد اختصاصی خود را به این فهرست اضافه میکنند که این موضوع باعث افزایش حجم پوشه بارگذاریها میشود.
بیشتر بخوانید: چگونه بهترین قالب وردپرس را برای حوزه کاری خود انتخاب کنیم؟
روش پیدا کردن سایز دقیق تصویر شاخص قالب
برای یافتن ابعاد واقعی مورد نیاز قالب، میتوان از دو روش استفاده کرد:
۱. بررسی عنصر تصویر در مرورگر (Inspect Element)
کافی است روی تصویر شاخص یکی از مقالات راستکلیک کرده و گزینه Inspect را انتخاب کنید. با بررسی ویژگی src یا srcset در کد HTML تصویر، ابعاد دقیق فایل تولیدشده مانند photo-1024×576.jpg قابل مشاهده خواهد بود.
۲. مشاهده تمام اندازههای ثبتشده در وردپرس
توسعهدهندگان میتوانند از دستور wp media image-size در ابزار WP-CLI استفاده کنند یا قطعه کدی بر پایه تابع wp_get_registered_image_subsizes در فایل توابع قالب جهت مشاهده فهرست کامل ابعاد ثبتشده درج نمایند.
مناسبترین ابعاد برای بارگذاری تصاویر
تصمیمگیری درباره ابعاد تصویر باید بر اساس بزرگترین محل نمایش آن در سایت انجام شود:
- هدر مقالات وبلاگ: ابعاد ۱۲۰ physics در ۶۷۵ پیکسل با نسبت ۱۶:۹ یک انتخاب استاندارد و ایمن است.
- تصاویر تمامعرض (Hero Images): ابعاد ۱۹۲۰ در ۱۰۸۰ پیکسل برای نمایش کامل در مانیتورهای عریض.
- چیدمانهای شبکهای و کارتها: تطابق با نسبت ابعاد مورد نیاز قالب جهت جلوگیری از برش نامناسب بخشهای مهم تصویر.
وردپرس ابعاد تصاویر را کاهش میدهد اما هرگز آنها را بزرگتر نمیکند. بارگذاری تصویر کوچکتر از محل نمایش، باعث تار شدن آن میشود.
بیشتر بخوانید: چرا سایت وردپرسی کند میشود؟ 9 دلیل مهم و راهکار افزایش سرعت
منشأ ابعاد ۱۲۰۰ در ۶۳۰ پیکسل و قانون ۲۵۶۰ پیکسل
توصیه به استفاده از ابعاد ۱۲۰۰ در ۶۳۰ پیکسل مرتبط با استانداردهای Open Graph برای اشتراکگذاری در شبکههای اجتماعی مانند فیسبوک و لینکدین است و ربطی به نحوه نمایش تصویر در خود سایت وردپرسی ندارد. با این حال، به دلیل استفاده افزونههای سئو از تصویر شاخص برای پیشنمایش شبکه اجتماعی، این سایز انتخابی مناسب محسوب میشود.
همچنین از وردپرس نسخه ۵.۳ به بعد، هر تصویری که ضلع بزرگتر آن از ۲۵۶۰ پیکسل بیشتر باشد، بهصورت خودکار تغییر اندازه یافته و نسخه محدودشده به ۲۵۶۰ پیکسل با پسوند scaled جایگزین فایل اصلی در نمایش سایت میشود.
تغییر ابعاد و بازسازی تصاویر قدیمی
ابعاد پیشفرض وردپرس از بخش تنظیمات و سپس رسانه قابل تغییر است. اما برای تعریف سایزهای اختصاصی جدید باید از تابع add_image_size در قالب فرزند استفاده شود. پس از افزودن ابعاد جدید، تصاویر قبلی بهصورت خودکار تغییر اندازه نمیدهند و باید با استفاده از ابزار WP-CLI یا افزونه Regenerate Thumbnails عملیات بازسازی تصاویر صورت گیرد.
بیشتر بخوانید: افزایش سرعت سایت وردپرسی (نمره 100 PageSpeed Insights)
بهینهسازی تصاویر و مدیریت صحیح ابعاد رسانهها نقش کلیدی در افزایش سرعت بارگذاری و ارتقای تجربه کاربری وبسایت دارد. مجموعه پرشیا وب با بهرهگیری از دانش روز در حوزه طراحی سایت در اصفهان، ساختار فنی وبسایتها را بهگونهای پیادهسازی میکند که نمایش تصاویر در تمام دستگاهها با بالاترین کیفیت و بهینهترین حجم انجام شود.
جمعبندی
در وردپرس اندازهای ثابت و عمومی به نام تصویر شاخص وجود ندارد و تمام ابعاد توسط قالب یا افزونهها تعیین میشوند. برای داشتن بهترین کیفیت بصری و جلوگیری از افت سرعت، پیشنهاد میشود تصاویر با ابعاد ۱۲۰x۶۷۵ یا ۱۲۰۰x۶۳۰ بارگذاری شوند و از آپلود فایلهای بسیار کوچک یا بیدلیل بزرگ خودداری گردد.
سوالات متداول
چرا تصویر شاخص در سایت تار و کمکیفیت دیده میشود؟
علت اصلی این مسئله بارگذاری تصویری با ابعاد کوچکتر از محل نمایش آن است. وردپرس تصاویر را بزرگتر نمیکند و کشیده شدن تصویر کوچک در کادر بزرگ باعث افت کیفیت میشود.
چرا تصویر شاخص بهصورت نامناسب و از وسط برش میخورد؟
این مشکل زمانی رخ میدهد که قالب از برش سخت با نسبت ابعاد متفاوت استفاده کند. بارگذاری تصویر با نسبت ابعاد متناسب با قالب این مشکل را حل میکند.
آیا اندازه تصویر شاخص بر سرعت بارگذاری سایت تاثیر دارد؟
بله، تصویر شاخص معمولاً بزرگترین عنصر بصری صفحه است و بارگذاری تصاویر با ابعاد و حجم بیش از حد استاندارد موجب کندی سرعت سایت میشود.
آیا میتوان برای انواع نوشتهها ابعاد تصویر شاخص متفاوتی تعریف کرد؟
بله، با ثبت ابعاد جدید از طریق کد add_image_size و فراخوانی آن در کدهای قالب، میتوان برای هر نوع نوشته ابعاد اختصاصی تعیین نمود.
آیا حذف اندازههای غیرکاربردی تصاویر ایده مناسبی است؟
اگر فضای هاست محدود شده باشد، حذف اندازههای اضافی مفید است؛ اما باید دقت داشت که حذف سایزی که قالب به آن نیاز دارد باعث فراخوانی تصویر با ابعاد کامل و کندی سایت میشود.
