مولّد صور بديلة

كيف تعمل

المعاينة ليست محاكاة لصورتك، بل هي الصورة نفسها: عنصر كانفاس بأبعادك الدقيقة بالبكسل، يُملأ ويُكتب عليه عبر واجهة الرسم ثنائية الأبعاد، ثم يُرمَّز مباشرة إلى PNG أو JPG أو WebP باستخدام canvas.toBlob. يتناسب حجم خط التسمية مع الضلع الأقصر (حوالي ثُمنه، بحد أدنى 12 بكسل)، لذا يبقى النص متناسبًا سواء كنت تولّد صورة مصغرة بحجم 64 بكسل أو لافتة بحجم 4000 بكسل. في وضع الصورة، تُلائم الصورة المرفوعة الإطار بطريقة "cover"، تُكبَّر لتملأ المساحة وتُقتَص من المنتصف تمامًا كما يفعل object-fit: cover في CSS، وتحصل التسمية على خلفية داكنة شبه شفافة لتبقى واضحة فوق صورة مزدحمة بالتفاصيل.

إعادة الرسم متزامنة مع كل ضغطة مفتاح؛ فقط ترميز البلوب الأثقل يتأخر قليلًا خلفها، ولهذا تتأخر قراءة الحجم عن المعاينة بلحظة. أمر يستحق التخطيط له: العناصر النائبة أحادية اللون تُضغَط بكفاءة مذهلة. غالبًا ما يكون ملف PNG صلب بحجم 4000×4000 أقل من 40 كيلوبايت، لأن خوارزمية DEFLATE تُسطِّح الصفوف المتطابقة إلى شبه لا شيء. هذا رائع للنماذج السريعة، لكنه مضلِّل إذا كنت تختبر أداء التحميل، لأن صورة حقيقية بهذا الحجم ستكون أثقل بمئة مرة. للحصول على وزن صادق، استخدم وضع خلفية الصورة، أو ادمج هذه الأداة مع مولّد ملفات الاختبار لتوسيع الأصول إلى حجم بايت واقعي.

يحدث الرسم والترميز والتنزيل كله داخل هذا التبويب، بما في ذلك أي صورة تُسقطها، والتي تُقرأ عبر رابط كائن محلي ولا تغادر الذاكرة أبدًا. افتح أدوات المطوّر وراقب تبويب الشبكة أثناء التوليد: لن يحمل أي طلب صورتك.