أنواع الصور واستخدامها في تصميم مواقع الإنترنت

هل تساءلت يوما ما هو الفرق بين JPEG و GIF و PNG الصور التي نستخدمها على الإنترنت؟ كمصمم – ولا سيما مصمم ويب – من المهم أن نعرف الفرق بين تنسيقات الصور المختلفة وكيفية استخدامها في كل حالة. وسوف يغطي هذا المقال كيفية استخدامها لكل حالة للحفاظ على جودة الصورة عالية وأحجام الملفات الصغيرة. نحن كنت إيداع هذا تحت "Basix"، ولكن ينبغي أن تكون المعلومات مثيرة للاهتمام لكل من يبحث للحصول على فهم أعمق لتنسيقات الصور.

الاختلافات

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

حول. تنسيق JPG

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

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

الآن بالنسبة للجزء التقني: عملية JPEG يقسم الصورة إلى 8 × 8 بيكسل كتل وتشغيلها من خلال حساب DCT (تحويل جيب التمام المنفصلة) تليها تكميم (JPEG 2000، إصدار أحدث، يستخدم تحويل المويجات بدلاً من DCT).

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

حول. تنسيق GIF

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

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

GIF للقيام بشيئين الإضافية التي لا يمكن للحياة السياسية في فرنسا. أولاً، يمكن استخدام GIF الشفافية. في GIF هي بيكسلات شفافة 100% أو 100% معتمة. GIF هو أيضًا تنسيق متعدد الصور ، لذا يمكنك استخدامالرسوم المتحركة (للأفضل أو للأسوأ).

حول. تنسيق PNG

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

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

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

وكما تعلمون، هناك نوعان رئيسيان من بابوا نيو غينيا.

• PNG8 (8 بت) – أساسا نفس GIF من حيث القيود لون (256 لوناً كحد أقصى) ولكن يسمح للشفافية ألفا
• PNG24 (24 بت) – يسمح لنطاق أوسع من الألوان.

استخدام JPEG و GIF و PNG

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

استخدام JPG

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

JPG بسيطة

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

أمثلة ضغط JPG

هذه الصورة ربما تبدو أفضل في نوعية ~ 65% مما سيقلل من حجم الصورة بما يقرب من 100 ك. لتحديد إعدادات أفضل استخدام لملف JPEG، ببطء يقلل المنزلق حتى يمكنك البدء في معرفة نوعية الصورة حقاً تتحلل. قم بنقل نوعية النسخ الاحتياطي حوالي 5-10% أو نحو ذلك.

ضغط JPG 65%

ونحن نعلم أن هذا JPG تبدو لائقة لشبكة الإنترنت؛ دعونا ننظر في بعض المقارنات حجم الملف/الجودة لتنسيقات أخرى:

ينتج GIF في حجم ملف 63.77K وصورة تبدو رهيبة.

ينتج PNG8 في حجم ملف 53.52K وبسبب أساليب الضغط الأكثر تقدما ، ولكن يبدو نفس GIF.

ينتج عن PNG24 حجم ملف 253.9 كيلو بايت ويبدو قريبًا من الصورة الأصلية ، ولكنه لا يساوي حجم الملف الكبير.

هو أفضل خيار ممكن لهذا النوع من الصور JPEG في نوعية ~ 65 في المائة؛ حجم ملف صغير (39.77K) مع فقدان الجودة البصرية قليلة جداً.

استخدام GIF و PNG8

كما ترون أدناه، لا تستخدم الصورة متفاوتة الألوان أو النغمات، ولكن الألوان الصلبة بدلاً من ذلك. هذه الصورة هو 5.72 ك (GIF) ويستخدم ما مجموعة 8 ألوان. وهذا يجعل GIF و PNG8 تنسيقات رائعة لفن الخط، ولون بسيطة الشعارات، إلخ. PNG8 سيكون خيار أفضل هنا كما أنه يؤدي إلى حجم ملف أصغر (3.54K) ويستخدم بسبب أسلوب ضغط أفضل.

ضغط GIF (إشعار لوح الألوان محدودة)

