چگونه مرورگرها تصاویر را رمزگشایی می‌کنند: پشت صحنه PNG، JPEG و WebP

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

اکثریت توسعه‌دهندگان می‌دانند که PNG، JPEG و WebP از نظر کیفیت و فشرده‌سازی متفاوت هستند، اما تعداد بسیار کمتری می‌فهمند پس از رسیدن تصویر به مرورگر دقیقاً چه اتفاقی می‌افتد.

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

چرا رمزگشایی تصویر مهم است

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

هر تصویری که در یک صفحه وب نمایش داده می‌شود، از چندین مرحله عبور می‌کند:

1. دانلود
2. تحلیل فایل
3. از فشرده‌سازی خارج کردن داده‌های تصویر
4. کدگشایی پیکسل‌ها
5. اعمال پروفایل‌های رنگی
6. بارگذاری پیکسل‌ها بر روی GPU
7. رندرینگ بر روی صفحه

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

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

خط لوله تصویر مرورگر

یک خط لوله ساده‌شدهٔ تصویر مرورگر به این شکل است:

Server
   │
   ▼
Download Image
   │
   ▼
Read Image Header
   │
   ▼
Choose Decoder
   │
   ▼
Decompress Data
   │
   ▼
Decode Pixels
   │
   ▼
Color Correction
   │
   ▼
GPU Upload
   │
   ▼
Render to Screen

هر مرورگری—از جمله Chrome، Firefox، Safari و Edge—یک جریان کاری مشابه را دنبال می‌کند، اگرچه کتابخانه‌های داخلی تصویر آنها متفاوت است.

مرحله ۱: بارگیری تصویر

هنگامی که HTML شامل یک تصویر است:

<img src="mountains.webp" alt="Landscape">

مرورگر:

• آدرس URL را حل می‌کند
• درخواست HTTP می‌فرستد
• تصویر فشرده را دانلود می‌کند
• آن را در حافظه یا کش ذخیره می‌کند

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

مرحله ۲: خواندن هدر تصویر

هر فرمت تصویر با یک امضای فایل منحصر به فرد شروع می‌شود.

به عنوان مثال:

مرورگر فقط چند بایت اول را می‌خواند تا شناسایی کند:

• نوع تصویر
• ابعاد
• عمق رنگ
• متادیتا
• پشتیبانی از شفافیت
• پشتیبانی از انیمیشن

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

چگونه تصاویر PNG رمزگشایی می‌شوند

PNG از فشرده‌سازی بدون افت استفاده می‌کند، به این معنی که هیچ داده تصویری حذف نمی‌شود.

مرورگر چندین عملیات را انجام می‌دهد:

1. خواندن بخش‌های PNG
2. تجزیه و تحلیل متادیتا
3. باز کردن داده‌های فشرده با استفاده از DEFLATE
4. معکوس‌سازی فیلتر PNG
5. بازسازی مقادیر پیکسل
6. تبدیل به RGBA

فایل‌های PNG شامل چندین تکه هستند:

• IHDR
• IDAT
• PLTE
• tEXt
• IEND

بزرگ‌ترین هزینه پردازش از برگرداندن فیلترهای PNG و بازگشایی DEFLATE ناشی می‌شود.

مزایا

• کیفیت تصویر عالی
• پشتیبانی از شفافیت
• عالی برای گرافیک‌های رابط کاربری
• عالی برای اسکرین‌شات‌ها

معایب

• اندازه‌های فایل بزرگتر
• رمزگشایی کندتر نسبت به JPEG
• مصرف حافظه بالاتر

چگونه تصاویر JPEG رمزگشایی می‌شوند

JPEG از فشرده‌سازی با افت کیفیت استفاده می‌کند.

بر خلاف PNG، JPEG اطلاعات فرکانسی را به‌جای مقادیر دقیق پیکسل‌ها ذخیره می‌کند.

فرآیند رمزگشایی مرورگر شامل موارد زیر است:

1. تحلیل نشانگرهای JPEG
2. رمزگشایی جداول هوفمان
3. انجام معکوس کمیت‌گذاری
4. اجرای تبدیل کسینوس گسسته معکوس (IDCT)
5. تبدیل YCbCr به RGB
6. نمایش پیکسل‌ها

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

مزایا

• فایل‌های بسیار کوچک
• رمزگشایی سریع
• عالی برای عکاسی

معایب

• آثار فشرده‌سازی
• بدون شفافیت
• کیفیت پس از ویرایش‌های مکرر کاهش می‌یابد

چگونه تصاویر WebP رمزگشایی می‌شوند

