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

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

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

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

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

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

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

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

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

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

في بعض الأحيان، يتم تحديد أبعاد الصورة بواسطة نظام إدارة محتوى (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"
>

أولوية الاسترجاع

بالنسبة إلى الصور المهمة، مثل صورة 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 لا تزال توفّر إمكانية تحميل الصورة الصحيحة مسبقًا.

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

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

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

الصور المتجاوبة مع 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.

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

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