🗜️
← العودة للأدلة

كيفية تحسين الصور لأداء الويب

· وسوم: image-optimization, web-performance, core-web-vitals, lcp, page-speed, seo

كيفية تحسين الصور لأداء الويب

تمثل الصور 50 إلى 60 بالمائة من إجمالي البايتات المحملة لصفحة ويب نموذجية. كل صورة غير محسّنة تضيف ثوانٍ إلى وقت التحميل، وتزيد من معدل الارتداد، وتضر بترتيب محرك البحث الخاص بك. تقيس مقاييس Core Web Vitals من Google — وتحديدًا Largest Contentful Paint (LCP) — أداء تحميل الصور بشكل مباشر، مما يجعل تحسين الصور أحد أكثر التغييرات تأثيرًا التي يمكنك إجراؤها على موقعك الإلكتروني.

يغطي هذا الدليل استراتيجية كاملة لتحسين الصور، من أساسيات الضغط إلى تقنيات التسليم المتقدمة.

1. ضغط كل صورة قبل النشر

لا تقم أبدًا برفع صورة خام مباشرة من الكاميرا أو الهاتف أو أداة التصميم. يجب أن يكون الضغط هو الخطوة الأولى في سير عمل النشر الخاص بك.

المبادئ الأساسية:

  • تتحمل الصور الفوتوغرافية الضغط المفقود القوي. ابدأ بالجودة 80 لـ JPEG و WebP، ثم اضبط للأسفل إذا تطلبت أهداف حجم الملف ذلك.
  • تستفيد لقطات الشاشة والشعارات والرسومات من الضغط غير المفقود. يحافظ PNG و WebP غير المفقود على الحواف الحادة والنصوص التي قد يشوهها الضغط المفقود.
  • يقدم AVIF أفضل نسب ضغط ولكنه يتطلب وقت ترميز أطول. استخدمه للصور التي يتم تنزيلها بشكل متكرر وتحديثها نادرًا.
  • اضغط في التنسيق الأصلي لتجنب فقدان الجودة الناتج عن تحويلات التنسيق غير الضرورية.

التوفير المتوقع:

يقلل سير العمل النموذجي الذي يضغط الصور قبل الرفع من إجمالي وزن الصور بنسبة 40 إلى 80 بالمائة مع أقل فقدان ملحوظ في الجودة.

2. تقديم الأبعاد الصحيحة

تقديم صورة بعرض 4000 بكسل داخل حاوية بعرض 300 بكسل هو الخطأ الأكثر شيوعًا في الأداء على الويب. يقوم المتصفح بتنزيل كل الـ 4000 بكسل ثم تصغيرها، مما يهدر النطاق الترددي والذاكرة.

إنشاء متغيرات متعددة الأحجام:

  • عرض 320 إلى 480 بكسل لشاشات الهاتف المحمول
  • عرض 768 إلى 1024 بكسل للأجهزة اللوحية
  • عرض 1200 إلى 1920 بكسل لشاشات سطح المكتب
  • عرض 2560 بكسل لشاشات retina عالية الكثافة (2x)

طابق أكبر متغير مع أقصى عرض سيتم عرض الصورة به في تخطيطك، مضروبًا في 2 للشاشات عالية DPI.

3. استخدام الصور المتجاوبة مع Srcset

تخبر سمات srcset و sizes في HTML المتصفح بحجم الصورة الذي يجب تنزيله بناءً على عرض منفذ العرض للمستخدم ونسبة بكسل الجهاز.

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1200.jpg 1200w,
    photo-1600.jpg 1600w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Descriptive text for accessibility and SEO"
/>

يمكن لهذا النمط البسيط وحده تقليل النطاق الترددي للصور بنسبة 40 إلى 60 بالمائة على أجهزة الهاتف المحمول دون أي فرق ملحوظ في الجودة.

4. التحسين لأكبر رسم محتوى (LCP)

يقيس LCP الوقت الذي يستغرقه أكبر عنصر مرئي — عادةً صورة الهيرو — ليتم عرضه. تعتبر Google أن LCP البالغ 2.5 ثانية أو أقل جيد.

