مقایسه قالبهای تصویر: JPEG، PNG، WebP و AVIF
بیش از ۹۹٪ تصویرهای وب مدرن را چهار قالب پوشش میدهد؛ هرکدام حجم، شفافیت، انیمیشن و پشتیبانی را متفاوت معامله میکند. این راهنمای کوتاه به انتخاب مناسب کمک میکند.
مقایسه کنار هم
نمای کلی سریع؛ تفکیک کامل هر قالب در ادامه.
| ویژگی | JPEG ؟ | PNG ؟ | WebP ؟ | AVIF ؟ |
|---|---|---|---|---|
| فشردهسازی | با افت | بدون افت | با افت + بدون افت | با افت + بدون افت |
| شفافیت (آلفا) | خیر | بله (۸ بیت) | بله (۸ بیت) | بله (کامل) |
| انیمیشن | خیر | تنها APNG | بله | بله |
| بیشینه عمق بیت | ۸ بیت | ۱۶ بیت | ۸ بیت | ۱۰/۱۲ بیت |
| حجم معمولی نسبت به JPEG (عکس) | ۱۰۰٪ | ۳۰۰–۱۰۰۰٪ | ۶۵–۷۵٪ | ۴۰–۶۰٪ |
| پشتیبانی مرورگر | فراگیر | فراگیر | Chrome 32، Firefox 65، Safari 14 | Chrome 85، Firefox 93، Safari 16 |
| سرعت کدگذاری معمول | سریع | سریع | متوسط | کند |
JPEG — خط پایه همهجا
چگونه کار میکند
JPEG (از نام گروه استاندارد) در ۱۹۹۲ استاندارد شد و قدیمیترین قالب در این فهرست است. از تبدیل کسینوس گسسته ۸×۸ با افت و کدنویسی آنتروپی پیروی میکند. کیفیت با یک عدد ۱ تا ۱۰۰ کنترل میشود. انکودرهای مدرن مثل MozJPEG حدود ۱۰–۲۰٪ اضافه فشرده میکنند بدون تغییر بیتاستریم نسبت به دیکودر عادی.
بهترین برای
عکسهای با گرادیان و جزئیات — پرتره، منظره، تبلیغات محصول.
مزایا
- تقریباً در هر نمایشگر تصویر روی کره.
- تقریباً همهجا سختافزار رمزگشایی.
- اکوسیستم بهینهساز (MozJPEG، jpegli).
معایب
- بدون کانال آلفا — پسزمینه باید صاف شود.
- مصنوعات بلوک روی متن و لبه تیز.
- فقط ۸ بیت بر کانال.
PNG — بیخسارت و شفاف
چگونه کار میکند
PNG (Portable Network Graphics) جایگزین آزاد GIF شد و کاملاً بیخسارت است: فشردهسازی DEFLATE روی فیلتر ردیفبهردیف. بهینهسازها مثل oxipng ترکیب فیلتر/فشردهسازی را جستوجو میکنند تا بدون تغییر یک پیکسل کوچکتر شود.
بهترین برای
رابط، آیکن، نماگرفت، نمودار، خطوط و لوگو با رنگ تخت و جایی که شفافیت حقیقی لازم است.
مزایا
- بازگشت کامل پیکسلی.
- آلفا ۸ بیت و تا ۱۶ بیت روی کانال.
- پشتیبانی فراگیر.
معایب
- روی عکس حجیم — اغلب چند برابر JPEG/WebP/AVIF.
- انیمیشن اصالتاً نبود (APNG توسعه بعدی است).
WebP — قالب وب گوگل
چگونه کار میکند
WebP مبتنی بر VP8 و سپس حالت جداگانه بدون افت. هم با افت و هم بدون افت و آلفا و انیمیشن در یک بسته. در حالت با افت معمولاً ۲۵–۳۵٪ کوچکتر از MozJPEG. در حالت بدون افت حدود ۲۰–۳۰٪ کوچکتر از PNG.
بهترین برای
استفاده عمومی روی وب وقتی AVIF هنوز جایی ریسک دارد — عکس، اسپرایت شفاف، جایگزین GIF.
مزایا
- عکس، گرافیک، آلفا و انیمیشن در یک جا.
- کوچکتر از JPEG و PNG در بسیاری سناریوها.
- همه مرورگرهای مدرن از ۲۰۲۰.
معایب
- ۸ بیت — بدون HDR.
- بعضی دستگاههای ضعیف رمزگشایی کندتر از JPEG.
AVIF — پیشتاز فشردهسازی
چگونه کار میکند
AVIF پروفایل تصویر AV1 است. تا ۱۲ بیت، آلفا کامل، HDR و گستره رنگ وسیع. کدک مرجع کند است اما در عمل فشردهترین خروجی را برای عکسهای واقعی میدهد.
بهترین برای
عکس اصلی، گالری و جایی که پهنای باند مهمتر از CPU است؛ بهعنوان
لایه نخست در
<picture>.
مزایا
- معمولاً ۴۰–۶۰٪ کوچکتر از JPEG با همان کیفیت دیداری.
- آلفا، انیمیشن، HDR و عمق ۱۰/۱۲ بیت.
- رایگان، متنباز و بدون حق امتیاز.
معایب
- کدگذاری کند — بهتر در زمان ساخت ناهمزمان.
- Safari از نسخه ۱۶ (۲۰۲۲).
- روی گرافیک مصنوعی گاهی از WebP بدون افت یا PNG بهتر نیست.
کدام قالب را بگیرم؟
- عکس و بنر اصلی: AVIF اصلی، WebP و JPEG بهعنوان تکیه.
- رابط با شفافیت: PNG برای سازگاری بیشتر، WebP بدون افت کوچکتر.
- نماگرفت و خط/نمودار: PNG (یا WebP بدون افت) — افت روی لبه اذیتکننده است.
- جایگزین GIF: WebP یا AVIF — سریعتر و سبک.
- سازگار با قدیمیترین، امروز: عکس JPEG، شکل PNG — شاید بزرگ، صفر بدهی سازگاری.
لازم نیست یکی را نهایی انتخاب کنید — در
<picture> اول AVIF، بعد WebP و آخر
JPEG یا PNG بگذارید.
پرسشهای رایج
چگونه JPG را به WebP تبدیل کنم؟
PicBrewery را باز کنید و JPG را بریزید. WebP بههمراه سه قالب دیگر تولید میشود. خانه WebP را بزنید. هیچ فایلی آپلود نمیشود.
چگونه PNG را به AVIF تبدیل کنم؟
PNG را داخل PicBrewery بریزید. کدگذاری به چند قالب در Web Workers اجرا میشود. ستون AVIF را بزنید یا چند ردیف را در ZIP بگیرید.
آیا AVIF از WebP بهتر است؟
برای عکس معمولاً حجم کمتر. WebP در سرعت و گاه پشتیبانی قدیم برتری دارد. مکملاند.
Safari به WebP چه میکند؟
از نسخه ۱۴ (۲۰۲۰) WebP کامل است. نسخههای جدیدتر هر دو حالت با افت و بدون افت را رمزگشایی میکنند.
آیا PNG همیشه بدون افت است؟
بله. DEFLATE خسارت اضافه نمیکند؛ بهینهساز سایز فیلتر/فشردهسازی را تغییر میدهد.
آیا JPEG شفافیت دارد؟
خیر. باید PNG، WebP یا AVIF بگیرید. JPEG XL اخیراً آلفا دارد اما هنوز در همه مرورگرها پشتیبانی نمیشود.
AVIF چقدر نسبت به JPEG کوچکتر است؟
اغلب ۴۰–۶۰٪ روی عکس واقعی. روی گرافیک ساده تفاوت کمتر است.
آیا AVIF روی موبایل من دیده میشود؟
در Chrome، Firefox، Edge و Safari جدید بله. برای همه کاربران لایهٔ تکیه WebP یا JPEG اضافه کنید.
آیا PicBrewery واقعاً سمت مرورگر است؟
بله. فقط بایتهای استاتیک برنامه کدک از شبکه میآیند.
تبدیل بین قالبها
تبدیل خاصی میخواهید؟ جفت موردنظر را بزنید — هر صفحه راهنمای گامبهگام و پرسشهای همان تبدیل را دارد.
روی تصویرهای خودتان آزمایش کنید
چند JPG بریزید و WebP و AVIF را کنار هم ببینید. هیچ ارسال سمتسرور نیست.