إن مواصفات الصورة المتجاوبة هي وثيقة رائعة تصف العديد من الاستخدامات لمثل هذه الصور. لكن التجربة تخبرني أنه في معظم الأحيان عند العمل معهم ما عليك سوى معرفة كيفية إعطاء العميل نسخًا من نفس الصورة ذات الأحجام المختلفة ، واختيارها اعتمادًا على عرض منطقة عرض الصفحة. نسمي هذا "تبديل القرار". لحل هذه المشكلة ، يمكنك استخدام السمات srcsetو sizes.يتضمن إخراج الصور المتجاوبة استخدام منطق معقد إلى حد ما. هذا ، من بين أمور أخرى ، يتضمن تحديد الصورة التي سيتم عرضها ، وكذلك تحديد ما إذا كان المستخدم يعمل مع شاشة عالية الدقة. لحسن الحظ ، فإن المتصفحات أفضل من الأشخاص الذين يمكنهم تحديد الصور الأكثر ملاءمة لكل مستخدم معين. كل ما علينا فعله هو إعطائهم بعض القرائن. srcsetتمنح السمة المتصفح قائمة بالموارد الرسومية التي يمكن من خلالها تحديد الصورة الأكثر ملاءمة. sizesتسمح لك السمة بإخبار المستعرض عن حجم الصورة التي تريد عرضها في حالة معينة.
وبالمناسبة ، باستخدام الصور المتجاوبة لا داعي للقلق بشأن دعم المتصفح لهذه التقنية. السمات التي نهتم بها تتمتع بدعم متصفح ممتاز . بالإضافة إلى ذلك ، لدينا تحت تصرفنا آلية نسخ احتياطي مصممة للمتصفحات القديمة مثل IE11.كيف تتواصل العلامة مع المتصفح
هذه هي الطريقة التي <img>تخبر العلامة المتصفح عن الصورة التي يجب اختيارها."Talk" للعلامة والمستعرضهنا<img>تخبرالعلامةالمتصفح بما يلي: "مع حجم الشاشة هذا ، سيتم عرضي بالحجم التالي تقريبًا (يشير إلى سمةsizes). يمكنك التقاط أي من هذه الصور التي لها العرض التالي (يشير إلى سمةsrcset). لذلك ، يُرجى اختيار الصورة الأنسب الآن ".سمة Srcset
srcsetتمنح السمة المتصفح مجموعة من الموارد الرسومية التي يمكن من خلالها اختيار الأنسب. كما يحتوي على معلومات حول حجم كل من الصور المقترحة.سمة Srcsetsrc تحتويهذه السمةعلى صورة احتياطية للمتصفحات التي لا تفهم السمةsrcset. وsrcsetيحتوي URL الصور والمعلومات حول العرض الخاصة بهم. من مجموعة الصور المقدمة له ، سيختار المتصفح ما يناسبك. علاوة على ذلك ، إذا كان لدى المستخدم شاشة بكثافة بكسل عالية (شاشة Retina) - سيأخذ المستعرض هذا في الاعتبار عند اختيار صورة.تحتويالسمةsrcsetعلى قائمة بعناوين URL للصور متبوعة بمعلومات عرض الصورة. يتمURL-فصلالأزواجبفواصل. تبدو عناصر القائمة كما يليimage.jpg 1000w:. يخبر مثل هذا السجل المستعرض أن الصورةimage.jpgبعرض 1000 بكسل.من خلال وصف مجموعة الصور بهذه الطريقة ، نقول للمتصفح ما يلي: "أقدم لك قائمة بالصور وأثق بك في اختيار أنسبها."سيختار المتصفح أفضل صورة ، مسترشداً بمجموعة معقدة من المعايير ، والتي تتضمن الصورة التي يعرضها المستخدم ، والحجم الحالي لمنطقة العرض ، وما إذا كان المستخدم لديه شاشة عالية الدقة.المتصفح ذكي بما يكفي لمعرفة أنه على شاشة سطح مكتب منخفضة الدقة ، إذا كان عرض الصورة الناتجة 800 بكسل ، فأنت بحاجة إلى تحديد الصورة من القائمة بعرض 800 بكسل على الأقل.بالإضافة إلى ذلك ، يعرف المستعرض أنه إذا تم عرض صورة بعرض 320 بكسل على شاشة عالية الدقة ، فستحتاج إلى تحديد ملف صورة بعرض 640 بكسل على الأقل. ونتيجة لذلك ، لا داعي للقلق بشأن الموارد الرسومية 1x و 2 x. كل ما عليك فعله هو منح المتصفح مجموعة جيدة من الصور والسماح له بالقيام بعمله.كيف تصف الصور المناسبة للشاشات المختلفة؟سمة الأحجام
السمة srcsetأداة رائعة. ولكن عندما يقرأ المتصفح شفرة HTML للصفحة ، فإنه لا يعرف ما إذا كان ، على سبيل المثال ، يتم استخدام نمط CSS ، والذي يضبط حجم الصورة على 50٪ من عرض الشاشة. هنا يأتي دور السمة sizes. باستخدامه ، يمكننا إعطاء المتصفح تلميحًا حول حجم الصورة التي سيتم عرضها بعد تطبيق CSS عليها.سمة الأحجام100vw- الحجم الافتراضي عندما لا يتم استيفاء أي من الشروط. تتم الإشارة إليه أخيرًا في القائمة الموجودة في السمة sizes.1023px - عرض النافذة.780px - عرض الصورة عند تحقق الشرط المحدد.
سيتوقف المتصفح عند أول شرط مستوفٍ. تحتويالسمة sizesعلى قائمة شروط الوسائط ، مفصولة بفواصل. شروط الوسائط هي مجموعة فرعية من استعلامات الوسائط. هنا لا يمكنك تحديد نوع البيئة التي ينطبق عليها الشرط ( printأو screen) ، ولكن يمكنك استخدام استعلامات الوسائط ذات الصلة بعرض منطقة العرض.يحتوي كل إدخال قائمة على عرض إطار إطار العرض وعرض الصورة المقابلة. يحتوي عنصر القائمة على النموذج (min-width: 1023px) 780px. يخبر مثل هذا السجل المتصفح أنه إذا كان عرض إطار العرض 1023 بكسل (أو أكثر) ، فأنت بحاجة إلى استخدام صورة بعرض 780 بكسل.هنا ، بالإضافة إلى ذلك ، يمكن استخدام وحدات العرض النسبية. على سبيل المثال ، شيء من هذا القبيل50vw. هذا يخبر المتصفح أن عرض الصورة سيكون 50٪ من عرض إطار العرض. هنا ، في المواقف الأكثر تعقيدًا ، يمكنك حتى استخدام الوظيفة calc. على سبيل المثال ، calc(50vw — 2rem)يخبر تصميم العرض المستعرض أن عرض الصورة سيكون 50٪ من عرض إطار العرض ناقص 2rem. ربما يتم تعيين العرض بهذه الطريقة لمراعاة عرض بعض المسافة البادئة أو بعض الحدود.العنصر الأخير من القائمة غير متوفر مع شرط وسائط. إذا قمت بإضافة عرض إلى القائمة ولم تحدد حالة وسائط ، فسيتم اعتبار القيمة المقابلة كقيمة افتراضية ، أي في حالة عدم استيفاء أي من الشروط الأخرى.سوف ينظر المستعرض إلى هذه القائمة من الأعلى إلى الأسفل ويتوقف عند أول عنصر مناسب يتوافق مع عرض إطار العرض.افترض أن ما sizesيلي موجود في السمة :(min-width: 1023px) 780px,
(min-width: 675px) 620px,
100vw
إليك ما سيحدث في مواقف مختلفة:- إذا كان المستخدم يعمل على شاشة كبيرة لسطح المكتب ، فإن المتصفح سيأخذ في الاعتبار أن العنصر الأول من القائمة مناسب وسيعرف أن الصورة يجب أن تكون بعرض 780 بكسل.
- يبلغ العرض القياسي لمنطقة العرض لشاشة iPad المستقيمة 768 بكسل. في هذه الحالة ، سيتخطى المتصفح الإدخال الأول في القائمة ، ولكنه سيجد أن الظروف الحالية تتطابق مع الإدخال الثاني. تخبر المتصفح أن الصورة ستكون بعرض 620 بكسل.
- ,
sizes. , , 100% .
بالطبع ، هذه مجرد أمثلة. في العالم الحقيقي ، كل شيء أكثر تعقيدًا. على سبيل المثال ، سيحصل المستخدم الذي لديه شاشة كبيرة يشاهد صفحة في نافذة متصفح ضيقة على صورة أصغر مما لو كانت النافذة قد تم توسيعها إلى وضع ملء الشاشة. قد يحصل المستخدم الذي يستخدم iPad Pro على صورة أكبر إذا وضع الجهاز في الوضع الأفقي. إذا كان يستخدم الجهاز اللوحي في الوضع الرأسي ، فقد يحصل على صورة متوسطة الحجم. وإذا كان يستخدم المتصفح في الوضع عندما يتم تقسيم الشاشة بين عدة نوافذ ، فقد يحصل على صورة صغيرة. تتوافق بعض الهواتف ذات الشاشات الكبيرة مع القاعدة الثانية من قائمتنا عند العمل معها في الوضع الأفقي. هذا هو سحر النظام الموصوف:لا يحتاج المطور إلى الاهتمام بجميع هذه الحالات الخاصة وعوامل الشكل المختلفة للأجهزة. يكفي بالنسبة له أن يخبر المستعرض عن إصدار الصورة التي يختارها لمنطقة عرض معينة.كيف تعد قائمة بالصور يختار المتصفح من بينها الأنسب؟سمة Src
ربما لاحظت أن السمة لا تزال مستخدمة في جميع الأمثلة أعلاه src. قد تتساءل عما إذا كانت هذه السمة مطلوبة بالنظر إلى السمة srcset. النقطة هنا هي أنه إذا أعطينا المتصفح سمة srcset، فعندئذٍ إذا كان متصفحًا حديثًا ، فسيتم استبدال القيمة srcفي DOM بالقيمة المقابلة للصورة المحددة من srcset. ونتيجة لذلك ، اتضح أن المتصفحات الحديثة تتجاهل السمة src، مع التركيز بدلاً من ذلك على السمة srcset.لكن السمة srcفي حد ذاتها لا تزال مهمة للمتصفحات التي لا تدعم العمل مع الصور المتجاوبة. هذه المتصفحات، قديمة جدا، تتجاهل srcsetو الصفات sizes. إنهم ببساطة لا يعرفون عن وجودهم. لكن صفةsrcيفهمونه ، بحيث يمكنك كتابة عنوان الصورة فيه ، والذي سيكون بمثابة خيار النسخ الاحتياطي لمثل هذه المتصفحات. عادة ما أكتب في هذه السمة عنوان أصغر صورة تبدو جيدة على شاشات سطح المكتب التي لا تحتوي على كثافة بكسل عالية.أسئلة وأجوبة
▍كيفية إنشاء مجموعات صور؟
يمكن إنشاء الصور بطرق مختلفة: يدويًا ، باستخدام الأداة لإنشاء صور متجاوبة ، باستخدام إمكانات CDN المناسبة.لإنشاء صور يدويًا ، تحتاج إلى فتح الصورة الأصلية في Photoshop (أو في محرر آخر تستخدمه) وتصديرها بجميع الأحجام اللازمة.قد يتطلب هذا الكثير من الوقت ، لذلك قد ترغب في أتمتة هذا العمل باستخدام الأداة المناسبة. من بين هذه الأدوات ، أحب مولد الصور المتجاوبة بشكل كبير .من Cloudinary. عند العمل باستخدام هذه الأداة ، ما عليك سوى نقل الصورة إليها ، وبعد ذلك ستقوم تلقائيًا بإنشاء متغيراتها بأحجام مختلفة. هنا يمكنك ضبط عدد الصور التي تم إنشاؤها. بمجرد أن تصبح الصور جاهزة ، يمكن تنزيلها واستخدامها في المشروع.هناك خيار آخر لدعم الصور المتجاوبة وهو استخدام شبكة CDN المناسبة لاستضافتها. على سبيل المثال - Cloudinary أو imgix. باستخدام خدمة مماثلة ، يتم تنزيل الصورة بأعلى دقة متاحة إلى شبكة CDN. يمكنك بعد ذلك طلب نسخ من الصورة بأحجام مختلفة باستخدام معلمات URL. في هذه الحالة ، لا داعي للقلق بشأن تغيير حجم الصورة: فقط أخبر شبكة CDN عن الحجم الذي ستعرض فيه الصورة المقابلة.فيما يلي قائمة بالخدمات والمشاريع التي يمكنك استخدامها لإنشاء أشكال مختلفة من الصور بأحجام مختلفة.hat ما هي الأحجام التي يجب أن أقدمها للمتصفح؟
سؤال جيد! إذا أعطيت المتصفح الكثير من الموارد الرسومية ، فسوف تضيع وقتك وجهدك في إنشائها. إذا كان هناك عدد قليل جدًا من الموارد ، فهذا يعني أنك تجبر مستخدمي موقعك على تنزيل صور أكبر مما يحتاجون إليه.إذا كنت تعمل مع صورة واحدة ولديك الفرصة لتخصيص التخطيط لمخرجات هذه الصورة ، فيمكنك حينئذٍ استخدام أداة مولد فواصل الصور المتجاوبة. سوف يفحص الصورة تلقائيًا ويقرر ما هي المجموعة المثلى من الموارد (من حيث التوازن بين أحجام الملفات ودقتها) الناتجة عن هذه الصورة. ثم هذه الأداة سوف لن تولد سوى الملفات، ولكن أيضا إعداد تلقائيا srcsetو الصفات sizes.مجموعة قياسية من أحجام الصور بعرض 320 إلى 2560 بكسلإذا كنت تعمل في نظام إدارة محتوى معين ، أو إذا كنت تقوم بإنشاء تطبيق ويب ، ولا تعرف حجم الصورة الذي سيتم عرضه في مكان أو آخر ، فإنني أوصي باستخدام مجموعة الأحجام القياسية الصور. في السابق، كنت الأبعاد التالية:320w،640w،960w،1280w،1920wو2560w. هذه أرقام تقريبية يتم الحصول عليها عن طريق ضرب 320 في معاملات مختلفة. تغطي هذه المجموعة من الموارد احتياجات مجموعة متنوعة من الشاشات - بدءًا من شاشات الجوّال الصغيرة إلى شاشات سطح المكتب الضخمة.ومع ذلك ، فإن استخدام مجموعة قياسية من الموارد يكون دائمًا أقل فاعلية من استخدام مجموعتك الخاصة ، مع مراعاة ميزات المشروع. في هذه الحالة ، على الرغم من أننا نرى تسلسلًا منطقيًا تمامًا ، إلا أنها تُظهر زيادة تدريجية في أحجام الملفات ، لأنه إذا تم مضاعفة عرض الصورة (وبالتالي ارتفاعها) ، فإن عدد وحدات البكسل في هذه الصورة يتضاعف أربع مرات . ونتيجة لذلك ، إذا كان عليك استخدام مجموعة قياسية من أحجام الصور ، فقد تحتاج إلى اختيار مجموعة تحتوي على خيارات أقل للصور ذات الأحجام الصغيرة والمزيد من الخيارات للأحجام الكبيرة.إذا قمت باستضافة صور على Cloudinary ، فسيكون هناك نهج آخر متاح لك. هو الاستخدامCloudinary API ، الذي يسمح لك بمعالجة الصور باستخدام مولد الصور المتجاورة عند تنزيلها. بعد الانتهاء من معالجة الصور تلقائيا، يمكنك ملء حيوي srcsetو سمات باستخدام رد API sizes.▍ ما هي القيم التي يجب إدخالها في سمة المقاسات؟
لمعرفة القيم التي يجب إدخالها في السمة sizes، تحتاج إلى تحليل CSS وفهم عرض الصورة الذي يتم عرضه في ظروف مختلفة.في بعض الأحيان يتم تحديد ذلك من خلال عرض الصورة نفسها:img {
width 320px;
}
@media screen and (min-width: 37.5em) {
width: 640px;
}
في هذه الحالة ، يوجد خياران لحجم الصورة الثابت. يمكن أن تنعكس هذه الحقيقة مباشرة في السمة sizes:<img
alt="Ferrari"
src="ferrari.jpg"
srcset="ferrari-s.jpg 320w,
ferrari-m.jpg 960w,
ferrari-l.jpg 1920w"
sizes="(min-width: 37.5em) 640px, 320px">
ومع ذلك ، غالبًا ما يتبين أن أحجام الصور مرنة. غالبًا ما ترث الصور الأحجام من حاوياتها:img {
height: auto;
width: 100%;
}
.container {
padding: 1rem;
width: 100%;
}
@media screen and (min-width: 37.5em) {
.container {
width: 50%;
}
}
في هذا المثال (بافتراض أن العنصر الوحيد الذي يؤثر على عرض الصورة هو .container) يمكن اعتبار عرض الحاوية عرض الصورة. هنا يجدر الانتباه إلى حقيقة أن عرض المسافة البادئة الداخلية يتم طرحه من عرض الحاوية. قد تحتاج إلى التفكير في ذلك ، ربما لا. كل هذا يتوقف على مدى تأثير المسافة البادئة على العرض النهائي للصورة.<img
alt="Ferrari"
src="ferrari.jpg"
srcset="ferrari-s.jpg 320w,
ferrari-m.jpg 960w,
ferrari-l.jpg 1920w"
sizes="(min-width: 37.5em) calc(50vw - 2rem),
calc(100vw - 2rem)">
كما ترى ، فإن تعيين سمة sizesيعتمد بشكل كبير على التخطيط المعين. عادةً ما أقوم ببناء العمل ، بدءًا من البحث عن الصور في أدوات مطور المستعرض ومعرفة الخيارات التي تؤثر على حجم الصور.toكيفية التحقق من الإعدادات الصحيحة للصور سريعة الاستجابة؟
من السهل تخيل أن اختبار الإعدادات الصحيحة للصور سريعة الاستجابة يمكن أن يكون صعبًا ويستغرق وقتًا طويلاً. ولكن ، لسعادتنا ، هناك أداة تبسط حل هذه المشاكل. هذه صورة مستجيبة Linter .هذا هو التطبيق المختصر الذي يمكن إضافته إلى المتصفح واستخدامه على موقعك الخاص. عندما يتم استدعاؤها ، فإنها تقوم بمسح الصفحة تلقائيًا ، باستخدام أحجام مختلفة لمنطقة العرض وكثافة بكسل الشاشة لاختبار الصور.ثم يعرض تقريرًا يحتوي على معلومات حول جميع صور الصفحة ، وما إذا كانت إدارة أحجامها منظمة بشكل صحيح. إذا حدث خطأ ما أثناء اختبار الصفحة ، فسيتم إبلاغك بذلك وحتى تقديم المشورة لكيفية إصلاح المشكلة.ملخص
كما ترون، فإن الجمع بين سمات srcsetو sizesيوفر فرصة كبيرة. من خلال تعيين هاتين السمتين ، تخبر المتصفح عن عرض الصور التي تريد استخدامها لعرض معين لمنطقة العرض ، وتعطي قائمة بالموارد الرسومية التي يختار المستعرض من خلالها أنسبها.إذا كنت بحاجة إلى حل مشكلات أكثر تعقيدًا عند العمل مع الصور ، فكن على دراية بأن هناك أدوات لحل هذه المشكلات. لنفترض أن هذا شيء يشبه استخدام تنسيقات الرسوم الحديثة مثل WebP ، أو إرسال صور مختلفة إلى العميل ، اعتمادًا على حجم الشاشة. إذا كنت ترغب في الخوض في العمل مع الصور المتجاوبة - ألق نظرة على هذه المادة.القراء الأعزاء! هل تستخدم صور متجاوبة في مشاريعك؟