عند محاولة حفظ GIF، مثل الصورة أعلاه، كملف JPEG يمكن أن ينتج pixelation، أو تشويه الصورة. أنها دائماً سيؤدي كثير أحجام ملفات أكبر، وكذلك عندما كنت تتعامل مع التصوير الفوتوغرافي وغيرها من الصور الغنية. يقع في أقصى ضغط على الصورة أدناه والنتائج في حجم ملف تقريبا 8 كيلو لمقابل JPEG ك 5.72 ل GIF وك 3.54 ل PNG8.

ضغط GIF...

بالمقارنة مع ضغط JPG جودة منخفضة

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

مثال على اختيار لون GIF

الصورة أدناه هي PNG8 مع الشفافية (GIF تبدو نفس) كما يبدو في Photoshop. عند استخدام الشفافية مع GIF أو PNG8، سوف تحتاج إلى تعيين ماتي الصورة أيا كان لون الخلفية سوف تكون – للمزج بين أفضل وصورة نظافة المظهر. كما ذكر آنفا، هذا لأنه لا يدعم GIF الشفافية ألفا وفوتوشوب لا يدعم الشفافية ألفا مع تنسيق PNG8 على الرغم من أنها تدعم ذلك (تحرير--منذ ذلك الحين تم إصلاح هذا في الإصدارات الجديدة من فوتوشوب).

مثال PNG8

والحمد لله الألعاب النارية يسمح لنا باستخدام "الشفافية ألفا" مع تنسيق PNG8 (هيا فوتوشوب!). كما يمكنك أن ترى في الصورة أدناه، لا تزال محدودة التدرج الأسود في اختلاف لهجة جعل التدرج تبدو قليلاً متقطعاً. أن الشيء العظيم حول استخدام الشفافية ألفا مع PNG8 هو أنت لا يزال الحصول على حجم ملف صغير ولكن حواف مزيج بسلاسة وتدرجات طفيفة حتى تبدو كبيرة.

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

PNG8 مثال الشفافية ألفا

للأسف لا يمكنك حفظ صورة ك PNG8 بشفافية ألفا في Photoshop حيث ستحتاج للقفز إلى الألعاب النارية للقيام بذلك.

في البالته أمثلية حدد تنسيق PNG8 مع ألفا الشفافية المحددة، ثم انقر فوق "إعادة بناء" في الزاوية اليمنى السفلي.

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

وهذا كل ما في الأمر!

استخدام PNG24

استخدام PNG24 هو أساسا نفس الفكرة كاستخدام GIF أو PNG8، إلا أنه سيؤدي إلى حجم ملف أكبر نظراً لأنه يدعم طائفة أوسع من تباين الألوان. إذا كان لديك صور مع التدرجات الأكثر تعقيداً التي تحتاج إلى الشفافية أو عمق لون أكبر، PNG24 هو الخيار الأفضل. لسوء الحظ ، لا يدعم IE6 PNG24 أصلاً ؛ لذلك سيكون عليك " اختراق " العمل بشكل صحيح.

في PNG24 كبيرة في معظم الحالات حيث تحتاج إلى الشفافية--وهم كبير ارتفاعا في حجم الملف، لكن العمل جيدا في حالات مثل العلامة التجارية-الشعارات حيث نوعية مهم ولا تريد استخدام تنسيق ضياع.

تنسيقات أخرى

ويبب (تنسيق الصورة جوجل ويب):

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

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

بينما فوائد تنسيق الصورة VP8 على أساس واضح من الناحية النظرية، نحن بحاجة إلى اختبار لهم في العالم الحقيقي. بغية قياس مدى فعالية جهودنا، ونحن عشوائياً التقطت الصور حوالي 1,000,000 من الويب (معظمها صور Jpeg وبعض PNGs ومتحركة) وإعادة ترميز إلى ويبب دون المساس بصورة ملحوظة الجودة البصرية. وادي ذلك إلى تخفيض متوسط 39 في المائة في حجم الملف. ونحن نتوقع أن يحقق المطورين في الممارسة الأفضل حتى الحد من حجم الملف مع ويبب عند ابتداء من صورة غير مضغوط. "

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

تنسيق SVG

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

الاستنتاج

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

إذا كان لديك أي أسئلة أو تعليقات، لا تتردد في نشرها أدناه!