كيفية تحسين الصور للمواقع الإلكترونية
الصور عادة ما تشكل معظم وزن الصفحة. خمسة قرارات تصلح معظمها.
تم التحديث ١ سبتمبر ٢٠٢٦
تعد الصور أكبر مساهم في وزن الصفحة في معظم المواقع، وعنصر Largest Contentful Paint هو صورة في غالبية الصفحات. تحسينها هو العمل الأكثر فعالية لتحسين الأداء المتاح، ومعظمه عبارة عن قرارات بدلاً من أدوات.
هذا هو الترتيب الذي يهم، من أكبر تأثير إلى أصغر تأثير.
الخطوات
- 1
1. قدم الأبعاد الصحيحة
قم بقياس أكبر عرض CSS تشغله الصورة وقم بالتصدير بحوالي ضعف ذلك للشاشات عالية الكثافة. يحتاج بطل بحجم 1200 بكسل CSS إلى مصدر 2400 بكسل، وليس صورة كاميرا أصلية بحجم 6000 بكسل. هذه الخطوة الواحدة عادة ما تتفوق على كل شيء آخر مجتمعًا.
- 2
2. استخدم WebP، مع AVIF حيثما أمكن
WebP أصغر بنسبة 25-35% من JPEG بنفس الجودة المدعومة في كل مكان. AVIF يذهب أبعد من ذلك ولكنه يرمز بشكل أبطأ. احتفظ بنسخة احتياطية من JPEG إذا كنت بحاجة إلى دعم العملاء القدامى جدًا.
- 3
3. اضبط الجودة حسب المحتوى، وليس حسب العادة
75-85 للصور الفوتوغرافية. أعلى للرسومات ذات الحواف الحادة، حيث تكون عيوب الضغط أكثر وضوحًا. تحقق من النتيجة بحجم العرض الحقيقي.
- 4
4. قم دائمًا بتعيين العرض والارتفاع
تسمح الأبعاد الصريحة للمتصفح بحجز المساحة قبل تحميل الصورة، مما يمنع تحول التخطيط. هذا إصلاح لـ Cumulative Layout Shift لا يكلف شيئًا.
- 5
5. التحميل الكسول أسفل الطية، وليس فوقها أبدًا
أضف loading="lazy" إلى الصور الموجودة في الجزء السفلي من الصفحة. لا تقم بتحميل صورة LCP الخاصة بك ببطء - فهذا يؤخر بالضبط ما يتم قياسه.
تجرد البيانات الوصفية عند التصدير
تضيف ملفات تعريف الألوان المضمنة و EXIF وزنًا دون أي فائدة عرض على الويب.
استخدم SVG للشعارات والأيقونات
عادةً ما يكون الشعار المتجه بضعة كيلوبايتات ويظل حادًا في كل حجم وكثافة.