الصور الزخرفية، مثل تدرّجات الألوان في الخلفية على الأزرار أو صور الخلفية في أقسام المحتوى أو الصفحة الكاملة، هي صور عرضية ويجب تطبيقها باستخدام 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
في VoiceOver.
<img src="switch.svg" alt="light switch" role="img" />
كتابة alt أوصاف فعّالة للصور
تهدف سمات النص البديل إلى أن تكون قصيرة وموجزة، وأن تقدّم كل المعلومات ذات الصلة التي تنقلها الصورة مع حذف المعلومات المكرّرة في المحتوى الآخر في المستند أو المعلومات غير المفيدة. عند كتابة النص، يجب أن يعكس الأسلوب أسلوب الموقع الإلكتروني.
لكتابة نص بديل فعّال، تخيَّل أنّك تقرأ الصفحة بأكملها لشخص لا يمكنه رؤيتها. باستخدام عنصر <img> الدلالي، يتم إعلام مستخدمي برامج قراءة الشاشة وبرامج التتبّع بأنّ العنصر هو صورة. من غير الضروري تضمين عبارة "هذه صورة/لقطة شاشة/صورة فوتوغرافية لـ" في alt. لا يحتاج المستخدم إلى معرفة أنّ هناك صورة، ولكنّه يحتاج إلى معرفة المعلومات التي تنقلها الصورة.
عادةً، لن تقول "هذه صورة غير واضحة لكلب يرتدي قبعة حمراء". بدلاً من ذلك، عليك نقل ما تعبّر عنه الصورة في ما يتعلق بسياق بقية المستند. ويختلف المعنى الذي تنقله الكلمة حسب السياق ومحتوى النص المحيط بها.
على سبيل المثال، يتم وصف صورة كلب بطرق مختلفة حسب السياق. إذا كان Fluffy عبارة عن صورة رمزية بجانب مراجعة لطعام الكلاب Yuckymeat،
alt="Fluffy" يكفي ذلك.
إذا كانت الصورة جزءًا من صفحة تبنّي Fluffy على موقع إلكتروني لمأوى حيوانات، ستكون الفئة المستهدفة هي الشخص الذي سيتولّى رعاية الكلب. يجب أن يصف النص المعلومات الواردة في الصورة والتي تهمّ المستخدمين ولا تتكرّر في النص المحيط. ننصحك باستخدام وصف أطول، مثل
alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth". يتضمّن نص صفحة التبنّي عادةً نوع الحيوان الأليف وسلالته وعمره وجنسه، لذا لا داعي لتكرار هذه المعلومات في النص البديل. لكن السيرة الذاتية المكتوبة للكلب لن تتضمّن على الأرجح معلومات عن طول الشعر أو الألوان أو الألعاب المفضّلة.
والجدير بالذكر أنّنا لم نقدّم وصفًا كاملاً للصورة. لا يحتاج مالك الكلب المحتمل إلى معرفة ما إذا كان الكلب في الداخل أو الخارج، أو ما إذا كان يرتدي طوقًا أحمرًا ومقودًا أزرق.
عند استخدام الصور كرموز، بما أنّ السمة alt توفّر الاسم الذي يمكن الوصول إليه، يجب توضيح معنى الرمز وليس وصف الصورة.
على سبيل المثال، قيمة السمة alt لرمز العدسة المكبرة هي search. تحتوي الأيقونة التي تبدو كمنزل على home كنص بديل. وصف رمز القرص المرن بحجم 5 بوصات هو save. إذا تم استخدام رمزين Fluffy للإشارة إلى أفضل الممارسات والأنماط المضادة، يمكن أن يكون للكلب المبتسم الذي يرتدي قبعة خضراء alt="good"، بينما قد يكون للكلب الذي يزمجر والذي يرتدي قبعة حمراء alt="bad". مع ذلك، لا تستخدِم سوى رموز قياسية، وإذا كنت تستخدم رموزًا غير قياسية، مثل Fluffy الجيد والسيئ، أدرِج وسيلة إيضاح للتأكّد من أنّ الرموز ليست الطريقة الوحيدة لفهم معنى عناصر واجهة المستخدم.
إذا كانت الصورة لقطة شاشة أو رسمًا بيانيًا، اكتب ما يمكن استنتاجه من الصورة بدلاً من وصف مظهرها. على الرغم من أنّ الصورة قد تساوي ألف كلمة، يجب أن ينقل الوصف كل ما تم تعلّمه بإيجاز.
احذف المعلومات التي يعرفها المستخدم مسبقًا من السياق والتي يتم إعلامه بها في المحتوى. على سبيل المثال، إذا كنت تتصفّح صفحة تعليمية حول تغيير إعدادات المتصفّح وكانت الصفحة تتناول النقر على الرموز في متصفّح Chrome، لن يكون عنوان URL الخاص بالصفحة في لقطة الشاشة مهمًا. يجب أن يقتصر
alt على الموضوع المطروح: كيفية تغيير الإعدادات.
قد يكون alt هو "يظهر رمز الإعدادات في شريط التنقّل أسفل حقل البحث". لا تُدرِج "لقطة شاشة" أو "ورشة عمل حول تعلُّم الآلة"، لأنّ المستخدم لا يحتاج إلى معرفة أنّها لقطة شاشة ولا يحتاج إلى معرفة المواقع التي كان يتصفّحها كاتب المحتوى التقني عندما كتب التعليمات. يعتمد وصف الصورة على سياق سبب تضمينها في المقام الأول.
إذا كانت لقطة الشاشة توضّح كيفية العثور على رقم إصدار المتصفّح من خلال الانتقال إلى chrome://version/، أدرِج عنوان URL في محتوى الصفحة كتعليمات، وقدِّم سلسلة فارغة كسمة النص البديل لأنّ الصورة لا تقدّم أي معلومات غير متوفّرة في النص المحيط بها.
إذا لم تقدّم الصورة أي معلومات إضافية أو كانت مخصّصة للزينة فقط، يجب أن تبقى السمة موجودة، ولكن كسلسلة فارغة.
<img src="svg/magazine.svg" alt="" role="none" />
يحتوي موقع MachineLearningWorkshop.com على سبع صور في المقدّمة، وبالتالي سبع صور تتضمّن سمات alt: مفتاح إضاءة على شكل بيضة عيد الفصح، ورمز يدوي، وصورتان بيوغرافيتان لهال وإيف، وثلاثة صور رمزية لخلاط ومكنسة كهربائية ومحمصة خبز. الصورة المعروضة في المقدّمة والتي تبدو وكأنّها مجلّة هي الصورة الوحيدة التي تُستخدَم لأغراض تزيينية فقط. تحتوي الصفحة أيضًا على صورتَين للخلفية. هذه الصور تزيينية وتمت إضافتها باستخدام 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 اقتراح ملفات صور متعددة،
مع اختيار المتصفح للصورة المطلوب عرضها استنادًا إلى طلبات بحث متعددة عن الوسائط، بما في ذلك حجم إطار العرض ودقة الشاشة.
يمكن أن تتضمّن كل <img> سمة srcset واحدة، ولكن يمكن أن يرتبط 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 الخاص بالسمة src للعنصر <img>. يتم الحصول على الاسم المناسب لذوي الاحتياجات الخاصة من السمة alt للعنصر <img> المتداخل.
ننصحك أيضًا بقراءة أقسام "التعرّف" التي تتناول العنصر <picture> والصيغ الإرشادية.
ميزات الأداء الإضافية
هناك عدد من ميزات الصور الإضافية التي يمكن أن تحسّن أداء موقعك الإلكتروني.
التحميل الكسول
تخبر السمة loading المتصفّح الذي يتيح استخدام JavaScript بكيفية تحميل الصورة. تعني قيمة eager التلقائية
أنّه يتم تحميل الصورة فورًا عند تحليل HTML، حتى إذا كانت الصورة
خارج إطار العرض المرئي. من خلال ضبط
loading="lazy"، يتم تأجيل تحميل الصورة إلى أن يصبح من المرجّح ظهورها في إطار العرض. يحدّد المتصفّح حالة "محتمل" استنادًا إلى المسافة بين الصورة ونافذة العرض. ويتم تعديل هذا الموضع أثناء تنقّل المستخدم. تساعد طريقة "التحميل الكسول" في توفير معدّل نقل البيانات ووحدة المعالجة المركزية، ما يؤدي إلى تحسين الأداء
لمعظم المستخدمين. إذا تم إيقاف 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
boolean وتضمين <img> في رابط للمستخدمين الذين لا يستخدمون أجهزة تأشير.
لا تكون السمة ismap ضرورية أو حتى متاحة في <input type="image" name="imageSubmitName">، لأنّه يتم إرسال الإحداثيات x وy الخاصة بموقع النقرة أثناء إرسال النموذج، مع إلحاق القيم باسم الإدخال، إن وُجد. على سبيل المثال، يتم إرسال شيء مثل
&imageSubmitName.x=169&imageSubmitName.y=66 مع النموذج عندما
ينقر المستخدم على الصورة، ما يؤدي إلى إرسالها. إذا لم تتضمّن الصورة السمة name، يتم إرسال الإحداثيين x وy: &x=169&y=66.
التحقّق من فهمك
اختبِر معلوماتك حول الصور.
ما هما سمتان يجب أن تتوفّرا دائمًا في صورة المقدّمة؟
sizealtsrc