ما هو التنسيق المناسب لصور مواقع الويب الصغيرة؟GIF أو PNG؟[مغلق]

https://stackoverflow.com/questions/115818

02-07-2019
|

سؤال

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

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

المحلول

كقاعدة عامة، PNG ليس أسوأ من GIF أبدًا، وغالبًا ما يكون أفضل بسبب الضغط الفائق.قد تكون هناك بعض حالات الحافة التي يكون فيها GIF أفضل قليلاً (لأن تنسيق PNG قد يكون له حمل أكبر قليلاً من البيانات الوصفية) ولكن الأمر لا يستحق القلق حقًا.

قد يكون السبب هو الأدوات التي أستخدمها فقط، ولكن ملفات GIF عادةً ما تبدو أصغر قليلًا من ملفات PNG المماثلة

قد يكون ذلك بالفعل بسبب أداة التشفير التي تستخدمها.

/يحرر:يبدو أن هناك الكثير من المفاهيم الخاطئة حول حجم ملف PNG.على حد تعبير مات:

لا حرج في استخدام ملفات GIF للصور ذات الألوان القليلة، وكما لاحظت فهي تميل إلى أن تكون أصغر حجمًا.

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

أيضًا، فإن الافتقار إلى الدعم في MSIE6 قد تم تضخيمه بشكل غير متناسب بواسطة Chrono:

إذا كنت بحاجة إلى الشفافية ويمكنك التعامل مع صور GIF، فإنني أوصي بها لأن IE6 يدعمها.IE6 لا يعمل بشكل جيد مع ملفات PNG الشفافة.

ذلك خطأ.MSIE6 يفعل دعم PNG الشفافية.إنها لا تدعم قناة ألفا (بدون بعض الاختراقات)، لكن هذا أمر مختلف نظرًا لأن ملفات GIF لا تحتوي عليها على الإطلاق.

ال فقط السبب الفني لاستخدام ملفات GIF بدلاً من ملفات PNG هو عندما يحتاج الاستخدام إلى رسوم متحركة ولا يريد الاعتماد على تنسيقات أخرى.

نصائح أخرى

ذكر W3C ثلاث مزايا لـ PNG مقارنة بـ GIF.

• قنوات ألفا (شفافية متغيرة) ،

• تصحيح غاما عبر المنصات (التحكم في سطوع الصورة) وتصحيح اللون

• ربط ثنائي الأبعاد (طريقة العرض التقدمي).

قم أيضًا بإلقاء نظرة على هذه الموارد للحصول على إرشادات:

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

الأشياء الأساسية التي يجب فهمها:

PNG8 وGIF بدون فقدان <= 256 لونًا
يمكن أن يكون PNG8 دائمًا أصغر من GIF
لا ينبغي أبدًا استخدام GIF إلا إذا كنت بحاجة إلى رسوم متحركة

وبالطبع،

استخدم JPG للصور الفوتوغرافية بالأبيض والأسود أو بالألوان الكاملة
استخدم PNG للحصول على صور ذات ألوان منخفضة وفن خطي وصور من نوع لقطة الشاشة

يتم تناول السبب الرئيسي لاستخدام PNG عبر GIF من الناحية القانونية هنا:

http://www.cloanto.com/users/mcb/19950127giflzw.html

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

