بهینه سازی تصاویر وردپرس

بازدهی تصاویر به فاکتور های زیادی بستگی دارد بعضی از این موارد به بهینه بودن تصاویر در رزولوشن های مختلف و قالب های ریسپانسیوهستش اکثر تصاویری که در قالب های ریسپانسیو تغییر اندازه هوشمند دارند توسط 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 یک قابلیت در جی کوئری هستش برای لود عکس ها در هنگام اسکرول بدین صورت فقط زمانی که کاربر اسکرون کرد تصاویر با افکت لود میشن این روش تا حد ۱۵ درصد سرعت لود سایت رو افزایش میده .

موفق باشید

 
·  نظر دهی 
· اشتراک گذاری :


برچسب ها   :










برای ارسال نظر ‎‏ ، همین امروز در وب سایت رایان طبیب ثبت نام کنید.

ورود


مقالات طراحی سایت

مقالات سئو و بهینه سازی سایت

مقالات علمی

کلیه حقوق متعلق به رایان طبیب می باشد.
طراحی سایت،بهینه سازی سایت،طراحی وب سایت،بهینه سازی وب سایت،سئو,صابر فضلی احمدی,Saber Fazli Ahmadi
طراحی سایت حرفه ای،طراحی وب،طراحی وب سايت،فروشگاه،بهینه سازی،طراحی وب سایت،سئو,صابر فضلی احمدی,Saber Fazli Ahmadi
طراحی و توسعه سایت رایان طبیب | 2018 ©