PNG مقابل JPG: أيهما يجب أن تحفظه فعلاً؟

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

August 9, 2026

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

كل رقم أدناه جاء من أدوات LeanImg الخاصة التي تعمل في علامة تبويب المتصفح، على ملفين اختبار: texture.jpg بحجم 3840x2160 و 538.6 KB، بالإضافة إلى alpha.png بحجم 900x606 و 942.4 KB مع خلفية شفافة. قمنا ببناء هذه الأدوات بدون مسارات API وبدون إجراءات خادم، لذا فإن الملف لا يغادر جهازك أبداً. معظم المواقع في هذه الفئة تقوم بتحميل صورتك إلى خادم ثم تعد بحذفها بعد ساعة. لا يوجد شيء هنا ليتم حذفه، وهذا هو السبب في أن صفحة الخصوصية لدينا قصيرة.

أي واحد يجب أن أختار، PNG أم JPG؟

تذهب الصور إلى JPG. تذهب لقطات الشاشة والشعارات والمخططات والفن الخطي وأي شيء يحتاج إلى شفافية إلى PNG. دليل التنسيق الخاص بـ MDN يرسم نفس الخط. في الوضع الذكي، أخذ الضاغط لدينا texture.jpg من 538.6 KB إلى 286.1 KB باستخدام MozJPEG بجودة 80، بتقليص 47%. اسحب شريط التمرير إلى 60 وستصل نفس الصورة إلى 212.4 KB. عند 30 يكون 131 KB، بانخفاض 76%.

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

ماذا تفعل ضغط البيانات بدون فقدان فعلياً بحجم الملف؟

بدون فقدان تعني أن البكسلات المفككة تعود كما هي، وهو ما يتطلبه مواصفة PNG. لا يعني ذلك أن الملف لا يمكن أن ينكمش. يعمل وضع PNG في ضاغطنا باستخدام oxipng على المستوى 3، وأخذ alpha.png من 942.4 KB إلى 383.9 KB. هذا انخفاض بنسبة 59% مع الحفاظ على كل قيمة بكسل.

خيار PNG "حجم ملف أصغر" هو حيوان مختلف. يعمل باستخدام imagequant، الذي يقلل الصورة إلى لوحة ألوان قبل كتابة PNG، وخرج alpha.png بحجم 98.3 KB. هذا انخفاض بنسبة 90%. إنه نتيجة بفقدان بغض النظر عن ما يوحي به امتداد .png، لذا احتفظ بالأصل إذا كانت تلك الصورة نسخة رئيسية.

لماذا يشوه JPG النص الملون والخطوط الرفيعة؟

لأن JPG يخزن اللون بدقة أقل من السطوع. يحتفظ التنسيق باللومة منفصلة عن قناتي الكروم، كما هو محدد في ITU-T T.81، وعادةً ما يقوم الترميز بتقليل عينة الكروم بحيث تغطي عينة لون واحدة كتلة بكسلات 2x2. في صورة بحجم 3840x2160 مثل texture.jpg لن تلاحظ ذلك. على خط أحمر بكسل واحد ضد الأبيض، يتم حساب لون ذلك الخط مع ثلاثة جيران بيض قبل تطبيق أي إعداد جودة، ولا تعيد أي موضع شريط إلى الوراء.

تكون لقطات الشاشة هي المكان الذي يؤذي فيه. الانتقال إلى WebP لا يتجنب ذلك، لأن وضع WebP مع فقدان مقيد بـ 4:2:0 كروم ويطبق نفس التقدير. تحتفظ PNG بالقيمة RGB الدقيقة لكل بكسل، وهذا هو السبب في أن لقطات واجهة المستخدم، ورموز QR، وتراكبات النص تنتمي هناك. إذا كانت PNG لا تزال ثقيلة جداً، قم بتقليلها واحتفظ بالتنسيق.

ماذا يحدث للشفافية عندما أحفظ كـ JPG؟

يتم ملؤها. لا يحمل JPEG أي قناة ألفا في أي وضع، لذا يجب أن يقرر شيء ما ما يجلس خلف بكسلاتك الشفافة. يقوم محول PNG إلى JPG لدينا بدمجها على خلفية بيضاء قبل الترميز، ويفعل الضاغط نفس الشيء كلما كان التنسيق المستهدف بدون ألفا. بدون تلك الخطوة ستظهر باللون الأسود، لأن البكسل الشفاف بالكامل يحمل عادةً RGB 0,0,0 أسفل.

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

لماذا PNG الخاص بي أكبر بكثير من JPG؟

الضوضاء التصويرية لا تعطي متنبئ PNG شيئاً للعمل به. يتم تخمين كل صف من الصف العلوي والفرق المتبقي يتم تقليله، وهو ممتاز على زر مسطح وقريب من عدم الفائدة على الحبيبات. انظر إلى ملفي الاختبار. alpha.png بحجم 900x606 وصل إلى 942.4 KB، بينما texture.jpg بحجم 3840x2160، أكثر من خمسة عشر مرة عدد البكسلات، وصل إلى 538.6 KB. تقليل اللوحة هو الرافعة التي تغلق تلك الفجوة، وأخذ alpha.png إلى 98.3 KB.

هل يجب أن أحفظ WebP أو AVIF وأتجاوز السؤال؟

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

يبدو أن AVIF ينتج أكبر ملف عند شريط التمرير 80، والسبب يكمن في شفرتنا الخاصة. بالنسبة لمصدر JPEG، يقوم الضاغط بضرب شريط التمرير بجودة يقرأها من جداول التكميم الخاصة بالمصدر، لذا فإن مصدر يقدر بـ 60 مع شريط تمرير عند 80 يقوم فعلياً بالترميز عند 48. تأخذ WebP و AVIF 80 كما هو. عند 63، وهو الإعداد الافتراضي للوضع الذكي لـ AVIF، ينقلب الترتيب: AVIF هو 186.9 KB و WebP هو 200.6 KB مقابل ذلك المصدر 538.6 KB. كما أن AVIF كلف 10 إلى 11 ثانية لكل ترميز حيث انتهى JPEG و WebP على الفور، ومن المفيد التحقق من دعم المتصفح قبل الالتزام. لقد قمنا بتفكيك تلك المقارنة بشكل موسع في المقال حول ما إذا كانت WebP تتفوق حقاً على JPG.

ماذا يجب أن أفعل مع الملف الذي أمامي؟

افتح الضاغط. قم بتشغيل ملفك مرتين. إذا كانت صورة، خذ الوضع الذكي أولاً، ثم ادفع شريط التمرير إلى 60 وقارن بين الناتجين عند التكبير الكامل. إذا كان يحتوي على نص أو شفافية، ابق على PNG وجرب كلا وضعي PNG: بدون فقدان حصلت alpha.png على 383.9 KB ووضع اللوحة حصل عليها إلى 98.3 KB. قم بتغيير الحجم أولاً عندما تتجه الصورة إلى عمود بحجم 800 بكسل، حيث أن أداة تغيير الحجم تكتب PNG بدون فقدان وتعيد ترميز كل شيء آخر بجودة 90 بشكل افتراضي. وإذا كانت الوجهة هي مستند، فإن JPG ينتهي على صفحة PDF مع إعادة ترميز مرة أخرى بجودة 92، وهو جيل إضافي للتخطيط حوله.