خطوات الاستخدام
أدخل العرض الأساسي للصورة (baseWidth) بالبكسل. هذا هو العرض المرجعي الذي تستخدمه للكثافة 1x (أي الحجم الافتراضي دون تكبير). على سبيل المثال، إذا كانت صورتك تظهر بعرض 800 بكسل على شاشة عادية، أدخل 800. تستخدم هذه القيمة لضربها بمضاعفات الكثافة لتوليد العروض الفعلية.
حدد مضاعفات الكثافة (densities) التي تريد دعمها. المضاعفات الشائعة هي 1x و2x و3x. يمكنك إدخالها كأرقام مفصولة بفواصل مثل: 1, 2, 3. لكل مضاعف، يتم حساب العرض الجديد: newWidth = baseWidth * density. مثلاً: 800 * 2 = 1600 بكسل لشاشات Retina. كلما زاد المضاعف، زادت جودة الصورة على الشاشات عالية الدقة.
بعد إدخال القيم، سيعرض لك الحاسبة قائمة بأزواج (density, width). يمكنك استخدام هذه النتائج لبناء سمة srcset في وسم <img> أو <source> في HTML. على سبيل المثال: <img src="image-800.jpg" srcset="image-800.jpg 1x, image-1600.jpg 2x, image-2400.jpg 3x" alt="...">. يضمن ذلك تحميل المتصفح الصورة المناسبة حسب كثافة شاشة الجهاز، مما يحسن الأداء وسرعة التحميل.