Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

الصور

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

الصور سريعة الاستجابة

لا يعني تصميم الويب سريع الاستجابة أنه يمكن للتنسيقات فقط التغير بناءً على سمات الجهاز، بل للمحتوى أيضًا. على سبيل المثال، في الشاشات التي تتمتع بدقة عالية (2x)، يلزم توفر رسومات بدقة عالية أيضًا لضمان مستوى الحدة. قد تعمل الصورة التي قيمة عرضها تساوي 50% على نحو جيد فقط عندما يكون عرض المتصفح 800 بكسل، إلا أنه سيكون لها تركة كبيرة على الهاتف الضيق، وستظل مشكلة استهلاك معدل كبير لنقل البيانات قائمة عندما يتم تقليل الحجم ليناسب الشاشات الصغيرة.

الإخراج الفني

مثال على الإخراج الفني

المرات الأخرى التي قد تحتاج الصورة فيها إلى تغيير جذري: تغيير النسب والاقتصاص واستبدال الصورة بالكامل. وفي هذه الحالة، يُشار إلى تغيير الصورة عادة باسم الإخراج الفني. يمكنك الاطلاع على responsiveimages.org/demos/ للحصول على مزيد من الأمثلة.

Responsive Images

Did you know that images account for more than 60% of the bytes on average needed to load a web page?

In this course you will learn how to work with images on the modern web, so that your images look great and load quickly on any device.

Along the way, you will pick up a range of skills and techniques to smoothly integrate responsive images into your development workflow. By the end of the course, you will be developing with images that adapt and respond to different viewport sizes and usage scenarios.

This is a free course offered through Udacity

Take Course

الصور في الترميز

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

TL;DR

  • استخدم الأحجام النسبية مع الصور لمنع تجاوز حدود الحاوية بدون قصد.
  • استخدم العنصر picture إذا كنت تريد تحديد صور مختلفة بناءً على سمات الجهاز (يُعرف ذلك أيضًا باسم الإخراج الفني).
  • استخدم الكلمة الوصفية srcset و x في العنصر img لتوفير تلميحات للمتصفح بشأن أفضل صورة يمكن استخدامها عند الاختيار من بين نسب كثافة مختلفة.

استخدام أحجام نسبية للصور

لا تنس استخدام وحدات نسبية عند تحديد قيم عرض محددة للصور لمنعها من تجاوز حدود إطار العرض بدون قصد. على سبيل المثال، سيؤدي استخدام width: 50%; إلى أن يصبح عرض الصورة 50% من عنصر الاحتواء (وليس إطار العرض أو حجم وحدة البكسل الفعلي).

نظرًا لأن CSS يتيح للمحتوى تجاوز حدود الحاوية، قد يلزم استخدام الحد الأقصى لقيمة العرض: 100% لمنع الصور والمحتوى الآخر من تجاوز الحدود. على سبيل المثال:

img, embed, object, video {
  max-width: 100%;
}

لا تنس توفير كلمات وصفية معبرة عبر السمة alt على عناصر img؛ نظرًا لأن ذلك يساعد في جعل موقعك على الويب أكثر سهولة في الاستخدام من خلال توفير سياق لأجهزة قراءة الشاشة والتقنيات الحساسة الأخرى.

تحسينimg باستخدام srcset للعمل على الأجهزة مرتفعة نسبة DPI

تحسِّن السمة srcset من سلوك العنصر img، مما يسهل توفير عدة ملفات صور لميزات أجهزة مختلفة. وكما هو الحال في image-set وظيفية CSS، الأصلية في CSS، تتيح srcset للمتصفح اختيار أفضل صورة بناءً على ميزات الجهاز، على سبيل المثال باستخدام صورة 2x على شاشة 2x، وربما في المستقبل، صورة 1x على جهاز 2x عند استخدام شبكة معدل نقل بيانات محدودة.

<img src="photo.png" srcset="photo@2x.png 2x" ...>

في المتصفحات التي لا تتوافق مع srcset، يستخدم المتصفح ملف الصورة الافتراضي المحدد في السمة src. ولذلك من الضروري دائمًا تضمين صورة 1x يمكن عرضها على أي جهاز، بغض النظر عن الإمكانيات. وعندما يكون هناك توافق مع srcset، يتم تحليل قائمة الصور/الشروط المفصولة بفواصل قبل تقديم أية طلبات، ولا يتم تنزيل سوى الصورة المناسبة وعرضها.

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

الإخراج الفني في الصور سريعة الاستجابة باستخدام picture

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

مثال على الإخراج الفني

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

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

