در زمان طراحی سایت و تهیه مطالب، تصاویر بخش مهمی از نمای سایت بوده و باعث جلب توجه و اشتیاق مخاطبین به دنبال کردن سایت می شود. علاوه بر انتخاب تصویر مناسب، ابعاد و حجم عکس ها در سرعت بارگذاری آن در سمت کاربر تاثیر بسزایی دارد و اینجاست که با این پرسش روبرو می شویم :
از چه فرمتی برای ذخیره عکس ها استفاده کنیم؟
متن زیر ترجمه بخشی از مقاله
مقایسه فرمتهای jpeg ، PNG ، WEBP و AVIF
خلاصه
WebP بهترین فرمت برای عکس های غیرفشرده (1.42 برابر کوچکتر از JPEG، 1.70 برابر کوچکتر از PNG، و 1.75 برابر کوچکتر از AVIF)
PNG بهترین فرمت برای تصاویر متنی غیرفشرده (6.25 برابر کوچکتر از JPEG، 3.06 برابر کوچکتر از WebP، و 3.88 برابر کوچکتر از AVIF).
AVIF و WebP بهترین کیفیت را هنگام فشرده‌سازی با نقصان عکس‌ها ارائه می‌دهند، در حالی که PNG بهترین فشرده‌سازی با نقصان را برای تصاویر متنی ارائه می‌دهد. فایل های JPEG پیشرو(Progressive JPEG) 5 درصد بزرگتر از فایل های JPEG استاندارد هستند.
در حالت بدون ایجاد نقصان در عکس، فرمت فشرده سازی WebP در مقایسه با فرمت های JPEG، PNG و AVIF اندازه فایل های کوچک تری را برای عکس ها ارائه می دهد.
تصاویر غیرفشرده WebP ، 1.42 برابر کوچکتر از JPEG، 1.70 برابر کوچکتر از PNG و 1.75 برابر کوچکتر از AVIF هستند. اگرچه باید توجه داشت که AVIF یک فرمت فشرده سازی عالی است، ولی باید این نکته را در نظر داشت که تا زمانی که فشرده سازی اعمال نگردد. حجم تصویر در این فرمت از فرمت WebP کمتر نخواهد بود.
ولی در مورد تصاویری که مبتنی بر متن هستند، وضعیت برعکس است و PNG بهترین کاهش اندازه را بدون از دست دادن کیفیت ارائه می دهد. به طور متوسط، فایل های PNG ، 6.25 برابر کوچکتر از JPEG، 3.06 برابر کوچکتر از WebP و 3.88 برابر کوچکتر از AVIF هستند.
این نتایج نشان می‌دهد زمانی که می‌خواهید بالاترین کیفیت را حفظ کنید WebP بهترین فرمت برای عکس‌ها و PNG بهترین فرمت برای تصاویر متنی خواهد بود.
مقایسه اندازه عکس‌ها و تصاویر متنی JPEG، PNG، WebP و AVIF غیرفشرده. اندازه های متوسط نرمال شد. پایین تر بهتر است
چگونه واژه “بدون فشرده سازی” را تعریف کردم؟
“بدون فشرده سازی” به صورت تبدیل تصویر اصلی به فرمتی دیگر بدون هیچ تکنیکی برای کاهش اندازه و در عین حال قربانی کردن کیفیت تعریف می شود. تصاویر ذاتاً با تبدیل شدن به فرمتهای دیگر کیفیت خود را از دست می‌دهند، اما همه آنها میانگین تشابه ساختاری چند مقیاسی برای ارزیابی کیفیت تصویر(MS-SSIM) با مقداری بیش از 0.991 را نشان می‌دهند، به این معنی که تصویر تقریباً یکسانی (غیر قابل تشخیص برای چشم انسان) خواهیم داشت.
(Multi Scale_Structural Similarity for image Quality Assessment)
مقایسه فشرده سازی با کاهش کیفیت
درآزمایش عملکرد فشرده‌سازی، کیفیت هر تصویر عمداً کاهش یافت و سپس از نظر کیفیت و اندازه با تصویر اصلی مقایسه شد. هرچه کیفیت نسبی در همان اندازه نسبی بالاتر باشد، فرمت، فشرده سازی را بهتر انجام می دهد. شایان ذکر است که تخریب تصویر در محدوده MS-SSIM 0.90 تا 0.95 قابل توجه است. AVIF بهترین فرمت فشرده سازی با کاهش کیفیت، برای عکس ها است که به طور متوسط حتی 10 درصد بهتر از WebP عمل می کند. JPEG در فشرده سازی های کم، کیفیتی مشابه WebP و AVIF را ارائه می دهد، اما در فشرده سازی های بیشتر، کیفیت به طور قابل توجهی کاهش می یابد. PNG بدترین فرمت برای عکس‌ها است، زیرا کاهش تعداد رنگ‌ها، منجر به کاهش کیفیت شدیدی را در تصویر می گردد .
وضعیت برای تصاویر متنی برعکس است. در اینجا، PNG بهترین کیفیت (تقریباً 1 تا 40٪ فشرده سازی) را هنگام فشرده شدن ارائه می دهد. عملکرد AVIF و WebP کمی بدتر از PNG است، در حالی که JPEG بدترین عملکرد را در نسبت کیفیت به اندازه درهر سطح از فشرده سازی با کاهش کیفیت، ارائه می دهد.
مقایسه فرمت ها
JPG در مقابل JPEG
تفاوت اصلی بین JPG و JPEG این است که JPEG یک فرمت فایل است، در حالی که JPG یک پسوند فایل 3 حرفی برای JPEG است. در نتیجه، تصاویر ذخیره شده به صورت jpg در واقع یکی از فرمت های JPEG هستند. این تفاوت به زمانی بر می گردد که سیستم عامل ویندوز فقط پسوندهای فایل 3 حرفی را می پذیرفت. امروزه می‌توانید از پسوندهای ۳ یا ۴ حرفی استفاده کنید، بنابراین jpg و jpeg می‌توانند به جای یکدیگر استفاده شوند.
JPG در مقابل JPEG2000 و Progressive JPEG
JPGهای استاندارد در صورت فشرده نبودن 36 درصد اندازه JPEG2000 هستند. اندازه فایل تقریباً 3 برابر بزرگتر، به دلیل تبدیل کاملاً بدون نقصان JPEG2000 (1.0 SSIM)، در مقایسه با کاهش جزئی کیفیت درJPEG (0.993 SSIM) است.
progressive JPEG در امواج متوالی بارگذاری می شود تا زمانی که یک تصویر واضح تشکیل شود. این روش بارگذاری می تواند برای عملکرد وب سایت مفید باشد، زیرا به نظر می رسد تصاویر سریعتر بارگذاری می شوند. با این حال، به دلیل این ویژگی، تصاویر progressive JPEG به طور متوسط 5٪ بزرگتر از JPEGهای استاندارد هستند.
JPEG در مقابل PNG
PNG ها عمدتا برای گرافیک های وب، آرم ها، نمودارها و تصاویرتمثیلی استفاده می شوند، در حالی که JPEG ها بیشتر برای تصاویر دیجیتال استفاده می شوند. JPEG ها برای کاهش اندازه فایل فشرده می شوند، در حالی که PNG ها از قبل قابل فشرده سازی هستند. PNG همچنین از پس‌زمینه‌های شفاف پشتیبانی می‌کند که آن را به فرمتی مناسب برای طراحی گرافیکی تبدیل نموده است.
یک تصور اشتباه بزرگ این است که PNG را نمی توان فشرده کرد. اگرچه فشرده سازی JPEG و PNG متفاوت عمل می کنندJPEG ها با استفاده از متوسط مناطق مشابه تصویر فشرده می شوند در حالی که PNG ها با کاهش تدریجی تعداد رنگ ها فشرده می شوند. این فشرده سازی با بیت های 32 بیتی، 24 بیتی، 16 بیتی و 8 بیتی بیان می شود. یک تصویر 8 بیتی PNG از 256 رنگ تشکیل شده است که می توانیم برای کاهش حجم بیشترعدد آن را تا 1 کاهش دهیم.
به دلیل تفاوت در کدگذاری فرمت، فرمت JPEG برای فشرده سازی بدون نقصان عکس ها (مثلا تصاویر با رنگ های زیاد)، بهتر است و به طور متوسط 1.2 برابر اندازه فایل کوچکتر را ارائه می دهد. در مقابل، برای تصاویر متنی که معمولاً رنگ های کمتری دارند، PNG اندازه فایل را 6.25 برابر کوچکتر از JPEG ارائه می دهد.
WebP در مقابل AVIF
WebP و AVIF هر دو فرمتهای فشرده‌سازی هستند که هدفشان ارائه اندازه‌های پایین‌تر در عین حفظ کیفیت است WebP .اندازه فایل 1.75 برابر کوچکتر از AVIF برای عکس ها و 1.27 برابر اندازه فایل کوچکتر برای تصاویر متنی ارائه می دهد .با این حال، AVIF در فشرده‌سازی با نقصان و در محدوده فشرده‌سازی نتیجه بهتری نسبت به WebP برای عکس‌ها و تصاویر متنی و تا حدود 10 درصد ارائه می‌دهد.
روش شناسی
این مقاله برای پر کردن خلا آگاهی و داده ها در مورد فشرده سازی تصویر، و نیزمقایسه فرمت های تصویری نوشته شده است. تمرکز آن بر حل مشکل انتخاب فرمت مناسب تر از منظر کوچکترین اندازه با بالاترین کیفیت است. ارائه تصاویر کوچک، بارگذاری سریع صفحه وب را تضمین می کند، در حالی که کیفیت های بالا خوانندگان را درگیر مشکلات بارگذاری و مشاهده می کند.
نرم افزارهای استفاده شده
تجزیه و تحلیل با استفاده از زبان برنامه نویسPython 3.10.8 انجام شد. من از بسته های زیر استفاده کردم:
Pillow (PIL Fork) 9.2.0 : مدیریت تصویر (باز کردن، ذخیره، فشرده سازی، تبدیل)
cikit-Image 0.19.3 : اندازه‌گیری شاخص تشابه ساختاری (SSIM)
Visual Studio Code1.72 : نوشتن و اجرای کد
تصاویر استفاده شده
از آنجایی که هدف این مقاله ارائه توصیه‌ها و داده‌های عملی در مورد فرمت بهتر برای یک مورد خاص و بیشتر با هدف استفاده آنلاین که اندازه های کوچک اهمیت دارد می باشد، من از تصاویری استفاده کردم که بیشتر در وب‌سایت‌ها استفاده می‌شوند: تصاویر استوک روزمره و اسکرین شات از متون یا صفحات.
علاوه بر 100 تصویر از سایت Unsplash، از 67 اسکرین شات سفارشی گرفته شده توسط ShareX 14.1، که با فرمت TIF ذخیره شده و 5836 عکس از CADB_Dataset که در مخزن GitHub به اشتراک گذاشته شده و در گوگل درایو میزبانی شده است، استفاده کردم.
علاقه مندان می توانند بخش تجزیه و تحلیل تصویر و منابع را که شامل روش کار و نکات فنی تهیه مقاله می باشد را از طریق لینک مطالعه کنند.
گذاشتن کامنت