أداء الصور

غالبًا ما تكون الصور الأثقل والأكثر انتشارًا على الويب. نتيجةً لذلك، يمكن أن يؤدي تحسين الصور إلى تحسين الأداء على موقعك الإلكتروني بشكلٍ كبير. في معظم الحالات، يعني تحسين الصور تقليل وقت الشبكة من خلال إرسال عدد أقل من البايتات، ولكن يمكنك أيضًا تحسين عدد البايتات التي يتم إرسالها إلى المستخدم من خلال عرض صور ذات حجم مناسب لجهاز المستخدم.

يمكن إضافة الصور إلى صفحة باستخدام العنصرَين <img> أو <picture>، أو باستخدام السمة background-image في CSS.

حجم الصورة

أول تحسين يمكنك إجراؤه عند استخدام موارد الصور هو عرض الصورة بالحجم الصحيح، وفي هذه الحالة، يشير مصطلح الحجم إلى أبعاد الصورة. مع عدم أخذ أي متغيرات أخرى في الاعتبار، سيكون الحجم الأمثل لصورة معروضة في حاوية بحجم 500 بكسل × 500 بكسل هو 500 بكسل × 500 بكسل. على سبيل المثال، استخدام صورة مربّعة بحجم 1000 بكسل يعني أنّ حجم الصورة أكبر من المطلوب بمرتين.

ومع ذلك، هناك العديد من المتغيرات التي يجب أخذها في الاعتبار عند اختيار حجم الصورة المناسب، ما يجعل مهمة اختيار حجم الصورة المناسب في كل حالة معقدة إلى حد ما. في عام 2010، عندما تم طرح هاتف iPhone 4، كانت دقة الشاشة (640×960) مضاعفة مقارنةً بهاتف iPhone 3 (320×480). ومع ذلك، ظل الحجم الفعلي لشاشة iPhone 4 مماثلاً تقريبًا لحجم شاشة iPhone 3.

ولو عرضنا كل شيء بدقة أعلى، لأصبح حجم النص والصور أصغر بكثير، أي نصف حجمهما السابق تحديدًا. بدلاً من ذلك، تحوّلت وحدة بكسل واحدة إلى وحدتَي بكسل على الجهاز. يُطلق على ذلك نسبة وحدات البكسل على الجهاز (DPR). كانت نسبة وحدات البكسل إلى وحدات البكسل الفعلية في هاتف iPhone 4 والعديد من طُرز iPhone التي تم إصدارها بعده تبلغ 2.

بالرجوع إلى المثال السابق، إذا كان الجهاز يتضمّن نسبة كثافة بكسل تبلغ 2 وتم عرض الصورة في حاوية بحجم 500 بكسل × 500 بكسل، يصبح حجم الصورة المربّعة التي تبلغ 1000 بكسل (المشار إليها باسم الحجم الأصلي) هو الحجم الأمثل. وبالمثل، إذا كان الجهاز يتضمّن نسبة DPR تبلغ 3، سيكون حجم الصورة المربّعة التي تبلغ 1500 بكسل هو الحجم الأمثل.

srcset

يتيح العنصر <img> السمة srcset التي تتيح لك تحديد قائمة بمصادر الصور المحتملة التي يمكن للمتصفّح استخدامها. يجب أن يتضمّن كل مصدر صورة محدّد عنوان URL للصورة، بالإضافة إلى واصف عرض أو كثافة البكسل.

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>

تستخدم مقتطفة HTML السابقة واصف كثافة البكسل لتوجيه المتصفّح إلى استخدام image-500.png على الأجهزة التي تبلغ نسبة وحدات البكسل إلى وحدات العرض فيها 1، وimage-1000.jpg على الأجهزة التي تبلغ نسبة وحدات البكسل إلى وحدات العرض فيها 2، وimage-1500.jpg على الأجهزة التي تبلغ نسبة وحدات البكسل إلى وحدات العرض فيها 3.

مع أنّ كل ما سبق قد يبدو بسيطًا، إلا أنّ نسبة DPR للشاشة ليست الاعتبار الوحيد عند اختيار الصورة المثالية لصفحة معيّنة. تنسيق الصفحة هو عامل آخر يجب أخذه في الاعتبار.

