راهنمای کامل بهینه سازی تصاویر در وردپرس – بخش اول: خوب شروع کنیم.

نویسنده : سید ایوب کوکبی ۱۵ اسفند ۱۳۹۶

راهنمای کامل بهینه سازی تصاویر در وردپرس - بخش اول: خوب شروع کنیم.

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

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

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

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

JPG یا PNG ؟ مسئله این است!

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

چه زمانی از فرمت PNG استفاده کنیم؟

برای تصاویر تخت یا فلت (Flat) – مثل تصاویر وکتور، نقاشی دیجیتال، فونت، لوگو، بنر، شیپ و هر چیزی که با فرمت وکتور (EPS یا AI) ساخته شده باشد از فرمت png استفاده کنید. در این حالت تصویر شما با بالاترین کیفیت ممکن ارائه می‌شود. اگر برای این نوع تصاویر از فرمت jpg استفاده کنید، حتی اگر بالاترین کیفیت را هم قرار دهید باز هم به خاطر ماهیت این فرمت، کیفیت نهایی دستخوش تغییر می‌شود که ممکن است رضایت شما را جلب نکند. در حقیقت در رزولوشن‌های بالا فرمت png بدون افت کیفیت، حجم بهتری از jpg دارد. به عنوان مثال تصویر زیر را با رزولشون ۵۰۰۰ پیکسل در دو فرمت فوق خروجی گرفتیم. حجم نهایی را در جدول مشاهده کنید:

تصویر نمونه با رزولوشن 500px

مقایسه حجم دو فرمت jpg و png

همانطور که می‌بینید حجم فرمت jpg به میزان ۴۵۵ درصد بالاتر از فرمت png است.

چه زمانی از فرمت JPG استفاده کنیم؟

به جزء مواردی که در بخش قبل گفتیم برای سایر تصاویر از jpg استفاده کنید. هر چیزی غیر از تصاویر وکتور در این دسته قرار می‌گیرد. تصاویری که با دوربین عکاسی، گوشی موبایل گرفته‌اید؛ تصاویر طبیعت، مردم، حیوانات، اشیاء و غیره. برای همه اینها از jpg استفاده کنید. تقریبا تمامی تصاویر شاتر استوک با این فرمت ذخیره شده‌اند. اگر در موقعیت مناسب به جای jpg از png استفاده کنید با مشکلات جدی در بحث کارایی مواجه خواهید شد. برخلاف مورد قبلی که استفاده از تصویر png به جای jpg چندان مشکلی ایجاد نمی‌کرد ولی بالعکس این کار، شما را با مشکلات بغرنجی روبرو می‌کند، برای اینکه اوج فاجعه را درک و محتاطانه‌تر رفتار کنید به مثلا زیر توجه داشته باشید:

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

1600px-JPG-q85-Progressive-500px

آماده‌سازی برای آزمون: این تصویر را از شاتر استوک با حجم تقریبی ۱۰٫۳ مگ و رزولوشن ۴۵۶۲*۶۱۴۹ (در حقیقت یک تصویر ۲۸ مگاپیکسلی) دانلود کردیم. با توجه به اینکه چنین رزولوشنی معمولا کارایی چندانی در دنیای وب ندارد و بیشتر برای چاپ روی کاغذ مناسب است لازم است تا اندازه نهایی تصویر را متناسب با وبلاگ مثلا ۱۶۰۰px تغییر دهیم.

آزمون: بعد از تغییر اندازه به ۱۶۰۰px، فایل را در چهار نسخه مختلف ذخیره کردیم – دو نسخه png و دو نسخه jpg که در هر فرمت یکبار با نرخ فشرده سازی پیش فرض فتوشاپ و یکبار با ماکزیمم فشرده سازی ذخیره شده‌‌اند.

نتیحه: نتیجه آزمایش را در جدول پایین می‌بینید:

جدول مقایسه دو فرمت jpg و png