لتحسين LCP للصور:

  • قم بالتحميل المسبق لصورة الهيرو حتى يكتشفها المتصفح مبكرًا. أضف <link rel="preload" as="image" href="hero.webp"> إلى رأس المستند.
  • اضغط صورة الهيرو بقوة — فهي عادةً أول وأكبر أصل يقوم المتصفح بتنزيله.
  • قدم WebP أو AVIF لصورة الهيرو مع بديل JPEG.
  • قم بتحجيم صورة الهيرو بشكل صحيح. لا تقدم صورة بعرض 4000 بكسل في فتحة هيرو بعرض 1200 بكسل.
  • لا تقم بالتحميل الكسول لصورة الهيرو أو أي صورة فوق الطية. يؤخر التحميل الكسول التنزيل، مما يضر بـ LCP.

5. تمكين التحميل الكسول للصور أسفل الطية

الصور غير المرئية على الشاشة الأولية لا تحتاج إلى التحميل فورًا. تخبر سمة loading="lazy" المتصفح بتأجيل تحميل الصورة حتى تقترب من دخول منفذ العرض.

<img src="gallery-photo.jpg" loading="lazy" alt="Gallery image" />

يقلل التحميل الكسول من وزن الصفحة الأولي بنسبة 30 إلى 50 بالمائة على الصفحات الغنية بالصور. عند دمجه مع الضغط، يكون التأثير تحويليًا.

6. إزالة البيانات الوصفية للصور

بيانات EXIF — إعدادات الكاميرا، إحداثيات GPS، الطوابع الزمنية — تضيف بايتات غير ضرورية لكل صورة. إزالة البيانات الوصفية توفر عادةً 5 إلى 15 بالمائة من حجم الملف بدون أي تغيير مرئي. اجعل إزالة البيانات الوصفية خطوة قياسية في سير عمل الضغط الخاص بك.

7. استخدام شبكة توصيل المحتوى (CDN)

توزع CDN صورك عبر خوادم حول العالم، مما يقلل المسافة الفعلية بين المستخدم والصورة. هذا يحسن Time to First Byte لطلبات الصور.

تقدم بعض شبكات CDN أيضًا تحويل الصور الفوري:

  • التفاوض التلقائي على التنسيق (تقديم WebP أو AVIF عند الدعم)
  • تغيير الحجم الديناميكي بناءً على الجهاز ومنفذ العرض
  • تعديلات الضغط في الوقت الفعلي

إذا لم تكن CDN المخصصة خيارًا، استخدم على الأقل HTTP/2 أو HTTP/3 للسماح بتنزيلات متعددة للصور في اتصال واحد.

8. مراعاة أداء فك ترميز الصور

الصور الكبيرة لا تستغرق وقتًا في التنزيل فقط ولكن أيضًا في فك الترميز. يجب على المتصفح فك ضغط بيانات JPEG أو PNG أو WebP أو AVIF قبل عرضها. يتم فك ترميز JPEG و WebP بسرعة على معظم الأجهزة، بينما فك ترميز AVIF أكثر تكلفة حسابيًا — وهو اعتبار للأجهزة المحمولة منخفضة المواصفات.

استخدم سمة decoding="async" على الصور غير الحرجة للسماح للمتصفح بفك ترميزها دون حظر المحتوى الآخر:

<img src="photo.jpg" decoding="async" loading="lazy" alt="Description" />

بناء سير عمل التحسين الخاص بك

يبدو خط أنابيب تحسين الصور الشامل كما يلي:

  1. ضغط الصور في تنسيقها الأصلي باستخدام أداة مناسبة للجودة.
  2. إزالة البيانات الوصفية أثناء الضغط.
  3. تغيير الحجم إلى أبعاد العرض المطلوبة، وإنشاء متغيرات متعددة.
  4. تنفيذ srcset و sizes في قوالب HTML الخاصة بك.
  5. التحميل المسبق لصورة الهيرو، والتحميل الكسول لكل شيء أسفل الطية.
  6. التقديم من CDN للأداء العالمي.
  7. قياس LCP ووزن الصور الإجمالي باستخدام Lighthouse أو PageSpeed Insights.
  8. التكرار على إعدادات الجودة حتى تلبي ميزانية الأداء الخاصة بك.

ابدأ في تحسين صورك اليوم مع ضاغط الصور المجاني عبر الإنترنت. ارفع الصور بصيغة PNG أو JPEG أو WebP أو AVIF ونزّل نسخًا مضغوطة جاهزة للإنتاج — بدون تحويل التنسيق، وبدون تنازلات في الجودة.