غالبًا ما تكون الصور هي المورد الأكثر استخدامًا والأكثر شيوعًا على الويب. نتيجةً لذلك، يمكن أن يؤدي تحسين الصور إلى تحسين الأداء بشكل كبير على موقعك الإلكتروني. في معظم الحالات، يعني تحسين الصور تقليل وقت الشبكة عن طريق إرسال وحدات بايت أقل، ولكن يمكنك أيضًا تحسين عدد وحدات البايت التي يتم إرسالها إلى المستخدم من خلال عرض الصور ذات الحجم المناسب لجهاز المستخدم.
يمكن إضافة الصور إلى صفحة باستخدام العنصرَين <img> أو <picture> أو سمة CSS background-image.
حجم الصورة
إنّ التحسين الأول الذي يمكنك إجراؤه عند استخدام موارد الصور هو عرض الصورة بالحجم الصحيح، أي في هذه الحالة يشير مصطلح size إلى أبعاد الصورة. وبالنظر إلى عدم وجود متغيرات أخرى، يمكن تحديد حجم الصورة المعروضة في حاوية بحجم 500 × 500 بكسل، وهي 500 × 500 بكسل. على سبيل المثال، يعني استخدام صورة مربعة بحجم 1000 بكسل أنّ حجم الصورة يبلغ ضعف الحجم المطلوب.
ومع ذلك، هناك العديد من المتغيرات التي تدخل في اختيار حجم الصورة المناسب، ما يجعل مهمة اختيار حجم الصورة المناسب في كل حالة معقدة للغاية. في عام 2010، عندما تم إطلاق iPhone 4، كانت دقة الشاشة (640×960) ضعف دقة شاشة iPhone 3 (320×480). ومع ذلك، بقي الحجم الفعلي لشاشة iPhone 4 نفسه تقريبًا مثل iPhone 3.
يؤدي عرض كل شيء بدقة أعلى إلى جعل النصوص والصور أصغر بكثير — نصف حجمها السابق ليكون دقيقًا. بدلاً من ذلك، أصبحت وحدة بكسل واحدة 2 بكسل للجهاز 2. ويُطلَق على ذلك نسبة وحدات البكسل للجهاز (DPR). حصل هاتف iPhone 4 - والعديد من طرز iPhone التي تم إصدارها بعد ذلك - على معدل إعادة تحميل رقمي قدره 2.
بالعودة إلى المثال السابق، إذا كان عدد مرّات الظهور في الجهاز 2 وعُرضت الصورة في حاوية مقاس 500 × 500 بكسل، تكون الصورة المربّعة بقياس 1,000 بكسل (التي يُشار إليها باسم الحجم الأساسي) هي الحجم الأمثل الآن. وبالمثل، إذا كان للجهاز معدل تكراري 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 على الأجهزة التي تتضمّن معدل تكرار عرض بيانات (DPR) بقيمة 1، وimage-1000.jpg على الأجهزة التي تتضمّن معدل تكرار عمودي 2، وimage-1500.jpg على الأجهزة التي تتضمّن عدد DPR 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 بكسل ومعدّل مشاهدة يبلغ 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).
الضغط
إذا كان الأمر يتعلق بالصور، هناك نوعان من الضغط:
يعمل الضغط الخسارة عن طريق تقليل دقة الصور من خلال التحديد الكمي، ويمكن تجاهل معلومات الألوان الإضافية باستخدام الاختزال اللوني. يكون الضغط المفقودة أكثر فعالية في الصور عالية الكثافة التي تحتوي على الكثير من الضوضاء والألوان، عادةً ما تكون الصور أو الصور ذات المحتوى نفسه. ويرجِع ذلك إلى أنّ العناصر التي ينتجها الضغط مع فقدان البيانات لا تُلاحظ على الأرجح في مثل هذه الصور المفصَّلة. ومع ذلك، قد يكون الضغط مع فقدان البيانات أقل فعالية مع الصور التي تحتوي على حواف حادة مثل الرسم الخطي أو التفاصيل الدقيقة المماثلة أو النصوص. يمكن تطبيق الضغط مع فقدان البيانات على الصور بتنسيق 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، يمكنك التحكّم بشكل أفضل في الصورة التي يجب استخدامها.
يتم توضيح ذلك في الجدول التالي، حيث يتم تقييم العديد من قيم عرض إطار العرض ونِسب وحدات بكسل الجهاز:
| عرض إطار العرض (بالبكسل) | بطاقة DPR واحدة | 1.5 دي بي سي | 2 نسختا DPR | 3 دي جي بي |
|---|---|---|---|---|
| 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 |
تنزِّل الأجهزة التي تتضمن نسخة رقمية عمودية واحدة صورة image-500.jpg، بما في ذلك معظم
مستخدمي أجهزة الكمبيوتر المكتبي الذين يعرضون الصورة بحجم خارجي يبلغ عرض 500 بكسل. من ناحية أخرى، يمكن لمستخدمي الأجهزة الجوّالة الذين لديهم عدد معدَّلات النسخ الاحتياطي 3 تنزيل نسخة أكبر من المحتمل أن تكون أكبر من
image-1500.jpg، وهي الصورة نفسها المستخدَمة على أجهزة الكمبيوتر المكتبي مع عدد 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 واحدة | 1.5 دي بي سي | 2 نسختا DPR | 3 دي جي بي |
|---|---|---|---|---|
| 320 | 500.jpg | 500.jpg | 500.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: 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، حتى على الأجهزة التي تحتوي على 3 DPR.
كيفية التعامل مع التعقيدات
عند التعامل مع الصور المتجاوبة مع مختلف الأجهزة، يمكنك العثور على العديد من الأشكال والأشكال المختلفة في الحجم لكل صورة. في المثال السابق، يتم استخدام أشكال مختلفة لكل حجم، ولكن باستثناء 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 للمتصفّح اختيار ما يناسب المستخدم.
عروض توضيحية للصور
اختبِر معلوماتك
ما هي تنسيقات الصور التي تتيح الضغط بدون فقدان البيانات؟
ما هي تنسيقات الصور التي تتيح الضغط لوسي؟
ما الذي يخبره واصف العرض (مثل 1000w) المتصفّح بعنصر مرشّح للصورة المحدّد في سمة srcset؟
ما هي المعلومات التي تُعلم السمة sizes المتصفّح بعنصر <img> الذي تمّ تطبيقها عليه؟
<img> الذي يجب تحميله،
وفقًا لأبعاد إطار العرض الحالي للمستخدم.srcset
srcset للعنصر <img>
المقالة التالية: أداء الفيديو
قد تكون الصور هي نوع الوسائط الأكثر شيوعًا المستخدَم على الويب، إلا أنّها بعيدة كل البعد عن النوع الوحيد الذي عليك أخذه في الاعتبار عندما يتعلق الأمر بالأداء. الفيديو هو نوع شائع آخر من الوسائط المستخدمة على الويب، وله اعتبارات خاصة بالأداء. في الوحدة التالية من هذه الدورة التدريبية، يمكنك استكشاف بعض الأساليب المتعلّقة بتحسين الفيديوهات وكيفية تحميلها بكفاءة.