image PNG vs. GIF vs. JPEG vs. SVG-What when to use؟




(8)

GIF على أساس 256 لونًا لكل صورة (على الأقل في تجسيدها الأساسي). يمكن لـ PNG القيام بـ "TrueColour" ، أي 16.7 مليون لون من العلبة. ينضغط PNG بدون فقدان أفضل من ملفات GIF بدون فقدان. يمكن لـ GIF تنفيذ الشفافية "الثنائية" (عتامة 0٪ أو عتامة 100٪). يمكن لـ PNG التعامل مع الورق الشفاف من نوع Alpha.

الكل في الكل ، إذا لم تكن بحاجة إلى استخدام صور شفافة من ألفا ودعم IE6 ، فربما تكون PNG الخيار الأفضل عندما تحتاج إلى صور مثالية للبيكسل لتوضيح الرسوم المتجهية. JPG لا يهزم للصور الفوتوغرافية.

https://code.i-harness.com

متى يجب استخدام بعض أنواع ملفات الصور عند إنشاء مواقع الويب أو الواجهات ، وما إلى ذلك؟

ما نقاط قوتهم وضعفهم؟

وأنا أعلم أن PNG & GIF بدون فقدان ، بينما تكون JPEG ضائعة.
ولكن ما هو الفرق الرئيسي بين PNG & GIF؟
لماذا أفضّل واحدة فوق الأخرى؟ ما هو SVG ومتى يجب استخدامه؟

إذا كنت لا تهتم بكل بكسل ، فهل يجب عليك دائمًا استخدام JPEG نظرًا لأنها "الأخف"؟


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

إذن ، هنا بشكل أساسي طريقة لتحديد تنسيق الصورة:

  • GIF إذا احتاج إلى حركة أو شفافية تعمل على IE6 (لاحظ أن شفافية PNG تعمل بعد IE6)
  • JPEG إذا كانت الصورة صورة.
  • PNG إذا كانت الخطوط المستقيمة كما في الرسم الهزلي أو أي رسم آخر أو إذا كان هناك نطاق ألوان واسع مطلوب بشفافية (و IE6 ليس عاملاً)

وكما علقت ، إذا لم تكن متأكدًا من المؤهلات ، فجرّب كل تنسيق بنسب ضغط مختلفة وقم بتقييم جودة الصورة وحجمها واختر أيًا كنت تعتقد أنه الأفضل. أنا فقط أعطي قواعد الإبهام.


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

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


بابوا نيو غينيا و pallete لون أوسع من gif و gif هو الصحيح بينما png ليست كذلك. GIF يمكن القيام به الرسوم المتحركة ، ما لا عادي-بابوا نيو غينيا. يتم اعتماد الشفافية عبر بروتوكول png فقط من خلال متصفح أحدث تقريبًا من IE6 ، ولكن هناك إصلاح Javascript لهذه المشكلة. كلا دعم شفافية ألفا. بشكل عام أود أن أقول أنه يجب استخدام png لمعظم webgraphics أثناء استخدام jpeg للصور أو لقطات الشاشة أو المتشابهة لأن ضغط png لا يعمل جيدًا على touose.



هناك اختراق يمكن القيام به لاستخدام صور GIF لإظهار اللون الحقيقي. يمكن للمرء إعداد رسم متحرك بتنسيق GIF مع إطارات 256 لونًا ملونًا مع تأخر الإطار 0 وتعيين الرسم المتحرك ليتم عرضه مرة واحدة فقط. لذلك ، يمكن عرض جميع الإطارات في نفس الوقت. في النهاية ، يتم تقديم صورة GIF ملونة حقيقية.

العديد من البرامج قادرة على prapaering مثل صور GIF. ومع ذلك ، حجم ملف الإخراج أكبر من ملف PNG. يجب استخدامه إذا كان ضروريًا حقًا.


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

أولاً ، هناك نوعان من الضغط: Lossless و Lossy .

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

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

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

BMP - Lossless / Indexed and Direct

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

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

GIF - Lossless / Indexed only

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

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

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

JPEG - الفاسد / مباشر

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

مناسب لـ: صور فوتوغرافية. أيضا ، التدرجات.

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

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

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

PNG-24 - بلا خسائر / مباشر

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

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

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

SVG - بلا خسائر / متجه

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

فمثلا:

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

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

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

في كل شيء ، فهي الأفضل لأشكال مسطحة بسيطة مثل الشعارات أو الرسوم البيانية.

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


يحتوي GIF على لوحة ألوان 8 بت (256 لون) حيث تكون PNG كما لوحت ألوان ألوان 24 بت. لذلك ، يمكن لـ PNG دعم المزيد من الألوان وبالطبع ضغط دعم الخوارزمية





gif