يتم تلقائيًا التفاف النص على الويب عند حافة الشاشة بحيث لا يتجاوز حجمه. الأمر يختلف مع الصور. للصور حجم أساسي. إذا كان عرض الصورة أعرض من الشاشة، فستتجاوز الصورة، مما يؤدي إلى ظهور شريط تمرير أفقي.
لحسن الحظ، يمكنك اتّخاذ إجراءات في 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
أن نسبة العرض إلى الارتفاع للصور ستظل ثابتة.
في بعض الأحيان، قد تكون أبعاد الصورة خارجة عن نطاق سيطرتك، مثلاً إذا تمت إضافة صورة من خلال نظام إدارة محتوى. إذا كان تصميمك يطلب أن تكون نسبة العرض إلى الارتفاع للصورة مختلفة عن أبعادها الحقيقية، استخدِم السمة aspect-ratio
في CSS.
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;
}
إذا كانت هناك مشكلة في الاقتصاص من الأعلى والأسفل بشكل متساوٍ، استخدِم خاصية CSS 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: 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 لتصميمها بشكل مختلف.
السمة srcset
ليست _______ السمة src
، بل هي _______.
srcset
محلّ السمة src
بالتأكيد.إنّ عدم توفّر alt
على الصورة هو نفسه alt
فارغة.
alt
الفارغة إلى قارئ الشاشة إلى أنّ هذه الصورة توضيحية.alt
لقارئ الشاشة.