دليل المبتدئين للصور المُتجاوبة بتنسيق HTML

الصور المُتجاوبة هي صورة تتكيف مع خصائص الجهاز المُختلفة الذي يقوم بعرضها. عند القيام بذلك بشكل صحيح ، يُمكن للصور المُتجاوبة تحسين أداء موقع الويب وتمييز تجربة المستخدم فيه.

تستكشف هذه المقالة كيف يُمكنك إنشاء صور سريعة الاستجابة بتنسيق HTML باستخدام srcset وعنصر Picture. تحقق من يُمكنك البرمجة أثناء التنقل: أفضل تطبيقات تحرير HTML لنظام Android.

دليل المبتدئين للصور المُتجاوبة بتنسيق HTML - شروحات

لماذا يجب عليك استخدام الصور المُتجاوبة؟

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

وفقًا لـ Statista ، فإنَّ أكثر من 90 بالمائة من مُستخدمي الإنترنت في العالم يتصفحون الويب باستخدام هواتفهم المحمولة. تحتوي معظم صفحات الويب على صور وهذه الصور هي أحد المقاييس المُستخدمة لقياس أداء الويب. لتحسين الأداء ، تحتاج إلى تحسين صورك بجعلها سريعة الاستجابة. تحقق من أفضل أدوات تطوير الويب الشائعة التي يستخدمها كل مُحترف.

كيفية إنشاء صور مُتجاوبة بتنسيق HTML

لا يعني تصميم الويب سريع الاستجابة أنه يُمكن للتنسيقات فقط التغير بناءً على سمات الجهاز المُستخدم ، بل المحتوى أيضًا. على سبيل المثال ، في الشاشات التي تتمتع بدقة عالية (2x) ، يلزم توفر رسومات بدقة عالية أيضًا لضمان مُستوى الحدة. قد تعمل الصورة التي قيمة عرضها تُساوي 50% على نحو جيد فقط عندما يكون عرض المتصفح 800 بكسل ، إلا أنه سيكون لها تأثير كبير على الهاتف الضيق ، وستظل مشكلة استهلاك معدل كبير لنقل البيانات قائمة عندما يتم تقليل الحجم ليُناسب الشاشات الصغيرة.

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

يُمكنك التعامل مع الصور سريعة الاستجابة من زاويتين — إما بتقديم نفس الصورة بأحجام مختلفة أو تقديم صور مختلفة وفقًا لخصائص العرض. يمكنك استخدام <picture> أو <srcset>. يتعامل هذان الخياران مع الصور سريعة الاستجابة بشكل مختلف ، لكنهما يعرضان جميعًا صورة واحدة من بدائل معينة اعتمادًا على مجموعة القواعد.

استخدام srcset

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

بناء الجملة:

<img srcset=”” src=”” alt=””>

تسمح لك السمة srcset بتوفير ملفات مصدر إضافية ، وسيختار المُتصفح الصورة التي تبدو مثالية لحجم الشاشة المُستخدمة.

<img srcset=”cute-cat.jpg 480w,
 cute-cat.jpg 800w”
 src=”cute-cat.jpg”
 alt=”A cute cat”>

تتكون srcset من ثلاثة أجزاء: اسم ملف الصورة الذي يُحدد المسار إلى الصورة المصدر ، والمساحة ، والعرض الجوهري أو الحقيقي للصورة.

استخدام srcset مع الأحجام

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

يُمكنك الآن إعادة كتابة علامة <img> أعلاه على النحو التالي.

<img srcset=”cute-cat.jpg 480w,
 cute-cat.jpg 800w”
sizes=”(max-width: 600px) 480px,
 800px”
 src=”cute-cat.jpg”
 alt=”A cute cat”>

تتكون الأحجام من حالة وسائط ، في هذا المثال (max-width: 600px) والتي تمثل عرض منفذ العرض ، والمساحة ، وعرض الفتحة (480 بكسل) مع تحديد المساحة التي ستملأها الصورة إذا كانت حالة الوسائط صحيحة.

هنا ، سيتحقق المُتصفح أولاً من عرض الجهاز ويُقارنه بحالة الوسائط. إذا كان الشرط صحيحًا ، فسوف يتحقق من عرض الفتحة ويُحمل صورة من srcset بنفس العرض أو الصورة الأكبر التالية.

لاحظ أنك تقوم أيضًا بتضمين src التي توفر الصورة للرجوع إلى المتصفحات التي لا تدعم srcset والأحجام.

يسمح لك srcset أيضًا بتقديم الصور بدقة مختلفة باستخدام واصفات x.

