الصورة تساوي 1000 كلمة، وتلعب الصور جزءًا لا يتجزأ من كل صفحة. لكنها غالبًا ما تمثل أيضًا معظم وحدات البايت التي يتم تنزيلها. باستخدام تصميم الويب سريع الاستجابة، لا يمكن أن تتغير التخطيطات لدينا بناءً على خصائص الجهاز فحسب، ولكن الصور أيضًا.
يعني تصميم الويب سريع الاستجابة أنه لا يمكن أن تتغير التخطيطات بناءً على خصائص الجهاز فحسب، ولكن المحتوى يمكن أن يتغير أيضًا. على سبيل المثال، على الشاشات العالية الدقة (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، ما يسهّل توفير ملفات صور متعددة للخصائص المختلفة للجهاز. وعلى غرار 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 |
منتجان |
| 320 بكسل | 2 | 400.jpg |
مرّتان ونصف |
| 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. كمثال جيد على الصور القابلة للنقر والقابلة للتوسيع موقع الفريق. يشير تراكب اختفاء إلى أن الصورة قابلة للنقر، مما يوفر صورة مكبرة تظهر فيها تفاصيل دقيقة.
تقنيات صور أخرى
الصور المضغوطة
يعرض أسلوب الصور المضغوطة صورة مضغوطة بدرجة مضاعفة للغاية لجميع الأجهزة، مهما كانت الإمكانات الفعلية للجهاز. بناءً على نوع الصورة ومستوى الضغط، قد لا يبدو أنّ جودة الصورة تتغيّر، ولكن حجم الملف ينخفض بشكل كبير.
استبدال صورة 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 وData URIs استعادة صفحة ويب كاملة، بما في ذلك الصور وCSS وJavaScript، من خلال طلب واحد.
الجانب السلبي:
- على الأجهزة الجوّالة، يمكن أن يكون عرض معرّفات الموارد المنتظمة (URI) للبيانات أبطأ بكثير من عرض الصور الواردة من
srcخارجي. - قد تؤدي معرفات الموارد المنتظمة (URI) للبيانات إلى زيادة كبيرة في حجم طلب HTML.
- فهي تضيف تعقيدات إلى الترميز وسير العمل.
- تنسيق URI للبيانات أكبر بكثير من تنسيق ثنائي (يصل إلى 30%)، وبالتالي لا يقلل من إجمالي حجم التنزيل.
- لا يمكن تخزين معرّفات الموارد المنتظمة (URI) للبيانات في ذاكرة التخزين المؤقت، لذا يجب تنزيلها لكل صفحة يتم استخدامها فيها.
- ولا يتم دعمها في الإصدارين 6 و7 من متصفّح IE، كما أنها غير مكتملة في الإصدارين IE8.
- عند استخدام بروتوكول HTTP/2، سيصبح تقليل عدد طلبات مواد العرض أولوية أقل.
كما هو الحال مع جميع الأشياء سريعة الاستجابة، تحتاج إلى اختبار ما يعمل بشكل أفضل. استعن بأدوات المطوّرين لقياس حجم ملف التنزيل وعدد الطلبات وإجمالي وقت الاستجابة. قد تكون معرّفات الموارد المنتظمة (URI) للبيانات مفيدة أحيانًا للصور النقطية، على سبيل المثال، في صفحة رئيسية لا تحتوي إلا على صورة واحدة أو اثنتين من الصور غير المستخدمة في أي مكان آخر. إذا كنت بحاجة إلى تضمين صور متجهات، فإن الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) هي خيار أفضل بكثير.
الصور في CSS
إنّ السمة background في CSS هي أداة فعالة لإضافة صور معقدة إلى العناصر، ما يسهّل إضافة عدة صور والحث على تكرارها والمزيد. عند دمجها مع الاستعلامات عن الوسائط، تصبح خاصية الخلفية أكثر فعالية، ما يتيح تحميل صور مشروطة بناءً على درجة دقة الشاشة وحجم إطار العرض والمزيد.
ملخّص
- استخدِم أفضل صورة تعبّر عن خصائص الشاشة، مع مراعاة حجم الشاشة ودرجة دقة الجهاز وتخطيط الصفحة.
- يمكنك تغيير السمة
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، ما يسهّل توفير ملفات صور متعددة لخصائص الجهاز المختلفة. يتيح ذلك للمتصفح اختيار أفضل صورة وفقًا لخصائص الجهاز، مثلاً باستخدام صورة 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) أو يونيكود للرموز بدلاً من الصور النقطية.
استبدال الرموز البسيطة بيونيكود
تتضمن العديد من الخطوط دعمًا لعدد لا يحصى من الرموز الرسومية بترميز يونيكود، والتي يمكن استخدامها بدلاً من الصور. على عكس الصور، يتم قياس خطوط يونيكود جيدًا وتبدو جيدة بغض النظر عن مدى صغرها أو حجمها الذي تظهر على الشاشة.
بالإضافة إلى مجموعة الأحرف العادية، قد يتضمّن يونيكود رموزًا للأسهم (←) وعوامل التشغيل الرياضية (✓) والأشكال الهندسية (★) وصور التحكّم (▶) والتدوين الموسيقي (♬)، والأحرف اليونانية (O)، وحتى قطع الشطرنج (♞).
ويتم تضمين حرف يونيكود بالطريقة نفسها التي يتم بها تنفيذ الإجراءات المسماة:
&#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"></span>)
or by adding special classes to an <i> 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;
}
ويتميز التجميع بتقليل عدد التنزيلات المطلوبة للحصول على عدة صور، مع مواصلة تمكين التخزين المؤقت.
ننصحك باستخدام طريقة "التحميل الكسول"
يمكن أن يساعد "التحميل الكسول" على تسريع عملية التحميل بشكل ملحوظ على الصفحات الطويلة التي تتضمّن العديد من الصور في الجزء السفلي غير المرئي من الصفحة، وذلك من خلال تحميلها حسب الحاجة أو عند انتهاء تحميل المحتوى الأساسي وعرضه. بالإضافة إلى التحسينات في الأداء، يمكن أن يؤدي استخدام "التحميل الكسول" إلى توفير تجارب تمرير لا نهائي.
يُرجى توخّي الحذر عند إنشاء صفحات تمرير لا نهائي، لأنّه يتم تحميل المحتوى فور ظهوره، لذا قد لا تتمكّن محرّكات البحث من رؤية ذلك المحتوى. بالإضافة إلى ذلك، لا يرى المستخدمون التذييل مطلقًا الذين يبحثون عن المعلومات التي يتوقعون رؤيتها في التذييل، لأنّه يتم دائمًا تحميل المحتوى الجديد.
تجنب الصور تمامًا
أحيانًا لا تكون أفضل صورة على الإطلاق صورة على الإطلاق. استخدِم الإمكانات الأصلية للمتصفّح كلما أمكن ذلك لتوفير الوظيفة نفسها أو وظائف مشابهة. تنشئ المتصفحات عناصر مرئية كانت تتطلب صورًا في السابق. وهذا يعني أنّ المتصفحات لم تعد بحاجة إلى تنزيل ملفات صور منفصلة، وبالتالي منع تحميل الصور ذات الحجم غير المناسب. يمكنك استخدام خطوط يونيكود أو خطوط الأيقونات الخاصة لعرض الأيقونات.
وضع النص في الترميز بدلاً من تضمينه في الصور
حيثما أمكن، يجب أن يكون النص نصًا وليس مضمّنًا في صور. على سبيل المثال، يؤدي استخدام الصور للعناوين أو وضع معلومات الاتصال، مثل أرقام الهواتف أو العناوين مباشرةً في الصور، إلى منع المستخدمين من نسخ المعلومات ولصقها، وتعذُّر الوصول إلى المعلومات بواسطة برامج قراءة الشاشة، ولا تكون مستجيبة. بدلاً من ذلك، ضع النص في الترميز وعند الضرورة استخدم خطوط webfonts لتحقيق النمط الذي تريده.
استخدام CSS بدلاً من الصور
يمكن للمتصفّحات الحديثة استخدام ميزات CSS لإنشاء أنماط كانت تحتوي في السابق على
صور مطلوبة. على سبيل المثال: يمكن إنشاء تدرّجات معقدة باستخدام السمة background، ويمكن إنشاء ظلال باستخدام box-shadow، كما يمكن إضافة زوايا مستديرة باستخدام السمة border-radius.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelrisque Porta ut ut dolor. Nullam tablerat egestas nisl sed sollicitudin. Fusce Placerat، ipsum ac vestibulum Porta، purus Dolor mollis nunch، pharetra vehicula nulla nunch 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>
يُرجى العِلم أنّ استخدام هذه الأساليب يتطلب دورات عرض، ما قد يكون مهمًا على الأجهزة الجوّالة. في حال الإفراط في الاستخدام، ستفقد أي فائدة قد اكتسبتها وقد يعيق الأداء.