الصور المتجاوبة

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

Pete LePage

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

الاتجاه الفني

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

الصور المتجاوبة

هل تعلم أن الصور تمثل أكثر من 60٪ من وحدات البايت في المتوسط اللازمة لتحميل صفحة ويب؟

ستتعرّف في هذه الدورة التدريبية على كيفية التعامل مع الصور على الويب الحديث، لكي تبدو رائعة وتكون سريعة التحميل على أي جهاز.

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

هذه دورة تدريبية مجانية تقدّمها منصة Udacity.

الانضمام إلى دورة تدريبية

الصور في التعليقات التوضيحية

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

ملخّص

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

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

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

بما أنّ CSS تسمح للمحتوى بتجاوز حاويته، قد تحتاج إلى استخدام max-width: 100% لمنع تجاوز الصور والمحتوى الآخر. على سبيل المثال:

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

احرص على تقديم أوصاف مفيدة من خلال سمة alt في عناصر img ، إذ تساعد هذه الأوصاف في تسهيل الوصول إلى موقعك الإلكتروني من خلال تقديم سياق لقارئي img الشاشة والتقنيات المساعِدة الأخرى.

تحسين img باستخدام srcset للأجهزة التي تحقق أعلى عدد من النقاط لكل بوصة

تحسِّن السمة srcset سلوك العنصر img، ما يسهّل تقديم ملفات صور متعددة لخصائص الأجهزة المختلفة. على غرار image-set دالة CSS الخاصة بلغة CSS، تسمح دالة srcset للمتصفّح باختيار أفضل صورة استنادًا إلى خصائص الجهاز، على سبيل المثال استخدام صورة بمقدار ضعف على شاشة بمقدار ضعف، وربما في المستقبل، استخدام صورة بمقدار النصف على جهاز بمقدار ضعف عند الاتصال بشبكة ذات عرض نطاق محدود.

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

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

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

الاتجاه الفني في الصور المتجاوبة باستخدام 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")، ويسمح للمتصفّح باختيار الصورة الصحيحة بغض النظر عن حجم نافذة المتصفّح، وذلك استنادًا إلى عرض المتصفّح ونسبة كثافة بكسله على الجهاز. على سبيل المثال، يوضّح الجدول أدناه الصورة التي سيختارها المتصفّح:

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

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

<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. موقع الطاقم. يشير التراكب الذي يختفي إلى أنّه يمكن النقر على الصورة، ما يعرض صورة مكبّرة مع ظهور تفاصيل دقيقة.

تقنيات الصور الأخرى

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

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

التجربة

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

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

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

تضمين الصور: الصور النقطية والمتجهة

هناك طريقتان مختلفتان تمامًا لإنشاء الصور وتخزينها، ويؤثر هذا في كيفية نشر الصور بشكلٍ متجاوب.

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

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

SVG

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

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

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

تتوفر إمكانية استخدام ملفات SVG على الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي، ويمكن استخدام أدوات التحسين لخفض حجم ملفات SVG بشكل كبير. يبدو الشعاران التاليان المضمّنان بتنسيق SVG متطابقَين، ولكن حجم أحدهما يبلغ 3 كيلوبايت تقريبًا والآخر 2 كيلوبايت فقط:

معرّف الموارد المنتظم (URI) للبيانات

توفّر معرّفات URI الخاصة بالبيانات إمكانية تضمين ملف، مثل صورة، من خلال ضبط src لعنصر img كسلسلة Base64 مرمّزة باستخدام التنسيق التالي:

<img src="data:image/svg+xml;base64,[data]">

تظهر بداية رمز شعار HTML5 أعلاه على النحو التالي:

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">

(يبلغ طول النسخة الكاملة أكثر من 5000 حرف).

تتوفّر أداة السحب والإفلات، مثل jpillora.com/base64-encoder، لتحويل الملفات الثنائية، مثل الصور، إلى معرّفات موارد منتظمة للبيانات. تمامًا مثل ملفات SVG، تتوافق عناوين URL الخاصة بالبيانات مع متصفّحات الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي.

التضمين في CSS

يمكن أيضًا تضمين معرّفات الموارد المنتظمة (URI) للبيانات وملفات SVG في CSS، وهو أمر متاح على كلّ من الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي. في ما يلي صورتين متطابقتين تم تنفيذهما كصور خلفية في CSS؛ واحدة لمعرّف الموارد المنتظم (URI) للبيانات والأخرى بتنسيق SVG:

إيجابيات تضمين المحتوى وسلبياته

يمكن أن تكون الرموز البرمجية المضمّنة للصور مطوّلة، خاصةً معرّفات الموارد المنتظمة للبيانات، فلماذا تريد استخدامها؟ لتقليل طلبات HTTP يمكن أن تتيح ملفات SVG ومعرّفات الموارد المنتظمة للبيانات retrieving صفحة ويب بأكملها، بما في ذلك الصور وCSS وJavaScript، باستخدام طلب واحد.

