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