بهینه سازی عکس های وردپرس در رزولوشن‌های متعدد
بهینه سازی عکس های وردپرس در رزولوشن‌های متعدد
بهینه سازی عکس های وردپرس در رزولوشن‌های متعدد به بازدهی عکس ها و فاکتورهای بسیاری بستگی دارد برخی از این موارد به بهینه بودن عکس ها در رزولوشن‌های متعدد و قالب های ریسپانسیو می باشد.
اغلب عکس هایی که در قالب های ریسپانسیو وردپرس تغییر مقدار هوشمند دارند از طریق CSS ایجاد شده و دشواری اصلی این روند در عدم کاهش ظرفیت در اندازه های متعدد می باشد.
تصور کنید ما یک تصویر با اندازه ۵۰۰×۳۰۰ پیکسل داریم هنگامی که تصویر ما ریسپانسیو می شود با بهره گیری CSS مقدار آن ریسایز شده و به شکل اتوماتیک با اندازه صفحه واکنش نشان می دهد.
منتها دشواری اصلی در اینجا می باشد که ظرفیت تصویر ما به هیچ وجه کم نمی شود و چنانچه ظرفیت آن ۵۰۰ کیلوبایت باشد تغییر اندازه از طریق CSS باز هم همان ۵۰۰ کیلوبایت می باشد و تنها از نظر ظاهری تغییر کرده است.
منتها می شود با کم کردن ظرفیت تصویر در اندازه‌های متعدد ریسپانسیو به بازدهی و سرعت لود وبسایت یاری زیادی کرد.
با بهره گیری از پلاگین Hammy به آسانی می توانید تصویر های وبسایت خود را به آسانی در مقدار های متعدد بهینه سازی کنید تا سرعت بازدهی عکس ها تکثیر پیدا کند.
بهینه سازی عکس های وردپرس در رزولوشن‌های متعدد
آموزش کانفیگ کردن پلاگین
نخست پلاگین را از مخزن وردپرس دانلود و نصب کرده. سپس بعداز فعال سازی پنل تنظیمات پلاگین در بخش تنظیمات وردپرس فعال میشود.
گام نخست : وارد کردن کلاس یا آیدی تگ اصلی مطلب ها
در بخش اول شما می بایست کلاس یا آیدی تگ اصلی حلقه وردپرس خود را وارد کنید به عنوان مثال در قالب وبلاگ یا وبسایت خود مشاهده کنید چه کلاس یا آیدی داخل تگ اصلی حلقه مطالب می باشد برای این که منظورمان را بهتر درک کنید به این نمونه دقت کنید:
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
باکس حلقه مطلب ها
<?php endwhile; ?>
<?php endif; ?>
</div>
گام دوم: انتخاب رزولوشن‌های دلخواه
برای اینکه بخواهید در اندازه های متعدد بازدهی عکس های شما بهینه سازی شود می بایست مقدار مد نظر خود را انتخاب کنید.
گام سوم: انتخاب نادیده گرفتن
چنانچه شما عکس های شاخص بسیاری در حلقه های متعدد دارید یا اینکه می‌خواهید کلا عکس های شاخص برای این کار نادیده گرفته شوند می توانید نام عکس های شاخص را در قسمت “add another class to ignore ” وارد کنید .
به این صورت پلاگین از انجام تغییرات بر روی تگی که کلاس مد نظر را دارد پرهیز می کند.
در پایان تنظیمات را درج کنید. در ورژن جدید این افزونه توانایی فوق العاده Lazy Load برای عکس ها در نظر گرفته شده است.
Lazy Load یک توانایی در جی کوئری می باشد برای لود شدن تصاویر در زمان اسکرول به این صورت تنها هنگامی که یوزر اسکرول کرد عکس ها با افکت لود می شوند این روند تا حد ۱۵ % سرعت لود شدن وبسایت را تکثیر می دهد.
تماس با آرتایار