صورة رئيسية واحدة غير مُحسّنة يمكن أن تزن أكثر من HTML وCSS وJavaScript لصفحة الويب بأكملها مجتمعة. تشكل الصور نحو 50% من إجمالي البايتات لصفحة ويب عادية، مما يجعلها أكبر رافعة لتحسين الأداء. ومع ذلك، يظل تحسين الصور من أكثر جوانب تطوير الويب وإنشاء المحتوى سوء فهم.
التأثير يتجاوز سرعة التحميل بكثير. حجم الصور يؤثر على ترتيبك في البحث وفاتورة الاستضافة وباقات بيانات المستخدمين وحتى معدلات التحويل.
اتصال الأداء: Core Web Vitals وLCP
Core Web Vitals من Google هي مجموعة مقاييس تؤثر مباشرة على ترتيب البحث. من بينها، أكبر رسم للمحتوى (LCP) يقيس المدة التي يستغرقها أكبر عنصر مرئي للظهور على الشاشة. في معظم الحالات، هذا العنصر هو صورة.
تعتبر Google أن LCP أقل من 2.5 ثانية "جيد." بين 2.5 و4 ثوانٍ "يحتاج تحسين." أكثر من 4 ثوانٍ "ضعيف." صورة رئيسية بحجم 3 ميغابايت على اتصال عادي يمكنها بسهولة دفع LCP بعد عتبة 4 ثوانٍ.
العواقب ملموسة:
- انخفاض ترتيب SEO — Core Web Vitals إشارة ترتيب؛ الصفحات البطيئة تفقد مراكز
- معدلات ارتداد أعلى — 53% من زوار الهاتف يغادرون إذا استغرقت الصفحة أكثر من 3 ثوانٍ
- تحويلات أقل — كل ثانية إضافية تقلل التحويلات بنحو 7%
قاعدة الـ 100 كيلوبايت لصور المحتوى على صفحة ويب، استهدف أقل من 100 كيلوبايت لكل صورة. للصور الرئيسية بعرض الصفحة، ابقَ تحت 200 كيلوبايت. هذه الأهداف قابلة للتحقيق مع الصيغ الحديثة والضغط المناسب بدون أي فقدان جودة مرئي.
مع فقد مقابل بدون فقد: فهم المقايضة
كل ضغط صور ينقسم إلى فئتين:
الضغط بدون فقد يقلل حجم الملف بإيجاد طرق أكثر كفاءة لترميز نفس البيانات. كل بكسل يُحفظ بدقة. التقليل معتدل — عادةً 10-30%. PNG تستخدم هذا.
الضغط مع فقد يتخلص من معلومات لا تلاحظها العين البشرية على الأرجح. التقليل كبير — عادةً 70-90%. JPEG وWebP (في وضع الفقد) تستخدمان هذا.
الرؤية الحاسمة أن الضغط مع فقد بجودة 80-85% لا يمكن تمييزه بصرياً عن الأصل للصور الفوتوغرافية.
| الطريقة | تقليل الحجم | فقدان الجودة | الأفضل لـ |
|---|---|---|---|
| بدون فقد (PNG) | 10-30% | لا شيء | الشعارات، لقطات الشاشة، الرسوميات النصية |
| مع فقد 85% (JPEG/WebP) | 70-85% | غير محسوس | الصور الفوتوغرافية، الرسوم التوضيحية، الخلفيات |
| مع فقد 60% (JPEG/WebP) | 85-95% | ملحوظ عند التدقيق | الصور المصغرة، الصور الزخرفية |
الصيغة مهمة: نفس الصورة، أحجام مختلفة جذرياً
اختيار صيغة الصورة له تأثير مماثل لمستوى الضغط. صورة فوتوغرافية محفوظة كـ PNG يمكن أن تكون أكبر 5 إلى 10 مرات من نفسها كـ JPEG بجودة 85%.
JPEG يبقى المعيار العالمي للصور الفوتوغرافية. WebP تقدم ملفات أصغر بـ 25-35% من JPEG بنفس الجودة البصرية. AVIF أحدث منافس بضغط أفضل من WebP. PNG الاختيار الصحيح فقط للصور التي تتطلب إعادة إنتاج بكسل دقيقة.
النطاق الترددي والتخزين: التكاليف الخفية
صفحة بصور بحجم 2 ميغابايت تُشاهد 10,000 مرة شهرياً تنقل 20 غيغابايت شهرياً. حسّنها إلى 400 كيلوبايت وتنقل 4 غيغابايت — تقليل 80%.
الصور المتجاوبة ومشكلة الأجهزة
صورة بعرض 1920 بكسل معروضة على شاشة هاتف بعرض 375 بكسل تهدر أكثر من 96% من بكسلاتها. الحل هو الصور المتجاوبة — تقديم أحجام صور مختلفة لأجهزة مختلفة.
التحميل الكسول: لا تحمّل ما ليس مرئياً
الصور أسفل الطية لا تحتاج للتحميل فوراً. التحميل الكسول يؤجل تحميلها حتى يقترب المستخدم بالتمرير. المتصفحات الحديثة تدعم التحميل الكسول الأصلي بخاصية HTML واحدة.
شبكات CDN: تقديم الصور من الحافة
شبكة توصيل المحتوى تخزن نسخاً من صورك على خوادم موزعة حول العالم. زائر في طوكيو يحصل على الصور من خادم قريب بدلاً من خادمك الأصلي في باريس. كثير من CDN الحديثة تقدم أيضاً تحويل الصور أثناء الطلب.
للمزيد من المعلومات
تحسين الصور موضوع تتراكم فيه التحسينات الصغيرة لنتائج كبيرة. إذا أردت تجربة مستويات الضغط ورؤية مقايضة الجودة-مقابل-الحجم، يقدم toolk.io أداة ضغط صور تعالج كل شيء في متصفحك. دروس ضغط الصور والتحويل بين الصيغ متاحة أيضاً.