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

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

لحسن الحظ، يمكنك اتّخاذ إجراءات في CSS لمنع حدوث ذلك.

تضييق نطاق الصور

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

دعم المتصفح

  • 57
  • 79
  • 41
  • 12.1

المصدر

img {
  max-inline-size: 100%;
  block-size: auto;
}

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

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

ومع تطبيق هذه القاعدة، ستعمل المتصفحات تلقائيًا على تصغير حجم الصور لتلائم الشاشة.

لقطتا شاشة، تعرض الأولى صورة تتخطى عرض المتصفح، بينما تعرض الصورة الثانية الصورة نفسها المحدودة داخل إطار عرض المتصفح.

تعني إضافة قيمة block-size تبلغ auto أن نسبة العرض إلى الارتفاع للصور ستظل ثابتة.

في بعض الأحيان، قد تكون أبعاد الصورة خارجة عن نطاق سيطرتك، مثلاً إذا تمت إضافة صورة من خلال نظام إدارة محتوى. إذا كان تصميمك يطلب أن تكون نسبة العرض إلى الارتفاع للصورة مختلفة عن أبعادها الحقيقية، استخدِم السمة aspect-ratio في CSS.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
}

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

منظر جانبي لكلب وسيم ويبدو كالسعادة في فمه، ولكن تم ضغط الصورة.

لمنع حدوث ذلك، استخدِم السمة object-fit.

دعم المتصفح

  • 32
  • 79
  • 36
  • 10

المصدر

تطلب القيمة object-fit التي تبلغ contain من المتصفّح الحفاظ على نسبة العرض إلى الارتفاع للصورة، حتى إذا كان ذلك يعني ترك مساحة فارغة في الأعلى والأسفل.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: contain;
}

إنّ القيمة object-fit التي تبلغ cover تطلب من المتصفّح الحفاظ على نسبة العرض إلى الارتفاع للصورة، حتى إذا كان ذلك يعني اقتصاص الصورة من الأعلى والأسفل.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}
منظر جانبي لكلب وسيم وجميل مع كرة في فمه، وتوجد مساحة إضافية على كلا جانبي الصورة. منظر جانبي لكلب وسيم وشكله سعيد مع كرة في فمه. تم اقتصاص الصورة من الأعلى والأسفل.
الصورة نفسها بقيمتين مختلفتين لـ "object-fit" تم تطبيقهما. القيمة الأولى لـ "object-fit" هي "contain"، والقيمة الثانية لها قيمة "object-fit" لـ "cover".

إذا كانت هناك مشكلة في الاقتصاص من الأعلى والأسفل بشكل متساوٍ، استخدِم خاصية CSS object-position لضبط تركيز الاقتصاص.

دعم المتصفح

  • 32
  • 79
  • 36
  • 10

المصدر

يمكنك التأكّد من أنّ أهم محتوى الصورة لا يزال مرئيًا.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}

منظر جانبي لكلب وسيم سعيد يحمل كرة في فمه. تم اقتصاص الصورة من الجزء السفلي فقط.

إرسال صورك

تحدّد قواعد CSS هذه للمتصفّح الطريقة التي تريد عرض الصور بها. يمكنك أيضًا تقديم تلميحات في ترميز HTML حول كيفية تعامل المتصفّح مع هذه الصور.

ملاحظات بشأن المقاس

إذا كنت تعرف أبعاد الصورة، يجب تضمين السمتَين width وheight. حتى في حال عرض الصورة بحجم مختلف (بسبب قاعدة max-inline-size: 100%)، سيظل المتصفّح يعرف نسبة العرض إلى الارتفاع ويمكنه تخصيص المساحة المناسبة. وسيؤدي هذا إلى إيقاف تدفق المحتوى الآخر عند تحميل الصورة.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>
يعرض الفيديو الأول تنسيقًا بدون أبعاد صورة محدّدة. لاحظ كيف يقفز النص بعد تحميل الصور. في الفيديو الثاني، تم توفير أبعاد الصورة؛ أي ترك مساحة للصورة بحيث لا ينتقل النص عند تحميلها.

جارٍ تحميل التلميحات

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

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>

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

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
>

أولوية الجلب

بالنسبة إلى الصور المهمة، مثل صورة LCP، يمكنك تحديد أولوية التحميل باستخدام أولوية الجلب من خلال ضبط السمة fetchpriority على high:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

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

ولكن تذكر: عندما تطلب من المتصفح تحديد الأولوية لتنزيل مورد واحد—مثل صورة—سيضطر المتصفح إلى إلغاء أولوية مورد آخر مثل برنامج نصي أو ملف خط. يجب عدم وضع علامة fetchpriority="high" على الصورة إلا إذا كانت مهمة للغاية.

ملاحظات بشأن التحميل المُسبق

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

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

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

يُعدّ التحميل المُسبق للصور المتجاوبة استنادًا إلى srcset (الموضّح أدناه) عبر السمتَين imagesrcset وimagesizes أكثر تقدّمًا ويتوفّر في بعض المتصفّحات وليس كلها:

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

لا تتوفّر حاليًا ميزة التحميل المُسبق للصفحات التي تستند إلى تنسيقات مختلفة للصور استنادًا إلى توافق المتصفّح مع هذه الصور، وقد تؤدي إلى عمليات تنزيل إضافية.

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

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

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

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
>

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

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 decoding="sync"
>

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

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

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

الصور المتجاوبة باستخدام srcset

