دليل المبتدئين إلى JPEG مقابل PNG (وكيفية استخدام كليهما)

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

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

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

الفرق بين JPEG و PNG

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

هل يمكنك اتخاذ قرار بشأن ما إذا كانت فراشة المورمون القرمزية هذه هي صورة بتنسيق JPEG أو PNG؟ بالطبع ، بدون إطار مرجعي لا يمكنك إجراء مقارنة:

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

• يوفر تنسيق ملف Joint Photographic Experts Group (JPEG) ضغطًا ضائعًا للصور الرقمية. هذا يعني أن جودة الصورة تكون ملحوظة إذا كان التوازن بين هذا وحجم الملف يتأرجح كثيرًا. ملفات JPEG هي ملفات "مسطحة". بمعنى آخر ، لا يمكنهم عرض الشفافية داخل ملف. بينما يمكنك ضبط مستوى الضغط ، حتى في أفضل إعداداته ، سيكون ملف JPEG عبارة عن ملف 8 بت ، مما يؤثر على النطاق الديناميكي. علاوة على ذلك ، غالبًا ما يشتمل JPEG على ملف تعريف ألوان ، والذي يخبر المراقبين بكيفية عرض الألوان بداخله.
• في المقابل ، فإن صور Portable Network Graphics (PNG) هي ملفات جاهزة للويب. إنه تنسيق أكثر ديناميكية من JPEG ، مع القدرة على إخراج ملفات 24 بت. إنه أيضًا تنسيق "بدون فقدان" ، مما يعني أنه يمكنك نسخه دون التقليل من جودة الصورة. رغم ذلك ، لا يمكنك ضبط الضغط لملفات PNG ، ولا يوجد ملف تعريف ألوان. على الرغم من ذلك ، تعد PNG مثالية للويب ، بناءً على مواصفاتها الفنية.

يبدو واضحًا تمامًا - ملفات PNG تناسب الويب ، وملفات JPEG لا تناسب ذلك. حسنًا ، هذه ليست القصة الكاملة. كل نوع ملف رائع لتطبيقات معينة. بعد ذلك ، سنناقشهم.

JPEG مقابل PNG: متى يجب استخدام كل واحدة

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

إذا كنت تريد عرض صورة ، فاستخدم JPEG. لأي ملف آخر - خاصة الرسومات الرقمية - استخدم PNG.

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

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

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

تنسيقات الصور الأخرى التي يجب أن تعرفها

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

• تنسيق الواجهة الرسومية (GIF). إذا نشرت مقطع فيديو ميمي أو رد فعل على Twitter متحركًا ، فسيكون ذلك بتنسيق GIF. في الواقع ، بدت PNG لاستبدال ملفات GIF بمواصفاتها الأصلية ، وكلاهما يوفر طبقات شفافية.
• تنسيق ملف الصور الموسوم (TIFF). يعد تنسيق الملف المستند إلى البيانات النقطية رائعًا للطباعة نظرًا لدعمه لمساحات ألوان CMYK.
• تنسيق الصورة الخام (RAW). لن تستخدم هذا إلا إذا كنت مصورًا ، وهي حصرية للكاميرا التي تستخدمها. بينما يمكنك عرض ملفات RAW على جهاز الكمبيوتر الخاص بك ، فإنك تحتاج إلى برنامج مخصص لمشاهدتها. أحجام الملفات فلكية ، لأن البيانات كاملة. في الواقع ، لا تعد تنسيقات RAW صورًا ، ولكنها البيانات التي عند ترميزها تمثل الصورة.
• ملف صور عالي الكفاءة (HEIF). هذا هو تنسيق الملف الأساسي لأجهزة iOS. إنه يوفر ضغطًا وأحجام ملفات أفضل من JPEG ، ويمكنه التعامل مع الكثير من تنسيقات الوسائط المتعددة المختلفة.

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

كيفية تحضير صورك للتحميل (بثلاث طرق)

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

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

كما تتوقع ، هناك توازن جيد هنا. لنبدأ بأبعاد صورتك.

