JPG، PNG، WebP، یا AVIF؟

قبل از مقایسهٔ قالب‌ها، تقسیمی را بدانید که همهٔ آن‌ها را هدایت می‌کند. قالب‌های lossless هر پیکسل را دقیقاً ذخیره می‌کند و می‌توانند برای همیشه بازگشایی و دوباره ذخیره شوند بدون تخریب — PNG اصلی است. قالب‌های lossy اطلاعاتی را دور می‌اندازند که چشم احتمالاً متوجه نخواهد شد، جایگزینی کیفیت کمی برای فایل بسیار کوچک‌تر — JPG، WebP، و AVIF همهٔ این را می‌کنند. هیچ قالب یک "بهترین" وجود ندارد زیرا انتخاب درست بستگی به اینکه تصویر شما عکس، لوگو، یا تصویر صفحه‌سازی است، و برای اینکه چقدر اندازه را بر سازگاری ترجیح می‌دهید.

JPG (یا JPEG) بزرگ‌سالٔ کهنه است. برای عکس‌ها ساخته شد و فشرده‌سازی lossy استفاده می‌کند که برای شیب‌های صاف تصاویر واقعی‌جهانی تنظیم شده‌ٔ. شفافیت ندارد و فشرده‌سازی آن می‌تواند مصنوعات بلوکی در اطراف لبه‌های تیز و متن باقی بگذارد، به همین دلیل برای لوگو و تصاویر صفحه‌سازی غلط است. ابرقدرت آن پشتیبانی جهانی است: هر دستگاه، ویرایشگر، و وب‌سایت JPG را قبول می‌کند.

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

WebP، از Google، همه‌کار مدرن است. هردو حالتٔ lossy و lossless به اضافهٔ شفافیت و انیمیشن را ارائه می‌دهد، و در کیفیت مشابهی فایل‌های تقریباً 25-35% کوچک‌تر از JPG و اغلب بسیار کوچک‌تر از PNG تولید می‌کند. هر مرورگر فعلی آن را پشتیبانی می‌کند، که آن را انتخاب عملی برای سایتٔ سریع امروز می‌سازد.

AVIF جدیدترین از چهار است، مبتنی بر فناوری codec ویدیویٔ مدرن. معمولاً کوچک‌ترین فایل‌های همهٔ را به دست می‌آورد — اغلب WebP را توسط حاشیهٔ وسیع برای عکس‌ها شکست می‌دهد — و شفافیت، رنگٔ گسترده، و دامنهٔ دینامیکی بالا را پشتیبانی می‌کند. پشتیبانی اکنون گسترده است اما کاملاً جهانی نیست، بنابراین سایت‌ها معمولاً AVIF را با fallback WebP یا JPG برای آخرین چند کلینت قدیمی‌تر ارائه می‌دهند.

صفحهٔ وب خوب‌بهینه‌شدهٔ به ندرت یک قالب برای همه چیز استفاده می‌کند. عکس‌ها به‌عنوان WebP یا AVIF برای سرعت با fallback JPG بیرون می‌روند. لوگو‌ها، آیکن‌ها، و هر چیز با شفافیت به PNG باقی می‌مانند — یا بهتر، به SVG اگر آن‌ها هنرٔ برداری هستند — زیرا قالب lossy لبه‌های فالی آن‌ها را تار می‌کند. تصاویر صفحه‌سازی متن برای همان دلیل با PNG بهترین به نظر می‌رسد.

اگر مطمئن نیستید که تغییر ارزشمند است، یک تصویر نماینده تبدیل کنید و هردو اندازهٔ فایل و نحوهٔ نگاه آن در بزرگ‌نمایی کامل را مقایسه کنید. افت اندازه از JPG به WebP یا AVIF معمولاً تکان‌دهنده است بدون تلف شدنٔ کیفیتٔ مرئی، که دقیقاً برد است که صفحات را سریع‌تر بارگذاری کند. زمانی که سازگاری از بایت‌ها مهم‌تر است — پیوستٔ ایمیل، سیستمٔ قدیمی، چاپخانهٔ — به JPG یا PNG برگردید، دو قالب که در همه جای کار می‌کنند.