WebP توسط گوگل توسعه یافت تا نقاط قوت PNG و JPEG را ترکیب کند.

بسته به نوع فایل، WebP استفاده می‌کند:

• فشرده‌سازی VP8 (از دست رفتنی)
• فشرده‌سازی VP8L (بدون از دست رفتن)

مرورگر:

1. کانتینر RIFF را می‌خواند
2. VP8 یا VP8L را تشخیص می‌دهد
3. بلوک‌های تصویر را رمزگشایی می‌کند
4. مقادیر پیش‌بینی را بازمی‌گرداند
5. پیکسل‌ها را تبدیل می‌کند
6. تصویر را رندر می‌کند

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

مزایا

• فایل‌های کوچکتر
• شفافیت
• پشتیبانی از انیمیشن
• نسبت‌های فشرده‌سازی بهتر

معایب

• رمزگذاری کمی بیشتر به CPU نیاز دارد
• مرورگرهای قدیمی پشتیبانی محدودی دارند

مقایسه رمزگشایی PNG، JPEG و WebP

شتاب‌دهی سخت‌افزاری

مرورگرهای مدرن تمام پردازش تصویر را بر روی CPU انجام نمی‌دهند.

در عوض، از این استفاده می‌کنند:

• بارگذاری بافت‌های GPU
• رسترسازی سخت‌افزاری
• رمزگشایی چندرشته‌ای
• دستورات SIMD
• خطوط لوله رندرینگ موازی

مرورگرهای Chrome، Firefox و Edge اغلب چندین تصویر را به‌صورت همزمان رمزگشایی می‌کنند تا عملکرد اسکرول را بهبود بخشند.

JPEG پیش‌روند در مقابل JPEG استاندارد

JPEG پیش‌رونده سرعت بارگذاری محسوس را بهبود می‌بخشد.

به‌جای بارگذاری خط به خط، این نمایش می‌دهد:

Low Quality
      ↓
Medium Quality
      ↓
High Quality

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

کش تصویر مرورگر

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

کش شامل:

• کش HTTP
• کش حافظه
• کش دیسک
• کش بافت GPU

کش مؤثر ترافیک شبکه را کاهش داده و سرعت مرور صفحات را افزایش می‌دهد.

بارگذاری تنبل و رمزگشایی تصویر

مرورگرهای مدرن از بارگذاری تنبل پشتیبانی می‌کنند:

<img src="photo.webp" loading="lazy" alt="Nature">

مرورگر دانلود و رمزگشایی را تا زمانی که تصویر به نمای قابل مشاهده نزدیک شود به تعویق می‌اندازد.

مزایا شامل:

• بارگذاری اولیه سریع‌تر صفحه
• مصرف حافظه کمتر
• کاهش کار پردازنده
• بهبود Core Web Vitals

رمزگشایی تصویر به صورت ناهمزمان

مرورگرها به‌طور فزاینده‌ای تصاویر را به‌صورت ناهمزمان رمزگشایی می‌کنند.

به‌جای مسدود کردن رندر صفحه:

const img = new Image();

img.decoding = "async";
img.src = "hero.webp";

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

این منجر به اسکرول روان‌تر و پاسخگویی بهتر می‌شود.

محدودیت‌های رایج هنگام رمزگشایی تصویر

وب‌سایت‌های بزرگ اغلب به‌دلیل موارد زیر با مشکلات عملکردی مواجه می‌شوند:

• تصاویر بزرگ‌حجم
• استفاده بیش از حد از PNG
• هزاران تصویر بندانگشتی
• عدم وجود بارگذاری تنبل
• فشرده‌سازی ضعیف
• متادیتای غیرضروری
• تصاویر متحرک بزرگ

این مشکلات زمان رمزگشایی و مصرف حافظه را افزایش می‌دهند.

بهترین شیوه‌ها برای توسعه‌دهندگان

برای بهبود عملکرد تصاویر در مرورگر:

• در صورت امکان از WebP استفاده کنید.
• PNG را برای گرافیک‌هایی که به شفافیت یا کیفیت پیکسل‌دقیق نیاز دارند، نگه دارید.
• از JPEG برای عکس‌های با وضوح بالا استفاده کنید.
• تصاویر را پیش از استقرار فشرده کنید.
• تصاویر را طوری تغییر اندازه دهید که با ابعاد نمایش آنها مطابقت داشته باشد.
• کش مرورگر را فعال کنید.
• بارگذاری تنبل را پیاده‌سازی کنید.
• متادیتای غیرضروری EXIF را حذف کنید.
• از تصاویر واکنش‌گرا با عنصر <picture> و srcset استفاده کنید.
• عملکرد را با استفاده از Lighthouse و ابزارهای توسعه مرورگر تست کنید.

