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

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

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

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` باستخدام `srcset` للأجهزة ذات الكثافة العالية للنقاط في البوصة

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

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

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

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

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

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

ملاحظة: بدأ استخدام العنصر picture في المتصفّحات. على الرغم من أنّها غير متاحة في كل المتصفحات حتى الآن، ننصح باستخدامها بسبب توافقها القوي مع الأنظمة القديمة والاستخدام المحتمل لـ Picturefill polyfill. لمزيد من التفاصيل، يُرجى الاطّلاع على الموقع الإلكتروني ResponsiveImages.org.

استخدِم العنصر 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.67x
‫640 بكسل	3	`1000.jpg`	3.125x
‫1100 بكسل	1	`800.png`	1.45x

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

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

<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 بكسل، تكون الصورة بالعرض الكامل.

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

ي. موقع Crews الإلكتروني مع صورة منتج قابلة للتوسيع — J. موقع Crew الإلكتروني مع صورة منتج قابلة للتوسيع

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

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

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

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

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

جرِّبه

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

التضمين في CSS

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

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

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

في المقابل:

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

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

الصور في CSS

تُعدّ السمة background في 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 لتوفير صور عالية الدقة

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

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

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

جرِّبه

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

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

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

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

ملخّص

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

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

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

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

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

You're a super &#9733;

أنت نجم ★

استبدال الرموز المعقّدة بملفات 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">.

جرِّبه

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

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

تُعدّ خطوط الرموز شائعة الاستخدام ويمكن أن تكون سهلة الاستخدام، ولكنّها تتضمّن بعض العيوب مقارنةً برموز SVG:

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

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;
}

جرِّبه

تتميّز هذه الطريقة بأنّها تقلّل عدد عمليات التنزيل المطلوبة للحصول على صور متعددة، مع إتاحة التخزين المؤقت.

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

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

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

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

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

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

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

استخدام 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>

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

الصور المتجاوبة تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

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

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

ملخّص

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

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

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

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

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

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

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

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

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

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

SVG

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

التضمين في CSS

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

الصور في CSS

ملخّص

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

استخدام image-set لتوفير صور عالية الدقة

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

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

ملخّص

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

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

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

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

ملخّص

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

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

استخدام صور مجمّعة

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

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

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

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

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

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

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