اتفاقات روزمره ، اخبار مهم و دیگر مطالب میهن وب هاست را می توانید در این قسمت مطالعه کنید

تصاویر با کیفیت می توانند یک وب سایت را از سایر وب سایت ها متمایز کنند. بنابراین مهم است که اندازه تصاویر در وردپرس به صورت صحیح تنظیم شود. در غیر این صورت، ممکن است تصاویر تار یا بارگذاری آن ها به کندی انجام گردد. خوشبختانه وردپرس این امکان را ایجاد نموده که ابعاد تصاویر وب سایت را شخصی سازی کنید. به این ترتیب، می توانید اندازه های مناسب را برای استفاده های مختلف انتخاب نموده و مطمئن شوید که تصاویر در صفحات اصلی سایت به بهترین شکل ممکن نمایش داده می شوند. در این مقاله، اندازه‌های پیش‌فرض تصاویر در وردپرس و اهمیت بهینه‌سازی آنها بررسی می شود. سپس، سه راه جهت تنظیم اندازه تصاویر در وردپرس، از جمله ایجاد اندازه های دلخواه برای تصاویر، بیان خواهد شد.

اندازه های مختلف تصاویر در وردپرس (و زمان استفاده از آنها)

زمانی که تصویری در سایت وردپرسی خود آپلود می کنید، وردپرس به طور خودکار چندین نسخه از آن را در ابعاد مختلف تولید می کند. اندازه های پیش فرض تصاویر وردپرس عبارتند از:

• بندانگشتی: ارتفاع و عرض 150 پیکسل
• متوسط: حداکثر عرض و ارتفاع 300 پیکسل
• بزرگ: حداکثر عرض و ارتفاع 1024 پیکسل
• کامل: اندازه اصلی تصویر

تصاویر بندانگشتی معمولاً در فیدهای وبلاگ استفاده شده و تصاویر شاخص کوچکی هستند که در بالا یا کنار عنوان پست مشاهده می شوند.

تصویر(1)

می توانید تصاویر متوسط ​​و بزرگ را نیز در پست های وبلاگ به کار ببرید. اگر یک گالری را به نمایش گذاشته اید، می توانید از تصاویر با اندازه متوسط ​​استفاده نمایید. به این ترتیب، گروهی از تصاویر بدون کوچک شدن، کنار یکدیگر نمایش داده می شوند.

تصویر(2)

با این حال، اگر می خواهید تصاویری با عرض کامل یا با کیفیت بالا نمایش دهید، می توانید اندازه بزرگ یا کامل را انتخاب کنید. به عنوان مثال، اگر یک وبلاگ مسافرتی یا نمونه کار عکاسی دارید، می توانید از اندازه های بزرگ برای نمایش جزئیات تصاویر خود استفاده نمایید. همانطور که در حال ایجاد محتوا با ویرایشگر بلوک وردپرس هستید، می توانید تصاویر را آپلود و ظاهر آنها را شخصی سازی کنید. همچنین با انتخاب تصویر می توانید اندازه و ابعاد آن را مشاهده نموده و در صورت نیاز مقادیر آن را نیز تغییر دهید.

تصویر(3)

توجه داشته باشید، قالب وردپرسی که در حال استفاده از آن هستید ممکن است اندازه های بیشتری برای تصاویر ارائه دهد. به عنوان مثال، ممکن است به تصاویر بندانگشتی با ابعاد مختلفی دسترسی داشته باشید. به طور مشابه، برخی از افزونه ها نیز اندازه مدنظر خود را به این مجموعه ابعاد، اضافه می کنند. اگر می‌خواهید انعطاف‌پذیری بیشتری داشته باشید، می‌توانید اندازه‌های دلخواه تصاویر را نیز ایجاد کنید که در ادامه به آن اشاره خواهد شد.

اهمیت اندازه تصاویر در وردپرس برای بهینه سازی عملکرد سایت

با انتخاب اندازه بهینه برای تصاویر خاص، می توانید حجم فایل های تصویری خود را کاهش دهید. متعاقبا، با کاهش اندازه تصاویر در وردپرس، سرعت لود وب سایت افزایش خواهد یافت. استفاده از اندازه های مختلف تصویر، یکی از تاکتیک های هوشمندانه برای بهینه سازی تصاویر است. همچنین می توانید تاکتیک های دیگری مانند فشرده سازی تصاویر و فرمت های بهینه مانند WebP را نیز پیاده سازی کنید. برای پیاده‌سازی آسان تمامی این استراتژی‌ها، می‌توانید یک افزونه بهینه‌سازی تصویر مانند Optimole را نصب کنید.

