أداء الصور

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

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

حجم الصورة

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

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

قد يؤدي عرض كل شيء بدقة أعلى إلى إنشاء نصوص وصور أصغر بكثير — نصف الحجم السابق ليكون دقيقًا. بدلاً من ذلك، يجب أن تكون الشاشة أصبحت 2 بكسل جهاز. وتُعرف هذه النسبة باسم نسبة وحدات البكسل على الجهاز (DPR). تشير رسالة الأشكال البيانية كان هاتف iPhone 4، والعديد من طُرُز iPhone التي تم إطلاقها بعد ذلك، مُجدَّدًا بمقدار DPR بمقدار 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 على الأجهزة مع معدّل DPR يبلغ 2، و image-1500.jpg على الأجهزة ذات معدّل DPR بمقدار 3.

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

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 وبعرضها الأساسي يبلغ 1,000 بكسل (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 للجهاز كحالة للوسائط. يشير هذا المقياس إلى أي جهاز مزوَّدة بمعدل DPR تزيد على أو يساوي 1.5 سيتم استخدام العنصر <source> الأول. العنصر <source> يخبر المتصفح أنه على الأجهزة ذات إطار العرض الأعرض من 768 بكسل، يتم عرض الصورة المرشحة المحددة بعرض 500 بكسل. على الأجهزة الأصغر، وهذا يشغل عرض إطار العرض بالكامل. من خلال الجمع بين media وsrcset يمكنك التحكم بشكل أدق في الصورة التي تريد استخدامها.

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

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

<picture>
  <source
    media="(min-width: 560px) 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> لاستخدام صور مختلفة للأجهزة العريضة التي تتميز بمعدل DPR المرتفع:

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

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

<picture>
  <source
    media="(min-width: 560px)"
    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، حتى على الأجهزة التي لديها معدّل حماية DPR يبلغ 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. على YouTube. إذا لم يكن أي من هذين الشرطين صحيحًا، فإن صورة JPEG ستكون

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

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

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

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

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

decoding

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

عروض توضيحية للصور

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

المقالة التالية: أداء الفيديو

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