الصور

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

الطريقة الرئيسية لتضمين الصور هي العلامة <img> مع السمة src التي تشير إلى مورد صورة والسمة alt التي تصف الصورة.

<img src="images/eve.png" alt="Eve">

توفِّر السمة srcset على <img> والعنصر <picture> طريقة لتضمين مصادر صور متعدّدة من خلال استعلامات عن الوسائط مرتبطة، ولكل منها مصدر صورة احتياطية، ما يتيح عرض ملف الصورة الأنسب بناءً على درجة دقة الجهاز وإمكانات المتصفّح وحجم إطار العرض. تتيح السمة srcset تقديم نُسخ متعددة من الصور بناءً على درجة الدقة، بالإضافة إلى السمة sizes وحجم إطار عرض المتصفح.

<img src="images/eve.png" alt="Eve"
  srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
  sizes="(max-width: 800px) 400px, 800px" />

يمكن إجراء ذلك أيضًا باستخدام العنصر <picture> بالإضافة إلى العناصر الثانوية <source>، الذي يستخدم <img> كمصدر تلقائي.

<picture>
  <source src="images/eve.png" media="(max-width: 800px)" />
  <source src="images/eve-xl.jpg" />
  <img src="images/eve.png" alt="Eve" />
</picture>

بالإضافة إلى طرق الصور المتجاوبة المضمّنة في HTML، تتيح لغة HTML أيضًا تحسين أداء عرض الصور من خلال سمات مختلفة. يمكن أن تتضمّن العلامة <img>، وبالتالي أزرار الإرسال الرسومية <input type="image">، السمتَين height وwidth لضبط نسبة العرض إلى الارتفاع للصورة من أجل الحدّ من متغيّرات تصميم المحتوى. تتيح السمة lazy التحميل الكسول.

يتيح HTML أيضًا تضمين صور SVG باستخدام <svg> مباشرةً، على الرغم من أنّه يمكن تضمين صور SVG ذات الامتداد .svg (أو كـ data-uri) باستخدام العنصر <img>.

ويجب أن تتضمّن كل صورة المقدّمة على الأقلّ السمتَين src وalt.

الملف src هو مسار الصورة المضمّنة واسم ملفها. تُستخدَم السمة src لتوفير عنوان URL للصورة. بعد ذلك، يجلب المتصفّح مادة العرض ويعرضها في الصفحة. هذه السمة مطلوبة في <img>، فبدونها لن تحتاج إلى عرض أي محتوى.

توفّر السمة alt نصًا بديلاً للصورة، ما يوفّر وصفًا للصورة لمن لا يستطيعون رؤية الشاشة (مثل محركات البحث والتقنيات المساعدة، وحتى Alexa وSiri و"مساعد Google")، وقد يعرضه المتصفّح في حال عدم تحميل الصورة. بالإضافة إلى المستخدمين الذين لديهم شبكات بطيئة أو معدّل نقل بيانات محدود، يُعدّ النص alt مفيدًا للغاية في الرسائل الإلكترونية التي تستخدم HTML، لأنّ العديد من المستخدمين يحظرون الصور في تطبيقات البريد الإلكتروني الخاصة بهم.

<img src="path/filename" alt="descriptive text" />

إذا كانت الصورة من نوع ملف SVG، يمكنك أيضًا تضمين role="img"، وهو أمر ضروري بسبب أخطاء VoiceOver bugs.

<img src="switch.svg" alt="light switch" role="img" />

كتابة أوصاف فعّالة للصور بتنسيق alt

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

لكتابة نص بديل فعال، تخيل أنك تقرأ الصفحة بأكملها لشخص لا يمكنه رؤيتها. وباستخدام العنصر <img> الدلالي، يتم إعلام مستخدمي برامج قراءة الشاشة وبرامج التتبُّع بأنّ العنصر عبارة عن صورة. يجب تضمين "هذه صورة/لقطة شاشة/صورة لـ" في alt. لا يحتاج المستخدم إلى معرفة أن هناك صورة، لكنه يحتاج إلى معرفة المعلومات التي تنقلها الصورة.

في العادة، لا يمكنك قول: "هذه صورة مشوشة لكلب يرتدي قبعة حمراء". بدلاً من ذلك، يمكنك نقل ما تنقله الصورة في ما يتعلق بسياق بقية المستند؛ وسيتغير ما تنقله اعتمادًا على السياق ومحتوى النص المحيط.

على سبيل المثال، سيتم وصف صورة كلب بطرق مختلفة، بناءً على السياق. إذا كانت Fluffy صورة رمزية بجانب مراجعة عن طعام Yuckymeat للكلاب، فإن alt="Fluffy" كافية.

