JPG مقابل PNG: أيهما تختار لموقعك على الويب؟

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

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

الفرق بين PNG و JPG

لنبدأ بالتعريفات الأساسية.

يرمز PNG إلى Portable Network Graphics ، مع ما يسمى بالضغط "بدون فقدان البيانات". هذا يعني أن جودة الصورة كانت نفسها قبل الضغط وبعده.

JPEG أو JPG تعني مجموعة خبراء التصوير المشتركة ، مع ما يسمى بضغط "فقد".

كما قد تكون خمنت ، هذا هو أكبر فرق بين الاثنين. جودة ملفات JPEG أقل بكثير من جودة ملفات PNG.

ومع ذلك ، فإن الجودة المنخفضة ليست بالضرورة أمرًا سيئًا.

ما هو JPEG؟

تعد صور JPEG خيارًا شائعًا للصور التي يتم إنتاجها بواسطة التصوير الفوتوغرافي الرقمي وهي اختيار جيد للصور ذات الألوان المعقدة والتظليل.

في حين أن فقدان الجودة يكون قليل الإدراك مع ضغط JPG بنسبة 10: 1 ، فإن الحجم الأصغر يجعل ملفات JPEG مناسبة لاستخدام الويب لأن تقليل كمية البيانات المستخدمة للصورة مفيد للعرض التقديمي سريع الاستجابة.

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

ما هو PNG؟

تم إنشاء PNG كبديل محسّن لملفات GIF وأصبح أكثر تنسيقات ضغط الصور ضياعًا شيوعًا على الإنترنت.

إذن ما هو ملف PNG؟

المعروفة باسم رسومات الشبكة المحمولة ، يمكن أن تكون صورة PNG قائمة على لوح الألوان ، وتدرج الرمادي ، وألوان كاملة غير قائمة على RGB / RGBA.

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

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

JPG مقابل PNG - القاعدة الأساسية

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

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

هل هو مهم حقا؟

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

لذا ، إذا كانت صور PNG لا تبدو أفضل بكثير من JPGs ، فلماذا لا تستخدم دائمًا تنسيق JPG وتجعل الأمور أسهل على نفسك؟

لسوء الحظ ، ليس الأمر بهذه البساطة والسبب في ذلك هو ضغط الصور.

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

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

لذلك إذا كنت تريد ضغطًا جيدًا ، فأنت بحاجة إلى إيجاد التوازن الصحيح بين جودة وحجم ملفك.

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

منطقيًا ، هذا يعني أنه كلما كبرت الصورة - زاد وقت التحميل.

خدمات ضغط الصور

هناك العديد من الخدمات والأدوات لضغط الصور وإليك بعض الخدمات الجيدة التي يمكنك استخدامها لـ jpg أو png:

• Kraken.io - توازن رائع بين الحجم والجودة

• البرنامج المساعد Kraken WordPress - الضغط التلقائي للصور التي تقوم بتحميلها إلى موقعك

• WP Smush - مكون إضافي لبرنامج WordPress يقوم بضغط صورك تلقائيًا

صور تحتوي على نص

من وقت لآخر ، ستحتاج إلى استخدام صور تحتوي على نص واختيار jpeg أو png مهم حقًا هنا. عادةً ما تكون PNGs خيارًا أفضل للصور من هذا النوع ، وكذلك للرسومات ذات التفاصيل الدقيقة.

الفرق المهم بين jpg و png هو أنه مع JPGs ، عادة ما تظهر ملامح الحروف ، وكذلك الخطوط الدقيقة من الرسومات ، أقل حدة.

الصور العادية

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

إذا قررت استخدام ملفات PNG فقط ، فسيؤدي ذلك إلى إبطاء موقع الويب الخاص بك مما قد يؤدي إلى إحباط المستخدمين.

تغيير حجم الصور

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

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

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

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

PNG مقابل JPG عندما لا تكون متأكدًا

نحن نعلم الآن أن صور JPG أفضل للصور الفوتوغرافية ، بينما تعمل صور .png بشكل أفضل مع الرسوم البيانية والصور التي تحتوي على نص. ولكن ما هو الأفضل للصور الموجودة في مكان ما بينهما؟

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

ومع ذلك ، عندما يتعلق الأمر بـ JPG مقابل PNG عند الحديث عن لقطات الشاشة ، فمن الأفضل دائمًا استخدام تنسيق PNG للاحتفاظ بالحدة وسهولة قراءة النص في الصورة.

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

أفكار نهائية حول مقارنة JPG مقابل PNG

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

عند الحديث عن JPG مقابل PNG ، هناك بعض الأشياء الأساسية التي يجب وضعها في الاعتبار.

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

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

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