تصویر(4)

این افزونه به طور خودکار هر تصویری که در وردپرس آپلود می‌شود را فشرده و فرمت‌ آن را بهینه می کند. سپس لینک آن را از یک شبکه توزیع محتوا (CDN)، ارائه می دهد.

نحوه پیکربندی ابعاد تصویر وردپرس (3 روش)

استفاده از ابعاد مناسب برای تصاویر، می تواند به بهبود زمان بارگذاری صفحات وب سایت کمک نماید. همچنین می تواند تضمین کند که تصاویر در صفحات اصلی وب سایت، با کیفیت بالا نمایش داده می شوند. استفاده از تصاویر با کیفیت تجربه کاربری مثبتی به بازدیدکنندگان سایت منتقل می کند. اگرچه بهینه سازی تصاویر می تواند مزایای زیادی داشته باشد اما ممکن است دانش انجام آن را نداشته باشید. خوشبختانه، روش های زیادی وجود دارد که می توانید برای پیکربندی اندازه تصاویر در وردپرس استفاده کنید. سه مورد آن به شرح زیر می باشد:

1. اندازه های پیش فرض تصاویر را تغییر دهید.
2. تنظیم ابعاد دلخواه برای تصاویر
3. سفارشی سازی تصاویر در ویرایشگر بلوک

1. اندازه های پیش فرض تصاویر را تغییر دهید

همانطور که اشاره شد، وردپرس برای هر تصویری که در سایت آپلود می شود، اندازه های مختلفی تولید می کند. با این حال، ممکن است با توجه به الزامات خود نیاز داشته باشید که این ابعاد را تغییر دهید. به این ترتیب، برای هر تصویری که در مطالب یا برگه های خود آپلود می کنید، نیاز به برش یا تغییر نخواهید داشت. برای شروع، به منوی "تنظیمات" سپس بخش "رسانه" در پیشخوان وردپرس مراجعه نمایید:

تصویر(5)

در این بخش، ابعاد پیش فرض نسخه های مختلف تصاویر نشان داده شده است. جهت تغییر این اندازه ها می توانید ابعاد موردنظر خود را در بخش "عرض" و "ارتفاع" برای تصاویر بندانگشتی یا "بیشترین پهنا" و "بیشترین ارتفاع" برای سایر اندازه ها، وارد نمایید. به عنوان مثال، ممکن است نیاز داشته باشید تصاویر بندانگشتی کوچکتری ایجاد کنید. برای این مورد صرفا نیاز است مقادیر بخش "اندازهٔ بندانگشتی" را تغییر دهید:

تصویر(6)

با این حال، توجه داشته باشید که پوسته فعال شما دارای اندازه های خاصی برای تصاویر می باشد. در این شرایط اگر یک پوسته جدید نصب شود، به احتمال فراوان تغییرات ایجاد شده در بخش "رسانه" را لغو می کند. نگهداری تصاویر کوچک قدیمی در وب سایت، می تواند مشکل ساز شود. اگرچه تصاویر جدیدی که در وردپرس آپلود می شوند با اندازه های پوسته جدید تطبیق پیدا می کنند اما تصاویر قبلی همچنان دارای ابعاد قدیمی خواهند بود. برای بروز رسانی ابعاد تمام تصاویر موجود، به تنظیمات پوسته جدید مراجعه کرده و تصاویر کوچک خود را با استفاده از افزونه‌ای مانند ReGenerate Thumbnails Advanced، به اندازه های جدید تغییر دهید. در این افزونه امکان اصلاح اندازه‌ تمام تصاویر را به طور همزمان خواهید داشت.

تصویر(7)

ابتدا به منوی "افزونه ها" سپس بخش "افزودن" مراجعه نمایید و با جستجوی نام "ReGenerate Thumbnails Advanced"، آن را نصب و فعال کنید:

تصویر(8)

پس از نصب، به بخش "ابزارها" و سپس "Regenerate Thumbnails" مراجعه نمایید تا صفحه تنظیمات افزونه را مشاهده کنید:

