مقایسه فرمتهای تصویر: WebP، PNG، JPG و SVG
انتخاب فرمت تصویر اشتباه میتواند باعث افزایش زمان بارگذاری صفحه یا تار شدن گرافیک شما شود. در اینجا نحوه مقایسه فرمتهای وب مدرن از نظر فشردهسازی، شفافیت و وضوح آورده شده است.
فایلهای شما بهطور کامل در مرورگر وب شما و با استفاده از HTML5 Canvas و WebAssembly پردازش میشوند. حتی یک بایت داده نیز از دستگاه شما خارج نمیشود.
از صفهای آپلود و دانلود صرفنظر کنید. تبدیلها بهصورت محلی و با سرعت کامل سختافزار سیستم و بدون محدودیتهای سرور انجام میشوند.
مطابق با مشخصات رسمی ISO، W3C و IETF برای تضمین سازگاری خروجی در سیستمعاملهای مدرن.
مقایسه فرمتها و مشخصات فنی
| فرمت خروجی | نوع MIME | مشخصات | نوع |
|---|---|---|---|
| PNG تصویر | image/png | W3C-PNG | گرافیک شبکهای قابل حمل |
| JPG تصویر JPEG | image/jpeg | ITU-T-T81-JPEG | فرمت استاندارد گروه کارشناسان عکاسی |
| WebP تصویر | image/webp | RFC-6386-VP8 | فرمت تصویر مدرن گوگل WebP |
| SVG وکتور | image/svg+xml | W3C-SVG | گرافیک برداری مقیاسپذیر |
| HEIC عکس | image/heic | ISO-IEC-23008-12-HEIF | کانتینر تصویر با کارایی بالا |
| AVIF تصویر | image/avif | AOMEDIA-AV1-AVIF | فرمت فایل تصویر AV1 |
| PSD سند فتوشاپ | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | سند ادوبی فتوشاپ |
| PSB سند بزرگ فتوشاپ | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | سند فرمت بزرگ ادوبی فتوشاپ |
| WMF متادیتا ویندوز | image/x-wmf | MS-WMF-SPEC | فرمت برداری متافایل ویندوز |
| EMF متافایل پیشرفته | image/x-emf | MS-EMF-SPEC | فرمت برداری متافایل پیشرفته |
| JFIF تصویر | image/jpeg | ITU-T-T81-JPEG | فرمت تبادل فایل JPEG |
| TGA Truevision | image/x-tga | TGA-SPEC | تصویر رستر پیشرفته Truevision |
| PCX ZSoft | image/x-pcx | PCX-SPEC | بیتمپ ZSoft Paintbrush PCX |
مشخصات فنی و تحلیل کدک
قانون تصمیمگیری سریع برای فرمت
از WebP یا AVIF برای وبسایتهای مدرن استفاده کنید (۳۰٪ کوچکتر از JPEG همراه با پشتیبانی از شفافیت). از JPG برای عکسهایی استفاده کنید که در آنها آرتیفکتهای فشردهسازی بسیار کوچک و نامحسوس اهمیتی ندارند. از PNG برای اسکرینشاتها، گرافیکهای رابط کاربری و تصویرسازیهایی که به متن کاملاً واضح و پیکسلی نیاز دارند، استفاده کنید. از SVG برای لوگوها و آیکونهایی استفاده کنید که به مقیاسپذیری بینهایت نیاز دارند.
رستر در برابر وکتور: چرا فایلهای SVG هرگز تار نمیشوند
تصاویر رستر (JPG، PNG، WebP) شبکههایی از پیکسلهای رنگی ثابت هستند - اگر بیش از حد زوم کنید، تار یا پیکسلی میشوند. SVG ریاضی محض است: خطوط، منحنیها و رنگهای ریاضی را ذخیره میکند و به آیکونها و تصویرسازیها اجازه میدهد روی هر چیزی از صفحه نمایش موبایل گرفته تا نمایشگرهای 8K با اندازههای فایل بسیار کوچک، با بیشترین وضوح رندر شوند.
افسانه: «DPI بالاتر به معنای کیفیت بهتر تصویر در وب است»
شاخص DPI (نقطه در اینچ) صرفاً یک دستورالعمل چاپ فیزیکی است و به طور کامل توسط مرورگرهای وب نادیده گرفته میشود. روی گوشیها و مانیتورهای کامپیوتر، وضوح تصویر کاملاً توسط ابعاد پیکسلی (به عنوان مثال ۱۹۲۰ در ۱۰۸۰) و تراکم نمایشگر تعیین میشود، نه فرادادههای DPI تعبیهشده.
شفافیت آلفا: PNG در برابر WebP
فرمت سنتی JPG هیچگونه پشتیبانی از شفافیت ندارد - پسزمینههای شفاف به رنگ سفید یا سیاه خالص تبدیل میشوند. PNG شفافیت آلفای ۸ بیتی تمیز را پایهگذاری کرد، اما اکنون WebP کیفیت شفاف یکسانی را با اندازههای فایل تا ۴۰٪ کوچکتر ارائه میدهد.
صفر بایت به سرورهای خارجی آپلود میشود. تمام پردازشها به صورت محلی در سندباکس مرورگر شما انجام شد.