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

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

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

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

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

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

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

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

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

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

المشاركة في الدورة التدريبية

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

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

ملخّص

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

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

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

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

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

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

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

تحسّن السمة 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.jpg	‫1x
400 بكسل	2	400.jpg	2x
320 بكسل	2	400.jpg	2.5x
600 بكسل	2	800.jpg	أسرع بـ 2.67 مرة
640 بكسل	3	1000.jpg	أسرع بـ 3,125 مرة
1100 بكسل	1	800.png	أسرع بـ 1,45 مرة

وضع نقاط الإيقاف في الصور المتجاوبة مع مختلف الأجهزة

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

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

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

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

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

التجربة الآن

استبدال صورة JavaScript

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

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

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

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

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

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

SVG

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

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

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

التضمين في CSS

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

تضمين الإيجابيات السلبيات

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

ومن الجوانب السلبية:

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

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

الصور في CSS

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

ملخّص

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

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

بالإضافة إلى تحميل الصورة الصحيحة، يضبطها المتصفّح أيضًا وفقًا لذلك. بعبارة أخرى، يفترض المتصفح أن الصور بمقدار الضعف كبيرًا يصل إلى 1x صورة، ولذلك يتم تصغير الصورة بمقدار الضعف بمقدار 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
  );
}

التجربة الآن

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

ملخّص

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

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

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

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

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

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>).

التجربة الآن

تتوفر المئات من خطوط الرموز المجانية والمدفوعة، بما في ذلك الخطوط رائع، و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;
}

التجربة الآن

وتتمثل ميزة الدمج في تقليل عدد التنزيلات المطلوبة صور متعددة، مع الاستمرار في تمكين التخزين المؤقت.

ننصحك باستخدام طريقة "التحميل الكسول"

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

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

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

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

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

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

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. أماكن جلوس على خشبة بيلنتيسكي Amet augue eu magna scelerisque Porta ut ut dolor. غيستاس نولام sed a sollicitudin. فوسسي موضعي، إبسوم ac vestibulum بورتا، بوروس dolor mollis nunc, pharetra vehicula nulla nunc quis elit. دويس أونر 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>

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