تصویر(9)

می توانید تصاویری که قصد بازسازی آنها را دارید از سمت چپ انتخاب نموده و در صورت نیاز، ابعاد دلخواهی به آن اضافه کنید:

تصویر(10)

همچنین این افزونه کمک می کند تا کتابخانه رسانه وردپرس را پاکسازی نموده و تصاویر کوچک قدیمی را حذف کنید. برای انجام این کار، در بخش "Advanced Options" کادر کنار "Delete Unselected Thumbnails" را علامت بزنید. در این حالت پس از بازسازی تصاویرتان، تصاویر کوچک قدیمی حذف خواهند شد:

تصویر(11)

پس از اعمال تنظیمات دلخواه، روی دکمه "REGENERATE" کلیک کنید تا اندازه تصاویر قدیمی را به ابعاد جدیدی که با تنظیمات پوسته فعلی مطابقت داشته باشد، تغییر دهد.

تصویر(12)

2. تنظیم ابعاد دلخواه برای تصاویر

همانطور که اشاره شد، وردپرس ابعاد مختلفی را برای تصاویر تولید می کند که می توانید در صورت نیاز، آنها را تغییر دهید. با این حال، ممکن است نیاز به افزودن ابعاد بیشتری داشته باشید تا مجبور نشوید تصاویر را یک به یک اصلاح کنید. جهت انجام این کار، می‌توانید از افزونه‌ای مانند Image Regenerate & Select Crop برای اضافه کردن اندازه‌های دلخواه تصاویر به وردپرس خود، استفاده کنید:

تصویر(13)

هنگامی که افزونه را نصب و فعال نمودید، از منوی"Image Regenerate & Select Crop" به زیر منوی "Additional Sizes" مراجعه کنید. در تب "IMAGES CUSTOM SETTINGS"، یک نام برای اندازه تصویر جدید خود وارد نموده و ابعاد دلخواه خود را در قسمت "MAX WIDTH" و "MAX HEIGHT" وارد نمایید:

تصویر(14)

با انتخاب گزینه "Crop the image to exact dimensions (normally images are proportional)"، تنظیمات را به نحوی اعمال نمایید که تصاویر را به ابعاد مشخص شده برش دهد. پس از وارد نمودن مقادیر، روی "ذخیره تغییرات" کلیک کنید. سپس به منوی "Image Regenerate & Select Crop" و زیر منوی "General Settings" مراجعه نمایید. ابعاد دلخواه جدیدی که ایجاد نموده اید را یافته و روی دکمه "REGENERATE" کلیک کنید:

تصویر(15)

با این کار یک کپی از تصاویرتان در ابعاد تنظیم شده، ایجاد می گردد. می توانید هر ابعادی که تمایل دارید را ایجاد کنید. با این حال، توصیه می شود صرفا در صورت لزوم این کار را انجام دهید. این ابعاد، فضای ذخیره سازی سرور را اشغال می کنند که می تواند بر عملکرد وب سایت تأثیر منفی داشته باشد. برای حذف اندازه سفارشی، به منوی "تنظیمات" سپس زیر منوی "رسانه" مراجعه نموده و گزینه ای که قصد حذف آن را دارید بیابید. سپس نام ابعاد را از قسمت "IMAGE SIZES NAME" پاک نموده و روی "ذخیره تغییرات" کلیک کنید:

تصویر(16)

نحوه اضافه کردن اندازه های دلخواه تصاویر از طریق کد

می‌توانید با افزودن کد به فایل functions.php پوسته یا با استفاده از یک افزونه رایگان مانند Code Snippets، اندازه ای دلخواه برای تصاویر اضافه نمایید. با این حال، قبل از انجام این کار، حتما از وب سایت خود نسخه پشتیبان تهیه کنید. سپس کد زیر را در فایل functions.php جستجو نمایید:

add_theme_support( 'post-thumbnail' );

اگر آن را پیدا نکردید، کد را در فایل مذکور جایگذاری نموده و فایل را ذخیره کنید. این کد وردپرس را برای پشتیبانی از اندازه های سفارشی جدید تصاویر، بروز می کند. در همان فایل، کد add_image_size را بیابید. می توانید آن را ویرایش و اندازه دلخواه تان را وارد نمایید:

