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

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

تستكشف هذه المقالة كيف يمكنك إنشاء صور متجاوبة بتنسيق HTML باستخدام srcset وعنصر الصورة.

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

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

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

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

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

متعلق ب: كيفية جعل موقع الويب الخاص بك مستجيبًا وتفاعليًا باستخدام CSS و JavaScript

باستخدام srcset

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

بناء الجملة:

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

 src = "cute-cat.jpg"
 alt = "قطة لطيفة">

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

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

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

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

الأحجام = "(أقصى عرض: 600 بكسل) 480 بكسل ،
 800 بكسل "
 src = "cute-cat.jpg"
 alt = "قطة لطيفة">

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

متعلق ب: كيفية استخدام استعلامات الوسائط في HTML و CSS لإنشاء مواقع ويب سريعة الاستجابة

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

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

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

 src = "cute-cat-low.jpg"
 alt = "قطة لطيفة">

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

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

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

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

 src = "cute-cat-low.jpg"
 alt = "قطة لطيفة">

استخدام

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

بناء الجملة:

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

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

متعلق ب: 7 ميزات CSS جديدة لإنشاء موقع ويب سريع الاستجابة

احتياطي لتنسيق صورة WebP

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

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

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

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

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

مبادئ تصميم الويب سريع الاستجابة

ظل مصممو الويب يدافعون عن التصميم سريع الاستجابة لسنوات حتى الآن ، ولكن ما هو وكيف يمكنه إنتاج صفحات ويب فائقة الجودة؟

اقرأ التالي

عن المؤلف