بفضل بيان max-inline-size: 100% هذا، لن تخرج صورك أبدًا من حاوياتها. ولكن حتى إذا كان من الجيد أن يكون لديك صورة كبيرة يتقلّص حجمها لتلائم الصورة، فلن يكون الأمر جيدًا بالنسبة إليك. إذا كان شخص ما يستخدم جهازًا بشاشة صغيرة على شبكة ذات معدل نقل بيانات منخفض، فسيتم تنزيل صور كبيرة غير ضرورية.

إذا أنشأت نُسخًا متعددة من الصورة نفسها بأحجام مختلفة، يمكنك إعلام المتصفّح بها باستخدام السمة srcset.

واصف العرض

يمكنك تمرير قائمة من القيم مفصولة بفواصل. يجب أن تكون كل قيمة عبارة عن عنوان URL لصورة متبوعة بمسافة متبوعة ببعض البيانات الوصفية حول الصورة. تسمى بيانات التعريف هذه واصف.

في هذا المثال، تصف البيانات الوصفية عرض كل صورة باستخدام وحدة w. w واحد هو وحدة بكسل واحدة.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
>

لا تحلّ السمة srcset محلّ السمة src. بدلاً من ذلك، تُكمِّل السمة srcset السمة src. يجب أن يكون لديك سمة src صالحة، ولكن يمكن للمتصفّح الآن استبدال قيمتها بأحد الخيارات المدرَجة في السمة srcset.

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

الأحجام

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

تتضمّن السمة sizes قائمة مفصولة بفواصل من الاستعلامات عن الوسائط وعروض الصور.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
 sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

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

بالنسبة إلى عرض إطار العرض بين 44em و66em، يمكنك عرض الصورة بنصف عرض الشاشة (تنسيق من عمودَين).

بالنسبة إلى أي عنصر أقل من 44em، يجب عرض الصورة بالعرض الكامل للشاشة.

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

واصف كثافة وحدات البكسل

هناك حالة أخرى قد تحتاج فيها إلى تقديم نُسخ متعددة من الصورة نفسها.

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

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

استخدِم أداة وصف الكثافة لوصف كثافة وحدات البكسل للصورة في ما يتعلق بالصورة في السمة src. واصف الكثافة هو رقم متبوعًا بالحرف x: 1x، 2x، وما إلى ذلك.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

إذا كان حجم small-image.png هو 300 x 200 بكسل، وكان حجم medium-image.png 600 x 400 بكسل، يمكن أن يحتوي medium-image.png على 2x بعده في قائمة srcset.

لست مضطرًا لاستخدام أرقام صحيحة. إذا كان حجم نسخة أخرى من الصورة 450 × 300 بكسل، يمكنك وصفها باستخدام السمة 1.5x.

صور العرض التقديمي

الصور في HTML هي المحتوى. لهذا السبب، تقدّم دائمًا السمة alt مع وصف للصورة لبرامج قراءة الشاشة ومحرّكات البحث.

إذا ضمّنت صورة تعرض ازدهارًا مرئيًا بحت بدون أي محتوى مفيد، استخدِم سمة alt فارغة.

<img
 src="flourish.png"
 alt=""
 width="400"
 height="50"
>

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

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

صور الخلفية

استخدِم السمة background-image في CSS لتحميل الصور التقديمية.

element {
  background-image: url(flourish.png);
}

يمكنك تحديد عدة صور مرشحة باستخدام الدالة image-set في background-image.

تعمل الدالة image-set في CSS إلى حدّ كبير مثل السمة srcset في HTML. وقدِّم قائمة بالصور مع واصف لكثافة وحدات البكسل لكل صورة.

element {
  background-image: image-set(
    small-image.png 1x,
    medium-image.png 2x,
    large-image.png 3x
  );
}

وسيختار المتصفّح الصورة الأكثر ملاءمةً لكثافة وحدات البكسل في الجهاز.

هناك العديد من العوامل التي يجب وضعها في الاعتبار عند إضافة صور إلى موقعك الإلكتروني:

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

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

تتضمّن مجموعة أدواتك عنصر HTML آخر لمساعدتك في التحكم بشكل أكبر في صورك، وهو العنصر picture.

التحقّق من استيعابك

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

يجب إضافة الأنماط لكي تظهر الصور ضمن إطار العرض.

صحيح
ستكون الصور التي لا تحتوي على احتواء بحجمها الطبيعي.
خطأ
الأنماط مطلوبة.

عند فرض ارتفاع وعرض صورة ما إلى نسبة عرض إلى ارتفاع غير طبيعية، ما الأنماط التي يمكن أن تساعد في ضبط كيفية تناسب الصورة مع هذه النسب؟

object-fit
حدِّد مدى ملاءمة الصورة لكلمات رئيسية مثل contain وcover.
image-fit
هذا الموقع غير موجود، من اختلقته.
fit-image
هذا الموقع غير موجود، من اختلقته.
aspect-ratio
وقد يؤدّي ذلك إلى زيادة نسبة العرض إلى الارتفاع للصورة أو حلّها.

في حال وضع height وwidth على صورك، لا يمكن استخدام CSS لتصميمها بشكل مختلف.

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

السمة srcset ليست _______ السمة src، بل هي _______.

تكتمل، تستبدل
لا تحلّ السمة srcset محلّ السمة src بالتأكيد.
استبدال، يُكمل
ويوفر خيارات إضافية للمتصفح للاختيار من بينها، إذا كان ذلك ممكنًا.

إنّ عدم توفّر alt على الصورة هو نفسه alt فارغة.

صحيح
تشير السمة alt الفارغة إلى قارئ الشاشة إلى أنّ هذه الصورة توضيحية.
خطأ
لا يتم استخدام إشارات alt لقارئ الشاشة.