في المثال الوارد أعلاه، إذا كانت قيمة عرض المتصفح 800 بكسل على الأقل، فسيتم استخدام head.jpg أو head-2x.jpg، بناءً على دقة الجهاز. وإذا كانت قيمة المتصفح بين 450 بكسل و800 بكسل، فسيتم استخدام head-small.jpg أو head-small-2x.jpg بناءً على دقة الجهاز أيضًا. وبالنسبة إلى قيم عرض الشاشة الأقل من 450 بكسل ومدى التوافق مع الإصدارات الأقدم الذي لا يوفر العنصر picture، سيعرض المتصفح العنصر img بدلاً من ذلك، ويجب تضمينه دائمًا.

صور الحجم النسبي

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

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

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

يعرض المثال الموضح أعلاه صورة تحتل نصف قيمة عرض الإطار (sizes=50vw``)، وبناءً على قيمة عرض المتصفح ونسبة وحدات بكسل في الجهاز، يتم السماح للمتصفح باختيار الصورة المناسبة بغض النظر عن حجم نافذة المتصفح إذا كانت كبيرة. على سبيل المثال، يعرض الجدول الوارد أدناه الصورة التي يمكن للمتصفح اختيارها:

عرض المتصفح معدل وحدات بكسل في الجهاز الصورة المستخدمة الدقة الفعالة
400 بكسل 1 200.png 1x
400 بكسل 2 400.png 2x
320بكسل 2 400.png 2.5x
600 بكسل 2 800.png 2.67x
640 بكسل 3 1000.png 3.125x
1100 بكسل 1 1400.png 1.27x

توضيح نقاط الفصل في الصور سريعة الاستجابة

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

<img src="400.png" 
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

تستخدم السمة sizes في المثال السابق عدة استعلامات وسائط لتحديد حجم الصورة. عندما تكون قيمة عرض المتصفح أكبر من 600 بكسل، ستظهر الصورة بنسبة 25% من عرض الإطار، وعندما تتراوح قيمتها بين 500 بكسل و600 بكسل، فستظهر بنسبة 50% من عرض الإطار، أما إذا كانت أقل من 500 بكسل، فستظهر بملء العرض.

تعيين صور المنتج على إمكانية التوسيع

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

موقع J. Crews على الويب مع صورة منتج يمكن توسيعها
موقع J. Crews على الويب مع صورة منتج يمكن توسيعها

يقدم موقع J. Crew على الويب مثالاً معبرًا عن الصور القابلة للنقر والتوسيع. ويشير التراكب القابل للاختفاء إلى أن الصورة قابلة للنقر، مما يوفر صورة قابلة للتكبير مع مظهر تفصيلي جيد.

أساليب عرض الصور الأخرى

الصور المضغوطة

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

انظر المثال

استبدال صور جافا سكريبت

يساعد استبدال صور جافا سكريبت على فحص إمكانيات الجهاز وإنجاز المطلوب. ويمكنك تحديد معدل وحدات بكسل في الجهاز من خلال window.devicePixelRatio، ومعرفة عرض الشاشة وطولها، بل وتنفيذ بعض فحوصات الاتصال على الشبكة من خلال navigator.connection أو إصدار طلب وهمي. بعد جمع كل هذه المعلومات، يمكنك تحديد الصورة المطلوب تحميلها.

إحدى العقبات الكبيرة التي تواجه هذا الأسلوب أن استخدام جافا سكريبت يعني أنك ستؤجل تحميل الصورة حتى انتهاء المحلل المقدم على الأقل. وهذا يعني أن الصور لن تبدأ في التنزيل حتى بعد بدء حدث pageload. علاوة على ذلك، سيتولى المتصفح في الغالب تنزيل كل من صور 1x و2x، مما يؤدي إلى زيادة في وزن الصفحة.

الصور في CSS

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

TL;DR

  • استخدم أفضل صورة مع ميزات العرض، وفكر في حجم الشاشة ودقة الجهاز وتنسيق الصفحة.
  • غير العنصر background-image في CSS للحصول على عرض مرتفع نسبة DPI باستخدام استعلامات الوسائط مع min-resolution و-webkit-min-device-pixel-ratio.
  • استخدم srcset لتوفير صور عالية الدقة بالإضافة إلى صورة 1x في الترميز.
  • فكر جيدًا في تكاليف الأداء عند استخدام تقنيات لاستبدال صورة جافا سكريبت أو عند عرض صور عالية الدقة مضغوطة إلى حد كبير على الأجهزة ذات الدقة الأقل.

استخدام استعلامات الوسائط لتحميل الصور الشرطية أو الإخراج الفني

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

على سبيل المثال، يظهر في المثال الوارد أدناه على الشاشات الصغيرة يتم تنزيل small.png فقط ويتم تطبيقها على المحتوى div، أما الشاشات الكبيرة، فيتم فيها تطبيق background-image: url(body.png) على النص الأساسي وbackground-image: url(large.png) على المحتوى div.

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

