شرح تفصيلي لعنصر الصورة في HTML5 ومعالجة الصور سريعة الاستجابة

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

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

من أجل التكيف مع عرض الشاشة وكثافة البكسل للنماذج الطرفية المختلفة، نستخدم عمومًا الطريقة التالية لتعيين نمط CSS للصورة:

 <style> img{ max-width:100%;

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

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

1. <picture> هو عنصر جديد في HTML5؛
2. إذا كان العنصر <picture> يتعاون مع عناصر <audio> و<video> الحالية، فسيؤدي ذلك إلى تحسين عملية عمل الصورة المستجيبة، فهو يسمح بتعيين علامات <source> متعددة داخله لتحديد أسماء ملفات صور مختلفة ;
3. يمكن لـ <picture> تحميل صور مختلفة وفقًا لظروف مختلفة. يمكن أن تكون هذه الشروط هي الارتفاع الحالي للنافذة (منفذ العرض)، والعرض (العرض)، والاتجاه (الاتجاه)، وكثافة البكسل (dpr)، وما إلى ذلك؛

في الكستناء التالي، يتم تحميل صور مختلفة لشاشات ذات عرض مختلف؛ ويتم تحميل minpic.png عندما يكون عرض الصفحة بين 320 بكسل و640 بكسل؛ ويتم تحميل middle.png عندما يكون عرض الصفحة أكبر من 640 بكسل.

 <صورة> <وسائط المصدر=(الحد الأدنى للعرض: 320 بكسل) و(الحد الأقصى للعرض: 640 بكسل) srcset=img/minpic.png> <الوسائط المصدر=(الحد الأدنى للعرض: 640 بكسل) srcset=img/middle.png> < img src=img/picture.png <وسائط المصدر=(الحد الأدنى للعرض: 320 بكسل) و (الحد الأقصى للعرض: 640 بكسل) و(الاتجاه: أفقي) srcset=img/minpic_landscape.png> <وسائط المصدر=(الحد الأدنى للعرض: 320 بكسل) و(الحد الأقصى للعرض: 640 بكسل) و(الاتجاه: عمودي) srcset=img/ minpic_portrait.png> <وسائط المصدر=(العرض الأدنى: 640 بكسل) و (الاتجاه: أفقي) srcset=img/middlepic_landscape.png> <وسائط المصدر=(العرض الأدنى: 640 بكسل) و(الاتجاه: عمودي) srcset=img/middlepic_portrait.png> <img src=img/picture.png <الوسائط المصدر =(الحد الأدنى للعرض: 320 بكسل) و(الحد الأقصى للعرض: 640 بكسل) srcset=img/minpic.png,img/minpic_retina.png 2x> <وسائط المصدر=(min-width: 640px) srcset=img/middle.png,img/middle_retina.png 2x> <img src=img/picture.png ,img/picture_retina.png 2x <نوع المصدر=image/webp srcset=img/picture.webp> <img src=img/picture.png الأحجام=90vw srcset=picture-160.png 160w، الصورة-320.png 320w، الصورة-640.png 640w، الصورة-1280.png 1280w>

6. أضف سمة الأحجام في المثال التالي؛ وقم بتحميل الإصدار المقابل من الصورة عندما يكون عرض النافذة أكبر من أو يساوي 800 بكسل؛

 <وسائط المصدر=(الحد الأدنى للعرض: 800 بكسل) الأحجام=90vw srcset=picture-landscape-640.png 640w، الصورة-landscape-1280.png 1280w، الصورة-landscape-2560.png 2560w><img src=picture-160 أحجام png=90vw srcset=picture-160.png 160 واط، الصورة-320.png 320 واط، الصورة-640.png 640 واط، الصورة-1280.png 1280 واط>

التوافق:

في الوقت الحالي، يتمتع Chrome وFirefox وOpera فقط بتوافق جيد معه. التوافق المحدد كما هو موضح في الشكل:

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

1. إنشاء علامة <picture></picture>؛
2. ضمن هذه العلامات، قم بإنشاء علامة <source></scource> التي تريد استخدامها لتنفيذ أي ميزة؛
3. أضف سمة وسائط لتضمين الخصائص التي تريدها، مثل العرض (العرض الأقصى، العرض الأدنى)، الاتجاه (الاتجاه)، وما إلى ذلك؛
4. أضف سمة srcset، وقيمة السمة هي اسم ملف الصورة المقابل، وقم بتحميله. إذا كنت تريد توفير كثافات بكسل مختلفة، مثل شاشات Retina، فيمكنك إضافة أسماء ملفات إضافية إلى سمة srcset؛
5. أضف علامة <img> احتياطية؛

كما يتبين من نموذج التعليمات البرمجية أعلاه، دون تقديم js ومكتبات الطرف الثالث، ودون تضمين استعلامات الوسائط في CSS، يمكن للعنصر <picture> الإعلان عن الصور المستجيبة باستخدام HTML فقط؛

العلامة <picture> نفسها لا تحتوي على سمات. الجزء السحري هو أن <picture> يُستخدم كحاوية لـ <source>.

تم تحديث عنصر <source>، والذي يستخدم لتحميل الوسائط المتعددة مثل الفيديو والصوت، لتحميل الصور وتمت إضافة بعض السمات الجديدة:

يقبل مسار ملف صورة واحد (على سبيل المثال: srcset=img/minpic.png).

أو هو مسار صورة مفصول بفواصل موصوف بكثافة البكسل (مثل: srcset=img/minpic.png, img/minpic_retina.png 2x لا يتم استخدام الوصف 1x افتراضيًا).

يقبل أي استعلام وسائط تم التحقق منه، كما ترون في محدد CSS @media (على سبيل المثال، الوسائط=(min-width: 320px)).

لقد تم استخدامه في مثال بناء جملة <picture> السابق.

احصل على وصف عرض واحد (على سبيل المثال: الأحجام=100vw) أو وصف عرض استعلام وسائط واحد (على سبيل المثال: الأحجام=(min-width: 320px) 100vw).

أو أوصاف عرض استعلام الوسائط المفصولة بفواصل (على سبيل المثال: size=(min-width: 320px) 100vw, (min-width: 640px) 50vw, calc(33vw - 100px)) يتم استخدام الأخير كإعداد افتراضي.

يقبل أنواع MIME المدعومة (على سبيل المثال: type=image/webp أو type=image/vnd.ms-photo)

سيقوم المتصفح بتحميل مورد الصورة الدقيق بناءً على هذه التلميحات والسمات. وفقا لترتيب قائمة العلامات. سيستخدم المتصفح أول عنصر <source> مناسب ويتجاهل علامات <source> اللاحقة.

يتم استخدام العنصر <img> داخل <picture> ليتم عرضه عندما لا يدعمه المتصفح أو عندما لا يكون هناك علامة مصدر مطابقة. من الضروري استخدام العلامة <img> داخل <picture>. إذا نسيت ذلك، فلن يتم عرض أي صورة.

استخدم <img> للإعلان عن عرض الصورة الافتراضية. ضع علامة <img> في نهاية <picture>، وسيتجاهل المتصفح إعلان <source> قبل العثور على علامة <img>. تتطلب علامة الصورة هذه أيضًا كتابة السمة البديلة الخاصة بها.

تعتمد هذه المقالة على العديد من المقالات الأخرى، جميع مقدمات الصورة موجودة هنا، لذا دعونا نجربها الآن~

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.