تنسيقات صور الموقع:اختيار التنسيق المناسب للمهمة المناسبة

StackOverflow https://stackoverflow.com/questions/392635

  •  23-08-2019
  •  | 
  •  

سؤال

عند تصميم موقع ويب، ما هو أفضل تنسيق للصور يمكن استخدامه في مهمة معينة في نظرك؟

أجد نفسي دائمًا في معضلة عندما أحاول معرفة التنسيق الذي يجب استخدامه لمهمة معينة...على سبيل المثال، هل يجب أن أستخدم .jpg في كل النواحي؟ أو، متى ولماذا يجب علي استخدام .png؟

على سبيل المثال، أخذ أمازونموقع الويب الذي يستخدمونه .jpg لصور المنتج (مثال), .gif لهذا البكسل الشفاف (مثال) و .بي إن جي لكائنات CSS الخاصة بهم (مثال)

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

إذن ما هي التنسيقات التي يجب أن أستخدمها لمواقع الويب الخاصة بي؟ولماذا يجب أن أستخدمها؟

[تحديث]

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

هل كانت مفيدة؟

المحلول

JPEGS هي للصور. أرى JPEGs مع النص في من حين لآخر وتبدو فظيعة. النص هو الأفضل للنص، واستخدام PNG خلاف ذلك.

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

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

باختصار:

  • صور → JPG.
  • ! الصور → PNG

نصائح أخرى

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

أولاً: هناك نوعان من الضغط: بدون فقدان بيانات و خاسر.

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

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

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

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

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

جيدة ل:لا شيئا حقا.لا يوجد أي شيء يتفوق فيه BMP، أو لا يتفوق عليه التنسيقات الأخرى.

BMP vs GIF

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

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

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

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

GIF vs JPEG

جبيغ - ضياع / مباشر

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

جيدة ل:صور فوتوغرافية.وكذلك التدرجات.

JPEG vs GIF

PNG-8 - ضياع / مفهرسة

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

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

PNG-8 vs GIF

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

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

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

بي إن جي يجب أن تستخدم عندما:

  • تحتاج إلى شفافية (إما شفافية 1 بت أو ألفا)
  • سوف يعمل ضغط ضياع جيدا (مثل الرسم البياني أو الشعار، أو صورة الكمبيوتر التي تم إنشاؤها)

jpeg. يجب أن تستخدم عندما:

  • ضغط ضياع لن يعمل بشكل جيد (مثل الصورة)
  • هناك حاجة إلى اللون الكامل

gif. يجب أن يكون:

  • PNG غير متوفر، مثل البرامج أو المتصفحات القديمة جدا
  • الرسوم المتحركة ضروري

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

تشمل أوضاع PNG (هذه مجموعة فرعية صغيرة فقط)

  • لون لوحة من 2 إلى 256 لونا (مثل gif)
  • لون لوحة من 2 إلى 256 لونا، مع لون شفاف (مثل GIF)
  • اللون الحقيقي (لون 24 بت)
  • اللون الحقيقي مع قناة ألفا (لون 24 بت + 8 بت شفافية ألفا)

للحصول على أفضل ضغط في PNG على الويب، استخدم دائما وضع لوحة. إذا وجدت ملفات PNG أكبر من ملفات GIF المكافئة، فأنت تقوم بحفظ PNG في لون 24 بت ووضع GIF في وضع لوحة (لأن GIF دائما في وضع لوحة). حاول التحويل إلى وضع لوحة أولا.

إذا وجدت أن ملفات PNG الخاصة بك مع الشفافية لا تعمل بشكل صحيح في IE6 أثناء وجود ملفات GIF الخاصة بك، فأنت تستخدم 82 بت لون + شفافية ألفا في وضع PNG و Palette مع لون شفاف مع GIF. يجب عليك التأكد من تحويل برنامج PNG الخاص بك إلى وضع ألوان يلقط مع لون شفاف.

يحتوي PNG أيضا على وسائط أخرى مثل لون لوحة مع شفافية ألفا في لوحة. أوضاع مثل هذا لا يمكن استخدامها في فوتوشوب.

حاول أن تنظر إلى هذا الموقعhttp://www.killersites.com/articles_2005/theory/imagesinwebpages.jsp.

يحاولون شرح ما يجب استخدامه عندما

إذا كنت تخزين أو تقديم عدد كبير من الصور الجديد جوجل تنسيق webp قد يستحق النظر كما هو 25٪ أصغر من PNG / JPG. ملاحظة هذا غير مدعوم من قبل جميع المتصفحات في الوقت الحالي. ملحوظة خرج هذا في عام 2010 بعد نشر هذا السؤال.

تنسيق ملف JPEG

  1. عظيم للصور عندما تحتاج إلى الحفاظ على حجم صغير
  2. خيار جيد للصور
  3. سيئة للقشارات، فن الخط، ومناطق واسعة من اللون المسطح

تنسيق ملف gif.

  1. كبيرة للتأثيرات المتحركة
  2. خيار جميل لفنية الفن والرسومات المسطحة والصور التي تستخدم الحد الأدنى من الألوان والخطوط الدقيقة
  3. خيار جيد لشعارات بسيطة مع كتل من الألوان

تنسيق ملف PNG.

  1. بدون فقدان بيانات
  2. اختيار ممتاز عند الشفافية أمر لا بد منه
  3. خيار جيد لقشارات وفن الخط
  4. غير مدعوم في كل مكان

يمكنك رؤية هذه الرسوم البيانية للحصول على معلومات أكثر تفصيلا، أنواع ملفات الصور: عند استخدام JPEG، GIF & PNG

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top