amp-img

[جدول المحتويات]

السلوك

قد يختار وقت التشغيل تأخير تحميل الموارد أو تحديد أولوية تحميلها بناءً على موضع إطار العرض أو موارد النظام أو النطاق الترددي للاتصال أو عوامل أخرى. وهكذا تتيح مكونات amp-img لوقت التشغيل إدارة موارد الصور بفعالية.

يجب إعطاء مكونات amp-img، شأنها شأن مثل جميع موارد AMP التي يتم جلبها من الخارج، حجمًا صريحًا (كما في width / height) بشكل مسبق، بحيث يمكن التعرّف على نسبة العرض إلى الارتفاع بدون جلب الصورة. يتم تحديد سلوك التنسيق الفعلي عن طريق السمة layout.

مثال: عرض صورة متجاوبة

في المثال التالي، نعرض صورة تستجيب لحجم إطار العرض عن طريق تعيين layout=responsive. فالصورة تمتد وتتقلص وفقًا لنسبة العرض إلى الارتفاع التي تحددها سماتا width و height.

<amp-img alt="A view of the sea"
  src="/static/inline-examples/images/sea.jpg"
  width="900"
  height="675"
  layout="responsive">
</amp-img>

في حال تعذُّر تحميل المورد الذي يطلبه المكوِّن amp-img، ستكون المساحة فارغة ما لم يتم توفير عنصر fallback الثانوي. يتم تنفيذ العنصر الاحتياطي على التنسيق الأولي أما تغييرات src اللاحقة بعد التنسيق الأولي (من خلال تغيير الحجم + srcset مثلاً) لن يكون لها عنصر احتياطي منعًا للآثار المترتبة على الأداء.

مثال: تحديد صورة احتياطية

في المثال التالي، إذا كان المتصفح لا يتيح عمل WebP، سيتم عرض صورة JPG الاحتياطية:

<amp-img alt="Mountains"
  width="550"
  height="368"
  src="/static/inline-examples/images/mountains.webp">
  <amp-img alt="Mountains"
    fallback
    width="550"
    height="368"
    src="/static/inline-examples/images/mountains.jpg"></amp-img>
</amp-img>

يمكن تعيين لون خلفية أو تأثير مرئي آخر لعنصر نائب باستخدام المحدِّد CSS والنمط على العنصر نفسه.

يمكن تطبيق ميزات صور إضافية مثل التسميات التوضيحية باستخدام HTML القياسي (مثل figure وfigcaption).

السمات

src

تشبه هذه السمة سمة src على العلامة img. يجب أن تكون القيمة عنوان URL يوجّه إلى ملف صورة قابل للتخزين المؤقت بشكل علني. يمكن لموفري ذاكرة التخزين المؤقت إعادة كتابة عناوين URL هذه عند عرض ملفات AMP للإشارة إلى نسخة مخبأة من الصورة.

srcset

هي نفس السمة srcset على العلامة img. بالنسبة إلى المتصفحات التي لا تتيح srcset، سيتم تعيين <amp-img> تلقائيًا على استخدام src. في حال توفير srcset فقط بدون src، سيتم اختيار تحديد عنوان URL الأول في srcset.

sizes

هي نفس السمة sizes في العلامة img.

alt

سلسلة من نص بديل تشبه السمة alt في img.

attribution

سلسلة تشير إلى إسناد الصورة. مثال: attribution="CC courtesy of Cats on Flicker"

height وwidth

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

السمات المشتركة

يتضمن هذا العنصر السمات المشتركة التي تشمل مكونات AMP.

التصميم

يمكن تصميم amp-img مباشرة عبر خصائص CSS. يمكن مثلاً إعداد عنصر نائب للخلفية الرمادية من خلال:

amp-img {
  background-color: grey;
}

نصائح

تحجيم صورة بما يصل إلى العرض الأقصى

إذا أردت تغيير حجم الصورة مع تغير حجم النافذة ولكن بحد أقصى للعرض (بحيث لا تخرج الصورة عن عرضها):

1. عيِّن layout=responsive للمكوِّن <amp-img>.
2. في حاوية الصورة، حدّد السمة max-width:<max width to display image> للغة CSS. لماذا في الحاوية؟ عنصر amp-img له layout=responsive هو عنصر حظر المستوى حيث إن <img> مضمّنة. أو يمكنك تعيين display: inline-block في CSS للعنصر amp-img.

الفرق بين التنسيق المتجاوب والأساسي

يعمل كل من التنسيق intrinsic وresponsive على إنشاء صورة سيتم تحجيمها تلقائيًا. والفرق الرئيسي بينهما هو أن التنسيق intrinsic يستخدم صورة SVG كعنصر تحجيم. هذا سيجعلها تتصرف بنفس طريقة صورة HTML القياسية مع الحفاظ على ميزة إعلام المتصفح بحجم الصورة في التنسيق الأولي. وسيكون للتنسيق intrinsic حجم أساسي ثم يعمل على تضخيم عنصر div عائم حتى يصل إلى حجم الصورة الطبيعي أو إلى قيد CSS مثل max-width. أما التنسيق responsive فسيعرض 0x0 في عنصر div عائم لأنه يأخذ حجمه من العنصر الرئيسي الذي لا يكون له حجم طبيعي عندما يصبح عائمًا.

تعيين صورة بحجم ثابت

إذا أردت عرض الصورة بحجم ثابت:

1. عيِّن layout=fixed للمكوِّن <amp-img>.
2. حدِّد width وheight.

تعيين نسبة العرض إلى الارتفاع

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

على سبيل المثال، بدلاً من تحديد width="900" وheight="675"، يمكنك فقط تحديد width="1.33" وheight="1".

<amp-img alt="A view of the sea"
  src="/static/inline-examples/images/sea.jpg"
  width="1.33"
  height="1"
  layout="responsive">
</amp-img>

تعيين ملفات مصدر متعددة للحصول على درجات دقة للشاشات المختلفة

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

في المقابل، تعرض السمة media مكونات AMP أو تخفيها، ويجب استخدامها عند تصميم التنسيقات المتجاوبة. تتمثل الطريقة المناسبة لعرض الصور بنسب عرض إلى ارتفاع مختلفة في استخدام عدة مكونات <amp-img> لكل منها سمة media تتوافق مع عرض الشاشة المراد ظهور كل مثيل عليها.

راجِع دليل إنشاء صفحات AMP المتجاوبة للحصول على مزيد من التفاصيل.

الحفاظ على نسبة العرض إلى الارتفاع للصور ذات الأبعاد غير المعروفة

يتطلب نظام تنسيقات AMP نسبة العرض إلى الارتفاع للصورة مسبقًا قبل جلبها، ومع ذلك قد تكون أبعاد الصورة غير معروفة في بعض الحالات. ولعرض صور ذات أبعاد غير معروفة والحفاظ على نسب العرض إلى الارتفاع، ادمج التنسيق fill لصفحات AMP مع الخاصية object-fit للغة CSS. ويمكن الاطّلاع على خطوات إتاحة الصور غير معروفة الأبعاد في الموقع "AMP بالمثال" للحصول على المزيد من المعلومات.

التحقق

اطِّلع على قواعد amp-img في مواصفات مدقق AMP.