شاید در نگاه اول فشرده‌سازی ۸۴ درصدی فرمت png را در مقایسه با فشرده‌سازی ۹۸ درصدی jpg مناسب بدانید. ولی با نگاه دقیق‌تر به حجم تصاویر متوجه خواهید شد که نسخه png در فشرده‌سازی ۸۴%، حجمی معادل ۱٫۷ مگ دارد در حالی که نسخه jpg حجمش ۰٫۲۲ مگابایت است. این یعنی در فشرده‌ترین حالت، png به میزان ۸ برابر سنگین‌تر از jpg است به عبارتی برای تصویری یکسان با رزولوشن برابر نسخه jpg به میزان ۷۰۰% سبک‌تر از png است.

برای تصویری یکسان با رزولوشن برابر نسخه jpg به میزان ۷۰۰% سبکتر از png است.

پس به طور خلاصه برای تصاویر فلت از PNG و برای مابقی موارد از JPG استفاده کنید.

چک لیست بارگذاری تصاویر در وبلاگ

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

تغییر اندازه تصاویر : اول از همه باید حداکثر رزولوشن تصاویر در وردپرس را تعیین کنید تا همه عکس‌ها بر اساس آن تنظیم شوند. IrfanView قابلیت اعمال تغییرات مختلف روی دسته‌ای از تصاویر را داراست. برای این کار بعد از اجرای برنامه کلید B را بر روی صفحه کلید فشار دهید. برای اهداف ما، قابلیت‌هایی مثل تغییر اندازه، برش، اضافه کردن واترمارک و غیره کاربرد دارند.

حذف داده‌های EXIF: عکس‌های گرفته شده در دوربین عکاسی معمولا حاوی داده‌های زیادی هستند. به عنوان مثال موقعیت جغرافیایی، تنظیمات ISO، مدل دوربین و نظایر آن. این اطلاعات گرچه ممکن است برای عکاسان و در شرایط خاصی لازم باشد ولی در حالت کلی برای استفاده در وب لزومی به وجود این اطلاعاتی در کنار تصاویر نیست. در هنگام تبدیل دسته جمعی تصاویر در IrfanView معمولا این داده‌ها حذف می‌شود. این کار علاوه بر اینکه حدود ۲۰۰ تا ۳۰۰ کیلوبایت کاهش حجم به همراه دارد باعث حفظ امنیت شما نیز می‌شود. شما که نمی‌خواهید با ذخیره شدن موقعیت جغرافیایی عکس، محل فیزیکی خود را در لو دهید!

بخوانید  مدیریت ترافیک سایت‌ در وردپرس

irfanview-exif-data-of-image

ذخیره سازی با فرمت Progressive JPG : در فشرده سازی progressive، تصویر در چندین فاز فشرده می‌شود و این نوع تصاویر در هنگام لود شدن در سایت به صورت لایه به لایه بارگیری می‌شوند بنابراین سرعت باز شدن صفحه را افزایش می‌دهند. شبکه‌های تحویل محتوا نظیر  KeyCDN در حال تبدیل تصاویر jpg به Progressive Jpeg هستند تا سرعت تحویل تصاویر را افزایش داده و در فضای ذخیره‌سازی هم بهبودهایی حاصل کنند.

irfanview-jpg-save-options

تبدیل DPI به ۷۲: DPI یا Dot Per Inch (نقطه در اینچ) بیانگر کیفیت تصاویر است. تصاویری با DPI بالا معمولا برای چاپ مناسب هستند (معمولا ۳۰۰DPI) و نه وب. برای دنیای وب بیشتر از ۷۲ در واقع اتلاف هزینه است چون در کامپیوتر اصولا رزولوشن بالاتر تفاوت چندانی به لحاظ کیفیت ایجاد نمی‌کنند. با این کار حجم تصاویر به میزان چشمگیری کاهش پیدا می‌کند. تصویر زیر خلاصه‌ای است از تمام چیزهایی که گفتیم، این تنظیمات برای بهینه سازی تصاویر وردپرس کافی است.

irfanview-batch-download-options

