حرفه‌ای ترین آموزش بهینه سازی تصاویر در وردپرس (۲۰۲۲)

طبق آمارها تا سال ۲۰۲۰، بیش از ۴۳درصد محتوای وبسایت‌ها را تصاویر تشکیل می‌دهند. بنابراین بهینه‌سازی تصاویر از فونت و جاوا اسکریپت و CSS هم اثربخش‌تر است. راهکارهایی که برای بهینه سازی تصاویر پیش روی ماست، شامل فشرده سازی و کاهش حجم در عین حفظ کیفیت و تنظیمات لود است که در ادامه آموزش بهینه سازی تصاویر در وردپرس به طور کامل بررسی خواهند شد. پس تا انتهای مطلب همراه لیموهاست باشید و بخوانید:

انتخاب فرمت مناسب برای تصاویر سایت

فرمت تصاویر فرمول یکسانی ندارد که ما آن را به همه توصیه کنیم. اما با نکاتی که در این بخش ارائه می‌کنیم شما می‌توانید فرمت مناسب سایت خود را انتخاب کنید. تصاویر وبسایت عموما با سه فرمت WEBP، JPEG و PNG بارگذاری می‌شوند:

• در فرمت PNG  تصویر فشرده‌سازی نمی‌شود و بنابراین کیفیت بالاتری دارد و جزئیات بیشتری را نشان می‌دهد. نکته‌ی منفی‌اش این است که اندازه فایل کمی بزرگ‌تر است و بارگذاری آن زمان بیشتری می‌برد.
• تصاویر JPEG حجم کمتری دارند و سریع‌تر بارگذاری می‌شوند اما کیفیت کمتری دارند. بنابراین  اگر عکس یا تصویر ما دارای رنگ‌های مختلف است، آن را در فرمت JPEG ذخیره و استفاده می‌کنیم.
• فرمت WEBP از به سرقت رفتن تصاویر یونیک سایت جلوگیری می‌کند و کیفیت بالاتری را ارائه می کند. به طورمیانگین این فرمت نسبت به PNG  چیزی نزدیک به ۲۵ درصد بیشتر قابلیت فشرده‌سازی دارد و کیفیت را بیشتر حفظ می‌کند. اما تمام تصاویر سایت نیازی به این فرمت ندارند و بیشتر برای تصاویر بزرگ صفحه اصلی استفاده می‌شوند.
• Gifها معمولا جذابیت بیشتری دارند اما حجم چندان پایینی ندارند و عموما به بالای ۱مگابایت هستند. توصیه می‌کنیم اگر نیاز واضحی به استفاده از گیف ندارید از این فرمت استفاده نکنید. و اگر احیانا نیاز بود جایی از گیف استفاده کنید، حتما بهینه‌سازی را انجام دهید.

پیشنهاد می‌کنیم مطالعه کنید: «وردپرس چیست؟»

تعادل میان فشرده سازی وکیفیت، کلید طلایی بهینه سازی!

برای بهینه‌سازی تصاویر برای موتورهای جستجو در سامانه مدیریت محتوا وردپرس باید نکته کلیدی را در نظر داشته باشید. آن هم این که فشرده سازی یش از حد به کیفیت عکس ضربه می‌زند و عکس بی‌کیفیت چیزی نیست که مخاطبان شما بخواهند. بنابراین همواره تعادل بین فشرده‌سازی و کیفیت را درنظر داشته باشید. در نمونه زیر تصویر اول از منبع اصلی با حجم ۲.۶مگابایت، به دو روش بهینه‌سازی شده است. تصویر اول فشرده‌سازی کمتر و کیفیت بالاتری دارد. در  تصویر دوم فشرده‌سازی بیش از حد، کیفیت را تحت تاثیر قرار داده است. اجازه بدهید برای درک بهتر این مساله مثالی بزنیم. فرض کنید برای یک وبلاگ آموزشی حیوانات خانگی، در نظر داریم تصویری با حجم ۲مگابایت خروجی از دوربین را بهینه کنیم. در مرحله اول کم‌ترین فشرده سازی را با کیفیت بالا انجام داده ایم. این تصویر گرچه بسیار شفاف و با کیفیت است اما اگر صفحه تصاویر و آیکون‌های زیاد دیگری داشته باشد، سرعت لود را پایین می‌آورد:

در حالت دوم روی حجم تصویر تمرکز کرده‌ایم و ماکزیمم فشرده سازی را انجام داده‌ایم. اما کیفیت تحت تاثیر قرار گرفته است. گرچه این تصویر حجم پایینی دارد اما به دلیل این که احتمالا کاربران از دیدنش راضی نخواهند بود، برای موتورهای جستجو نیز پذیرفته نیست:

در حالت سوم کیفیت و حجم را در یک تعادل میانه و به موازات یکدیگر تنظیم کرده‌ایم. به این ترتیب تصویر با چندین برابر کاهش حجم، سرور را زیاد درگیر نخواهد کرد و با کیفیت مناسبی که دارد کاربران را راضی نگه خواهد داشت:

پیشنهاد می‌کنیم مطالعه کنید: «آموزش سئو وردپرس»

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

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

• Imagify
• Smush WP
• EWWW Cloud
• ShortPixel

مهم‌ترین فاکتوری که در انتخاب افزونه بهینه سازی تصاویر باید مد نظر داشته باشید، این است که افزونه انتخابی‌تان تصاویر را خارج از سرور بهینه سازی کند؛ چون این کار حجم سایت شما را کاهش می دهد. تمامی افزونه هایی که در بالا معرفی شدند، این ویژگی را دارند.

پیشنهاد می‌کنیم مطالعه کنید: «هاست وردپرس چیست؟»

افزونه Lazy Loading

اگر کاربرد سایت شما به نحوی است که تعداد زیادی تصویر در هر صفحه منتشر می‌شود، یا آیکون‌ها و آواتارهای سنگینی دارید، پیشنهاد می‌کنیم از افزونه‌ی Lazy Loading استفاده کنید. این افزونه همزمان با اسکرول کردن کاربر، تصاویر را لود می‌کند. به این ترتیب نیازی نیست که کاربر در ابتدای باز کردن هر صفحه زمانی را منتظر بماند تا تصاویر لود شوند.

نکات طلایی بهینه سازی تصاویر در وردپرس:

• دوره آپلود تصاویری که اندازه آن ها با ابعاد ستون یا DIV است، به پایان رسیده است. از نسخه 4.4 به بعد سامانه مدیریت محتوا وردپرس، تصاویر به صورت ریسپانسیو به کار برده می شوند. یعنی به صورت خودکار و متناسب با دستگاه موبایلی/تبلت کاربران کاهش حجم پیدا می‌کنند.
• SVGها می توانند جایگزینی عالی برای تصاویر باشند. ما در لیموهاست تا حدممکن از وکتور به جای تصویر استفاده می‌کنیم چرا که با وجود کیفیت مطلوب، حجم بسیار پایین‌تری دارند. و همانطور که می‌دانید که سرعت سایت ما کم نظیر است. باور ندارید؟ کافی است دامنه ما را در Gmetrix تست کنید!
• بهتر است به جای قرار دادن متن در تصاویر، از فونت‌های آیکونی استفاده کنید. چرا که هم در مقیاس بندی‌ها بهتر دیده می‌شوند و هم فضای کم‌تری می‌گیرند.

سخن پایانی

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