إذا كانت الصورة جزءًا من صفحة تبني فلافي على موقع ويب لمأوى الحيوانات، فإن الجمهور المستهدف هو الكلب المحتمل. يجب أن يصف النص المعلومات المنقولة في الصورة ذات الصلة بالمستخدِم والتي لا تتكرّر في النص المحيط بها. ومن المناسب استخدام وصف طويل، مثل alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth". يتضمن نص صفحة التبني بشكل عام نوع الحيوان الأليف الذي يتم تبنيه وسلاته وعمره وجنسه، لذلك لا يلزم تكراره في النص البديل. لكن السيرة الذاتية المكتوبة للكلب ربما لا تتضمن طول الشعر أو الألوان أو تفضيلات اللعبة. لاحظ أننا لم نصف الصورة: لا يحتاج مالك الكلب المحتمل إلى معرفة ما إذا كان الكلب في الداخل أو في الهواء الطلق، أو أن لديه طوق أحمر ومقود أزرق.

عند استخدام صور الأيقنة، توفّر السمة alt الاسم الذي يسهل فهمه، وتعبّر عن معنى الرمز، وليس وصفًا للصورة. على سبيل المثال، سمة النص البديل لرمز العدسة المكبِّرة هي search. الرمز الذي يبدو كمنزل يحتوي على home كنص بديل. وصف رمز القرص المرن مقاس 5 بوصة هو save. إذا كانت هناك أيقونتان من فلافي تستخدمان للإشارة إلى أفضل الممارسات والمضادة للأنماط، فيمكن أن يكون للكلب المبتسم الذي يرتدي بيريه أخضر alt="good"، بينما قد يكون الكلب المماير الذي يرتدي بيريه أحمر مثل alt="bad". ومع ذلك، استخدم الأيقنة القياسية فقط، وإذا كنت تستخدم أيقونات غير قياسية مثل فلافي الجيدة والسيئة، فقم بتضمين وسيلة إيضاح وتأكد من أن الأيقونات ليست الطرق الوحيدة لفك رموز معنى عناصر واجهة المستخدم الخاصة بك،

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

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

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

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

<img src="svg/magazine.svg" alt="" role="none" />

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

بما أنّ هذه المجلة زخرفية، فهي تحتوي على سمة alt فارغة، وrole من none باعتبارها صورة بتنسيق الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) تقديمية. إذا كان ذلك مفيدًا، يجب أن تتضمّن صور SVG role="img".

<img src="svg/magazine.svg" alt="" role="none" />

هناك ثلاث مراجعات في أسفل الصفحة، ولكل منها صورة للملصق. عادةً ما يكون نص alt هو اسم الشخص الظاهر في الصورة.

<img src="images/blender.svg" alt="Blendan Smooth" role="img" />

بما أنّ هذه الصفحة عبارة عن مزحة، عليك نقل ما قد لا يكون واضحًا للمستخدمين الذين يعانون من ضعف في النظر حتى لا يفوتهم حسّ الفكاهة. نستخدم وظيفة الآلة الأصلية باعتبارها alt بدلاً من استخدام اسم الشخصية:

<img src="images/blender.svg" alt="blender" role="img" />

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

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

<img src="svg/hal.svg" role="img"
  alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." />

بما أنّ هذا الموقع الإلكتروني للنكات، يُرجى تقديم المعلومات المناسبة في سياق النكتة:

<img src="svg/hal.svg" role="img"
  alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." />

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

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

إنّ السمتَين src وalt هما الحدّ الأدنى لمتطلبات الصور المضمّنة. هناك بعض السمات الأخرى التي نحتاج إلى مناقشتها.

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

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

سمة واحدة (<img> srcset)

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

يمكن أن تكون هناك سمة srcset واحدة لكل عنصر <img>، ولكن يمكن أن ترتبط السمة srcset بصور متعدّدة. وتقبل السمة srcset قائمة بالقيم المفصولة بفواصل، ويحتوي كل منها على عنوان URL لمادة العرض متبوعة بمسافة متبوعة بأدوات وصف لخيار الصورة هذا. في حال استخدام واصف للعرض، عليك أيضًا تضمين السمة sizes مع استعلام عن الوسائط أو حجم مصدر لكل خيار srcset غير الخيار الأخير. ننصحك بقراءة أقسام "التعلُّم" التي تتناول الصور المتجاوبة باستخدام srcset والبنية الوصفية.

وفي حال العثور على تطابق، يكون للصورة srcset الأولوية على الصورة src.

<picture> و<source>

ثمة طريقة أخرى لتوفير موارد متعددة والسماح للمتصفح بعرض مادة العرض الأكثر ملاءمة، وهي استخدام العنصر <picture>. العنصر <picture> هو عبارة عن حاوية لخيارات صور متعدّدة مدرَجة في عدد غير محدود من عناصر <source> وعنصر <img> واحد مطلوب.

تتضمّن سمات <source> srcset وsizes وmedia وwidth وheight. السمة srcset شائعة في img وsource وlink، ولكن يتم تنفيذها بشكل عام بشكل مختلف قليلاً في المصدر حيث يمكن إدراج طلبات البحث عن الوسائط في سمة الوسائط <srcset> بدلاً من ذلك. تتوافق السمة <source> أيضًا مع تنسيقات الصور المحدّدة في السمة type.

