JPEG vs PNG vs BMP vs GIF vs SVG

في نمط xkcd من lbrandy.com :

يجب أن تكون على دراية ببعض العوامل الرئيسية ...

أولاً ، هناك نوعان من الضغط: ضياع و خسارة .

• ضياع يعني أن الصورة أصغر ، لكن دون الإضرار بالجودة.
• يعني Lossy أن الصورة أصغر (حتى) ، ولكن على حساب الجودة. إذا قمت بحفظ صورة بتنسيق Lossy مرارًا وتكرارًا ، فستصبح جودة الصورة أسوأ وأسوأ بشكل تدريجي.

هناك أيضًا أعماق ألوان مختلفة (لوحات): ألوان مفهرسة و لون مباشر .

• تعني "المفهرسة" أنه يمكن للصورة تخزين عدد محدود فقط من الألوان (عادة 256) ، يتحكم فيها المؤلف ، في شيء يسمى خريطة الألوان
• Direct يعني أنه يمكنك تخزين العديد من آلاف من الألوان التي لم يتم اختيارها مباشرة من قبل المؤلف

BMP - ضياع/مفهرسة ومباشرة

هذا تنسيق قديم. إنه بلا فقد (لا توجد بيانات عن الصور مفقودة عند الحفظ) ولكن هناك أيضًا القليل من الضغط على الإطلاق ، مما يعني أن الحفظ كـ BMP ينتج عنه أحجام ملفات كبيرة جدًا. يمكن أن تحتوي على لوحات مفهرسة ومباشرة ، لكن هذا عزاء صغير. أحجام الملفات كبيرة بشكل لا لزوم له بحيث لا أحد يستخدم هذا التنسيق حقًا.

جيد ل: لا شيء حقا. لا يوجد أي شيء BMP يتفوق فيه ، أو لا يتم تنفيذه بشكل أفضل من خلال تنسيقات أخرى.

GIF - ضياع/مفهرسة فقط

يستخدم GIF ضغطًا بدون فقد ، مما يعني أنه يمكنك حفظ الصورة مرارًا وتكرارًا ولا تفقد أي بيانات أبدًا. أحجام الملفات أصغر بكثير من BMP ، لأنه يتم استخدام ضغط جيد بالفعل ، ولكن يمكن تخزين لوحة مفهرسة فقط. هذا يعني أنه بالنسبة لمعظم حالات الاستخدام ، لا يمكن أن يكون هناك سوى 256 لونًا مختلفًا كحد أقصى في الملف. هذا يبدو وكأنه كمية صغيرة جدا ، وهذا هو.

يمكن أيضًا أن تكون صور GIF متحركة وذات شفافية.

مناسب لـ: الشعارات والرسومات الخطية والصور البسيطة الأخرى التي يجب أن تكون صغيرة. تستخدم فقط حقا للمواقع.

JPEG - ضياع/مباشر

تم تصميم صور JPEG لجعل صور فوتوغرافية مفصلة أصغر ما يمكن عن طريق إزالة المعلومات التي لن تلاحظها العين البشرية. وكنتيجة لذلك ، يكون تنسيق "الفقد" ، وسيؤدي حفظ نفس الملف مرارًا وتكرارًا إلى فقدان المزيد من البيانات بمرور الوقت. يحتوي على لوحة من آلاف الألوان وهو رائع بالنسبة للصور الفوتوغرافية ، لكن الضغط الفقد يعني أنه سيئ بالنسبة للشعارات والرسومات الخطية: لن تبدو غامضة فحسب ، ولكن سيكون لهذه الصور أيضًا حجم ملف أكبر مقارنةً بـ GIF!

جيد ل: الصور. أيضا ، التدرجات.

PNG-8 - بلا خسائر/مفهرسة

PNG هو تنسيق أحدث ، و PNG-8 (النسخة المفهرسة من PNG) هي بالفعل بديل جيد لملفات GIF. ومع ذلك ، للأسف ، لها بعض العيوب: أولاً ، لا يمكن أن تدعم الرسوم المتحركة مثل GIF ، (يمكن أن يكون جيدًا ، لكن يبدو أن فايرفوكس فقط يدعمها ، على عكس الرسوم المتحركة GIF التي يدعمها كل متصفح). ثانياً ، لديه بعض مشكلات الدعم في المتصفحات الأقدم مثل IE6. ثالثًا ، البرامج الهامة مثل Photoshop لها تنفيذ ضعيف جدًا للتنسيق. (اللعنة عليك ، Adobe!) PNG-8 يمكن فقط تخزين 256 لونًا ، مثل صور GIF.

