راهنمای کامل بهینه‌سازی تصاویر در وردپرس

یونس عباسی

من نزدیک به هشت سال در حوزه‌های سئو و توسعه فرانت‌اند به‌صورت حرفه‌ای فعالیت داشته‌ام. در این مدت، تجربه‌ی قابل توجهی در بهینه‌سازی وب‌سایت‌ها برای موتورهای جستجو و طراحی رابط‌های کاربری کسب کرده‌ام. علاقه‌ی من به فناوری‌های وب و تعهدم به بهبود مستمر مهارت‌ها، باعث شده است که همواره جدیدترین روش‌ها و ابزارهای این حوزه‌ها را بررسی و به کار بگیرم. این رویکرد به من امکان داده است تا در پروژه‌های متعددی نقش مؤثری ایفا کنم و نتایج مطلوبی ارائه دهم.

مشاهده سایر نوشته‌ها

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

عملکرد پیش‌فرض وردپرس در کاهش حجم تصاویر

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

بهینه سازی تصاویر فقط برای فرمت Webp استفاده می شود.
این بهینه سازی تنها برای تصاویری اعمال می شود که دارای اندازه ای بیشتر 2560 پیکسل باشند.

از این دو ویژگی می توان نتیجه گرفت که سیستم پیش فرض بهینه سازی تصاویر وردپرس عملاً کارآیی چندانی ندارد. از آنجا که تقریباً تمام تصاویری که در یک وبسایت استفاده می شوند اندازه ای کمتر از 2560 پیکسل دارند، پس کارآیی ای برای کاربران ندارد. حتی این ویژگی باعث بروز چالش هایی نیز می شود.

با توجه به توضیحات ارائه شده سوالاتی برای کاربران وردپرس مطرح می شود که باید درباره آنها توضیحاتی بدهیم.

سوال اول: اگر کاربری نیاز داشته باشد که تصاویری با اندازه بالاتر از 2560 پیکسل، بدون افت کیفیت در سایت بارگزاری کند، چه کار باید بکند؟

در تنظیمات وردپرس گزینه ای وجود ندارد که با استفاده از آن این ویژگی را غیرفعال کرد، پس برای غیرفعال سازی آن باید از یک قطعه کد استفاده کرد. برای اینکار قطعه کد پایین رو در فایل functions.php قرار دهید.

add_filter('jpeg_quality', function($arg){return 100;});

سوال دوم: چرا باید تصاویر سایت را بهینه سازی کنیم و حجم تصاویر را کاهش دهیم؟

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

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

از سوی دیگر، سرعت بارگذاری وب‌سایت یکی از عوامل کلیدی در رتبه‌بندی آن در موتورهای جستجو محسوب می‌شود. گوگل و سایر موتورهای جستجو همواره الگوریتم‌های خود را به نحوی بهینه‌سازی کرده‌اند که وب‌سایت‌های سریع‌تر در جایگاه‌های بالاتری قرار گیرند. به همین دلیل، کاهش حجم تصاویر و بهینه‌سازی آن‌ها می‌تواند تأثیر مستقیمی بر بهبود سئوی سایت و در نتیجه افزایش بازدیدکنندگان داشته باشد.

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

با توجه به این مسائل، استفاده از تکنیک‌های فشرده‌سازی و بهینه‌سازی تصاویر امری ضروری در طراحی و مدیریت وب‌سایت‌ها به شمار می‌رود. با بهره‌گیری از روش‌های مناسب، می‌توان بدون افت محسوس در کیفیت تصاویر، حجم آن‌ها را کاهش داد و از این طریق، سرعت بارگذاری صفحات را بهبود بخشید، تجربه کاربری را ارتقا داد، جایگاه بهتری در نتایج جستجو کسب کرد و از مشکلات مربوط به مصرف بالای منابع سرور جلوگیری نمود.

پس با توجه به آنچه بیان شد به صورت خلاصه دلایل کاهش حجم تصاویر را بیان خواهیم کرد:

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

سوال سوم: چگونه تصاویر را در وبسایت های وردپرسی بهینه سازی کنیم؟

برای بهینه سازی تصاویر در وبسایت های وردپرسی راه های گوناگونی وجود دارد و در این مقاله تلاش شده است که تمامی این روش ها به صورت کارآمد بیان شود.

قبل از هر چیزی در بهینه سازی تصاویر باید به فرمت تصاویر دقت کنیم بهترین فرمت برای تصاویری که در وب استفاده می شود فرمت WebP است. حالا چرا این فرمت از همه فرمت های وب بهتر است باید به مقاله مربوط به آن بروید و اطلاعات کامل را درباره آن بخوانید. اما به طور کلی فرمت WEBP قابلیت فشرده سازی بسیار بالایی دارد، با مرورگرها سازگار تر است و در عین حال می توان در این تصاویر از پیکسل های خالی برای تصاویر شفاف (Transparency) استفاده کرد.

نکته بعدی دقت کردن به اندازه پیکسلی تصاویر است. اگر تصویر در قسمتی از سایت استفاده می شود که برای مثال 1000 پیکسل عرض دارد نیازی به استفاده از تصویری با عرض بالاتر نیست. پس ابتدا باید اندازه پیکسلی تصویر را کاهش داد و بعد اقدام به کاهش حجم تصویر کرد. البته که در وبسایت های وردپرسی افزونه هایی وجود دارد که علاوه بر کاهش حجم تصاویر، اندازه آن را نیز کاهش می دهند. اما اگر از افزونه برای کاهش تصاویر استفاده نکنید حتماً باید به این نکته نیز توجه کنید.

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

نکته بعدی استفاده از یک شبکه توزیع محتوای یا همان CDN است که با توجه به لوکیشن کاربر محتویات سایت را از نزدیکتری سرور مربوط دریافت می کند و سرعت لود تصاویر و البته سرعت لود کلی سایت را افزایش می دهد.

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