# دليل ضغط صور الموقع (Image Optimization Guide)

هذا الدليل يشرح طريقة ضغط الصور الثقيلة **بدون تعديل الملفات الأصلية**.

---

## الفكرة العامة

كثير من ملفات `.svg` في المشروع ليست رسوم فيكتور فقط — فيها صور كبيرة مضمّنة (base64)، وحجمها يصل لعشرات الميجابايت.

الحل المعتمد:

1. نستخرج الصورة من الـ SVG (أو نقرأ JPG/PNG مباشرة)
2. نصغّر الأبعاد لحد مناسب للويب
3. نحوّلها إلى `WebP`
4. نحفظ نسخة جديدة باسم `*-opt.webp`
5. نغيّر المسار في الـ Blade للنسخة الجديدة
6. **الأصل يبقى كما هو** (سهل الرجوع عنه)

---

## السكربت

الملف:

```text
tools/optimize-consumer-images.php
```

تشغيله من جذر المشروع:

```bash
php tools/optimize-consumer-images.php
```

المتطلبات:

- PHP مع امتداد GD
- دعم `imagewebp`

---

## كيف تضيف صورة جديدة للضغط

افتح السكربت وأضف عنصر داخل مصفوفة `$jobs`:

```php
[
    'src' => $root . '/public/img/websiteImages/about-us/Consumer/brand.svg',
    'out' => $root . '/public/img/websiteImages/about-us/Consumer/brand-opt.webp',
    'max' => 1200, // أقصى عرض أو ارتفاع بالبكسل
    'q' => 78,     // جودة WebP (70–82 عادة مناسبة)
],
```

ثم شغّل السكربت مرة أخرى.

### قيم مقترحة لـ `max`

| نوع العرض على الصفحة | `max` مقترح |
|----------------------|-------------|
| صورة كبيرة / هيرو | `1200` – `1400` |
| كرت متوسط | `800` – `1000` |
| صورة صغيرة نسبيًا | `600` – `800` |

---

## بعد تشغيل السكربت: تحديث الـ Blade

مثال:

```blade
{{-- قبل --}}
<img src="{{ asset('img/websiteImages/about-us/Consumer/brand.svg') }}">

{{-- بعد --}}
<img src="{{ asset('img/websiteImages/about-us/Consumer/brand-opt.webp') }}">
```

إذا كانت الصورة داخل `<svg><image ...>`:

```blade
<image
    href="{{ asset('img/websiteImages/about-us/Consumer/consumer-psge-opt.webp') }}"
    xlink:href="{{ asset('img/websiteImages/about-us/Consumer/consumer-psge-opt.webp') }}"
    ...
/>
```

بعد التعديل:

```bash
php artisan view:clear
```

---

## الحفاظ على شكل الصورة (clip / mask)

بعض الأصول الأصلية SVG مقصوصة بشكل خاص. عند التحويل لـ WebP قد تحتاج:

- `clip-path` موجود مسبقًا في CSS (مثل `.clipped-img`)
- أو `border-radius`
- أو `clipPath` SVG خفيف في الصفحة

لا تحذف الـ clip إذا كانت الصورة تعتمد عليه للشكل.

### مثال: `brand.svg`

هذا الملف إطار أفقي `669×562` يقصّ صورة طولية داخله. استخراج الصورة كاملة يغيّر الستايل.

في السكربت استخدم:

```php
'match_svg_frame' => true,
```

وفي CSS:

```css
aspect-ratio: 669 / 562;
object-fit: cover;
border-radius: 20px;
```

---

## ما الذي يجب ضغطه؟

ركّز على الملفات الثقيلة:

- أكبر من ~1 MB
- صور فوتوغرافية داخل SVG
- JPG كبيرة prec عالية

عادة **لا تحتاج** ضغط:

- شعارات صغيرة SVG/PNG خفيفة
- أيقونات

للتحقق من الأحجام بسرعة (PowerShell):

```powershell
Get-ChildItem public\img\websiteImages -Recurse -Include *.svg,*.jpg,*.png,*.webp |
  Where-Object { $_.Length -gt 1MB } |
  Sort-Object Length -Descending |
  Select-Object FullName, @{N='MB';E={[math]::Round($_.Length/1MB,2)}}
```

---

## الحالة الحالية (Consumer page)

تم تطبيق الضغط على:

| الأصل | النسخة المستخدمة |
|--------|-------------------|
| `consumer-psge.svg` | `consumer-psge-opt.webp` |
| `Flour.jpg` | `Flour-opt.webp` |
| `animal-feed.svg` | `animal-feed-opt.webp` |

مرشحة لاحقًا على نفس الصفحة:

- `brand.svg`
- `our-promise-page.svg`

---

## قواعد مهمة

1. **لا تستبدل الملف الأصلي** — دائمًا اكتب `*-opt.webp`
2. غيّر المسار في الـ Blade فقط
3. راجع الشكل والجودة في المتصفح بعد كل صورة
4. إذا النتيجة غير مناسبة: ارجع مسار Blade للأصل فورًا
5. لا ترفع سكربتات مؤقتة أو ملفات `.bak` / `.shrunk-tmp` للمستودع

---

## الرجوع السريع (Rollback)

في الـ Blade أعد المسار للملف الأصلي، مثال:

```blade
<img src="{{ asset('img/websiteImages/about-us/Consumer/Flour.jpg') }}">
```

ثم:

```bash
php artisan view:clear
```

ملفات `*-opt.webp` يمكن حذفها لاحقًا إذا لم تعد مستخدمة.