<img srcset=”cute-cat-high.jpg,
 cute-cat-high1.jpg 1.5x,
 cute-cat-high2.jpg 2x”
 src=”cute-cat-low.jpg”
 alt=”A cute cat”>

في هذا المثال ، إذا كان للجهاز دقة تبلغ وحدتي بكسل لكل CSS أو أكثر ، فسيقوم المتصفح بتحميل الصورة cute-cat-high1.jpg.

تُحسِّن السمة srcset من سلوك العنصر img ، مما يسهل توفير عدة ملفات صور لميزات أجهزة مُختلفة. وكما هو الحال في image-set ، الوظيفة الأصلية في CSS، تُتيح srcset للمتصفح اختيار أفضل صورة بناءً على ميزات الجهاز ، على سبيل المثال باستخدام صورة 2x على شاشة 2x ، وربما في المستقبل ، صورة 1x على جهاز 2x عند استخدام شبكة معدل نقل بيانات محدودة.

بكسلات الأجهزة والبرامج

تكمن مشكلة هذا الحل في أنَّ الصور تستجيب فقط من حيث كثافة البكسل في الجهاز. هذه هي نسبة وحدات البكسل في الأجهزة إلى البرنامج أو وحدات بكسل CSS. بكسل الجهاز هو نقطة الضوء الفعلية على الشاشة بينما بكسل البرنامج أو بكسل CSS هو وحدة قياس. تُحدد كثافة البكسل دقة الجهاز.

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

<img srcset=”cute-cat-high1–480w.jpg 1.5x,
 cute-cat-high2–640w.jpg 2x”
 src=”cute-cat-low.jpg”
 alt=”A cute cat”>

استخدام <picture>

السمة <picture> هي عنصر HTML يلتف بالعديد من عناصر <source> التي تحتوي على ملفات مصدر مُختلفة وعنصر <img>. بينما تجعل <img srcset = “” sizes = “” alt = “”> الصور تستجيب من خلال تقديم أحجام مختلفة للصورة نفسها ، تُتيح لك <picture> تغيير الصورة المعروضة فعليًا.

بناء الجملة:

<picture>
 <source media=”” srcset=””>
 <source media=”” srcset=””>
 <img src=”” alt=””>
</picture>

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

<picture>
 <source media=”(max-width: 639px)” srcset=”cute-cat-480w.jpg”>
 <source media=”(min-width: 640px)” srcset=”cute-cat-640w.jpg”>
 <img src=”elva-640w.jpg” alt=”A cute cat”>
</picture>

كما في الطريقة الأولى ، تحتوي السمة <source> على سمة وسائط يُمكنك استخدامها لتوفير حالة الوسائط. على سبيل المثال ، سيعرض المتصفح “cute-cat-480w.jpg” إذا كان منفذ العرض هو 639 بكسل أو أقل. تحتفظ السمة srcset بمسار ملف الصورة الذي تُريد عرضه وتُحدد src الصورة الافتراضية.

الرجوع إلى تنسيق صورة WebP

الشيء الآخر الذي تتعامل معه سمة <picture> جيدًا هو توفير نسخة احتياطية لتنسيقات الصور الحديثة مثل WebP. تتمتع صور WebP بأداء عالٍ وغالبًا ما تكون صغيرة الحجم وتُوفر تجربة ويب سريعة. لذلك يُمكنك أن تقرر استخدامها على مواقعك على الويب. التحدي الذي قد تُواجهه هو أنه لا تدعم جميع المتصفحات صور WebP. مع سمة <picture> ، لن تُواجه هذه المشكلة حيث يمكن للمتصفح الخاص بك تحميل صورة بديلة إذا كان لا يدعم WebP.

<picture>
 <source type=”image/webp” srcset=”cute-cat.webp”>
 <img src=”cute-cat.jpg” alt=”A cute cat.”>
</picture>

لماذا عليك إنشاء صور مُتواجة بتنسيق HTML وليس بـ CSS؟

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

استهدف الحصول على أفضل جودة مُمكنة للصورة

لقد رأيت كيف يُمكنك إنشاء صور سريعة الاستجابة بتنسيق HTML باستخدام سمة <picture> و <srcset> في هذه المقالة. عادةً ما يتضمن تقديم الصور المُستجيبة مراعاة حجم الصورة ودقتها من حيث صلتها بحجم الشاشة. إذا تم القيام به بشكل خاطئ ، يُمكن أن تتأثر جودة الصورة. تأكد من اختيار صورة تُوفر الاستخدام الأمثل باستخدام أقل الموارد. تحقق من كيفية فتح وتحويل صور HEIC على Android.

المصدر
زر الذهاب إلى الأعلى