دليل

لقطة الشاشة نفسها بكثافتين

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

آخر تحديث:

فريق Bitinz · كيف نكتب المحتوى ونتحقق منه

قد تبدو الشاشة نفسها ويتغير الملف

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

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

التقاط مضبوط ثم ضغط فعلي

في 2026-10-29 التقطنا الواجهة المحلية نفسها بكثافتي 1× و2×. مضاعفة العرض والارتفاع تعطي 4 أمثال البكسلات، لا نسبة ثابتة لحجم الملف. عولجت اللقطتان بمستوى متوازن في Bitinz.

احتفظنا بنتيجة ضغط PNG ونتيجة تحويل WebP لكل لقطة. شغّلنا كل إعداد 3 مرات للتحقق من تطابق ملفات الناتج تمامًا. ترافق التجربة ملفات المصدر وقيم التجزئة وسجلات الناتج؛ وتوضح سياسة التحرير المنهج العام.

الكثافة والصيغة بشكل منفصل

قارن PNG وWebP عند الكثافة نفسها، ثم اللقطتين الأصليتين لرؤية كلفة زيادة البكسلات منفصلة.

الصورةالبكسلاتالناتجالمستوىقبلبعدالتوفير
interface-1x.png800 × 500 pxPNGمتوازن42.8 KB13.3 KB68.8%
interface-1x.png800 × 500 pxWebPمتوازن42.8 KB11.1 KB74.1%
interface-2x.png1600 × 1000 pxPNGمتوازن101.5 KB30.6 KB69.9%
interface-2x.png1600 × 1000 pxWebPمتوازن101.5 KB27.6 KB72.8%

Bitinz · 1 KB يساوي 1000 بايت.

ضغط الصورصغّر ملفات JPG وPNG وWebP بصيغتها الأصلية، على دفعات ومجانًا.اضغط الصور

النص هو منطقة الفحص المفيدة

تفصيل PNG الأصلي

النص وخطوط الواجهة الأصلية في الاقتصاص

تفصيل PNG المضغوط

النص والخطوط نفسها بعد ضغط PNG
منطقة النص نفسها من PNG الأصلي وناتج PNG المضغوط الفعلي، دون تنقيح.

النص الصغير والخطوط الرفيعة واللوحات ذات الظلال الخفيفة أهم من مساحة فارغة كبيرة. افحص بالحجم الكامل ثم بعرض القراءة الفعلي.

يفيد WebP الأصغر إذا كان مقبولًا والنص واضحًا. إن لزم PNG فقارنه مباشرة. وأبق النص نصًا حقيقيًا في الصفحة متى لم تكن اللقطة ضرورية.

اختر ما يحتاج القارئ لرؤيته

اقتصّ المحيط غير المهم في محرر قبل الرفع. هذا قرار محتوى منفصل عن الضغط يقلل التشتيت والبكسلات. احتفظ بسياق التعليمات، مثل الزر وتسميته القريبة.

قد يحتاج التوثيق لقطة عالية الكثافة قابلة للتكبير، والمحادثة مجرد المنطقة المهمة. جرّب الوجهة الفعلية بدل توحيد أبعاد كل اللقطات.

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

جهّز لقطة مقروءة

  1. التقط الواجهة والسياق اللذين يحتاجهما القارئ فقط.
  2. احتفظ بمصدر PNG واضغط نسخة.
  3. قارن الحروف والخطوط بالحجم الكامل وعرض العرض المقصود.
  4. استخدم أخف ملف مقبول بصيغة تدعمها الوجهة.

الأسئلة الشائعة

هل لقطة 2× تحتوي ضعف البكسلات؟
إن تضاعف العرض والارتفاع أصبح العدد 4 أمثاله. وتعتمد نسبة حجم الملف أيضًا على المحتوى والصيغة.
هل أحوّل اللقطات دائمًا إلى WebP؟
استخدمه عندما تدعمه الوجهة ويبقى النص واضحًا. احتفظ بـPNG إن كان مطلوبًا أو أعطى نتيجة أنسب.
هل يقص Bitinz اللقطة أو يغيّر أبعادها؟
الاقتصاص وتعديل الأبعاد تحضير في محرر صور. يعالج Bitinz الأبعاد التي ترفعها.

الأدوات في هذا الدليل

المصادر

  1. Bitinz: Image lab: sources, measurements and output hashes (2026-10-29)
  2. MDN: Window: devicePixelRatio property