رسانه در وردپرس فقط عکس نیست
کتابخانه رسانه وردپرس محل مدیریت فایلهایی است که در سایت استفاده میشوند؛ مثل تصویر، ویدیو، PDF، فایل صوتی، آیکون، لوگو و فایلهای قابل دانلود. برای مثال، میتوانید یک فایل PDF را در رسانه آپلود کنید و لینک آن را به یک دکمه در گوتنبرگ یا صفحهساز بدهید تا کاربر با کلیک روی دکمه، فایل را دانلود یا مشاهده کند.
اما نکته مهم این است که هر فایلی نباید بیهدف وارد سایت شود. فایلهای سنگین، فرمتهای اشتباه و تصاویر بدون بهینهسازی، به مرور سایت را کند و مدیریت رسانه را شلوغ میکنند. بهتر است قبل از آپلود، نوع فایل، حجم، ابعاد، کاربرد و محل استفاده آن مشخص باشد.
آپلود SVG و هشدار امنیتی مهم
SVG یک فرمت تصویری معمولی مثل JPG یا PNG نیست. فایل SVG در واقع یک سند متنی بر پایه XML است و میتواند داخل خودش کد داشته باشد. همین موضوع باعث میشود وردپرس بهصورت پیشفرض آپلود SVG را محدود کند، چون اگر فایل آلوده باشد، میتواند برای امنیت سایت خطر ایجاد کند.
اگر از صفحهسازهایی مثل Bricks، Elementor یا ابزارهای حرفهای مشابه استفاده میکنید، ممکن است خود آنها گزینهای برای فعالسازی آپلود SVG داشته باشند. در این حالت بهتر است ابتدا از همان قابلیت داخلی استفاده کنید. اما اگر پروژه به این امکان نیاز داشت و ابزار شما چنین قابلیتی نداشت، میتوانید با کدنویسی کنترلشده، آپلود SVG را فقط برای مدیر سایت فعال کنید.
کد زیر اجازه آپلود SVG و SVGZ را فقط به کاربرانی میدهد که دسترسی مدیریتی دارند. بهتر است این کد داخل قالب فرزند یا ابزارهای مدیریت کد مثل Code Snippets، WPCode یا WPCodeBox قرار بگیرد، نه داخل فایلهای قالب اصلی که با آپدیت از بین میروند.
// Allow SVG uploads for administrators only
function enable_svg_upload( $mimes ) {
// Check if the current user has admin privileges
if ( current_user_can( 'manage_options' ) ) {
$mimes['svg'] = 'image/svg+xml';
$mimes['svgz'] = 'image/svg+xml';
}
return $mimes;
}
add_filter( 'upload_mimes', 'enable_svg_upload' );
این کد فقط فرمت SVG را به لیست مجاز وردپرس اضافه میکند و دسترسی را به مدیر محدود میکند. با این حال، SVG همچنان باید از منبع مطمئن باشد؛ چون ماهیت آن با تصاویر پیکسلی معمولی فرق دارد و میتواند شامل کدهای مخرب باشد.
متن جایگزین تصویر؛ چشم گوگل و صفحهخوانها
Alt Text یا متن جایگزین، توضیح کوتاهی است که به تصویر اضافه میشود تا موتورهای جستجو و ابزارهای صفحهخوان بفهمند تصویر درباره چیست. گوگل زیبایی عکس را مثل انسان نمیبیند؛ برای درک محتوای تصویر، به متن جایگزین، متن اطراف تصویر و ساختار صفحه توجه میکند.
متن جایگزین باید واقعی، کوتاه و توصیفی باشد. نباید آن را با کلمات کلیدی پر کنیم. اگر تصویر یک محصول، یک نمودار یا یک بخش آموزشی را نشان میدهد، همان را طبیعی توضیح دهید. این کار هم به سئو کمک میکند، هم برای دسترسپذیری سایت اهمیت دارد.
پیکسل چیست و چرا در طراحی سایت مهم است؟
پیکسل کوچکترین واحد تصویری است. صفحه نمایش موبایل، لپتاپ یا مانیتور از تعداد زیادی نقطه نوری کوچک ساخته شده و هر تصویر دیجیتال هم از تعداد زیادی نقطه رنگی تشکیل میشود. وقتی میگوییم یک عکس 1200 در 800 پیکسل است، یعنی عرض آن 1200 نقطه و ارتفاع آن 800 نقطه اطلاعات تصویری دارد.
نکته مهم این است که کیفیت تصویر فقط به عدد پیکسل مربوط نیست؛ به محل نمایش آن هم بستگی دارد. یک تصویر 720p ممکن است روی موبایل خوب دیده شود، اما روی تلویزیون بزرگ یا مانیتور 4K تار به نظر برسد، چون همان تعداد پیکسل باید روی فضای بزرگتری کشیده شود.
برای طراحی سایت، باید عکس را متناسب با جایی که قرار است نمایش داده شود آماده کنیم. اگر جایگاه عکس در سایت فقط 800 پیکسل عرض دارد، آپلود یک تصویر 3000 پیکسلی معمولاً فایدهای ندارد و فقط حجم صفحه را بالا میبرد.
همه چیز در سایت داخل جعبهها نمایش داده میشود
در طراحی وب، هر بخش صفحه داخل یک جعبه یا Container قرار میگیرد. دکمه، تصویر محصول، کارت مقاله، بنر، گالری و حتی متنها هم در جعبههای مشخصی نمایش داده میشوند. وقتی شما برای تصویر محصول یک کادر 800 پیکسلی دارید، بهتر است تصویر نهایی هم متناسب با همان کادر آماده شود.
استفاده از تصویر خیلی بزرگ در یک جعبه کوچک، مثل این است که یک پوستر دیواری را داخل یک قاب رومیزی جا بدهید. مرورگر مجبور میشود فایل سنگین را دانلود کند، بعد آن را کوچک کند تا داخل کادر جا شود. این یعنی مصرف بیدلیل اینترنت کاربر، فشار بیشتر روی مرورگر و افت سرعت سایت.
نسبت ابعاد؛ شکل قاب عکس
Aspect Ratio یا نسبت ابعاد، سایز عکس نیست؛ شکل قاب عکس است. اگر یک عکس مستطیلی را داخل قاب مربع قرار دهید، یا باید بخشهایی از آن بریده شود یا تصویر کشیده و زشت دیده شود. برای همین در طراحی سایت باید از ابتدا بدانید هر تصویر قرار است داخل چه قابی نمایش داده شود.
نسبت 16:9 برای کاور مقالات، تامبنیل ویدیو و بنرهای عریض مناسب است. سایز پیشنهادی برای مقاله میتواند 1200×675 باشد و برای بنرهای تمامعرض، 1920×1080. نسبت 5:3 برای کاورهای خبری و وبلاگی گزینه خوبی است و سایزهایی مثل 1000×600 یا 1200×720 برای آن کاربرد دارند.
نسبت 3:2 بیشتر به فضای عکاسی نزدیک است و برای گالریها مناسب است؛ مثلاً 1200×800. نسبت 4:3 حالت کلاسیکتری دارد و میتواند برای برخی نمونهکارها یا تصاویر خبری استفاده شود؛ مثل 1200×900. نسبت 1:1 هم برای محصولات فروشگاهی، پروفایلها و تصاویر مربعی بسیار مناسب است؛ معمولاً 800×800 یا نهایتاً 1000×1000 کافی است.
سایز استاندارد تصاویر برای سایت
قانون ساده این است: تصویر را به اندازه کاربردش خروجی بگیرید، نه بزرگتر از نیاز واقعی. برای تصاویر داخل مقالات، معمولاً عرض بیشتر از 1200 پیکسل لازم نیست. برای تصاویر پسزمینه بزرگ، میتوان از عرض 1920 پیکسل استفاده کرد، چون قرار است کل عرض صفحه دسکتاپ را پوشش دهد.
برای محصولات فروشگاهی، اگر قالب شما تصویر محصول را نهایتاً در کادر 800 پیکسل نشان میدهد، بهتر است تصویر محصول هم نزدیک به همین اندازه آماده شود. آپلود عکسهای Full HD یا 4K برای محصولاتی که در یک کادر کوچک نمایش داده میشوند، بیشتر از اینکه کیفیت را بهتر کند، سرعت سایت را خراب میکند.
از نظر حجم، بهتر است تصاویر تا حد امکان سبک باشند. برای بسیاری از تصاویر سایت، حجم زیر 150 کیلوبایت مناسب است و اگر بتوانید بدون افت محسوس کیفیت به زیر 100 کیلوبایت برسید، بهتر هم هست.
رفتار وردپرس با تصاویر بزرگ و سایزهای اضافی
وردپرس وقتی یک تصویر را آپلود میکنید، معمولاً چند نسخه با اندازههای مختلف از آن میسازد. هدف این است که در جاهای کوچک، نسخه کوچکتر تصویر لود شود و مرورگر مجبور نباشد همیشه تصویر اصلی و سنگین را دانلود کند. این رفتار مفید است، اما اگر کنترل نشود، میتواند تعداد زیادی فایل اضافه روی هاست ایجاد کند.
در بخش تنظیمات رسانه میتوانید اندازههایی مثل بندانگشتی، میانه و بزرگ را مدیریت کنید. در بعضی پروژهها میتوان اندازههای غیرضروری را روی 0 گذاشت تا نسخههای اضافه کمتر تولید شوند. البته وردپرس و بعضی قالبها یا افزونهها ممکن است سایزهای مخفی یا اختصاصی هم بسازند که از مسیر تنظیمات ساده رسانه قابل کنترل کامل نیستند.
وردپرس برای بعضی تصاویر بزرگ، نسخههای اضافه مثل 1536 و 2048 پیکسل هم میسازد. ووکامرس نیز برای محصولات، گالری و تصاویر فروشگاهی اندازههای مخصوص خودش را تولید میکند. اگر در پروژهای میخواهید کنترل کاملتری روی تولید سایزهای اضافه داشته باشید، میتوانید با کد زیر برخی سایزهای پیشفرض وردپرس و ووکامرس را غیرفعال کنید.
// Disable Default WP/Woo Image Sizes
function mr_disable_unwanted_image_sizes( $sizes ) {
// Array of default WordPress and WooCommerce sizes to disable
$sizes_to_remove = array(
'thumbnail',
'medium',
'medium_large',
'large',
'1536x1536',
'2048x2048',
'woocommerce_thumbnail',
'woocommerce_single',
'woocommerce_gallery_thumbnail',
'shop_catalog',
'shop_single',
'shop_thumbnail'
);
foreach ( $sizes_to_remove as $target_size ) {
unset( $sizes[ $target_size ] );
}
return $sizes;
}
add_filter( 'intermediate_image_sizes_advanced', 'mr_disable_unwanted_image_sizes' );
این کد برای همه پروژهها ضروری نیست. اگر قالب، ووکامرس یا بخشهایی از سایت به سایزهای خاصی وابسته باشند، حذف بیبرنامه آنها میتواند روی نمایش تصاویر اثر بگذارد. بهتر است زمانی استفاده شود که ساختار نمایش تصاویر را میشناسید و میدانید سایت واقعاً به این سایزها نیاز ندارد.
نکته مهم دیگر این است که این نوع کدها فقط روی تصاویر جدیدی که بعد از فعالسازی آپلود میشوند اثر دارند. عکسهای قدیمی قبلاً نسخههای مختلف خود را ساختهاند و برای پاکسازی فیزیکی آنها از هاست، باید از افزونهها یا ابزارهای مناسب بازسازی و پاکسازی تصاویر استفاده شود.
جنگ فرمتها؛ JPG، PNG، WebP و AVIF
JPG برای عکسهای واقعی، شلوغ و رنگی مثل چهره، منظره و تصاویر معمولی مناسب است، اما اگر بهینه نشود حجم بالایی پیدا میکند. PNG بیشتر برای مواردی مناسب است که شفافیت یا Transparency لازم دارند؛ مثل بعضی لوگوها یا آیکونها، اما معمولاً حجم آن نسبت به نیاز سایت زیاد است.
WebP انتخاب بسیار خوبی برای سایتهای وردپرسی است؛ چون میتواند با حفظ کیفیت مناسب، حجم تصاویر را کمتر کند و در بسیاری از پروژهها جایگزین JPG و PNG شود. AVIF هم فرمت جدیدتر و فشردهتری است که در بعضی شرایط حجم کمتری از WebP میدهد، اما بهتر است قبل از استفاده گسترده، سازگاری و خروجی آن را بررسی کنید.
قاعده ساده این است: تا حد امکان تصاویر سایت را با فرمت نسل جدید مثل WebP آماده کنید، بهتر است بهطور کلی از PNG و JPG در سایت استفاده نشود و بهجای آن از فرمتهای مدرنتر استفاده کنید؛ همچنین AVIF میتواند در بسیاری از موارد حجم بسیار کمتری نسبت به WebP ارائه دهد، اما قبل از استفاده گسترده باید سازگاری آن با مرورگرها و کیفیت خروجی بررسی شود.
ابزارهای بهینهسازی تصاویر
برای بهینهسازی تصاویر میتوان از ابزارهای مختلف استفاده کرد. ابزارهایی مثل Squoosh برای بهینهسازی دستی و دقیق تصاویر بسیار کاربردی هستند. برای تبدیل گروهی و تغییر سایز دستهجمعی هم نرمافزارهایی مثل XLConvert یا ابزارهای مشابه میتوانند سرعت کار را بالا ببرند. همچنین نرمافزار WidsMob WebP گزینه مناسبی برای تبدیل تصاویر به فرمت WebP و مدیریت دستهجمعی آنها با حفظ کیفیت است.
در وردپرس هم میتوان از افزونههای بهینهسازی تصویر استفاده کرد. بعضی افزونهها تصاویر را به WebP تبدیل میکنند، بعضی حجم را کاهش میدهند و بعضی نسخههای بهینه را برای مرورگرهای مختلف ارائه میکنند. نکته مهم این است که افزونه را فقط بهخاطر اسمش نصب نکنید؛ باید خروجی، مصرف منابع و سازگاری آن با هاست بررسی شود.
قوانین طلایی مدیریت رسانه در وردپرس
برای مدیریت حرفهای رسانه، قبل از آپلود هر فایل از خودتان بپرسید: این تصویر کجا قرار است نمایش داده شود؟ عرض کادر آن چقدر است؟ آیا به شفافیت نیاز دارد؟ آیا باید WebP باشد؟ آیا Alt Text لازم دارد؟ آیا فایل بیش از حد سنگین است؟
تصاویر مقاله معمولاً نباید از 1200 پیکسل عرض بیشتر باشند. تصاویر بکگراند فقط زمانی تا 1920 پیکسل منطقی هستند که واقعاً قرار باشد کل عرض صفحه را بپوشانند. محصولات فروشگاهی بهتر است با نسبت ثابت و منظم آماده شوند، مثلاً مربع 800×800 یا 1000×1000. SVG فقط با رعایت امنیت آپلود شود و ویدیوهای سنگین هم بهتر است بدون زیرساخت مناسب روی هاست اصلی سایت قرار نگیرند.
جمعبندی
مدیریت رسانه یکی از پایههای مهم طراحی سایت حرفهای است. تصویر زیبا اگر با فرمت اشتباه، سایز نامناسب یا حجم بالا وارد سایت شود، میتواند سرعت، سئو و تجربه کاربری را ضعیف کند. هدف این نیست که همیشه کوچکترین فایل ممکن را بسازیم؛ هدف این است که بین کیفیت، سرعت و کاربرد تصویر تعادل برقرار کنیم.
با شناخت پیکسل، نسبت ابعاد، سایز مناسب، متن جایگزین، فرمتهای مدرن، امنیت SVG و رفتار وردپرس با تصاویر، میتوانیم رسانهها را اصولیتر مدیریت کنیم. نتیجه این کار سایتی سبکتر، منظمتر، سریعتر و حرفهایتر است.
حالا که اصول مدیریت رسانه را شناختیم، قدم بعدی ساخت تصاویر حرفهایتر است. در درس بعدی سراغ Canva میرویم تا بدون نیاز به فتوشاپ، کاورها، بنرها و تصاویر گرافیکی استانداردتری برای سایت طراحی کنیم.