استخدام مجموعة صور لتوفير صور عالية الدقة

تحسِّن الوظيفة image-set()في CSS من سلوك الخاصية background، مما يجعل من السهل توفير ملفات صور متعددة لميزات أجهزة مختلفة. وبذلك يتمكن المتصفح من اختيار الصورة الأفضل بناءً على سمات الجهاز، كاستخدام صورة 2x على شاشة 2x أو صورة 1x على جهاز 2x عند استخدام شبكة معدل نقل بيانات محدودة.

background-image: image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

وبالإضافة إلى تحميل الصورة السليمة، سيكون بإمكان المتصفح ضبطها وفقًا لذلك. وبمعنى آخر، يفترض المتصفح أن الصور 2x أكبر بنسبة الضعف من الصور 1x، ولذلك سيضبط الصورة 2x إلى قيمة أقل بمضاعف 2، حتى تظهر الصورة بالحجم نفسه على الصفحة.

لا يزال التوافق مع image-set() أمرًا مستحدثًا ولا يتوفر إلا في Chrome وSafari مع بادئة مقدم الخدمة -webkit. ويجب الاهتمام بتضمين صورة ترجيع عندما لا يكون image-set() متوافقًا، على سبيل المثال:

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x  
  );  
  background-image: image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x  
  );
}

سيؤدي ما تمت الإشارة إليه أعلاه إلى تحميل الأصل المناسب في المتصفحات التي تتوافق مع image-set، والترجيع إلى الأصل 1x خلافًا لذلك. الأمر الخطير الذي يجب الانتباه إليه أنه على الرغم من أن توافق متصفح image-set() يعد منخفضًا، ستحصل معظم المتصفحات على الأصل 1x.

استخدام طلبات بحث الوسائط لتوفير صور عالية الدقة أو إخراج فني

يمكن لاستعلامات الوسائط إنشاء قواعد بناءً على معدل بكسل في الجهاز، مما يتيح تحديد صور مختلفة لشاشات 2x مقارنة بـ 1x.

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
  /* High dpi styles & resources here */
}

يتوافق كل من Chrome وFirefox وOpera مع المعيار (min-resolution: 2dppx)، بينما يتطلب كل من Safari ومتصفح Android أن تكون بنية مقدم الخدمة المثبتة مسبقًا والأقدم بدون وحدة dppx. لا تنس أن هذه الأنماط يتم تحميلها إذا كان الجهاز يتوافق مع استعلام الوسائط، ويجب تحديد أنماط للحالة الأساسية. كما يوفر هذا ميزة التأكد من أنه سيتم عرض شيء ما إذا لم يتوافق المتصفح مع استعلامات وسائط بدقة محددة.

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
}

@media (min-resolution: 2dppx), /* Standard syntax */ 
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */ 
{
  .sample {
    background-size: contain;
    background-image: url(icon2x.png);
  }
}

كما يمكنك استخدام بنية الحد الأدنى لقيمة العرض ليتم عرض الصور البديلة بناءً على حجم إطار العرض. ويتميز هذا الأسلوب بأنه لا يتم تنزيل الصورة إذا لم يتطابق استعلام الوسائط. على سبيل المثال، لا يتم تنزيل bg.png وتطبيقه إلا على body إذا كانت قيمة العرض في المتصفح تساوي 500 بكسل أو تزيد عنها:

@media (min-width: 500px) {
  body {
    background-image: url(bg.png);
  }
}

استخدام SVG مع الرموز

عند إضافة رموز إلى الصفحة، يمكنك استخدام رموز SVG قدر الإمكان أو رموز الترميز الموحد في بعض الحالات.

TL;DR

  • استخدم SVG أو الترميز الموحد مع الرموز بدلاً من الصور النقطية.

استبدال الرموز البسيطة بالترميز الموحد

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

بخلاف دليل الرموز العادي، قد يتضمن الترميز الموحد رموزًا لنماذج أعداد (⅐)، أو صفوف (←)، أو مشغلات رياضية (√)، أو أشكالاً هندسية (★)، أو صور تحكم (▶)، أو أنماط برايل (⠏)، أو علامات موسيقية (♬)، أو أحرفًا يونانية (Ω)، أو قطع شطرنج (♞).

يتم تضمين رمز الترميز الموحد بالطريقة نفسها المستخدمة في الكيانات التي تحمل اسمًا: &#XXXX، حيث يمثل XXXX رقم الترميز الموحد. على سبيل المثال:

You're a super &#9733;

You're a super ★

استبدال الرموز المعقدة بـ SVG

