بهینه سازی تصاویر وردپرس در رزولوشن های مختلف
دسته‌ها : آموزش های طراحی سایت , آموزش وردپرس ۱۸ دی ۱۳۹۴ - ۱۲:۵۱ امیر رضائی یک نظر
خانه آموزش های طراحی سایتآموزش وردپرس بهینه سازی تصاویر وردپرس در رزولوشن های مختلف

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

۲

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

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

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

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

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

حتما بخوانید  آموزش نصب و راه اندازی وردپرس (wordpress)

۳

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


<div class="post">

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

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

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

</div>


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

۴

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

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

۵

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

 

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

موفق باشید

 

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

 

 

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


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

بهترین و راحت ترین راه برای ارتباط با شما کانال تلگرام بلاگ تم

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

  • کیمیا کتاب در تاریخ خرداد ۱۸, ۱۳۹۵ گفت:

    بسیار عالی
    با تشکر از آموزشتون
    موفق باشید

newslatter

با اشتراک در خبرنامه از آخرین آموزش ها و خدمات مطلع شوید !

از عضویت شما در خبرنامه بلاگ تم متشکریم!
best web design software

امتیاز دهید