مناسب لـ: إن الشيء الرئيسي الذي يجعل PNG-8 أفضل من صور GIF هو دعم Alpha Transparency.

ملاحظة مهمة: لا يدعم Photoshop شفافية Alpha لملفات PNG-8. (اللعنة عليك ، Photoshop!) هناك طرق لتحويل ملفات Photoshop PNG-24 إلى ملفات PNG-8 مع الحفاظ على شفافيتها. إحدى الطرق هي PNGQuant ، والطريقة الأخرى هي حفظ ملفاتك باستخدام الألعاب النارية .

PNG-24 - ضياع/مباشر

PNG-24 هو تنسيق رائع يجمع بين الترميز غير المفقود والألوان المباشرة (الآلاف من الألوان ، تمامًا مثل JPEG). يشبه إلى حد كبير BMP في هذا الصدد ، فيما عدا أن PNG يضغط الصور بالفعل ، لذلك ينتج عنه ملفات أصغر بكثير. لسوء الحظ ، ستظل ملفات PNG-24 أكبر بكثير من ملفات JPEG و GIF و PNG-8 ، لذلك لا تزال بحاجة إلى التفكير فيما إذا كنت تريد حقًا استخدام ملف.

على الرغم من أن PNG-24s تسمح لآلاف الألوان مع وجود ضغط ، إلا أنها لا تهدف إلى استبدال صور JPEG. من المرجح أن تكون الصورة المحفوظة بتنسيق PNG-24 أكبر بمقدار 5 مرات على الأقل من صورة JPEG مكافئة ، مع تحسن طفيف للغاية في الجودة المرئية. (بالطبع ، قد تكون هذه نتيجة مرغوبة إذا لم تكن مهتمًا بشأن حجم الملفات ، وترغب في الحصول على أفضل جودة ممكنة للصورة.)

تمامًا مثل PNG-8 ، يدعم PNG-24 شفافية ألفا أيضًا.

SVG - ضياع/متجه