sizes

لا يعمل الحل السابق إلا إذا عرضت الصورة بالحجم نفسه بالبكسل في CSS على جميع منافذ العرض. في كثير من الحالات، يتغيّر تنسيق الصفحة، وبالتالي حجم الحاوية، استنادًا إلى جهاز المستخدم.

تتيح لك السمة sizes تحديد مجموعة من أحجام المصدر، حيث يتألف كل حجم مصدر من شرط وسائط وقيمة. تصف السمة sizes حجم العرض المقصود للصورة بوحدات بكسل CSS. عند دمجه مع واصفات العرض srcset، يمكن للمتصفح اختيار مصدر الصورة الأنسب لجهاز المستخدم.

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
  sizes="(min-width: 768px) 500px, 100vw"
>

في مقتطف HTML السابق، تحدّد السمة srcset قائمة بصور مرشّحة يمكن للمتصفّح الاختيار من بينها، مع الفصل بينها بفواصل. يتألف كل خيار في القائمة من عنوان URL الخاص بالصورة، يليه صيغة تشير إلى العرض الداخلي للصورة. الحجم الأصلي للصورة هو أبعادها. على سبيل المثال، يشير الواصف 1000w إلى أنّ العرض الداخلي للصورة يبلغ 1000 بكسل.

باستخدام هذه المعلومات، يقيّم المتصفّح شرط الوسائط في السمة sizes، ويتم توجيهه في هذه الحالة إلى أنّه إذا تجاوز عرض إطار العرض للجهاز 768 بكسل، يتم عرض الصورة بعرض 500 بكسل. على الأجهزة الأصغر حجمًا، يتم عرض الصورة بحجم 100vw أو بعرض كامل لمنطقة العرض.

يمكن للمتصفّح بعد ذلك دمج هذه المعلومات مع قائمة مصادر الصور srcset للعثور على الصورة المثالية. على سبيل المثال، إذا كان المستخدم يستخدِم جهازًا جوّالاً بعرض شاشة يبلغ 320 بكسل مع نسبة DPR تبلغ 3، سيتم عرض الصورة بدقة 320 CSS pixels x 3 DPR = 960 device pixels. في هذا المثال، ستكون الصورة الأقرب من حيث الحجم هي image-1000.jpg التي يبلغ عرضها الأصلي 1000 بكسل (1000w).

تنسيقات الملفات

تتيح المتصفّحات استخدام عدة تنسيقات مختلفة لملفات الصور. قد توفِّر تنسيقات الصور الحديثة، مثل WebP وAVIF، ضغطًا أفضل من تنسيق PNG أو JPEG، ما يؤدي إلى تقليل حجم ملف الصورة وبالتالي تقليل الوقت المستغرَق في تنزيلها. من خلال عرض الصور بتنسيقات حديثة، يمكنك تقليل وقت تحميل الموارد، ما قد يؤدي إلى انخفاض سرعة عرض أكبر محتوى مرئي (LCP).

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

تنسيق AVIF هو تنسيق صور أحدث، وعلى الرغم من أنّه لا يتوافق مع عدد كبير من المتصفحات مثل WebP، إلا أنّه متوافق مع عدد معقول من المتصفحات. يتوافق تنسيق AVIF مع الضغط مع فقدان البيانات والضغط بدون فقدان البيانات، وقد أظهرت الاختبارات توفيرًا أكبر من% 50 مقارنةً بتنسيق JPEG في بعض الحالات. يتيح تنسيق AVIF أيضًا ميزتَي نطاق الألوان الواسع (WCG) والنطاق العالي الديناميكية (HDR).

الضغط

في ما يتعلّق بالصور، هناك نوعان من الضغط:

  1. الضغط مع فقدان البيانات
  2. الضغط بدون فقدان البيانات

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

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

يمكنك ضغط صورك باستخدام Squoosh أو ImageOptim أو إحدى خدمات تحسين الصور. عند الضغط، لا يتوفّر إعداد عام مناسب لجميع الحالات. ويتمثل الأسلوب المقترَح في تجربة مستويات ضغط مختلفة إلى أن تجد حلاً وسطًا جيدًا بين جودة الصورة وحجم الملف. يمكن لبعض خدمات تحسين الصور المتقدّمة تنفيذ ذلك تلقائيًا، ولكن قد لا تكون هذه الخدمات مناسبة لجميع المستخدمين من الناحية المالية.