في المقابل:

• على الأجهزة الجوّالة، قد يكون عرض معرّفات URI للبيانات على الأجهزة الجوّالة أبطأ بكثير من الصور من src خارجي.
• يمكن أن تؤدي معرّفات URI الخاصة بالبيانات إلى زيادة حجم طلب HTML بشكل ملحوظ.
• وتؤدي إلى زيادة التعقيد في ترميزك وسير عملك.
• تنسيق Data URI أكبر بكثير من التنسيق الثنائي (ما يصل إلى %30)، وبالتالي لا يقلل من إجمالي حجم التنزيل.
• لا يمكن تخزين معرِّفات الموارد المنتظمة (URI) للبيانات مؤقتًا، لذا يجب تنزيلها لكل صفحة يتم استخدامها عليها.
• فهي غير متاحة في الإصدارين 6 و7 من IE وIE8، فضلاً عن عدم اكتمالها.
• باستخدام HTTP/2، سيصبح خفض عدد طلبات مواد العرض أقل أولوية.

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

الصور في CSS

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

ملخّص

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

استخدام طلبات البحث عن الوسائط لتحميل الصور بشكل مشروط أو توجيه فني

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

على سبيل المثال، في المثال أدناه، يتم تنزيل 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، ما يسهِّل توفير ملفات صور متعددة لخصائص مختلفة للأجهزة. يتيح ذلك للمتصفّح اختيار أفضل صورة استنادًا إلى خصائص الجهاز، على سبيل المثال، استخدام صورة بمقدار ضعف على شاشة بمقدار ضعف، أو صورة بمقدار النصف على جهاز بمقدار الضعف عند الاتصال بشبكة ذات عرض نطاق محدود.

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

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

لا يزال استخدام 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.

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

يمكن أن تنشئ طلبات البحث عن الوسائط قواعد استنادًا إلى نسبة كثافة بكسل الجهاز، ما يتيح تحديد صور مختلفة للعروض التي تبلغ نسبتها 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 كلما أمكن أو أحرف يونيكود في بعض الحالات.

ملخّص

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

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

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

بالإضافة إلى مجموعة الأحرف العادية، قد يتضمّن ترميز Unicode رموزًا للقوسين (←) والعوامل الحسابية (√) والأشكال الهندسية (★) وصور عناصر التحكّم (▶) وعلامات الموسيقى (♬) والرسائل اليونانية (Ω) وحتى قطع الشطرنج (♞).

يتم تضمين حرف unicode بالطريقة نفسها التي يتم بها تضمين الكيانات المُسمّاة: &#XXXX، حيث يمثّل XXXX رقم حرف unicode. على سبيل المثال:

You're a super ★

شكرًا لك ★

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

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

• وهي رسومات موجّهة يمكن تغيير حجمها إلى ما لا نهاية.
• إنّ تأثيرات CSS، مثل اللون والتظليل والشفافية والرسوم المتحركة، هي بسيطة.
• يمكن تضمين صور 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
• قد يكون من الصعب تحديد الموضع المثالي لهاتف Pixel، وذلك حسب ارتفاع السطر وتباعد الأحرف وما إلى ذلك.
• وهي ليست دلالية، وقد يكون من الصعب استخدامها مع برامج قراءة الشاشة أو التكنولوجيا المساعدة الأخرى.
• وفي حال عدم تحديد نطاقها بشكل صحيح، يمكن أن تؤدي إلى حجم ملف كبير لاستخدام مجموعة فرعية صغيرة فقط من الرموز المتاحة.

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 الإضافي وحجم الملف مع الحاجة إلى الرموز. على سبيل المثال، إذا كنت بحاجة إلى عدد قليل من الرموز فقط، قد يكون من الأفضل استخدام صورة أو صورة متحركة.

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

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

ملخّص

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

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

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

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

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

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

اتّبِع الإرشادات التالية عند اختيار التنسيق المناسب:

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

تقليل حجم الملف

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

تتوفّر عدة أدوات لتنفيذ المزيد من الضغط بدون فقدان البيانات على ملفات JPG وPNG بدون أي تأثير في جودة الصورة. بالنسبة إلى JPG، جرِّب jpegtran أو jpegoptim (على نظام التشغيل Linux فقط، وتعمل مع الخيار --strip-all). بالنسبة إلى 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;
}

التجربة الآن

تعود ميزة Spriting بالفائدة على المستخدمين من خلال تقليل عدد عمليات التنزيل المطلوبة للحصول على صور متعدّدة، مع إبقاء ميزة التخزين المؤقت مفعّلة.

استخدام ميزة "التحميل الكسول"

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

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

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

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

وضع النص في الترميز بدلاً من تضمينه في الصور

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

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sitamet augue eu magna scelerisque المنفذa 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>

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