JPG vs PNG vs WebP vs AVIF - ما هو تنسيق الصورة الذي يجب عليك استخدامه فعليًا؟

جبغ (جبيغ) هو التنسيق الذي يستخدمه والديك دون معرفة اسمه. تم إنشاؤه في عام 1992، وأصبح تنسيق الصور الافتراضي لمدة ثلاثة عقود. كل جهاز وكل متصفح وكل تطبيق على وجه الأرض يفتح ملفات JPG. يستخدم الضغط مع فقدان البيانات - مما يعني أنه يتخلص من بعض بيانات الصورة لتقليل حجم الملف. في إعدادات الجودة العالية (85-95%)، يكون الفرق غير مرئي لمعظم الناس. بجودة منخفضة، تحصل على تلك القطع الأثرية "الممتلئة" المميزة حول الحواف.

PNG هو التنسيق الذي يحبه المصممون. يستخدم الضغط بدون فقدان البيانات - لا يتم فقدان أي بيانات على الإطلاق. وهذا مهم لسببين: دعم الشفافية (لا يمكن لـ JPG عمل خلفيات شفافة) ووضوح النص. لقطات الشاشة، والشعارات، والرسومات التي تحتوي على نص، وأي شيء به خطوط حادة - تتعامل PNG مع هذه العناصر بشكل مثالي. المقايضة هي حجم الملف: يمكن بسهولة أن يكون حجم PNG أكبر بمقدار 5 إلى 10 مرات من تنسيق JPG لنفس الصورة.

ويب بي هل إجابة Google على السؤال "ماذا لو أنجبت JPG وPNG طفلًا؟" وهو يدعم كلاً من الضغط المنقوص وغير المنقوص، ويتعامل مع الشفافية، وينتج عادةً ملفات أصغر بنسبة 25-35% من ملفات JPG المكافئة. وصل دعم المتصفحات إلى أكثر من 95% في عام 2023، لذا فقد انتهى عذر التوافق القديم. إذا كنت تعرض صورًا على الويب، فإن WebP هو الخيار العملي الآن.

AVIF هو أحدث المنافس، استنادًا إلى برنامج ترميز الفيديو AV1. من حيث كفاءة الضغط الخالصة، فهو يتفوق على كل شيء آخر - أصغر بنسبة 50% تقريبًا من JPG وبنفس جودة الصورة. وهو يدعم الشفافية وHDR والتدرج اللوني الواسع. الجانب السلبي؟ التشفير بطيء (أبطأ بشكل ملحوظ من WebP)، ودعم المتصفح، على الرغم من كونه جيدًا، ليس عالميًا تمامًا حتى الآن. أضاف Safari الدعم الكامل مؤخرًا فقط.

بالنسبة للصور الفوتوغرافية - صور العطلات، وصور المنتجات، والصور الشخصية - فأنت تريد الضغط مع فقدان البيانات لأن هذه الصور تحتوي على تدرجات سلسة والكثير من تنوع الألوان. JPG يعمل بشكل مثالي إذا كان التوافق هو أولويتك. إذا كنت تضع هذه على موقع على شبكة الانترنت، ويب بي يخفض عرض النطاق الترددي الخاص بك بنسبة 30% مع عدم وجود فرق واضح. AVIF يحفظ المزيد ولكن يستغرق وقتًا أطول للتشفير.

مثال من العالم الحقيقي: صورة لمنظر طبيعي بحجم 1920 × 1080 قد يكون حجمها 450 كيلو بايت بتنسيق JPG بجودة 90، و320 كيلو بايت بتنسيق WebP، و200 كيلو بايت بتنسيق AVIF. نفس الجودة المرئية عبر الثلاثة جميعها - والفرق هو فقط في حجم الملف. بالنسبة لموقع ويب يقوم بتحميل 20 صورة، فهذا هو الفرق بين 9 ميجابايت و4 ميجابايت من بيانات الصورة. سوف يلاحظ المستخدمون لديك على اتصالات 4G.

بالنسبة للصور ذات الحواف الحادة أو النص أو الألوان المسطحة أو الشفافية، تتغير اللعبة. PNG لا يزال هو الخيار الآمن - جودة مضمونة دون فقدان، ودعم عالمي، وشفافية. WebP بلا فقدان يمنحك نفس الجودة بحجم ملف أصغر بنسبة 26% تقريبًا. يعمل AVIF Lossless أيضًا ولكنه يوفر توفيرًا أقل من AVIF Lossless.

لا تستخدم أبدًا JPG لالتقاط لقطات شاشة تحتوي على نص أو شعارات أو نماذج بالحجم الطبيعي لواجهة المستخدم. يؤدي ضغط JPG المفقود إلى إنشاء تأثيرات مرئية حول التحولات اللونية الحادة - يبدو النص ضبابيًا، والخطوط المستقيمة متموجة. هذه ليست مشكلة تحديد الجودة؛ إنه قيد أساسي لكيفية عمل ضغط JPG.

إذا كنت من مستخدمي iPhone، فربما تتساءل عن المكان المناسب لـ HEIC. HEIC هو تنسيق الصور الافتراضي لـ Apple، وهو أصغر بنسبة 50% تقريبًا من JPG بجودة مماثلة. ولكن هنا تكمن المشكلة: متصفحات الويب بخلاف Safari لا تدعمها إلى حد كبير. يحتاج Windows إلى مكون إضافي لمشاهدته. معظم النماذج عبر الإنترنت ترفض ذلك. يعد HEIC رائعًا لتخزين الصور على جهاز iPhone الخاص بك، ولكن في اللحظة التي تحتاج فيها إلى مشاركتها أو تحميلها، ستكون كذلك تحويله إلى JPG أو ويب بي.

