فشرده سازی تصاویر وردپرس با الگوریتم Lossy و Lossless

محتوای تصویری عملاً به یکی از اجزای جدانشدنی تمامی وب‌سایت‌ها تبدیل‌شده؛ خودتون هم به‌عنوان یه مدیر سایت مسلماً از میزان اهمیت تصاویر در سایت باخبر هستید و ازش غافل نمی‌شید. اما خب این تصاویر ممکنه حجم زیادی رو در سایت اشغال کنند؛ که این مورد برای مدیران سایت یه مشکل اساسی به‌حساب میاد. در این مقاله شما رو با دوتا از بهترین روش‌های فشرده سازی تصاویر وردپرس آشنا خواهیم کرد.

Lossy و Lossless دو روش بسیار کاربردی برای فشرده‌سازی تصاویر هستند. اگه شما هم با حجم تصاویر سایت خودتون مشکل دارید و می‌خواید تصاویر سایت رو فشرده‌سازی کنید، با این مقاله همراه بشید.

اهمیت فشرده سازی تصاویر وردپرس

فشرده‌سازی تصاویر از جهات مختلفی برای سایت ضروری و مفید هست. در اینجا به برخی از مواردی که شما رو ترغیب به فشرده‌سازی تصاویر سایتتون می‌کنه اشاره می‌کنیم.

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

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

مشکلاتی که با فشرده نکردن تصاویر برای شما پیش می‌آید.

عملکرد سایت یکی از موارد بسیار مهم در مدیریت سایت هست. یه سایت حرفه‌ای باید عملکرد بسیار مناسبی داشته باشه در غیر این صورت قادر به جذب کاربران نخواهد بود.

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

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

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

همان‌طور که بهش اشاره کردیم عملکرد سایت بر روی سئو سایت نیز تأثیر بسزایی داره، به این صورت که هرچه سرعت سایت بیشتر باشه، اون سایت رتبه بهتری ازنظر سئو خواهد داشت. به بیان کلی سرعت سایت یکی از عوامل تأثیرگذار در رتبه‌بندی گوگل هست.

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

فشرده سازی تصاویر وردپرس با الگوریتم Lossless 

اگه حین فشرده‌سازی تصاویر، کیفیت اهمیت بسیار زیادی براتون داره، پیشنهاد می‌کنیم تصاویر رو با استفاده از الگوریتم Lossless فشرده کنید.

این روش کیفیت تصویر رو تغییر نمی‌ده و می‌تونید یه خروجی باکیفیت بسیار بالا داشته باشید. البته به این نکته هم توجه داشته باشید که این روش برای افرادی مناسبه که کیفیت براشون در اولویت اول قرار داره و حجم تصویر در وهله دوم.

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

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

این الگوریتم یه انتخاب بسیار مناسبه برای تصاویری که پس‌زمینه شفاف دارند و یا تصاویری که متن‌های سنگینی دارند. معمولاً فرمت‌های RAW، BMP، GIF و PNG از این الگوریتم برای فشرده‌سازی استفاده می‌کنند.

فشرده سازی تصاویر وردپرس با الگوریتم Lossy

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

درسته که فشرده‌سازی به روش Lossy سایز تصویر رو کوچک می‌کنه، اما باید به این نکته هم توجه داشته باشید که این موضوع منجر به کوچک شدن پیکسل عکس هم می‌شه‌ که ممکنه کیفیت تصویر رو کاهش بده.

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

اگه بخوایم یه مثال برای درک بهتر این روش فشرده‌سازی بگیم، می‌توان به فرمت‌های JPEG و GIF اشاره کرد. اگه می‌خواید از تصاویر محرک استفاده کنید پیشنهاد می‌کنیم حتماً از فرمت GIF استفاده کنید و برای تصاویر نیز اگه شفافیت کمتری مدنظرتون هست، می‌تونید از فرمت JPEG استفاده کنید.

چرا از الگوریتم Lossy استفاده کنیم؟

همچنین ممکنه بخواید سرعت و عملکرد سایت با مشکل مواجه نشه و تصاویر، حجم کمتری از سایت رو اشغال کنند، که برای این امر بهتره از روش Lossy استفاده کنید. اما خب نباید انتظار کیفیت تصویر اصلی رو داشته باشید!

با استفاده از این روش این امکان رو خواهید داشت که حجم تصویر رو به‌طور چشمگیری حتی تا ۸۰ درصد و یا بالاتر کاهش بدید. البته دقت کنید که پس از فشرده‌سازی، با زوم کردن بر روی تصویر، پیکسل‌ها کیفیت پایین‌تری نسبت به تصویر اصلی خواهند داشت.

العاده اگه سایت خودتون رو با استفاده از وردپرس راه‌اندازی کردید، وردپرس به‌صورت خودکار هنگام آپلود فایل JPEG در کتابخانه پرونده‌های چندرسانه‌ای به فشرده‌سازی اون کمک می‌کنه.

کدام الگوریتم برای شما کاربردی‌تر است؟

اینکه کدام‌یک از این روش‌ها رو برای فشرده‌سازی انتخاب کنید کاملاً بر عهده خودتون هست. درواقع نیاز شما و سایتتون هست که تعیین می‌کنه کدام یکی از این الگوریتم‌ها براتون مناسبه.

اما اگه بخوایم به‌صورت کلی برای تمامی سایت‌ها این دو الگوریتم رو تقسیم‌بندی کنیم می‌توان گفت:

الگوریتم Lossless انتخاب مناسب‌تری برای سایت‌هایی هست که فعالیت عکاسی و مد و غیره دارند؛ در این سایت‌ها کیفیت تصویر حرف اول رو می‌زنه و کاربران آن‌ها به دنبال تصاویر واضح با کیفیت بسیار عالی هستند.