العنصر <picture>

يمنحك العنصر <picture> مرونة أكبر في تحديد عدة صور مرشّحة:

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image.jpg"
  >
</picture>

عند استخدام عناصر <source> ضمن العنصر <picture>، يمكنك إضافة توافق مع صور AVIF وWebP، ولكن يمكنك الرجوع إلى تنسيقات الصور القديمة الأكثر توافقًا إذا كان المتصفّح لا يتوافق مع التنسيقات الحديثة. باستخدام هذا النهج، يختار المتصفّح أول عنصر <source> محدّد يتطابق مع المعايير. إذا كان بإمكانه عرض الصورة بهذا التنسيق، سيستخدمها. بخلاف ذلك، ينتقل المتصفّح إلى عنصر <source> التالي المحدّد. في مقتطف HTML السابق، تكون الأولوية لتنسيق AVIF على تنسيق WebP، مع الرجوع إلى تنسيق JPEG في حال عدم توفّر أي من تنسيقي AVIF أو WebP.

يتطلّب العنصر <picture> عنصر <img> مدمجًا بداخله. يتم تحديد السمات alt وwidth وheight في <img> ويتم استخدامها بغض النظر عن <source> الذي تم اختياره.

يتيح العنصر <source> أيضًا استخدام السمات media وsrcset وsizes. على غرار المثال <img> السابق، تشير هذه الرموز إلى المتصفّح بشأن الصورة التي يجب اختيارها على إطارات العرض المختلفة.

<picture>
  <source
    media="(min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

تتلقّى السمة media حالة وسائط. في المثال السابق، يتم استخدام نسبة وحدات البكسل إلى الكثافة في الجهاز كشرط للوسائط. أي جهاز بنسبة DPR أكبر من أو تساوي 1.5 سيستخدم عنصر <source> الأول. يخبر العنصر <source> المتصفّح بأنّه على الأجهزة التي يكون إطار العرض فيها أعرض من 768 بكسل، يتم عرض الصورة المحدّدة بعرض 500 بكسل. على الأجهزة الأصغر حجمًا، يشغل هذا العنصر عرض إطار العرض بالكامل. من خلال الجمع بين السمتَين media وsrcset، يمكنك التحكّم بشكل أفضل في الصورة التي تريد استخدامها.

يوضّح الجدول التالي ذلك، حيث يتم تقييم عدّة عروض لمنطقة العرض ونسب وحدات البكسل على الجهاز:

عرض إطار العرض (بالبكسل) 1 DPR ‫1.5 DPR 2 DPR 3 DPR
320 500.jpg 500.jpg 500.jpg 1000.jpg
480 500.jpg 500.jpg 1000.jpg 1500.jpg
560 500.jpg 1000.jpg 1000.jpg 1500.jpg
1024 500.jpg 1000.jpg 1000.jpg 1500.jpg
1920 500.jpg 1000.jpg 1000.jpg 1500.jpg

تنزّل الأجهزة التي تبلغ نسبة وحدات البكسل إلى وحدات القياس 1 الصورة image-500.jpg، بما في ذلك معظم مستخدمي أجهزة الكمبيوتر المكتبي الذين يعرضون الصورة بحجم خارجي يبلغ عرضه 500 بكسل. من ناحية أخرى، ينزّل مستخدمو الأجهزة الجوّالة الذين تبلغ نسبة وحدات البكسل إلى الكثافة 3 صورة image-1500.jpgأكبر حجمًا، وهي الصورة نفسها المستخدَمة على أجهزة الكمبيوتر التي تبلغ نسبة وحدات البكسل إلى الكثافة فيها 3.

<picture>
  <source
    media="(min-width: 561px) and (min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <source
    media="(max-width: 560px) and (min-resolution: 1.5x)"
    srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

في هذا المثال، تم تعديل العنصر <picture> ليشمل عنصر <source> إضافيًا لاستخدام صور مختلفة للأجهزة العريضة ذات نسبة كثافة بكسل عالية:

