بهینه سازی تصاویر وردپرس در رزولوشن های مختلف
دسته‌ها : گرافیک, وکتور سه شنبه, بهمن ۱۳, ۱۳۹۴ admin دیدگاه ها3

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

۲

فکر کنید ما یک عکس با ابعاد ۵۰۰×۳۰۰ پیکسل داریم وقتی که عکس ما ریسپانسیو میشه با استفاده CSS اندازه اون ریسایز شده و به صورت خودکار با اندازه صفحه واکنش نشون میده اما مشکل اصلی در اینجاست که حجم عکس ما اصلا کم نمیشه و اگر حجم اون ۵۰۰ کیلوبایت باشه تغییر اندازه توسط CSS باز هم همون ۵۰۰ کیلوبایت هستش و فقط از نظر ظاهری تغییر کرده .

اما میشه با کم کردن حجم عکس در انداز های مختلف ریسپانسیو به بازدهی و سرعت لود سایت کمک بسیاری کرد . با استفاده از پلاگین Hammy به راحتی میتونید عکس های سایت خودتون رو به راحتی در اندازه های مختلف بهینه سازی کنید تا سرعت بازدهی تصاویر افزایش پیدا کنه .

آموزش کانفیگ کردن پلاگین  :

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

قسمت اول : وارد کردن کلاس یا ایدی تگ اصلی مطالب

۳

در قسمت اول شما باید کلاس یا ایدی تگ اصلی حلقه وردپرس خودتون رو وارد کنید مثلا در قالب وبلاگ یا سایتتون ببینید چه کلاس یا ایدی توی تگ اصلی حلقه مطالب هستش برای اینکه منظورم رو بهتر درک کنید به این مثال توجه کنید :

<div class="post">

<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>

باکس حلقه مطالب

<?php endwhile; ?>
<?php endif; ?>

</div>


قسمت دوم : انتخاب رزولوشن های دلخواه

۴

برای اینکه بخواهید در اندازه های مختلف بازدهی تصاویر شما بهینه سازی بشه باید اندازه مورد نظرتون رو انتخاب کنید .

قسمت سوم : انتخاب نادیده گرفتن

۵

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

 

در آخر تنظیمات رو ذخیره کنید . در نسخه جدید این افزونه قابلیت فوق العاده Lazy Load برای تصاویر در نظر گرفته شده . Lazy Load یک قابلیت در جی کوئری هستش برای لود عکس ها در هنگام اسکرول بدین صورت فقط زمانی که کاربر اسکرون کرد تصاویر با افکت لود میشن این روش تا حد ۱۵ درصد سرعت لود سایت رو افزایش میده .

موفق باشید

 

دانلود افزونه از مخزن وردپرس

 

 

امیر رضائی وبسایت


عاشق طراحی وب و گرافیک هستم بیشتر اوقاتم در روز رو پای کامپیوتر به کد نویسی و طراحی سایت و تولید محتوا برای این سایت می کنم.وردپرس رو خیلی دوست دارم چندین بار هم سعی کردم با مدیریت های دیگه هم کار کنم ولی باز هم وردپرس رو ترجیح دادم.

مطالب مشابه با این موضوع

یک پاسخ برای “بهینه سازی تصاویر وردپرس در رزولوشن های مختلف

بالا رفتن