قالب‌های تصویر آینده

در حالی که PNG، JPEG و WebP در وب امروز حاکم هستند، مرورگرها به سرعت فرمت‌های جدیدتری مانند زیر را می‌پذیرند:

• AVIF
• JPEG XL (پشتیبانی محدود مرورگرها)
• HEIC (منطبق بر پلتفرم)
• JPEG XS

این فرمت‌ها وعدهٔ اندازهٔ فایل‌های حتی کوچکتر را می‌دهند در حالی که کیفیت تصویر فوق‌العاده‌ای را حفظ می‌کنند.

نتیجه‌گیری

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

درک چگونگی رمزگشایی مرورگرها از تصاویر PNG، JPEG و WebP به توسعه‌دهندگان کمک می‌کند تا تصمیمات هوشمندانه‌تری دربارهٔ فرمت‌های تصویر، استراتژی‌های فشرده‌سازی و بهینه‌سازی وب‌سایت اتخاذ کنند. با انتخاب فرمت مناسب برای هر مورد استفاده و پیروی از بهترین شیوه‌های عملکرد مدرن، می‌توانید وب‌سایت‌های سریع‌تری بسازید، تجربه کاربری را بهبود بخشید، مصرف پهنای باند را کاهش دهید و امتیازهای بهتری در Core Web Vitals کسب کنید.

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

سوالات متداول (FAQs)

1. مرورگرها تصاویر PNG را به‌طور متفاوت از تصاویر JPEG چگونه رمزگشایی می‌کنند؟

A1: مرورگرها تصاویر PNG را با استفاده از فشرده‌سازی بدون‌از دست رفتن DEFLATE و فیلترگذاری معکوس PNG برای بازسازی دقیق هر پیکسل، رمزگشایی می‌کنند، در حالی که تصاویر JPEG با استفاده از تکنیک‌های فشرده‌سازی با از دست رفتن مانند رمزگشایی هافمن و تبدیل کسینوس گسسته معکوس (IDCT) رمزگشایی می‌شوند، که باعث می‌شود فایل‌های JPEG کوچک‌تر باشند اما دقیقاً پیکسل به پیکسل نباشند.

2. چرا WebP معمولاً نسبت به PNG و JPEG کوچکتر است؟

A2: WebP از الگوریتم‌های فشرده‌سازی مدرن استفاده می‌کند که کارایی فشرده‌سازی بهتری نسبت به فرمت‌های سنتی PNG و JPEG ارائه می‌دهند. این فرمت هم فشرده‌سازی با از دست رفتن و هم بدون از دست رفتن را پشتیبانی می‌کند و به توسعه‌دهندگان امکان می‌دهد تا اندازه فایل‌های کوچکتری به‌دست آورند بدون اینکه کیفیت تصویر به‌طور قابل‌توجهی کاهش یابد.

3. پس از دانلود تصویر توسط مرورگر چه اتفاقی می‌افتد؟

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

4. آیا بارگذاری تنبل (lazy loading) عملکرد رمزگشایی تصویر را بهبود می‌بخشد؟

A4: بله. بارگذاری تنبل (Lazy loading) دانلود و رمزگشایی تصاویر را تا زمانی که نزدیک به ورود به نمای کاربر شوند به تعویق می‌اندازد. این کار زمان بارگذاری اولیه صفحه را کاهش می‌دهد، مصرف CPU و حافظه را پایین می‌آورد و معیارهای Core Web Vitals مانند Largest Contentful Paint (LCP) را بهبود می‌بخشد.

5. توسعه‌دهندگان برای وب‌سایت‌های مدرن باید از کدام فرمت تصویر استفاده کنند؟

A5: بهترین فرمت بستگی به محتوا دارد. WebP یک انتخاب عالی برای اکثر وب‌سایت‌ها است زیرا فشرده‌سازی برتری دارد و از شفافیت پشتیبانی می‌کند. JPEG برای عکاسی ایده‌آل باقی می‌ماند، در حالی که PNG برای لوگوها، آیکون‌ها، اسکرین‌شات‌ها و گرافیک‌هایی که به کیفیت بدون افت و پس‌زمینه شفاف نیاز دارند، مناسب‌ترین است.

موارد مرتبط

• تفاوت بین BMP و PNG
• APNG در مقابل BMP: کدام فرمت فایل تصویر بهتر است؟
• تصاویر رستر در مقابل وکتور: مقایسه‌ای کوتاه