add_image_size( 'example-custom-image-size', 800, 640 );

فراموش نکنید که example-custom-image-size را با یک شناسه مناسب، مانند post-thumbnails-size جایگزین نمایید. سپس ارتفاع و عرض دلخواه را وارد کنید. در نهایت فایل functions.php پوسته را ذخیره نمایید.

3. سفارشی سازی اندازه تصاویر در ویرایشگر بلوک

ممکن است بخواهید اندازه تصاویر در وردپرس را در مواردی خاص تغییر دهید. به جای تکیه بر تنظیمات پیش فرض، می توانید تصاویر را در ویرایشگر بلوک وردپرس ویرایش نمایید. برای باز کردن ویرایشگر بلوک، یک پست یا برگه جدید اضافه کنید. سپس روی نماد "+" کلیک نموده و یک بلوک "تصویر" را انتخاب نمایید:

تصویر(17)

حال می توانید یک تصویر را آپلود یا از کتابخانه رسانه وردپرس، انتخاب کنید. همچنین می‌توانید نشانی یا URL تصویر را وارد نمایید:

تصویر(18)

اگر تصویری را از کتابخانه رسانه خود انتخاب کنید، می توانید اندازه آن را هنگام آپلود تغییر دهید. برای انجام این کار، روی "ویرایش تصویر" در زیر "جزئیات پیوست" کلیک نمایید:

تصویر(19)

در ویرایشگر تصویر، گزینه "مقیاس تصویر" را پیدا کنید. در این بخش می توانید ابعاد جدیدی را برای تصویر خود وارد نمایید:

تصویر(20)

برای نمایش بخش کوچکی از تصویر، می توانید بخش مدنظرتان را برش دهید. در نظر داشته باشید که بهتر است ابتدا مقیاس تصویر را تغییر دهید تا از کاهش کیفیت جلوگیری شود و سپس اقدام به برش تصویر نمایید. بدون خروج از ویرایشگر تصویر، روی دکمه "برش" کلیک کنید. سپس، بخش مدنظر را انتخاب نمایید تا باقی بخش های تصویر حذف گردد:

تصویر(21)

برای اتمام برش، دوباره روی گزینه "برش" کلیک نموده و سپس گزینه "ذخیره" را انتخاب کنید. پس از ذخیره نسخه برش خورده، می توانید آن را در پست یا صفحه مدنظرتان قرار دهید. همچنین می توانید اندازه تصاویر در وردپرس را با استفاده از ویرایشگر بلوک تغییر دهید. پس از آپلود یک تصویر در پست، دایره های کوچکی در لبه های آن مشاهده می شود که به سادگی می توانید آنها را به داخل یا خارج بکشید تا اندازه تصویر تغییر کند:

تصویر(22)

روش دیگر برای تغییر ابعاد این است که در تنظیمات بلوک و بخش "اندازه تصویر"، از منوی کشویی آن را به "میانه"، "اندازه کامل" یا "بند انگشتی" تغییر دهید:

تصویر(23)

اگر می خواهید اندازه دقیق تری وارد کنید، می توانید در قسمت "ابعاد تصویر" مقادیر "ارتفاع" و "عرض" پیشفرض را تغییر دهید:

تصویر(24)

پس از اعمال تغییرات، اندازه تصویر وردپرس تغییر می‌ یابد. برای اطمینان از اندازه مناسب آن، می توانید پیش نمایش پست را مشاهده نموده و کیفیت تصویر را بررسی کنید. اگر از نتایج راضی هستید، می توانید آن را ذخیره نمایید.

نتیجه گیری

استفاده از ابعاد مناسب تصاویر در وردپرس، می تواند از کُند شدن زمان بارگذاری سایت جلوگیری کند. علاوه بر این، می توان اطمینان حاصل نمود که تصاویر در تمامی دستگاه ها واضح و از نظر بصری، زیبا به نظر می رسند. خوشبختانه، وردپرس سفارشی کردن تصاویر را بسیار آسان نموده است. با این حال، به یاد داشته باشید که استفاده از اندازه های مناسب برای تصاویر، تنها نیمی از اقداماتی می باشد که در جهت بهبود عملکرد سایت صورت می گیرد. برای بهینه سازی کامل تصاویر وردپرس، می توانید از یک افزونه رایگان مانند Optimole نیز استفاده کنید.