عرض إطار العرض (بالبكسل) 1 DPR ‫1.5 DPR 2 DPR 3 DPR
320 500.jpg 500.jpg 1000-sm.jpg 1000-sm.jpg
480 500.jpg 500.jpg 1000-sm.jpg 1500-sm.jpg
560 500.jpg 1000-sm.jpg 1000-sm.jpg 1500-sm.jpg
1024 500.jpg 1000.jpg 1000.jpg 1500.jpg
1920 500.jpg 1000.jpg 1000.jpg 1500.jpg

باستخدام طلب البحث الإضافي هذا، يمكنك ملاحظة أنّه يتم عرض image-1000-sm.jpg وimage-1500-sm.jpg على إطارات العرض الصغيرة. تتيح لك هذه المعلومات الإضافية ضغط الصور بشكل أكبر، لأنّ تشوّهات الضغط لا تكون واضحة جدًا بهذا الحجم والكثافة، مع الحفاظ أيضًا على جودة الصورة على أجهزة الكمبيوتر.

بدلاً من ذلك، يمكنك تعديل السمتَين srcset وmedia لتجنُّب عرض صور كبيرة على إطارات عرض صغيرة:

<picture>
  <source
    media="(min-width: 561px)"
    srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x"
  >
  <source
    media="(max-width: 560px)"
    srcset="/image-500.jpg 1x, /image-1000.jpg 2x"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

في مقتطف HTML السابق، تمت إزالة واصفات العرض لصالح واصفات نسبة وحدات البكسل على الجهاز. تقتصر الصور المعروضة على جهاز جوّال على /image-500.jpg أو /image-1000.jpg، حتى على الأجهزة التي تبلغ نسبة وحدات البكسل فيها 3.

كيفية إدارة التعقيد

عند العمل مع الصور السريعة الاستجابة، قد تجد نفسك أمام العديد من الاختلافات في الحجم والتنسيقات لكل صورة. في المثال السابق، يتم استخدام صيغ لكل حجم، ولكن يتم استبعاد صيغتَي AVIF وWebP. كم عدد خيارات المنتج التي يجب توفيرها؟ كما هو الحال مع العديد من المشاكل الهندسية، تكون الإجابة عادةً "يعتمد ذلك على الظروف".

على الرغم من أنّ توفير أكبر عدد ممكن من الصيغ قد يبدو خيارًا مغريًا لتقديم أفضل ملاءمة، إلا أنّ كل صيغة إضافية من الصور تتطلّب تكلفة وتؤدي إلى استخدام أقل كفاءة لذاكرة التخزين المؤقت للمتصفّح. باستخدام صيغة واحدة فقط، يتلقّى كل مستخدم الصورة نفسها، لذا يمكن تخزينها مؤقتًا بكفاءة عالية.

من ناحية أخرى، إذا كانت هناك العديد من الصيغ، تتطلّب كل صيغة إدخالاً آخر في ذاكرة التخزين المؤقت. يمكن أن تزيد تكاليف الخادم وقد يتدهور الأداء إذا انتهت صلاحية إدخال ذاكرة التخزين المؤقت الخاص بالصورة المتغيرة، وكان من الضروري استرداد الصورة مرة أخرى من خادم المصدر.

بالإضافة إلى ذلك، يزداد حجم مستند HTML مع كل خيار. وقد تجد نفسك مضطرًا إلى شحن عدة كيلوبايتات من HTML لكل صورة.

عرض الصور استنادًا إلى عنوان الطلب Accept

يُعلم عنوان طلب HTTP Accept الخادم بأنواع المحتوى التي يفهمها متصفح المستخدم. يمكن أن يستخدم الخادم هذه المعلومات لعرض تنسيق الصورة الأنسب بدون إضافة وحدات بايت إضافية إلى ردود HTML.

if (request.headers.accept) {
  if (request.headers.accept.includes('image/avif')) {
    return reply.from('image.avif');
  } else if (request.headers.accept.includes('image/webp')) {
    return reply.from('image.webp');
  }
}

return reply.from('image.jpg');

