فهم تنسيقات الصور
تشكل الصور الجزء الأكبر من حركة مرور الويب. اختيار التنسيق الخاطئ قد يسبب بطء المواقع. لنتعرف على التنسيقات الأكثر شيوعاً.
1. JPEG (Joint Photographic Experts Group)
JPEG هو التنسيق الأكثر توافقاً للصور الفوتوغرافية. يستخدم ضغطاً فاقداً للجودة لتقليل حجم الملف. لا يدعم الشفافية أو الحركة.
2. PNG (Portable Network Graphics)
PNG هو تنسيق غير فاقد للجودة. يدعم الشفافية الكاملة، مما يجعله ممتازاً للشعارات والرسومات التوضيحية.
3. WebP (Google Web Picture)
WebP هو التنسيق الحديث المصمم للويب. يدعم الضغط الفاقد وغير الفاقد والشفافية والحركة، وبأحجام أصغر بنسبة ٢٥-٣٥٪ من JPEG/PNG.
4. SVG (Scalable Vector Graphics)
SVG هو تنسيق متجه يعتمد على معادلات رياضية. يمكن تكبيره إلى ما لا نهاية دون فقدان الجودة، وهو مثالي للشعارات والأيقونات.
5. GIF (Graphics Interchange Format)
GIF هو تنسيق قديم يدعم الرسوم المتحركة البسيطة بـ ٢٥٦ لوناً فقط. يفضل استخدام WebP للرسوم المتحركة الحديثة.
جدول المقارنة
| التنسيق | النوع | الضغط | الشفافية | الحركة | أفضل حالة استخدام |
|---|---|---|---|---|---|
| JPEG | نقطي | فاقد للجودة | ❌ لا | ❌ لا | الصور الفوتوغرافية والمشاهد المعقدة |
| PNG | نقطي | غير فاقد | ✅ نعم | ❌ لا | الشعارات، النصوص، الرسومات الشفافة |
| WebP | نقطي | كلاهما | ✅ نعم | ✅ نعم | عناصر الويب الحديثة بشكل عام |
| SVG | متجه | غير فاقد | ✅ نعم | ✅ نعم | الأيقونات، الشعارات، الرسوم المتجهة |
| GIF | نقطي | غير فاقد | ✅ نعم (1-بت) | ✅ نعم | الصور المتحركة البسيطة (ميمز) |