صيغ الصور: مقارنة بين 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 ملف تعريفي لـ Windows | image/x-wmf | MS-WMF-SPEC | تنسيق متجه لملف تعريف Windows |
| 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 |
المواصفات التقنية وتحليل الترميز (Codec)
قاعدة القرار السريع للصيغ
استخدم WebP أو AVIF للمواقع الحديثة (أصغر بنسبة 30% من JPEG مع دعم الشفافية). استخدم JPG للصور الفوتوغرافية حيث لا توجد مشكلة في عيوب الضغط الطفيفة غير الملحوظة. استخدم PNG لقطات الشاشة، ورسوميات واجهة المستخدم، والرسوم التوضيحية التي تتطلب نصاً حاداً وواضحاً للغاية. استخدم SVG للشعار والأيقونات التي تحتاج إلى تحجيم لا نهائي.
الصور النقطية مقابل المتجهة: لماذا لا تصبح صور SVG ضبابية أبداً
الصور النقطية (JPG و PNG و WebP) هي شبكات من بكسلات الألوان الثابتة - إذا قمت بالتكبير بشكل مفرط، تصبح ضبابية أو تظهر بكسلاتها. أما SVG فهي معادلة رياضية بحتة: فهي تخزن الخطوط والمنحنيات والألوان الرياضية، مما يسمح للأيقونات والرسوم التوضيحية بالظهور بحِدة فائقة على كل شيء من شاشات الهواتف إلى شاشات 8K وبأحجام ملفات صغيرة جداً.
خرافة: 'دقة DPI الأعلى تعني جودة أفضل لصورة الويب'
دقة DPI (النقاط في البوصة) هي مجرد تعليمة طباعة مادية وتتجاهلها متصفحات الويب تماماً. على الهواتف ومرئيات الكمبيوتر، يُحدد وضوح الصورة بالكامل بواسطة أبعاد البكسل (مثل 1920x1080) وكثافة العرض، وليس البيانات الوصفية المضمنة لـ DPI.
الشفافية الشفافة (ألفا): PNG مقابل WebP
لا توفر صيغة JPG التقليدية أي دعم للشفافية - حيث تتحول الخلفيات الشفافة إلى لون أبيض أو أسود مصمت. لقد كانت PNG رائدة في توفير شفافية ألفا نظيفة بسعة 8 بت، ولكن صيغة WebP تقدم الآن جودة شفافية مطابقة وبأحجام ملفات أصغر تصل إلى 40%.
صفر بايت يتم رفعه إلى خوادم خارجية. تمت كل عمليات المعالجة محلياً في صندوق الحماية (Sandbox) الخاص بمتصفحك.