اما اگه یک سایت تجارت الکترونیکی، خبری و از این قبیل فعالیت‌ها دارید، بهتره از الگوریتم Lossy برای فشرده‌سازی تصاویر خودتون استفاده کنید.

فشرده‌سازی تصاویر با الگوریتم Lossy در وردپرس

اگه از وردپرس استفاده می‌کنید و از الگوریتم Lossy برای فشرده‌سازی تصاویر استفاده می‌کنید، باید CMS رو به‌صورت خودکار تغییر بدید. با استفاده از کدهایی که در اینجا قرار می‌دهیم، می‌تونید به‌راحتی درصد حجم تصویر رو تغییر دهید.

اولین کاری که باید انجام بدید اینه که کد زیر رو به فایل functions.php در پوشه‌ی قالبی که در سایتتون فعال هست اضافه کنید. با این کد درواقع فشرده‌سازی خودکار تصاویر رو در وردپرس غیرفعال خواهید کرد. بعدازآن باید فشرده‌سازی رو با استفاده از فتوشاپ و یا هر نرم‌افزار دلخواه به‌صورت دستی انجام بدید.

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

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

add_filter( 'jpeg_quality', function() { return 70; } );

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

معرفی افزونه Imagify

Imagify یک پلاگین رایگان و بسیار کاربردی هست که به شما برای فشرده‌سازی تصاویر سایتتون کمک می‌کنه. این افزونه کاملاً رایگان هست و به‌راحتی می‌تونید این پلاگین رو بر روی سایت خودتون نصب و فعال کنید. آموزش نصب افزونه وردپرس رو برای آگاهی از مراحل نصب مشاهده کنید.

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

تنظیمات افزونه Imagify

بعدازاینکه افزونه‌ی Imagify رو نصب کردید به قسمت تنظیمات این افزونه بروید؛ در این قسمت از شما یک API KEY می‌خواد. برای به‌دست آوردن API KEY بر روی “Create A Free API Key” کلیک کنید و ایمیل خودتون رو وارد کنید تا براتون یک API KEY ایمیل بشه.

بعدازآن باید API KEY رو در قسمتی که با فلش در تصویر بالا مشخص‌شده وارد کنید و بر روی گزینه‌ی ذخیره تغییرات کلیک کنید تا وارد صفحه دیگری مانند تصویر زیر بشید.

در این صفحه این امکان رو دارید که تصاویر خودتون رو در ۳ سطح مختلف یعنی Normal، Aggressive و Ultra فشرده‌سازی کنید.

گزینه‌ی Normal برای فشرده‌سازی تصاویر از الگوریتم Lossless استفاده می‌کنه، با انتخاب این گزینه یه خروجی تصویر با کیفیت اصلی خواهید داشت.

سطح بعدی Aggressive می‌باشد؛ این سطح نسبت به مورد قبلی کمی از کیفیت عکس شما رو کم می‌کنه و تصویر با کیفیت کمتری نمایش داده می‌شه. البته این تغییر بسیار ناچیز هست تا حدی که شاید اصلاً متوجه اون نشید.

بخش آخر Ultra هست که به‌عنوان قوی‌ترین سطح فشرده‌سازی Lossy به‌حساب میاد.

البته می‌تونید از هر افزونه دیگری که در این زمینه کارکرد دارند نیز استفاده کنید، اما ما به شما این پلاگین رو برای فشرده‌سازی تصاویر خودتون پیشنهاد می‌کنیم.

معرفی فرمت مدرن WebP و جایگاه آن در الگوریتم‌های فشرده‌سازی

فرمت WebP توسط گوگل معرفی شده و هدفش اینه که ویژگی‌های مثبت هر دو الگوریتم Lossy و Lossless رو همزمان ارائه کنه؛ یعنی فشرده‌سازی فوق‌العاده بالا در کنار حفظ کیفیت و شفافیت تصویر. این فرمت باعث می‌شه تصاویر سایت بدون اینکه تار یا بی‌کیفیت بشن، تا بیش از ۳۰ درصد نسبت به JPEG و PNG سبک‌تر بشن.

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

آموزش بهینه‌سازی و فشرده‌سازی تصاویر قبل از آپلود با ابزارهای آنلاین

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

کافیه وارد این ابزارها بشید، تصاویر خودتون رو بکشید و رها کنید (Drag and Drop). این سایت‌ها با استفاده از الگوریتم‌های هوشمند Lossy، اطلاعات غیرضروری پیکسل‌ها رو حذف می‌کنند و بلافاصله لینک دانلود فایل بهینه‌شده رو بدون نیاز به وارد کردن ایمیل یا ساخت اکانت در اختیارتون قرار می‌دهند.

نحوه تغییر ابعاد پیش‌فرض تصاویر (تولید تصاویر بندانگشتی کمتر)

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

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

جمع‌بندی

در نهایت، فشرده‌سازی تصاویر یکی از اصلی‌ترین و کلیدی‌ترین کارهایی هست که باید برای زنده نگه داشتن سرعت و عملکرد سایت وردپرسی خودتون انجام بدید. همان‌طور که در این مقاله بررسی کردیم، شما می‌تونید با توجه به نوع فعالیت و نیاز مبرم سایتتون، بین دو الگوریتم محبوب Lossy و Lossless یک فرآیند متعادل ایجاد کنید؛ یعنی یا کیفیت رو در اولویت اول قرار بدید یا اینکه با کم کردن حجم تصاویر تا ۸۰ درصد، پهنای باند و منابع هاست خودتون رو به طور چشم‌گیری ذخیره کنید.

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

شاد و سربلند باشید. 🙂

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.