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




(11)

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

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

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

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


Answers

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

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

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

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


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

يحتوي JPEG على ضغط أفضل مع الصور المعقدة مثل الصور.


والفرق الرئيسي هو GIF على براءة اختراع ودعم أكثر قليلا على نطاق واسع. PNG هي مواصفات مفتوحة وشفافية ألفا غير مدعومة في IE6. تم تحسين الدعم في IE7 ، ولكن لم يتم إصلاحه بالكامل.

بقدر ما تذهب أحجام الملفات ، يحتوي GIF على لوحة ألوان افتراضية أصغر ، لذا فإنها تميل إلى أن تكون أصغر حجمًا للملفات من النظرة الأولى. تحتوي ملفات PNG على منصة تحميل افتراضية أكبر ، ومع ذلك يمكنك تقليص لوحة الألوان الخاصة بها بحيث ، عند القيام بذلك ، ينتج عنها حجم ملف أصغر من GIF. المشكلة مرة أخرى هي أن هذه الميزة غير معتمدة في Internet Explorer.

أيضًا ، نظرًا لأن PNGs يمكن أن تدعم شفافية ألفا ، فهي الخيار الوحيد إذا كنت تريد تنوعًا في الشفافية بخلاف الشفافية الثنائية.


ستكون جودة JPEG سيئة حول الحواف الحادة وما إلى ذلك ، ولهذا السبب فإنها غير مناسبة لمعظم رسومات الويب. انها تتفوق في الصور.

مقارنةً بـ GIF ، توفر PNG ضغطًا أفضل وأكبر حجمًا والمزيد من الميزات ، بما في ذلك الشفافية. ومن دون خسارة.


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

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

يمكن استخدام ملفات GIF للصور المتحركة الصغيرة ومقاطع الأفلام ذات الدقة المنخفضة.

في ضوء القيود العامة على لوحة صور GIF إلى 256 لونًا ، لا يتم استخدامها عادة كتنسيق للتصوير الرقمي. يستخدم المصورون الرقميون تنسيقات ملفات الصور القادرة على إعادة إنتاج مجموعة أكبر من الألوان ، مثل TIFF أو RAW أو JPEG ، والتي تعد أكثر ملاءمة لضغط الصور الفوتوغرافية.

يعد تنسيق PNG بديلاً شائعًا لصور GIF نظرًا لأنه يستخدم تقنيات ضغط أفضل وليس له حد 256 لونًا ، ولكن PNG لا تدعم الرسوم المتحركة. إن تنسيقات MNG و APNG ، المستمدة من PNG ، تدعم الرسوم المتحركة ، ولكنها لا تستخدم على نطاق واسع.


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

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



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


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


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

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


بدلا من border: none; أو border: 0; في CSS الخاص بك ، يجب أن يكون لديك:

border-style: none;

يمكنك أيضًا وضع هذا في علامة الصورة مثل:

<img src="blah" style="border-style: none;">

إما أن يعمل ما لم يكن للصورة src . ما سبق هو لحدود الارتباط السيئة التي تظهر في بعض المتصفحات حيث ترفض الحدود اللعب بشكل جيد. يكون الحد الرفيع الذي يظهر عند عدم وجود src لأن الكروم يظهر أنه في الواقع لا توجد صورة في المساحة التي قمت بتعريفها. إذا كنت تواجه هذه المشكلة ، فحاول القيام بأحد الإجراءات التالية:

  • استخدم <div> بدلاً من عنصر <img> (إنشاء عنصر مع صورة خلفية بشكل فعال هو كل ما تفعله على أي حال ، لا يتم استخدام العلامة <img> فعلاً)
  • إذا كنت تريد / تحتاج إلى علامة <img> استخدم حل Randy King أدناه
  • تحديد صورة src




image svg png jpeg gif