سيراعي المتصفّح كل عنصر <source> ثانوي ويختار أفضل محتوى مطابق له. إذا لم يتم العثور على أي تطابقات، يتم اختيار عنوان URL للسمة <img> src. يأتي الاسم الذي يمكن الوصول إليه من السمة alt لسمة <img> المدمَجة. ومن المفيد أيضًا قراءة أقسام "التعلّم" التي تغطي العنصر <picture> والبنية الإرشادية.

ميزات الأداء الإضافية

التحميل الكسول

تحدد السمة loading للمتصفح الذي تم تفعيل JavaScript به كيفية تحميل الصورة. تعني قيمة eager التلقائية أنّه يتم تحميل الصورة على الفور أثناء تحليل ترميز HTML، حتى إذا كانت الصورة خارج إطار العرض المرئي. من خلال ضبط loading="lazy"، يتم تأجيل تحميل الصورة إلى أن يصل احتمال ظهورها إلى إطار العرض. يتم تحديد "المرجّح" من خلال المتصفح بناءً على المسافة التي تفصل بين الصورة وإطار العرض. يتم تعديل هذا الإعداد أثناء قيام المستخدم بالتمرير. تساعد طريقة "التحميل الكسول" في توفير معدّل نقل البيانات ووحدة المعالجة المركزية (CPU)، ما يؤدي إلى تحسين الأداء لدى معظم المستخدمين. في حال إيقاف JavaScript، سيتم ضبط الإعدادات التلقائية لجميع الصور على eager لأسباب تتعلّق بالأمان.

<img src="switch.svg" alt="light switch" loading="lazy" />

نسبة العرض إلى الارتفاع

تبدأ المتصفّحات في عرض رمز HTML عند تلقّيه، ما يُجري طلبات لمواد العرض عند مصادفتها. يعني ذلك أنّ المتصفّح يعرض رمز HTML حاليًا عندما يصادف علامة <img> ويجري الطلب. وقد يستغرق تحميل الصور بعض الوقت. لا تحتفظ المتصفِّحات تلقائيًا بمساحة للصور بخلاف الحجم المطلوب لعرض نص alt.

يتيح العنصر <img> دائمًا استخدام السمتَين height وwidth بدون وحدة. لم يتم استخدام هذه الخصائص لصالح CSS. قد تحدد خدمة CSS أبعاد الصورة، وغالبًا ما يتم ضبط سمة واحدة، مثل max-width: 100%; لضمان الحفاظ على نسبة العرض إلى الارتفاع. وبما أنّه يتم عادةً تضمين لغة CSS في <head>، يتم تحليلها قبل رصد أي <img>. ولكن بدون إدراج height أو نسبة العرض إلى الارتفاع بشكل صريح، تكون المساحة المحجوزة هي ارتفاع (أو عرض) النص alt. بما أنّ معظم المطوّرين يفصحون عن العرض فقط، يؤدي تلقّي الصور وعرضها إلى تغيير تراكمي في التصميم، ما يضر بمؤشرات أداء الويب. لحلّ هذه المشكلة، تتيح المتصفّحات استخدام نِسب العرض إلى الارتفاع للصور. إنّ تضمين السمتَين height وwidth في <img> هو نصائح لتغيير الحجم، ما يساعد المتصفِّح في معرفة نسبة العرض إلى الارتفاع، ما يتيح حجز المساحة المناسبة لعرض الصور بشكل نهائي. من خلال تضمين قيمة ارتفاع وعرض في صورة، يعرف المتصفّح نسبة العرض إلى الارتفاع لتلك الصورة. عندما يصادف المتصفح بُعدًا واحدًا، مثل مثال% 50، يتم توفير مساحة للصورة الملتزمة ببُعد CSS ومع البعد الآخر الذي يحافظ على نسبة العرض إلى الارتفاع للعرض إلى الارتفاع.

<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />

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

ميزات الصور الأخرى

يتيح العنصر <img> أيضًا استخدام السمات crossorigin وdecoding وreferrerpolicy وسمات fetchpriority في المتصفّحات المستندة إلى Blink. نادرًا ما تُستخدم الصورة إذا كانت الصورة جزءًا من خريطة من جهة الخادم، يجب تضمين السمة المنطقية ismap ودمج <img> في رابط للمستخدمين بدون أجهزة توجيه.

السمة ismap غير ضرورية أو حتى غير متاحة في <input type="image" name="imageSubmitName">، إذ يتم إرسال الإحداثيات x وy لموقع النقر أثناء إرسال النموذج، مع إلحاق القيم باسم الإدخال، إن توفّر. على سبيل المثال، سيتم إرسال عنصر مثل &imageSubmitName.x=169&imageSubmitName.y=66 مع النموذج عندما ينقر المستخدم على الصورة يرسلها. إذا لم تتضمّن الصورة السمة name، يتم إرسال الرمزَين x وy: &x=169&y=66.

التحقق من فهمك

اختبر معلوماتك عن الصور.