1. تعيين الأبعاد الخاصة بك

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

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

يمكن لمستشعر المحاصيل الحديث والكاميرات الرقمية كاملة الإطار إنتاج صور بأبعاد افتراضية تبلغ حوالي 6000 بكسل × 3000 بكسل (على الرغم من وجود اختلافات كبيرة بين الكاميرات). في المقابل ، الصور ذات "الحافة الطويلة" بحوالي 2000 بكسل شائعة على وسائل التواصل الاجتماعي. ضع في اعتبارك أن هذا للعرض في منفذ العرض الكامل للجهاز.

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

2. تعيين القرار الصحيح

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

نستخدم Pixels Per Inch (PPI) لمناقشة عدد وحدات البكسل التي يمكن وضعها على الشاشة. يمكنك أيضًا التعبير عن هذا بالسنتيمتر أو "بالنقاط". هذا الأخير مخصص لتنسيقات الطباعة المادية ، ودوائر تصميم الرسوم تستخدم DPI في كثير من الأحيان. على هذا النحو ، ستسمع أنه يستخدم بطريقة قابلة للتبديل ، على الرغم من أن PPI هو المصطلح الصحيح.

بينما تستخدم مواصفات صورة PNG 72 PPI كدقة تصميم مثالية لها ، فإن هذا لن يأخذ في الاعتبار الشاشات الحديثة عالية الدقة. بينما يمكنك مضاعفة أبعاد الصورة لجعلها حادة على جميع الشاشات ، يمكنك أيضًا أن تفعل الشيء نفسه مع الدقة أيضًا. على سبيل المثال ، التقط لقطة الشاشة هذه لسطح مكتب macOS Big Sur:

إنها PNG ، مع 1000 بكسل على الحافة الطويلة (الأعلى والأسفل في هذه الحالة). على الرغم من أنه يستخدم 144 PPI - على الرغم من وجود بعض "السحر" للتحميل الذي يحول الدقة إلى 72 PPI عند التحميل إلى WordPress.

يمكن أن تستخدم كل من صور PNG و JPEG مؤشرات PPI أعلى بكثير أيضًا - دقة جاهزة للطباعة تبلغ حوالي 300 نقطة في البوصة / PPI. علاوة على ذلك ، سيتم تنزيل الكثير من الصور من مواقع الصور المخزنة مثل Pixabay باستخدام 300 بكسل لكل بوصة:

على هذا النحو ، سيؤدي تقليل هذا إلى إعداد صورك بشكل أفضل للويب وشاشاتها المتنوعة.

3. تحسين صورك باستخدام الضغط

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

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

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

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

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

JPEG مقابل PNG: كيفية تحقيق أقصى استفادة من كل تنسيق

على الرغم من الاختلافات في تنسيقات الملفات ، فإن طبيعة تصفح الويب تعني أنه يمكنك تلخيص تحضير صورك لما يلي:

• استخدم أبعادًا تتراوح بين 1000 و 2.048 بكسل على الحافة الطويلة.
• قم بتعيين دقة 144 بكسل لكل بوصة لجميع صورك ، للتأكد من أنها تظهر واضحة ونقية على جميع الشاشات.
• قم بتطبيق ضغط دقيق من خلال تحسين الصورة للمساعدة في تقليل حجم الملف. مع أخذ كل شيء في الاعتبار ، سيكون حجم معظم الصور يتراوح بين 100 و 200 كيلو بايت.

هناك المزيد هنا بناءً على تنسيقات ملفات محددة:

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

الآن ، يجب أن يكون لديك فهم قوي لـ JPEG و PNG ، ومتى تستخدمهما ، وكيفية تجهيز ملفاتك ؛ وإذا كنت لا تزال تريد معرفة الصورة التي كانت بتنسيق JPEG من بداية المقالة ، فهذه هي الصورة الأولى!

تغليف

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

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

هل تجهز لك صورًا للويب كما أوضحنا هنا ، أم تفعل شيئًا مختلفًا؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه!

رصيد الصورة: minka2507 ، كريستلز .