الصور

الصور الزخرفية، مثل تدرجات الخلفية على الأزرار أو صور الخلفية في أقسام المحتوى أو الصفحة الكاملة، هي عروض تقديمية ويجب تطبيقها باستخدام 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 الخاصة.

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

كتابة أوصاف فعّالة للصور باللغة alt

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

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

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

على سبيل المثال، سيتم وصف صورة كلب بطرق مختلفة، بناءً على السياق. إذا كانت فلافي هي صورة رمزية بجانب مراجعة لطعام الكلاب من 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. إذا تم استخدام أيقونتين من Fluffy للإشارة إلى أفضل الممارسات والأنماط المضادة، يمكن للكلب المبتسم الذي يرتدي قبعة خضراء ضبط alt="good"، بينما الكلب يضحك مرتديًا قبعة حمراء قد تقرأ alt="bad". ومع ذلك، لا تستخدم سوى الأيقنة القياسية، وإذا كنت تستخدم أيقونات غير قياسية مثل فلافي الجيدة والسيئة، على تضمين وسيلة إيضاح والتأكد من أن الرموز ليست الطرق الوحيدة لفك رموز معنى عناصر واجهة المستخدم،

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

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

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

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

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

يتضمن موقع MachineLearningWorkshop.com سبع صور في المقدّمة، وبالتالي سبع صور بسمات النص البديل: مفتاح إضاءة بيضة عيد الفصح، وأيقونة يدوية، وصورتين من السيرة الذاتية لهال وإيف، وثلاث صور رمزية للخلّاط ومكنسة كهربائية ومحمصة خبز. تشير رسالة الأشكال البيانية الصورة المقدّمة التي تبدو كمجلة هي الصورة المزخرفة فقط. تحتوي الصفحة أيضًا على صورتين للخلفية؛ كما أنها مزخرفة وبالتالي لا يمكن الوصول إليها نظرًا لأنها تتم إضافتها باستخدام 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 يتم اختيار السمة src للعنصر <img>. يأتي الاسم الذي يمكن الوصول إليه من السمة 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، وفي المتصفحات المستندة إلى Blink، fetchpriority سمة. نادرًا ما تُستخدم، إذا كانت الصورة جزءًا من خريطة من جهة الخادم، يجب تضمين السمة المنطقية ismap. ودمج <img> في رابط للمستخدمين بدون الإشارة إلى أجهزة

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

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

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