نوع الملف الذي يزداد شعبيته حاليًا هو SVG ، والذي يختلف عن كل ما سبق في أنه تنسيق ملف ناقل (كل ما سبق (جميعها النقطية ). هذا يعني أنه يتكون بالفعل من خطوط ومنحنيات بدلاً من البكسل. عند التكبير على صورة متجه ، لا تزال ترى منحنى أو خط. عندما تقوم بتكبير الصورة النقطية ، سترى البكسل.

فمثلا:

هذا يعني أن SVG مثالي للشعارات والرموز التي ترغب في الاحتفاظ بالوحدة على شاشات Retina أو بأحجام مختلفة.

بالإضافة إلى ذلك ، تتم كتابة ملفات SVG باستخدام XML ، وبالتالي يمكن فتحها وتحريرها في محرر نصي ، بحيث يمكن معالجتها سريعًا ، إذا كنت ترغب في ذلك. على سبيل المثال ، يمكنك استخدام جافا سكريبت لتغيير لون رمز SVG على موقع ويب يشبه إلى حد كبير بعض النصوص (أي لا حاجة لصورة ثانية).

أتمنى أن يساعد ذلك!

تتضمن الإجابات الحالية القليل من البيانات الفنية ، لذلك سأقوم بتضمينها هنا.

• JPEG: ما يصل إلى 24 بت لون (ربما أكثر؟) ، ضغط متغير (عادةً مرتفع) ، ضياع ، لا يوجد دعم alpha
• PNG: ما يصل إلى 48 بت من الألوان ، ضغط معتدل ، ضياع ، دعم ألفا
• BMP: ما يصل إلى 24 بت من الألوان ، وضغط قليل جدًا ، وفقدان دعم ألفا
• GIF: ما يصل إلى 8 بت من الألوان ، ضغط قليل ، ضياع ، دعم الشفافية ، دعم الرسوم المتحركة

عمق اللون

• لون 8 بت = 256 لون
• لون 24 بت = 16،777،216 لون
• لون 48 بت = 281،474،976،710،656 لون

تعمل معظم شاشات الكمبيوتر على عمق ألوان 24 بت. يمكن أن تميز العين البشرية عن ذلك العديد من الألوان. في الغالب يكون عمق الألوان الإضافي قادرًا على الاحتفاظ بالمعلومات من مستشعر بحيث يكون لمعالجة الصورة مزيدًا من البيانات للعمل بها. محاولة تمثيل صورة بلون 8 بت ستؤدي إلى التحبب.

ضغط

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

ألفا/الشفافية

تشير ألفا إلى الشفافية ، ولكنها تشير إلى وجود أكثر من مستوى واحد من الشفافية. تتمتع GIF بالقدرة على تحديد وحدات البكسل الشفافة ، ولكنها إما شفافة أو 100٪ شفافة ، ويتم استخدام "الشفافة" كأحد الألوان الـ 256. تمتلك PNG و BMP القدرة على تمييز كل بكسل على أنه غير شفاف أو شفاف أو جزئي جزئيًا ، مثل قطعة من الزجاج الملون. الأكثر شيوعًا ، هناك 256 مستوى من الشفافية ، على الرغم من أن PNG يمكن أن يحتوي بالفعل على 65.536 مستوى. JPEG لا يوجد لديه دعم للشفافية.

الرسوم المتحركة

بشكل فعال ، من هذه التنسيقات ، فقط GIF لديه أي دعم للرسوم المتحركة. هناك مواصفات للرسوم المتحركة مع PNG (MNG ، APNG) و JPEG (MJPEG) ، لكنها غير مدعومة على نطاق واسع. (تعمل APNG في الإصدارات الأخيرة من Firefox و Opera.) في الممارسة العملية ، يتم تطبيق معظم الرسوم المتحركة التي تراها على صفحات الويب في Flash.

• استخدم GIF إذا كانت الصورة قليلة الألوان (مثل الرموز). يمكن أيضًا استخدامه للصور المتحركة (مثل لافتات الإعلانات).
• استخدم JPG إذا كانت الصورة بها العديد من الألوان (مثل الصور). JPEG هو نفس الشيء.
• استخدم BMP إذا كنت تريد حفظ الصورة دون ضغط. حجم أكبر بكثير
• استخدم PNG إذا كنت تريد نشر الصورة على الويب وأن تكون محدّثًا وفقًا للمعايير الحديثة. المميزات: مناسب كبديل حديث لكل من GIF و JPG ، وهو معيار مفتوح ، ويسمح بالشفافية. السلبيات: غير مدعوم من قبل البرامج القديمة ، ويمكن أن يكون حجم الملف أكبر من GIF أو JPG قابلة للمقارنة.

BMP:

• الشكل القديم. لا فقدان البيانات.
• غير مضغوط - يخزن قيمة كل بكسل. وبالتالي فإن الصور ذات الأبعاد نفسها لها نفس حجم الملفات (كيلوبايت/ميغابايت). على سبيل المثال ، 800 × 600 BMP الصور دائمًا 1.37 ميجابايت مثل التلال الشهيرة لـ WinXP خلفية "Bliss".
• الشفافية/الشفافية غير مدعومة
• لا ينصح به لأي شيء

JPG:

• الضياع.
• يمكن تعيين مبلغ الخسارة ، على سبيل المثال ، أثناء إنشاء رسم وحفظ في Photoshop.
• الحفظ كنوعية أعلى يعني فقدان أقل للألوان/العمق وحجم الملفات الكبير ، والعكس صحيح.
• الشفافية/الشفافية غير مدعومة
• يوصى به للصور الفوتوغرافية ، وليس للرسومات/الرموز

PNG:

• ضغط ضياع (نعم ، أفضل ما في العالمين/العالمين)
• يدعم الشفافية والشفافية ، وكلاهما مختلف
• يوصى به للرسومات/الرموز الثابتة ، وليس للصور الفوتوغرافية

GIF:

• يدعم الشفافية ولكن ليس الشفافية
• يوصى به للرسومات/الرموز الرسومية فقط
• ربما تكون الصور المتحركة في إطارات في Harry Potter هي صور GIF: D

يستخدم BMP إما بتات أولية ذات رأس صغير ، أو ترميز طول التشغيل . يستخدم JPEG تحويل جيب التمام المنفصل . انظر الكتلة في قيعان مقالات ويكيبيديا للحصول على خوارزميات ضغط/تشفير أخرى.

دليل بسيط:

• للصور الفوتوغرافية ، استخدم:
  • تنسيقات خام خاصة بالكاميرا إذا كان لديك معدات احترافية وترغب في القيام بالكثير من المعالجة اللاحقة
  • JPEG بخلاف ذلك (لنشر الصور على الويب ، يجب عليك تحويل التنسيقات الأولية إلى JPEG أيضًا)
• لأي شيء ذي حواف حادة ، تستخدم الخطوط الدقيقة والألوان القليلة (مثل لقطات الشاشة أو الشعارات):
  • GIF إذا كنت تفعل صفحة ويب يجب أن تدعم المتصفحات القديمة جدًا (IE 6 بشكل أساسي) ، أو إذا كنت تريد القيام برسومات متحركة بسيطة
  • بابوا نيو غينيا خلاف ذلك
• لا يوجد سبب وجيه لاستخدام BMP ، ما لم يقبل برنامج معين التنسيقات الأخرى.