1. شجرة سريعة
- متجه / شعار → SVG.
- صورة فوتوغرافية → AVIF (مع WebP/JPEG احتياطي).
- واجهة مع شفافية → PNG (أو WebP lossless).
- أيقونات بسيطة → SVG أو WebP.
2. مقارنة
| الصيغة | مزايا | عيوب |
|---|---|---|
| JPEG | دعم واسع للصور | بدون شفافية |
| PNG | Lossless + شفافية | حجم كبير للصور |
| WebP | أوضاع متعددة + شفافية | قديم يحتاج احتياطي |
| AVIF | ضغط ممتاز | ترميز أبطأ |
| SVG | يتدرج بلا فقد | تعقيد يزيد الحجم |
3. احتياطي
استخدم <picture> بترتيب AVIF ثم WebP ثم JPEG/PNG.
4. أتمتة
- توليد عدة عروض.
- إزالة البيانات الوصفية الزائدة.
- استخدام hash للتخزين المؤقت.
5. أخطاء شائعة
- استخدام PNG للصور.
- SVG غير محسن.
- غياب fallback لـ AVIF.