بالنسبة إلى متطلبات الرموز المعقدة، تعد رموز SVG خفيفة الوزن بشكل عام، وسهلة الاستخدام، ويمكن تحديد أنماط لها باستخدام CSS. تتضمن SVG عددًا من الميزات التي تميزها عن الصور النقطية:

  • تعد رسومات متجهية يمكن ضبطها بشكل لا نهائي.
  • تتميز تأثيرات CSS مثل اللون والظلال والشفافية والرسوم المتحركة بالدقة والبساطة.
  • يمكن محاذاة صور SVG في المستند مباشرة.
  • تتميز صور SVG بدلالتها.
  • توفير إمكانية وصول أفضل باستخدام السمات المناسبة.
With SVG icons, you can either add icons using inline SVG, like 
this checkmark:
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink" 
       width="32" height="32" viewBox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
  </svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.

الحذر عند استخدام خطوط الرموز

تتميز خطوط الرموز بأنها شائعة، ويمكن استخدامها بسهولة، إلا أنها تحتوي على عيوب مقارنة برموز SVG.

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

مثال على صفحة تستخدم FontAwesome مع رموز الخط.

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

هناك المئات من خطوط الرموز المجانية ومدفوعة المقابل المتاحة، من بينها Font Awesome وPictos و Glyphicons.

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

تحسين أداء الصور

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

TL;DR

  • احذر الاختيار العشوائي لتنسيق الصورة، واستوعب جيدًا التنسيقات المختلفة المتاحة واستخدم أفضل تنسيق مناسب.
  • ضمِّن أدوات تحسين الصور وضغطها في خطوات العمل لتقليل حجم الملفات.
  • قلل عدد طلبات http من خلال وضع الصور شائعة الاستخدام في نقوش متحركة.
  • جرب تحميل الصور بعد تمريرها في العرض فقط لتحسين وقت التحميل الأول للصور وخفض الوزن الأول للصفحة.

اختيار التنسيق المناسب

هناك نوعان من الصور يجب وضعهما في الاعتبار: الصور المتجهية والصور النقطية. بالنسبة إلى الصور النقطية، يلزمك أيضًا اختيار تنسيق الضغط المناسب، على سبيل المثال: GIF وPNG وJPG.

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

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

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

ويمكنك البدء بهذه الإرشادات عند اختيار التنسيق المناسب:

  • استخدم JPG مع الصور الفوتوغرافية.
  • استخدم SVG مع الصور المتجهية والرسومات الثابتة الملونة مثل الشعارات والرسم الخطي. وإذا لم يكن الرسم المتجهي متاحًا، فجرب استخدام WebP أو PNG.
  • استخدم PNG وليس GIF نظرًا لأن ذلك يوفر مزيدًا من الألوان ونسب ضغط أفضل.
  • بالنسبة إلى الرسوم المتحركة الأطول، جرب استخدام <video> الذي يوفر جودة صور أفضل ويوفر للمستخدم إمكانية التحكم في التشغيل.

خفض حجم الملف

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

وهناك العديد من الأدوات التي يمكن استخدامها، منها ضغط البيانات غير المنقوص على ملفات JPG وPNG، بدون تأثر جودة الصورة. بالنسبة إلى JPG، جرب jpegtran أو jpegoptim (المتاح على نظام التشغيل Linux فقط؛ مع تشغيل الخيار تجريد الكل). بالنسبة إلى PNG جرب OptiPNG أو PNGOUT.

استخدام النقوش المتحركة

يمكن من خلال أسلوب النقوش المتحركة في CSS الجمع بين عدة صور في صورة تُعرف باسم ورقة نقوش متحركة. وبعد ذلك يمكن استخدام الصور الفردية من خلال تحديد صورة الخلفية للعنصر (ورقة النقوش المتحركة) بالإضافة إلى تعويض لعرض الجزء المناسب.

استخدام ورقة النقوش المتحركة في المثال

.sprite-sheet {
  background-image: url(sprite-sheet.png);
  width: 40px;
  height: 25px;
}

.google-logo {
  width: 125px;
  height: 45px;
  background-position: -190px -170px;
}

.gmail {
  background-position: -150px -210px; 
}

.maps {
  height: 40px;
  background-position: -120px -165px;
}

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

تجربة التحميل الكسول

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

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

تجنب الصور تمامًا

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

وضع النصوص في ترميز، وليست مضمنة في صور

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

استخدام CSS لاستبدال الصور

يمكن للمتصفحات الحديثة استخدام ميزات CSS لإنشاء أنماط كانت من قبل تتطلب صورًا. على سبيل المثال، يمكن إنشاء التدرجات المعقدة باستخدام العنصر background، كما يمكن إنشاء الظلال باستخدام box-shadow، ويمكن إضافة الجوانب المستديرة باستخدام العنصرborder-radius.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.

<style>
  div#noImage {
    color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
  }
</style>

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