- تفاوت فشرده‌سازی با تلفات و بدون تلفات در تصاویر
- نقش الگوریتم‌های پیش‌بینی پیکسل در فرمت‌های مدرن وب
- چرا WebP حجم کمتری نسبت به JPEG و PNG دارد
فرصت مطالعه ندارید؟ چکیده این مطلب را همین‌جا گوش دهید:
باز کردن یک وب‌سایت با تصاویر سنگین و کندی در بارگذاری، تجربه‌ای آزاردهنده است که کاربران را فراری می‌دهد. در پشت صحنه هر صفحه وب سریع، عکاسان، طراحان و توسعه‌دهندگانی قرار دارند که با درک ریاضیات و الگوریتم‌های فشرده‌سازی، حجم فایل‌ها را بدون افت کیفیت محسوس کاهش داده‌اند. اگر تا به حال برایتان سؤال شده که چرا برخی تصاویر با وجود جزئیات بالا حجم بسیار کمی دارند یا فرمت‌های مدرن چگونه پیکسل‌ها را فریب می‌دهند، در این مقاله قصد داریم کالبدشکافی دقیقی از پشت صحنه فرمت‌های WebP، PNG و JPEG داشته باشیم.
مفهوم پایه: تصویر دیجیتال واقعاً چیست؟
برای درک نحوه فشرده‌سازی، ابتدا باید بدانیم کامپیوتر چگونه یک عکس را می‌بیند. از دید پردازنده، یک تصویر دیجیتال چیزی نیست جز یک ماتریس بزرگ از خانه‌های کوچک به نام پیکسل (Pixel). هر پیکسل حاوی اطلاعات رنگی است که معمولاً در قالب مدل رنگی RGB (قرمز، سبز، آبی) ذخیره می‌شود. در یک عکس استاندارد با ابعاد ۱۹۲۰ در ۱۰۸۰ پیکسل، بیش از دو میلیون پیکسل وجود دارد. اگر هر پیکسل مقادیر ساده‌ای داشته باشد، حجم فایل خام بسیار سرسام‌آور خواهد شد.
اینجاست که جادوی فشرده‌سازی وارد عمل می‌شود. الگوریتم‌های فشرده‌سازی تلاش می‌کنند با شناسایی الگوهای تکراری، ریاضیات پشت پیکسل‌ها را ساده‌تر کنند بدون اینکه چشم انسان متوجه افت کیفیت شود. برای آشنایی با ابزارهای بهینه‌سازی سیستم و مدیریت فایل‌ها که در بهینه‌سازی جریان کار دیجیتال کمک می‌کنند، می‌توانید نگاهی به راهنمای ابزار Win11Debloat؛ پاکسازی و بهینه‌سازی ویندوز ۱۰ و ۱۱ بیندازید تا سیستم خود را خلوت‌تر کنید.
فشرده‌سازی با تلفات (Lossy) در برابر بدون تلفات (Lossless)
به طور کلی، روش‌های فشرده‌سازی تصویر به دو دسته اصلی تقسیم می‌شوند:
- فشرده‌سازی بدون تلفات (Lossless): هیچ داده‌ای از بین نمی‌رود. وقتی فایل را از حالت فشرده خارج می‌کنید، تک‌تک پیکسل‌ها دقیقاً همان مقادیر اولیه را دارند. این روش برای اسکرین‌شات‌ها، متن‌ها و گرافیک‌های تخت ایده‌آل است.
- فشرده‌سازی با تلفات (Lossy): برخی اطلاعات رنگی یا جزئیات بسیار ریزی که چشم انسان به سختی متوجه آن‌ها می‌شود، برای همیشه حذف می‌شوند. این کار باعث کاهش چشمگیر حجم فایل می‌شود و معمولاً برای عکس‌های طبیعی و پرتره به کار می‌رود.
| ویژگی فرمت | فرمت JPEG | فرمت PNG | فرمت WebP |
|---|---|---|---|
| نوع فشرده‌سازی | بیشتر با تلفات (Lossy) | بدون تلفات (Lossless) | هم با تلفات و هم بدون تلفات |
| پشتیبانی از شفافیت (Alpha) | ندارد | دارد (کامل) | دارد (در هر دو حالت) |
| الگوریتم اصلی | تبدیل گسسته کسینوسی (DCT) | فشرده‌سازی DEFLATE | پیش‌بینی پیکسل مبتنی بر بلوک |
| کاربرد اصلی | عکاسی و تصاویر پررنگ | گرافیک، لوگو، اسکرین‌شات | بهینه‌سازی مدرن صفحات وب |
فرمت JPEG و فرمت PNG؛ قدیمی‌های باارزش
فرمت JPEG سال‌هاست که ستون فقرات تصاویر در اینترنت است. این فرمت از الگوریتمی به نام تبدیل گسسته کسینوسی (Discrete Cosine Transform) استفاده می‌کند. JPEG تصویر را به بلوک‌های کوچک ۸ در ۸ پیکسل تقسیم کرده و تغییرات تدریجی رنگ‌ها را به صورت معادلات ریاضی ساده‌سازی می‌کند. چشم انسان به روشنایی و تغییرات نور حساس‌تر است تا تغییرات دقیق رنگ، بنابراین JPEG بخش زیادی از اطلاعات رنگی ظریف را حذف می‌کند بدون اینکه ما متوجه شویم.
در مقابل، فرمت PNG راه دیگری می‌رود. این فرمت از فشرده‌سازی بدون تلفات استفاده می‌کند و برای تصاویری که لبه‌های تیز، رنگ‌های تخت و مناطق وسیع با رنگ یکنواخت دارند (مانند لوگوها یا کدهای برنامه‌نویسی داخل عکس) عالی است. اگر به مباحث فنی و ساخت ابزارهای کاربردی علاقه دارید، مطالعه مقاله ساخت ابزار تخمین زمان مطالعه و تحلیل متن با HTML و JS خالی از لطف نیست.
فرمت WebP؛ شاهکار گوگل و پیش‌بینی هوشمند پیکسل‌ها
فرمت WebP که توسط گوگل توسعه یافته است، تلاش می‌کند بهترین ویژگی‌های JPEG و PNG را در کنار هم ارائه دهد. راز اصلی کاهش حجم فوق‌العاده در WebP، استفاده از روش‌های پیش‌بینی پیشرفته است. در حالت فشرده‌سازی بدون تلفات، WebP از الگوریتم‌های پیش‌بینی‌کننده استفاده می‌کند تا رنگ پیکسل‌های جدید را بر اساس پیکسل‌های مجاور حدس بزند. سپس به جای ذخیره کل اطلاعات پیکسل، فقط «خطای پیش‌بینی» (تفاوت بین مقدار واقعی و مقدار حدس‌زده شده) را ذخیره می‌کند.
در حالت با تلفات نیز، WebP از تبدیل‌های ریاضی پیشرفته‌تری نسبت به JPEG استفاده می‌کند که باعث می‌شود در حجم‌های پایین‌تر، آثار مخرب فشرده‌سازی (مثل بلوکی شدن تصاویر یا اصطلاحاً Artifacts) بسیار کمتر به چشم بخورد. همچنین WebP برخلاف JPEG از تصاویر متحرک (انیمیشن) و شفافیت پس‌زمینه (Alpha Channel) پشتیبانی می‌کند.
چرا عکس‌های اسکرین‌شات و گرافیک تخت در فرمت‌های پالت‌محور حجم کمتری دارند؟
تصاویری که شامل متن یا نمودارهای گرافیکی هستند، معمولاً شامل تعداد محدودی رنگ مشخص هستند. فرمت‌هایی که از پالت رنگی یا روش‌های کدگذاری طول زنجیره (Run-Length Encoding) استفاده می‌کنند، به جای ثبت تک‌تک پیکسل‌ها، می‌گویند: «این رنگ مشخص به تعداد ۲۰ پیکسل پشت سر هم تکرار شده است.» این ترفند ساده‌ی ریاضی حجم فایل‌های گرافیکی را به شدت کاهش می‌دهد، در حالی که در عکس‌های طبیعی به دلیل تغییر مداوم رنگ‌ها کارایی کمتری دارد.
تأثیر نوع فشرده‌سازی بر سرعت بارگذاری صفحات وب
حجم تصاویر یکی از اصلی‌ترین عوامل کندی وب‌سایت‌هاست. هر مگابایت اضافی می‌تواند کاربران را در اتصال‌های کند معطل کند. استفاده از فرمت‌های مدرن مانند WebP نه تنها پهنای باند سرور را به میزان قابل توجهی کاهش می‌دهد، بلکه زمان بارگذاری DOM و رندر صفحه را بهبود می‌بخشد. برای کاربرانی که به بهینه‌سازی سیستم خود اهمیت می‌دهند، آشنایی با ابزارهای کمکی مفید است؛ همان‌طور که در راهنمای کامل استفاده از گوگل کروم پرتابل؛ مرورگر سریع بدون نیاز به نصب به آن اشاره شده است.
پرسش‌های متداول
آیا فرمت WebP توسط تمام مرورگرها پشتیبانی می‌شود؟
بله، در حال حاضر تمامی مرورگرهای مدرن و به‌روز دسکتاپ و موبایل از فرمت WebP پشتیبانی کامل می‌کنند.
چگونه می‌توانم تصاویر خود را به WebP تبدیل کنم؟
ابزارها و سایت‌های آنلاین متعددی وجود دارند که این تبدیل را به صورت دسته‌جمعی انجام می‌دهند. همچنین نرم‌افزارهای ویرایش تصویر مدرن این گزینه را در خروجی خود دارند.
آیا فشرده‌سازی Lossy کیفیت عکس را برای همیشه خراب می‌کند؟
بله، اطلاعات حذف‌شده قابل بازگشت نیستند؛ به همین دلیل توصیه می‌شود همیشه نسخه اصلی (RAW یا PNG) را نزد خود نگه دارید و نسخه فشرده را فقط برای انتشار در وب استفاده کنید.
جمع‌بندی
فشرده‌سازی تصاویر ترکیبی هوشمندانه از ریاضیات، آمار و روانشناسی بینایی انسان است. با شناخت دقیق تفاوت‌های میان فرمت‌های WebP، PNG و JPEG و آگاهی از نحوه‌ی کارکرد الگوریتم‌های پشت صحنه، می‌توانید بهترین تصمیم را برای کاهش حجم وب‌سایت یا پروژه‌های طراحی خود بگیرید و تجربه‌ای سریع‌تر و روان‌تر برای مخاطبان خلق کنید.