بالنسبة لمواقع الويب: قم بخدمة AVIF مع احتياطي WebP وJPG كشبكة الأمان النهائية. تتعامل معظم أنظمة إدارة المحتوى وشبكات CDN الحديثة مع هذا الأمر تلقائيًا. بالنسبة للمستندات والنماذج: التزم باستخدام JPG — فهو ما يتوقعه كل نموذج تحميل. لأعمال التصميم: استخدم PNG أثناء عملية التحرير، وقم بالتصدير بتنسيق WebP أو AVIF للتسليم. للأرشفة: احتفظ بالتنسيق الأصلي (عادةً JPG أو RAW من الكاميرا). لا تقم بالتحويل بين التنسيقات المفقودة بشكل متكرر - فكل تحويل يؤدي إلى انخفاض الجودة قليلاً.

ستستمر حروب التنسيق. JPEG XL ينتظر في الأجنحة، ومن المحتمل أن يكون هناك شيء جديد في العام المقبل. ولكن في الوقت الحالي، الإجابة العملية لمعظم الأشخاص هي: JPG للتوافق، وWebP لاستخدام الويب الحديث، وPNG عندما تحتاج إلى الشفافية أو الجودة غير المفقودة. إذا كنت بحاجة إلى التبديل بين أي من هذه، أ محول الصور يتم إنجازه في ثوانٍ دون تثبيت أي شيء.

الأرقام تحكي القصة أفضل من الكلمات. التقط صورة نموذجية بدقة 1920 × 1080 واحفظها بكل تنسيق بجودة مرئية قابلة للمقارنة. JPG بجودة 85: ~250 كيلو بايت. PNG (بدون فقدان البيانات): ~2.5 ميجابايت. WebP بجودة مكافئة: ~180 كيلو بايت. AVIF بجودة مكافئة: ~130 كيلو بايت. وهذا يعني أن حجم AVIF يبلغ تقريبًا نصف حجم JPG مع نتائج متطابقة بصريًا، وأصغر بحوالي 30% من WebP.

بالنسبة للرسم أو لقطة الشاشة التي تحتوي على نص وألوان مسطحة، تتغير الأرقام. PNG: ~150 كيلو بايت. JPG بجودة 90: ~200 كيلو بايت (مع وجود عناصر مرئية حول النص). WebP بدون خسارة: ~100 كيلو بايت. AVIF بدون خسارة: ~90 كيلو بايت. هذا هو السبب وراء تفضيل PNG للرسومات - ينتج JPG في الواقع ملفات أكبر وجودة أقل لهذا النوع من المحتوى.

تعمل JPG وPNG في كل مكان — في كل متصفح، وكل تطبيق، وكل جهاز، وذلك منذ عقود مضت. يتمتع WebP الآن بدعم شبه عالمي للمتصفحات: Chrome وFirefox وSafari (منذ 2022) وEdge وجميع متصفحات الأجهزة المحمولة تدعمه. العائق الوحيد هو بعض أنظمة المؤسسات القديمة جدًا وعملاء البريد الإلكتروني.

يتزايد دعم AVIF ولكنه ليس عالميًا بعد. يدعمه Chrome وFirefox وOpera بشكل كامل. أضاف Safari دعم AVIF في عام 2023، لكن بعض أجهزة iOS الأقدم لا تزال لا تتعامل معه. إذا كنت تقوم بإنشاء موقع ويب، فإن النهج الآمن هو خدمة AVIF مع WebP الاحتياطي وJPG كشبكة الأمان النهائية باستخدام HTML <picture> عنصر.

يعد التحويل من فقدان البيانات إلى فقدانها (PNG → JPG، PNG → WebP) آمنًا تمامًا - فأنت فقط تختار مستوى الضغط. يعمل التحويل من فقدان إلى فقدان (JPG → WebP) بشكل جيد مع تحويل واحد ولكنه يؤدي إلى فقدان طفيف في الجودة. لا تقم مطلقًا بالتحويل ذهابًا وإيابًا بين التنسيقات المفقودة بشكل متكرر - فكل تحويل يؤدي إلى انخفاض الجودة بشكل أكبر، مثل نسخ نسخة ضوئية.

إذا كنت بحاجة إلى تحويل الصور بين الصيغ، تحويل PNG إلى JPG, تحويل HEIC إلى JPG، أو استخدام لدينا الأخرى أدوات التحويل - كل ذلك مجاني وفوري في متصفحك.

استخدم JPG عندما: مشاركة الصور عبر البريد الإلكتروني، أو تحميلها على وسائل التواصل الاجتماعي، أو عندما يكون التوافق العالمي أكثر أهمية من حجم الملف. استخدم PNG عندما: تحتوي الصورة على شفافية، أو تحتوي على نص أو حواف حادة، أو تحتاج إلى جودة بدون فقدان للتحرير. استخدم WebP عندما: تحسين الصور لموقعك على الويب - إنه أفضل توازن بين الجودة وحجم الملف ودعم المتصفح. استخدم AVIF عندما: أنت بحاجة إلى أقصى قدر من الضغط ويمكن أن توفر بدائل للمتصفحات الأقدم.