بهینه سازی تصاویر: مهم نیست که از فرمت JPG یا PNG استفاده می‌کنید در نهایت باید تصویر را بهینه کنید. برای این کار نرم‌افزارها و ابزارهای زیادی وجود دارند که بخش قابل توجهی از این ابزارها آنلاین هستند که با استفاده از آن‌ها گاهی اوقات تا ۷۰% می‌توانید حجم تصاویر را کاهش داد بدون اینکه کیفیتشان تغییری بکند؛ در واقع کیفیت تغییر می‌کند ولی در حدی نیست که چشم ما قادر به تشخیص آن باشد. یکی از این سرویس‌ها TinyPNG و یا TinyJPG است که با الگوریتم‌های پیشرفته‌ای نتایج قابل قبولی در اختیار شما قرار می‌دهند. شما می‌توانید نسخه Pro این سرویس آنلاین را در قالب یک افزونه ۵۰ دلاری برای فتوشاپ خریداری کنید و به صورت آفلاین کار بهینه سازی تصاویر را انجام دهید. این افزونه برای هر دو سیستم عامل مکینتاش و ویندوز در دسترس است. البته نسخه آنلاین این ابزار، قابلیت ذخیره کردن در دراپ‌باکس و دانلود مستقیم را در اختیار شما قرار می‌دهد که به نظر کافی است.

tinypng

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

تا الان یاد گرفتیم چطور از ابتدا تصاویر را اصولی و بهینه شده آپلود کنیم. ولی تکلیف آن عکس‌هایی که تا الان بدون در نظر گرفتن این اصول آپلود شده‌اند چه می‌شود؟ حذف و بارگذاری مجدد هم وقت زیادی می‌برد؟ اینجاست که افزونه‌های وردپرس همچون فرشته‌ی نجات به داد شما می‌رسند. با افزونه EWWW Cloud Image Optimizer به راحتی می‌توانید تمام تصاویر سایت را به صورت یکجا بهینه کنید.

EWWW Cloud Image Optimizer

ewww-image-optimizer

این افزونه نسخه تغییر یافته (به اصطلاح برنامه‌نویس‌ها: فورک شده) پلاگین اصلی EWWW Image Optimizer بوده که تاکنون بیش از ۵۰۰ هزار بار دانلود شده است. با نصب این پلاگین، تصاویر به محض آپلود شدن در وردپرس، به صورت خودکار بهینه سازی می‌شوند. چیزی که این پلاگین را از رقبا متمایز می‌کند، توانایی بهینه سازی تصاویر موجود در سایت است که استفاده از آن تغییر بسیار چشمگیری در کارایی سایت ایجاد می‌کند. بهینه سازی تصاویر قدیمی باعث می‌شود تا صفحات سریعتر باز شده و با افزایش ترافیک ورودی سایت مواجه شوید. همچنین امکان فعال کردن اختیاری فشرده سازی اتلافی (Lossy) تصاویر نیز وجود دارد (تشخیص تفاوت به سختی ممکن است)، که کاهش چشمگیری در مصرف فضا و پهنای باند ایجاد می‌کند. از نظر تکنولوژی بهینه سازی، افزونه می‌تواند از API سرویس TinyPNG یا TinyJPG برای بهینه سازی تصاویر موجود در سایت استفاده کند.

بخوانید  انتخاب بهتر پوسته تجاری وردپرس

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

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

افزونه TinyPNG

tinypng-wordpress-plugin

این یکی دیگر از پلاگین‌های وردپرس است که به صورت مستقیم به سرویس TinyPNG/JPG متصل شده و کار بهینه سازی تصاویر در وردپرس را انجام می‌دهد. این افزونه هم برای عکس‌ها جدید و هم عکس‌های قدیمی سایت که در بخش رسانه‌ها وجود دارند عمل بهینه سازی را به صورت خودکار انجام می‌دهد. پلن رایگان TinyPNG بهینه سازی تصاویر را برای ۱۰۰ عکس در ماه به صورت رایگان انجام می‌دهد.

نتیجه‌گیری

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

سید ایوب کوکبی

نویسنده و مترجم...

1 دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *




    علی

    جمعه ۱۵ تیر ۱۳۹۷

    حیفم اومد ی همچین مطلب عالی بدون نظر بمونه، دمتون گرم