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

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

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

تقييد صورك

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

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

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

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

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

عند إضافة قيمة auto إلى block-size، يحافظ المتصفّح على نسبة العرض إلى الارتفاع لصورك أثناء تغيير حجمها.

في بعض الأحيان، يتم ضبط أبعاد الصورة من خلال نظام إدارة المحتوى (CMS) أو نظام آخر لعرض المحتوى. إذا كان تصميمك يتطلّب نسبة عرض إلى ارتفاع مختلفة عن النسبة التلقائية في نظام إدارة المحتوى، يمكنك استخدام السمة aspect-ratio للحفاظ على تصميم موقعك الإلكتروني:

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

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

لمنع حدوث تشويه في الصورة، استخدِم السمة object-fit.

تشير القيمة 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-position. يؤدي ذلك إلى ضبط موضع التركيز في الاقتصاص، ما يتيح لك التأكّد من أنّ الجزء الأكثر أهمية من الصورة لا يزال مرئيًا.

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، سيظل المتصفّح على دراية بنسبة العرض إلى الارتفاع ويمكنه تخصيص المساحة المناسبة. يمنع ذلك المحتوى الآخر من التحرّك عند تحميل الصورة.

<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" تلقائيًا، يمكنك عادةً ضبط loading على القيمة التلقائية eager لمنع التحميل الكسول للصور:

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

Fetch Priority

بالنسبة إلى الصور المهمة، مثل صورة 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. على سبيل المثال:

<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">

من خلال استبعاد href الاحتياطي، يمكنك التأكّد من أنّ المتصفّحات التي لا تتوافق مع srcset ستعمل على التحميل المُسبَق للصورة الصحيحة.

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

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

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

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

وصف العرض

يمكنك تحديد 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 بدلاً من استبدالها. سيظل عليك تقديم سمة 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 × 200 بكسل، وكان حجم medium-image.png هو 600 × 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 يعني عدم توفّر هذه المعلومات.

من المفترض أن يتم تضمين الصور التقديمية أو الزخرفية باستخدام CSS بدلاً من 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.

اختبِر معلوماتكَ

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