مقتطف HTML السابق هو نسخة مبسطة من الرمز الذي يمكنك إضافته إلى الخادم الخلفي المستند إلى JavaScript لاختيار تنسيق الصورة الأنسب وعرضه. إذا كان عنوان الطلب Accept يتضمّن image/avif، سيتم عرض صورة AVIF. بخلاف ذلك، إذا كان العنوان Accept يتضمّن image/webp، سيتم عرض صورة WebP. إذا لم يكن أيّ من هذين الشرطين صحيحًا، سيتم عرض صورة JPEG.

يمكنك تعديل الردود استنادًا إلى محتوى عنوان طلب Accept في كل أنواع خوادم الويب تقريبًا. على سبيل المثال، يمكنك إعادة كتابة طلبات الصور على خوادم Apache استنادًا إلى عنوان Accept باستخدام mod_rewrite.

وهذا لا يختلف عن السلوك الذي قد تجده على شبكة توصيل محتوى الصور (CDN). تُعدّ شبكات توصيل المحتوى (CDN) الخاصة بالصور حلولاً ممتازة لتحسين الصور وإرسال التنسيق الأمثل استنادًا إلى جهاز المستخدم والمتصفّح.

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

التحميل الكسول

يمكنك توجيه المتصفّح إلى تحميل الصور بشكل كسول عند ظهورها في إطار العرض باستخدام السمة loading. تشير قيمة السمة lazy إلى أنّ المتصفّح لن ينزّل الصورة إلى أن تصبح في إطار العرض (أو بالقرب منه). يؤدي ذلك إلى توفير النطاق الترددي، ما يتيح للمتصفّح تحديد أولويات الموارد التي يحتاج إليها لعرض المحتوى المهم الذي يظهر حاليًا في إطار العرض.

decoding

تخبر السمة decoding المتصفّح بكيفية فك ترميز الصورة. تشير القيمة async إلى المتصفّح بأنّه يمكن فك ترميز الصورة بشكل غير متزامن، ما قد يؤدي إلى تحسين وقت عرض المحتوى الآخر. تشير القيمة sync إلى أنّ المتصفّح يجب أن يعرض الصورة في الوقت نفسه الذي يعرض فيه المحتوى الآخر. تتيح القيمة التلقائية auto للمتصفّح تحديد الخيار الأنسب للمستخدم.

عروض توضيحية مصوّرة

اختبِر معلوماتك

ما هي تنسيقات الصور التي تتيح الضغط بدون فقدان البيانات؟

ملف GIF
PNG.
‫WebP
‫JPEG
AVIF.

ما هي تنسيقات الصور التي تتيح الضغط مع فقدان البيانات؟

‫JPEG
PNG.
‫WebP
ملف GIF
AVIF.

ماذا يخبر واصف العرض (على سبيل المثال، 1000w) المتصفّح عن صورة صالحة محدّدة في السمة srcset؟

تمثّل هذه السمة العرض الأساسي للصورة، أي أبعاد الصورة نفسها.
تمثّل هذه السمة العرض الخارجي للصورة، أي أبعاد الصورة في التصميم بعد تطبيق الأنماط على الصفحة.

ماذا تخبر السمة sizes المتصفّح عن عنصر <img> الذي تم تطبيقها عليه؟

منطق يحدّد المرشّح المحدّد في srcset الخاص بعنصر <img> الذي يجب تحميله، وذلك بالنظر إلى أبعاد إطار العرض الحالي للمستخدم.
تمثّل هذه السمة العرض الأساسي للصورة التي سيتم تحميلها من السمة srcset الخاصة بالعنصر <img>.

التالي: أداء الفيديو

على الرغم من أنّ الصور قد تكون نوع الوسائط الأكثر شيوعًا على الويب، إلا أنّها ليست النوع الوحيد الذي يجب أخذه في الاعتبار عندما يتعلّق الأمر بالأداء. الفيديو هو نوع آخر شائع من الوسائط المستخدَمة على الويب، وله اعتبارات الأداء الخاصة به. في الوحدة التالية من هذه الدورة التدريبية، يمكنك استكشاف بعض التقنيات المتعلقة بتحسين الفيديوهات وكيفية تحميلها بكفاءة.