نحوه تغییر اندازه تصاویر در وردپرس
مقاله

اندازه تصاویر در وردپرس و نحوه تغییر آنها

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

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

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

  • بندانگشتی: ارتفاع و عرض 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 نیز استفاده کنید.

اشتراک گذاری:

نظرات

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *