دليل المبتدئين للصور المستجيبة: كيفية تصحيحها

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

جدول المحتويات:

• صور مستجيبة مع CSS عادي
• صور متجاوبة مع سمات srcset sizes
• استخدام srcset مع واصف كثافة البكسل
• استخدام عنصر <picture>
• أدوات وخدمات للمساعدة في الصور سريعة الاستجابة

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

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

أولاً ، سيتضمن HTML الخاص بي سمات width height :

من أفضل الممارسات تضمين قيم width height في HTML. يضمن هذا احتفاظ المتصفح بالمساحة اللازمة للصورة وعدم وجود إعادة تدفق لاحقة للصفحة أثناء تحميل الصورة.

إلى جانب ذلك ، سأستخدم CSS التالية:

 img { max-width : 100% ; height : auto; }
 لغة الكود: CSS ( css )

ستحل هذه القيم محل HTML الخاص بي. يتم تعيين خاصية max-width إلى 100% للتأكد من أنها تملأ أي مساحة مطلوبة ، بحد أقصى 1000 بكسل (القيمة من HTML). تضمن قيمة height auto أن يحافظ ارتفاع الصورة على أبعاد الصورة متناسبة مع عرضها وارتفاعها الطبيعيين. إذا قمت بإزالة height: auto ، فستبقى الصورة بالارتفاع المحدد في HTML ، بغض النظر عن العرض - وهو عادة ليس ما أريده.

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

ولاحظ أنه في المثال الخاص بي ، الأبعاد الطبيعية للصورة هي 2000 بكسل × 1333 بكسل ، لكنني أختار عرضها بحد أقصى 1000 بكسل.

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

صور متجاوبة مع سمات srcset sizes

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

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

فيما يلي مثال يستخدم إصدارات متعددة من صورة leopard.png من المثال السابق:

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 لغة الكود: HTML ، XML ( xml )

إذا لم تشاهد سمات srcset sizes من قبل ، فقد يبدو ذلك محيرًا للوهلة الأولى. سأقوم بتفصيل كل شيء حتى يسهل فهمه نسبيًا.

تفكيك سمة srcset

تقبل السمة srcset قائمة مفصولة بفواصل تتكون من سلسلة واحدة أو أكثر. كل سلسلة تحتوي على:

• عنوان URL يشير إلى صورة
• أحد الأوصاف الاختيارية التالية (مفصولة بمسافة):
  • واصف العرض
  • واصف كثافة البكسل

في المثال الخاص بي ، قمت بتضمين واصف العرض ، وهو الذي ستراه كثيرًا. لقد قمت بتضمين ثلاثة إصدارات مختلفة من الصورة: النسخة الكبيرة عالية الدقة ، جنبًا إلى جنب مع نسخة بعرض 800 بكسل والأخرى بعرض 480 بكسل.

لاحظ عندما استخدمت واصف العرض في المثال أعلاه ، فإن بناء الجملة هو قيمة العرض متبوعة مباشرة بالحرف "w" (لا تستخدم قيمة الوحدة "px"!). لكل من واصفات العرض التي تمثل الصور ، أستخدم العرض الجوهري للصورة بالبكسل. يمكنك الحصول على الحجم الحقيقي لأي صورة بأي من الطرق العديدة المختلفة - من خلال الرجوع إلى خصائصها في نظام الملفات أو محرر الصور أو حتى في المستعرض أو أدوات مطور المستعرض.

تفصيل سمة sizes

لا تعمل سمة sizes إلا مع سمة srcset . يمكنك استخدام srcset بمفرده (انظر القسم التالي) ، ولكن الطريقة الأكثر شيوعًا لاستخدام srcset هي استخدام sizes .

تقبل سمة sizes قائمة مفصولة بفواصل مكونة من سلسلة أو أكثر. كل سلسلة تحتوي على:

• حالة وسائط (تشبه استعلامات الوسائط المستخدمة في CSS)
• قيمة تحدد حجم "الفتحة" التي ستشغلها الصورة

يمكن أن تكون قيمة الفتحة طولًا مطلقًا مثل em أو px أو وحدة نسبية لإطار العرض (مثل vw ). لاحظ في المثال الخاص بي أن قيم الفتحة في سمة sizes لا تتطابق تمامًا مع واصفات العرض الثلاثة. ها هو الرمز مرة أخرى:

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 لغة الكود: HTML ، XML ( xml )

حقيقة أن قيم الفتحة لا تتطابق تمامًا مع واصفات العرض أمر جيد. في حالتي ، يمكنني تقسيم قيمة sizes على النحو التالي:

• سيعمل منفذ العرض العريض 600 بكسل على تحميل صورة 480 واط من قيمة srcset داخل فتحة يبلغ عرضها 480 بكسل.
• سيُحمّل منفذ العرض العريض 1000 بكسل صورة 800 واط في فتحة 800 بكسل.
• ستملأ الصورة بالحجم الكامل الافتراضية (2000 واط) فتحة تبلغ 1000 بكسل إذا لم يتم استيفاء شروط الوسائط السابقة.

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

يمكنك عرض مثال الكود قيد التشغيل باستخدام العرض التوضيحي CodePen أدناه. لاحظ أنه في هذه الحالة ، سيتعين عليك اختبار شيء ما يحاكي أجهزة مختلفة (مثل DevTools في Chrome). يمكنك أيضًا فتح الصفحة باستخدام مجموعة متنوعة من الأجهزة الحقيقية لإجراء اختبار حقيقي. للراحة ، قمت بتضمين تراكب نص على كل صورة حتى تتمكن من معرفة التحميل عند عرض الصفحة.

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

استخدام srcset مع واصف كثافة البكسل

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

 < img srcset = "images/leopard-480.png, images/leopard-800.png 1.5x, images/leopard.png 2x" src = "images/leopard-480.png" alt = "Leopard on a tree branch" >
 لغة الكود: HTML ، XML ( xml )

لاحظ شيئين هنا. أولاً ، بالنسبة لسمة src العادية ، أستخدم أصغر صورة ، مما يضمن اتباع نهج المحمول أولاً. بعد ذلك ، تشتمل السمة srcset على عدد قليل من الإصدارات الأخرى من الصورة ، مع الدقة المشار إليها بواسطة واصفي 1.5x و 2x. الصورة 480 لا تحتوي على واصف لأن 1x ضمني. أخيرًا ، لاحظ عدم وجود سمة sizes ، والتي لست بحاجة إليها في هذه الحالة. تشرح MDN كيف يختار المتصفح الصورة:

لفهم كيفية عمل الواصفات ، فقط تذكر أن بكسل جهاز واحد يمثل كل بكسل CSS. لذا فإن 1x ستكون نسبة 1: 1 ، و 1.5x ستكون نسبة 1.5: 1 ، وهكذا. يمكنك تجربتها في CodePen أدناه ، ولكن سيتعين عليك استخدام أجهزة مختلفة (أو استخدام أداة تحاكيها) لمعرفة الفرق.

استخدام عنصر <picture>

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

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

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

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

لاحظ ما يلي بخصوص الكود:

• يقبل العنصر <picture> العديد من عناصر <picture> المتداخلة كعناصر فرعية
• يستخدم كل عنصر من عناصر <source> داخل <picture> سمة media لتحديد حالة الوسائط التي تؤدي إلى استخدام تلك الصورة المصدر
• يقبل العنصر <picture> العنصر العادي <img> كطفل ، والذي يتعرف عليه المتصفح على أنه احتياطي إذا لم يكن يدعم <picture>
• لا توجد سمات مباشرة في عنصر <picture> picture> (يقبل <picture> سمات HTML العامة فقط وليس له أي سمات خاصة به)

يوضح CodePen أدناه هذا:

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

أدوات وخدمات للمساعدة في الصور سريعة الاستجابة

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

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

حتى WordPress نفسه يأتي مع دعم مدمج للصور سريعة الاستجابة (بدءًا من الإصدار 4.4).

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

يتوفر إصدار مجاني من Optimole. يسمح بما يصل إلى 5000 زيارة إلى موقع الويب شهريًا وسيوفر لك جميع ميزات التحجيم التلقائي و CDN والمزيد.

ما هي تجربتك مع الصور المتجاوبة على مواقع الويب؟ اسمحوا لنا أن نعرف في التعليقات أدناه.

التخطيط والعرض التقديمي بواسطة كريس فيتزجيرالد وكارول ك.