أداة صغيرة لتحسين صور الموقع: اكتشاف الملفات الثقيلة وبناء تقرير

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

لا تحذف تلقائيًا

النسخة الأولى يجب أن تكون read-only. اعرض اسم الملف وحجمه وأبعاده إن أمكن، واستخدم exit code غير صفري عندما يتجاوز الملف السياسة. بهذا يستطيع CI منع الصور الثقيلة دون أن يفقد أحد ملفًا بالخطأ.

const MAX_BYTES = 350 * 1024;
const report = files.filter(file => file.bytes > MAX_BYTES);
for (const file of report) {
  console.error(`ثقيل: ${file.name} (${file.bytes} bytes)`);
}
process.exitCode = report.length ? 1 : 0;

السياسة تحتاج استثناءات

غلاف hero قد يكون أكبر من icon، وصورة tutorial قد تحتاج دقة أعلى. استخدم مجلدات أو أسماء واضحة، واسمح باستثناء موثق بدل تعطيل الفحص كله. ضع السياسة في ملف config إذا كان الفريق سيعدلها.

اربطه بالمحرر وCI

شغّل الفحص محليًا قبل commit، ثم في GitHub Actions. لا تعتمد على CI وحده؛ الرسالة المبكرة داخل terminal أسرع. اطبع تقريرًا مختصرًا، واحفظ JSON إذا احتاج فريق المحتوى لوحة أو أداة أخرى.

الأداء ليس ضغطًا فقط

راجع أبعاد الصورة، صيغة العرض، lazy loading، وموضعها في الصفحة. أحيانًا تغيير صورة واحدة إلى مقاس صحيح يوفر أكثر من ضغط عشرات الصور بلا فهم.

مراجع رسمية

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