WebP، PNG یا JPG: انتخاب فرمت درست برای تصویر
JPG برای عکس‌هایی است که باید همه‌جا باز شوند، PNG برای پیکسل‌های دقیق، و WebP هر دو کار را در وب با فایلهای کم‌حجم‌تر انجام میدهد.
انتخاب فرمت تصویر به سه سؤال برمی‌گردد: آیا انکودر اجازه دارد جزئیات را دور بریزد؟ آیا تصویر به بخش‌های شفاف نیاز دارد؟ و فایل کجا باز خواهد شد؟ JPG، PNG و WebP هرکدام جواب متفاوتی به این سؤال‌ها می‌دهند. WebP معمولاً بهترین انتخاب برای تصاویر یک وبسایت است، اما PNG و JPG هنوز در بعضی جاها برنده‌اند. اگر بدانید کجا، از لوگوهای مات، کادر سفید دور تصاویر دوربری‌شده و فرمهای آپلودی که فایلتان را قبول نمی‌کنند در امان می‌مانید.
مقایسه فرمت‌ها کنار هم
| JPG (JPEG) | PNG | WebP | |
|---|---|---|---|
| فشردهسازی | با اتلاف | بدون اتلاف | با اتلاف یا بدون اتلاف |
| شفافیت | ندارد | دارد، با کانال آلفای کامل | دارد، در هر دو حالت |
| انیمیشن | ندارد | از طریق APNG | دارد |
| عمق رنگ | در عمل ۸ بیت برای هر کانال | تا ۱۶ بیت برای هر کانال | ۸ بیت برای هر کانال |
| حداکثر ابعاد | ۶۵٬۵۳۵ × ۶۵٬۵۳۵ پیکسل | بیش از ۲ میلیارد پیکسل در هر ضلع | ۱۶٬۳۸۳ × ۱۶٬۳۸۳ پیکسل |
| کجا باز می‌شود | تقریباً همه‌جا | تقریباً همه‌جا | همه مرورگرهای اصلی فعلی؛ نه هر برنامه یا فرم آپلودی |
| بهترین کاربرد | عکس‌هایی که باید همه‌جا کار کنند | اسکرین‌شات، رابط کاربری، گرافیک با لبه‌های تیز | بیشتر تصاویر یک وبسایت |
با اتلاف و بدون اتلاف: تفاوت واقعی
فشردهسازی با اتلاف (lossy) جزئیاتی را که احتمالاً چشم متوجهشان نمی‌شود دور می‌ریزد و تنظیم کیفیت تعیین می‌کند چه مقدار. این روش برای عکس‌ها مناسب است، چون نویز و گرادیان‌ها تغییرات کوچک را پنهان می‌کنند. اما به متن، خطوط نازک و سطوح رنگ یکنواخت آسیب می‌زند؛ لبه‌ها نرم میشوند و لکه‌های کم‌رنگ ظاهر میشوند. هر بار ذخیره دوباره کمی بیشتر از کیفیت کم می‌کند، پس همیشه از فایل اصلی تبدیل کنید، نه از یک JPG قبلی.
فشردهسازی بدون اتلاف (lossless) تک‌تک پیکسل‌ها را دقیقاً حفظ می‌کند. برای اسکرین‌شات، نمودار، پیکسل‌آرت و هر چیزی که دوباره ویرایشش می‌کنید انتخاب درستی است. اما برای یک عکس، فایل بسیار بزرگ‌تری می‌سازد، چون ذخیره دقیق نویز دوربین پرهزینه است.
JPG فقط با اتلاف است و PNG فقط بدون اتلاف. WebP هر دو حالت را در یک فرمت دارد و مزیت عملی اصلی‌اش همین است: یک عکس و یک اسکرین‌شات می‌توانند هر دو WebP باشند و هرکدام به روش مناسب خودش فشرده شود.
WebP چقدر کم‌حجم‌تر است؟
گوگل که این فرمت را توسعه داده، این مقایسه را منتشر کرده است: تصاویر WebP بدون اتلاف ۲۶ درصد کوچکتر از PNG هستند و تصاویر WebP با اتلاف در کیفیت SSIM معادل ۲۵ تا ۳۴ درصد کوچکتر از JPEGهای مشابه. این‌ها میانگین‌هایی روی تصاویر آزمایشی گوگل‌اند، نه قولی برای تک‌تک فایل‌ها.
نتیجه‌ای که شما می‌گیرید ممکن است بهتر یا بدتر باشد. پرسش‌های متداول WebP گوگل اشاره می‌کند که فایل WebP ممکن است از فایل مبدأ بزرگتر شود؛ معمولاً وقتی یک PNG با تعداد کمی رنگ به WebP با اتلاف تبدیل می‌شود، یا وقتی تصویری که از قبل با اتلاف فشرده شده به شکل WebP بدون اتلاف ذخیره می‌شود. WebP با اتلاف همچنین همیشه از زیرنمونه‌برداری رنگ 4:2:0 استفاده می‌کند، یعنی رنگ را با نصف وضوح افقی و عمودی روشنایی ذخیره می‌کند؛ به همین دلیل لبه‌های قرمز یا آبی اشباع در گرافیک‌ها ممکن است کمی پخش به نظر برسند، در حالی که PNG تیز می‌ماند. روش مطمئن این است که تبدیل کنید و مقایسه کنید: مبدل تصویر حجم اصلی و حجم جدید هر فایل را نشان میدهد، تا پیش از نگه داشتن فایل، صرفه‌جویی واقعی را ببینید.
شفافیت و انیمیشن
JPG کانال آلفا ندارد. وقتی یک لوگوی شفاف را به JPG تبدیل می‌کنید، بخش شفاف با یک رنگ یکنواخت پر می‌شود؛ مبدل این سایت از رنگ سفید استفاده می‌کند. PNG کانال آلفای کامل را بدون اتلاف ذخیره می‌کند و همین باعث می‌شود عکس‌های شفاف، مثل عکس‌های دوربری‌شده محصول، حجیم شوند. WebP در حالت با اتلاف هم از آلفا پشتیبانی می‌کند، پس یک عکس دوربری‌شده میتواند لبه‌های نرمش را با کسری از حجم PNG حفظ کند. بیشترین صرفه‌جویی تبدیل PNG به WebP دقیقاً در همین حالت است.
در مورد انیمیشن، JPG هیچ پشتیبانی‌ای ندارد، PNG افزونه APNG را دارد و WebP انیمیشن را به‌صورت داخلی پشتیبانی می‌کند. به گفته گوگل، فایلهای WebP متحرک می‌توانند از همان انیمیشن در قالب GIF یا APNG کوچکتر باشند. برای کلیپ‌های طولانی یا پیچیده، یک ویدیوی بی‌صدای MP4 یا WebM معمولاً از هر فرمت تصویری سبک‌تر است.
از کدام فرمت استفاده کنیم
| تصویر | فرمت مناسب | دلیل |
|---|---|---|
| عکس‌های وبسایت | WebP با اتلاف | کم‌حجم‌ترین گزینه‌ای که پشتیبانی گسترده دارد |
| عکس برای ایمیل، چاپ یا فرمهای آپلود | JPG | در هر برنامه‌ای باز می‌شود و هر فرمی آن را می‌پذیرد |
| اسکرین‌شات‌های متنی و طرح‌های رابط کاربری | PNG یا WebP بدون اتلاف | متن تیز می‌ماند و چیزی پخش نمی‌شود |
| لوگو و آیکون | اگر فایل وکتور دارید SVG، وگرنه PNG یا WebP | لبه‌های تیز و شفافیت حفظ می‌شود |
| عکس محصول با پس‌زمینه شفاف | WebP با اتلاف همراه با آلفا | لبه‌های نرم با کسری از حجم PNG |
| انیمیشن کوتاه | WebP متحرک، یا MP4/WebM برای کلیپ‌های طولانی‌تر | بسیار سبک‌تر از GIF |
| نسخههای اصلی که دوباره ویرایش میشوند | PNG، یا فایل اصلی دوربین | بدون افت کیفیت در ذخیره‌های پیاپی |
انتقال تصاویر موجود سریع است: تبدیل JPG به WebP برای عکس‌ها و تبدیل PNG به WebP برای گرافیک‌ها و تصاویر دوربری‌شده. وقتی یک فایل WebP در نرم‌افزارهای قدیمی باز نمی‌شود، تبدیل WebP به JPG مشکل را حل می‌کند، و تبدیل PNG به JPG حجم عکس‌هایی را که اشتباهی به شکل PNG ذخیره شده‌اند کم می‌کند.
پشتیبانی مرورگرها و جایگزین با picture
نسخههای فعلی Chrome، Edge، Firefox و Safari همگی WebP را نمایش می‌دهند، پس برای بیشتر سایت‌ها یک فایل WebP در یک <img> معمولی کافی است. اگر باید از مرورگرهای قدیمی هم پشتیبانی کنید، یا می‌خواهید اول یک فرمت جدیدتر را عرضه کنید، از عنصر <picture> استفاده کنید. مرورگر اولین <source> را که نوعش را پشتیبانی می‌کند برمی‌دارد و در غیر این صورت به <img> برمی‌گردد؛ همان تگی که متن alt و ابعاد تصویر را هم در خود دارد:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Harbour at sunset" width="1600" height="900">
</picture>سرور یا CDN هم میتواند بدون نشانه‌گذاری اضافه همین کار را انجام دهد: هدر Accept درخواست تصویر را بررسی می‌کند و اگر WebP در آن آمده بود، WebP برمی‌گرداند. اگر این روش را به کار می‌برید، Vary: Accept را هم بفرستید تا کش‌ها نسخه‌ها را از هم جدا نگه دارند.
جایگاه AVIF
AVIF بر پایه کدک ویدیویی AV1 ساخته شده و نسخههای فعلی Chrome، Edge، Firefox و Safari از آن پشتیبانی می‌کنند. اغلب در کیفیت بصری مشابه، فایلهای کوچکتری از WebP می‌سازد، اما انکود کردنش کندتر است و ابزارها، ویرایشگرها و فرمهای آپلود کمتری آن را میپذیرند. یک چیدمان رایج این است: اول AVIF، بعد WebP و در آخر JPG، مثل نمونه بالا. مبدل این سایت میتواند فایلهای AVIF را بخواند، به شرطی که مرورگرتان بتواند آنها را رمزگشایی کند، اما خروجی را به شکل WebP، PNG، JPG و ICO می‌نویسد، نه AVIF.
تبدیل در مرورگر: یک نکته درباره Safari
مبدلهای مبتنی بر مرورگر تصویر را روی یک canvas می‌کشند و از مرورگر می‌خواهند آن را انکود کند. Chrome، Edge و Firefox می‌توانند به این روش WebP بسازند. Safari فایل WebP را نمایش میدهد اما نمیتواند از روی canvas آن را انکود کند و بی‌سروصدا به‌جایش یک PNG برمی‌گرداند؛ به همین دلیل مبدل این سایت بهجای ذخیره یک PNG با پسوند .webp، با نمایش یک پیام متوقف می‌شود. روی مک، تبدیل به WebP را در Chrome، Edge یا Firefox انجام دهید. روی آیفون یا آیپد، مرورگرهای دیگر هم معمولاً از موتور Safari استفاده می‌کنند، پس یا روی کامپیوتر تبدیل کنید یا PNG یا JPG را انتخاب کنید.
دو نکته دیگر هم دانستنش مفید است. در Chrome، کیفیت ۱۰۰ یک WebP بدون اتلاف می‌سازد و مقدارهای پایین‌تر WebP با اتلاف؛ ما این را با بررسی فایلهای انکودشده تأیید کردیم. همچنین انکود کردن از روی canvas فراداده‌ها را کپی نمی‌کند، پس داده‌های EXIF مثل مدل دوربین و موقعیت GPS در فایل تبدیل‌شده نمی‌آیند.