مجاني · يعمل في متصفحك

محلل أبعاد الصور

تأكد أن كل صورة تصرّح بأبعادها ونسخها المتجاوبة، وقارن اختيارياً الحجم الفعلي للملف بالحجم المعروض في الصفحة.

كود HTML المصدر

يعمل داخل متصفحك. لا يُرسل أي شيء تكتبه إلى خوادمنا.

الخصوصية والتكلفة

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

كيف تعمل الأداة

الصق كود HTML لصفحتك؛ تُقرأ عناصر <img> داخل متصفحك.
تشير الأداة إلى غياب width وheight والقيم غير الرقمية وsrcset دون sizes وغياب srcset والصيغ المكتشفة (بما فيها <picture>).
اختيارياً: اضغط «تحميل الصور وقياسها». يحمّل متصفحك أول N صورة (20 افتراضياً و50 كحد أقصى) ليقرأ حجمها الطبيعي ويقارنه بالسمات.
تُعلَّم الصور الأكبر من اللازم بأكثر من الضعف أو الممطوطة أو ذات النسبة الخاطئة، ويمكنك تصدير كل شيء بصيغة CSV.

مثال

أربع صور: hero.jpg (1200×600) لها srcset بواصفات w دون sizes؛ وproduct.webp بلا width ولا height ولا srcset؛ وlogo.svg (120×32) سليمة؛ وbanner.jpg داخل <picture> بمصدر AVIF وسمة sizes. النتيجة: 3 من 4 صور تصرّح بأبعادها (75%)، وsrcset واحد دون sizes، وصورتان بـ srcset أو <picture>.

ماذا تعني النتيجة

دون width وheight (أو aspect-ratio) لا يستطيع المتصفح حجز المساحة قبل وصول الملف، فتقفز الصفحة ويسوء مؤشر CLS. ولا يمكن قياس الحجم الطبيعي إلا داخل المتصفح؛ وقاعدة «أكثر من ضعفين» تراعي الشاشات عالية الكثافة وهي اصطلاح خاص بهذه الأداة. أما الأحجام المحددة في ملف CSS خارجي فلا تظهر من HTML وحده.

مشكلات شائعة تساعد هذه الأداة على حلها

صور بلا أبعاد تدفع المحتوى أثناء التحميل وتضر بمؤشر CLS.
srcset بواصفات w دون سمة sizes، فيفترض المتصفح عرضاً يساوي 100vw.
صور بعرض 4000 بكسل تُحمَّل لتُعرض بعرض 400 بكسل، خصوصاً على الهاتف.
قيم بالنسبة المئوية أو «auto» في السمات، وهذه لا تحجز شيئاً.

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

لماذا width وheight ما دام CSS يتحكم بالحجم؟

يستخدم المتصفح هاتين السمتين لحساب نسبة العرض إلى الارتفاع قبل تحميل الملف. ويستطيع CSS بعد ذلك تغيير الحجم (مثل max-width: 100%; height: auto) دون فقدان المساحة المحجوزة.

هل تُحمَّل الصور عبر خوادمكم؟

لا. متصفحك أنت يحمّل الصور من خوادمها كما في الصفحة الأصلية. بعض المضيفين يمنعون الوصول من مواقع أخرى، فتظهر الصورة بعبارة «تعذّر التحميل».

لماذا يُقبل ملف بضعف الحجم؟

على الشاشات عالية الكثافة تبدو صورة معروضة بعرض 300 بكسل حادة بملف عرضه نحو 600 بكسل. وما فوق ذلك تعتبر الأداة أن بكسلات تُحمَّل بلا فائدة.

متى أستخدم srcset؟

حين يزيد عرض الصورة عن نحو 300 بكسل وتُقدَّم لشاشات متنوعة. يتيح srcset للمتصفح اختيار النسخة الأنسب، وتخبره sizes بالعرض الذي ستشغله الصورة.