(png مرجع مفتوح المصدر: http://www.linuxtoday.com/news_story.php3?ltsn=1999-09-09-021-04-PS)

كن حذرًا من تغيرات اللون عند استخدام PNG.هذا الرابط يعطي مثالا، ويحتوي على العديد من الروابط مع مزيد من الشرح:

http://www.hanselman.com/blog/GammaCorrectionAndColorCorrectionPNGIsStillTooHard.aspx

صور GIF لا تخضع لهذه المشكلة.

لا أعتقد أن هذا يحدث فرقًا كبيرًا (العملاء لا يهتمون).أنا شخصياً سأختار ملفات PNG لأنها معيار W3C.

كن حذرًا مع تأثيرات شفافية PNG:أنها لا تعمل مع IE6.

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

بالنسبة للأيقونات وما شابه، يمكنك الاختيار بين PNG وGIF.تقتصر صور GIF على 256 لونًا.يمكن تنسيق ملفات PNG مثل صور GIF (أي 256 لونًا، مع شفافية 1 بت التي ستعمل في IE6)، ولكن بالنسبة للصور الصغيرة، فهي طفيف أكبر من صور GIF.تدعم ملفات PNG ذات 24 بت كلاً من النطاق الكبير وشفافية ألفا (على الرغم من أنها مزعجة في IE6).

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

إن PNG المفهرسة (أقل من 256 لونًا) تكون دائمًا أصغر من GIF، لذلك أستخدمها في معظم الأوقات.

للرسومات التي تم إنشاؤها بواسطة الكمبيوتر (أيرسمتها بنفسك في Photoshop وGimp وما إلى ذلك.) JPG غير وارد، لأنه ضائع - أي.تحصل على بكسلات رمادية عشوائية.بالنسبة للصور الثابتة، PNG هو الأفضل في كل شيء:مزيد من الألوان، وشفافية قابلة للتطوير (على سبيل المثال، شفافية بنسبة 10%، يدعم .gif فقط 0% و100%)، ولكن هناك مشكلة تتمثل في أن بعض إصدارات Internet Explorer لا تقوم بشفافية PNG بشكل صحيح، لذلك تحصل على خلفية مسطحة غير شفافة يبدو قبيحًا.إذا كنت لا تهتم بمستخدمي IE هؤلاء، فانتقل إلى PNG.

راجع للشغل، إذا كنت تريد الرسوم المتحركة، انتقل إلى GIF.

يعد PNG بديلاً بنسبة 100% لملفات GIF ويدعمه جميع متصفحات الويب التي من المحتمل أن تواجهها.

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

تدعم جميع المتصفحات تقريبًا شفافية البت الواحد في ملفات PNG (نوع الشفافية الذي يوفره تنسيق GIF).هناك نقص في الدعم في IE6 لشفافية PNG الكاملة ذات 8 بت، ولكن يمكن تصحيح ذلك في معظم المواقف عن طريق القليل من سحر CSS.

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

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

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

بالطبع، إذا كنت تريد الرسوم المتحركة، فإن GIF هي الطريقة الوحيدة للذهاب، نظرًا لأن MNG لم تكن بداية في الأساس لسبب ما.

"قد تكون هذه هي الأدوات التي أستخدمها فقط، ولكن ملفات GIF عادةً ما تبدو أصغر قليلًا من ملفات PNG المماثلة، ولكن يبدو أن استخدامها يعود إلى عام 1987."

ربما هي الأدوات الخاصة بك.من الأسئلة الشائعة حول PNG:

"هناك سببان رئيسيان وراء هذه الظاهرة:مقارنة التفاح والبرتقال (أي عدم مقارنة نفس أنواع الصور)، واستخدام أدوات سيئة." واصلت...

ولكن يمكنك دائمًا محاولة الحفظ على كليهما (باستخدام نفس عمق الألوان) ومعرفة أيهما سيكون أصغر.

بالطبع، إذا كنت تريد توحيد تنسيق رسومي واحد لموقعك، فمن المرجح أن يكون PNG هو الأفضل للاستخدام.

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

لا أرى أي عيوب في استخدام صور GIF.

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

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

ربما يكون من الأهم استخدام نوع الصور التي تعمل معها أدوات المعالجة بشكل أفضل.

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

عادةً ما أستخدم ملفات gif نظرًا لحجمها، ولكن هناك أيضًا png-8 الذي يحتوي على 256 لونًا أيضًا.

إذا كنت تريد أشياء فاخرة شبه شفافة، فاستخدم png-24.

عادةً ما أستخدم ميزة "الحفظ للويب" في Photoshop، والتي تتيح لك التلاعب بنوع الملف وعدد الألوان وما إلى ذلك ورؤية النتيجة قبل الحفظ.بالطبع سأستخدم أصغر ما يمكن والذي لا يزال يبدو جيدًا في عيني.

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

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow