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

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

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

ما هي الصور المتجاوبة؟

(ينبغي) الصور المستجيبة ** يتم ضبطها تلقائيًا لتلائم حجم الشاشة **. لكن … هل هذه هي الطريقة الصحيحة للقيام بذلك؟ حسنًا ، نعم ولا. إذا بحثت في Google عن هذا أو نظرت إلى أطر عمل حديثة مثل Bootstrap ، فستلاحظ أن تعريفها لـ “الصور المتجاوبة” هو CSS بسيط مشابه لـ:

1max-width:  100%;
2height:  auto;

في حين أن هذا “يعمل” ، فإنه ليس صحيحًا تمامًا. هناك عدة أسباب لذلك ، ولكن أهمها هو حجم الصورة. أنا لا أتحدث عن “عرض / ارتفاع” الصورة ، أنا أتحدث عن الحجم الفعلي للصورة بالكيلو بايت / ميغا بايت.

تستخدم معظم مواقع الويب (مثل 80٪ من مواقع الويب التي رأيتها في كل هذه السنوات) صورًا كبيرة بشكل لا يصدق على مواقع الويب الخاصة بهم وتقوم ببساطة “بتوسيعها” صعودًا وهبوطًا. عادة ما تكون هذه الصورة من 1000 بكسل إلى 4000 بكسل وحتى أنني رأيت 8000 بكسل !!! (يا له من جنون).

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

كيف تصنع صورًا سريعة الاستجابة؟

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

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

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

من بين جميع أعمالي والاختبارات التي قمت بها ، لا يوجد حل “واحد يناسب الجميع” وأنت مطالب دائمًا ببعض الأعمال الإضافية.

اختيار علامات HTML الصحيحة للصورة

هذا هو أول وأهم شيء يجب أن تفهمه. يمكنك استخدام العلامة التقليدية <img /> أو علامة `الحديثة.

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

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

** باستخدام علامات img **

توجد علامات img على غالبية مواقع الويب الموجودة هناك ؛ بالنسبة للصور المتجاوبة ، يتم دمج العلامات <img /> مع السمة srcset ، ولكن يمكنني أن أخبرك بكل ثقة أن أياً منها لا يعمل بشكل صحيح.

تتمثل إحدى المشكلات في أن علامة <img /> لا تعمل بشكل صحيح في بعض المتصفحات ، على سبيل المثال Chrome. لدي بالفعل مشكلة تم فتحها على stackoverflow.com بخصوص هذا بدون تفسير لماذا.

هناك مشكلة أخرى تتمثل في أن الحصول على سمة “المقاسات” بشكل صحيح يعد أمرًا مزعجًا. هناك الكثير والكثير من المقالات التي تحتوي على تفسيرات صريحة وغير مكتملة للغاية والتي وجدت بصراحة أنها محبطة للغاية.

مع قول ذلك ، لن أناقش استخدام “” للصور المتجاوبة لأنه لا معنى له (في رأيي).

** استخدام بطاقات الصور **

تعد علامات picture هي الأفضل من وجهة نظري ، فهي تسمح لنا بالتلاعب وإرشاد المتصفح لتحميل الصورة نريد ان.

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

ومع ذلك ، لا توجد مشكلة ، فقد حان الوقت يموت هذا المتصفح هذا العام .

إنشاء أبعاد صورة سريعة الاستجابة

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

أنصحك باستخدام هذا: https://responsivebreakpoints.com/ كنقطة انطلاق. ستعمل الأداة على تغيير حجم صورك وإنشاء نقاط توقف للحصول على صور متجاوبة.

على سبيل المثال ، ستحتوي صورة الكلب على موقعهم على العديد من الصور المختلفة التي تم تغيير حجمها ورمز HTML الخاص بها:

 1<picture>
 2	<source
 3		media="(max-width: 767px)"
 4		sizes="(max-width: 1534px) 100vw, 1534px"
 5		srcset="
 6		dog_ar_1_1,c_fill,g_auto__c_scale,w_200.jpg 200w,
 7		dog_ar_1_1,c_fill,g_auto__c_scale,w_493.jpg 493w,
 8		dog_ar_1_1,c_fill,g_auto__c_scale,w_707.jpg 707w,
 9		dog_ar_1_1,c_fill,g_auto__c_scale,w_877.jpg 877w,
10		dog_ar_1_1,c_fill,g_auto__c_scale,w_1032.jpg 1032w,
11		dog_ar_1_1,c_fill,g_auto__c_scale,w_1108.jpg 1108w,
12		dog_ar_1_1,c_fill,g_auto__c_scale,w_1259.jpg 1259w,
13		dog_ar_1_1,c_fill,g_auto__c_scale,w_1353.jpg 1353w,
14		dog_ar_1_1,c_fill,g_auto__c_scale,w_1468.jpg 1468w,
15		dog_ar_1_1,c_fill,g_auto__c_scale,w_1534.jpg 1534w">
16	<source
17		media="(min-width: 768px) and (max-width: 991px)"
18		sizes="(max-width: 1983px) 70vw, 1388px"
19		srcset="
20		dog_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg 538w,
21		dog_ar_4_3,c_fill,g_auto__c_scale,w_793.jpg 793w,
22		dog_ar_4_3,c_fill,g_auto__c_scale,w_1004.jpg 1004w,
23		dog_ar_4_3,c_fill,g_auto__c_scale,w_1198.jpg 1198w,
24		dog_ar_4_3,c_fill,g_auto__c_scale,w_1238.jpg 1238w,
25		dog_ar_4_3,c_fill,g_auto__c_scale,w_1384.jpg 1384w,
26		dog_ar_4_3,c_fill,g_auto__c_scale,w_1388.jpg 1388w">
27	<source
28		media="(min-width: 992px) and (max-width: 1199px)"
29		sizes="(max-width: 2400px) 60vw, 1440px"
30		srcset="
31		dog_ar_16_9,c_fill,g_auto__c_scale,w_596.jpg 596w,
32		dog_ar_16_9,c_fill,g_auto__c_scale,w_877.jpg 877w,
33		dog_ar_16_9,c_fill,g_auto__c_scale,w_1086.jpg 1086w,
34		dog_ar_16_9,c_fill,g_auto__c_scale,w_1314.jpg 1314w,
35		dog_ar_16_9,c_fill,g_auto__c_scale,w_1440.jpg 1440w">
36	<img
37		sizes="(max-width: 7000px) 40vw, 2800px"
38		srcset="
39		dog_c_scale,w_480.jpg 480w,
40		dog_c_scale,w_713.jpg 713w,
41		dog_c_scale,w_1036.jpg 1036w,
42		dog_c_scale,w_1180.jpg 1180w,
43		dog_c_scale,w_1313.jpg 1313w,
44		dog_c_scale,w_1433.jpg 1433w,
45		dog_c_scale,w_1606.jpg 1606w,
46		dog_c_scale,w_1748.jpg 1748w,
47		dog_c_scale,w_1884.jpg 1884w,
48		dog_c_scale,w_2015.jpg 2015w,
49		dog_c_scale,w_2133.jpg 2133w,
50		dog_c_scale,w_2260.jpg 2260w,
51		dog_c_scale,w_2377.jpg 2377w,
52		dog_c_scale,w_2345.jpg 2345w,
53		dog_c_scale,w_1871.jpg 1871w,
54		dog_c_scale,w_2800.jpg 2800w"
55		src="dog_c_scale,w_2800.jpg"
56		alt="">
57</picture>

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

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

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

إنشاء أبعاد الصورة سريعة الاستجابة بنفسك

الأفضل (والحل الوحيد بصراحة) هو إنشاء علامات الصورة بنفسك.

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

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

| نقطة توقف | الجهاز | البعد | | ——————– | —————————- —————– | ———– | | X- صغير | أجهزة صغيرة (هواتف عمودية ، أقل من 576 بكسل) | <576 بكسل | | صغير | الأجهزة الصغيرة (هواتف المناظر الطبيعية ، 576 بكسل وما فوق) | ≥576 بكسل | | متوسط | الأجهزة المتوسطة (الأجهزة اللوحية ، 768 بكسل وما فوق) | ≥768px | | كبير | الأجهزة الكبيرة (أجهزة كمبيوتر سطح المكتب ، 992 بكسل وما فوق) | ≥992 بكسل | | كبير جدا | الأجهزة الكبيرة (أجهزة كمبيوتر سطح المكتب الكبيرة ، 1200 بكسل وما فوق) | ≥ 1200 بكسل | | كبير جدًا جدًا | الأجهزة الكبيرة (أجهزة كمبيوتر سطح المكتب الأكبر حجمًا ، 1400 بكسل وما فوق) | ≥1400 بكسل |

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

1<picture>
2	<source srcset="" media="(min-width: 1400px)">
3	<source srcset="" media="(min-width: 1200px)">
4	<source srcset="" media="(min-width: 992px)">
5	<source srcset="" media="(min-width: 768px)">
6	<source srcset="" media="(min-width: 576px)">
7	<source srcset="" media="(min-width: 320px)">
8	<img src="" width="" height="" class="" alt="" >
9</picture>

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

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

مثال 1:

  • على جهاز كبير (أجهزة كمبيوتر مكتبية كبيرة ، 1200 بكسل وما فوق) تكون الحاوية الخاصة بك حيث تقوم بتضمين مجموعة الصور بحجم ثابت 800 بكسل
  • سينظر المتصفح إلى منفذ العرض الخاص بك الذي يبلغ 1920 بكسل على سبيل المثال ، وسوف يقوم بتحميل صورة بحجم 1400 بكسل (بينما في الواقع ستحتاج إلى حجم الصورة 768 بكسل …)

** مثال 2 **:

  • على أي جهاز ، تكون الحاوية الخاصة بك حيث تقوم بتضمين مجموعة الصور بحجم ثابت يبلغ 400 بكسل (يمكن أن تكون هذه بطاقة على سبيل المثال أو صندوقًا بسيطًا)
  • سينظر المتصفح إلى منفذ العرض الخاص بك الذي يبلغ 1920 بكسل على سبيل المثال ، وسوف يقوم بتحميل صورة بحجم 1400 بكسل (بينما في الواقع ستحتاج إلى حجم الصورة 320 بكسل …)

مع هذا ، فأنت تقوم بتحميل الصورة الخاطئة ، وهذا يكلفك أنت والمستخدم الخاص بك. أولاً ، تفقد السرعة (مما يؤثر على تصنيف مُحسّنات محرّكات البحث الخاص بك بالمناسبة) ثم ينتظر المستخدم إلى الأبد حتى يتم تحميل الصورة إذا كان على هاتف محمول أو بطيء النطاق الترددي.

الحل المناسب هو فحص الحاوية الخاصة بك حيث تقوم بتضمين الصورة وتحديد الحجم المناسب لها.

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

لذلك بالنسبة للمثال 1 أعلاه ، قمت بتعديل الكود الخاص بي على النحو التالي:

1<picture>
2	<source srcset="" media="(min-width: 1200px), (min-width: 1400px), (min-width: 2500px)">
3	<source srcset="" media="(min-width: 992px)">
4	<source srcset="" media="(min-width: 768px)">
5	<source srcset="" media="(min-width: 576px)">
6	<source srcset="" media="(min-width: 320px)">
7	<img src="" width="" height="" class="" alt="">
8</picture>

ماذا يعني هذا؟ إنها تشرح نفسها بنفسها ولكن سأشرحها على أي حال:

  • على جهاز لا يقل عرضه عن 320 بكسل ، قم بتحميل الصورة مقاس 320 بكسل
  • على جهاز بعرض 576 بكسل كحد أدنى ، قم بتحميل الصورة 576 بكسل
  • على جهاز لا يقل عرضه عن 768 بكسل ، قم بتحميل الصورة مقاس 768 بكسل
  • على جهاز لا يقل عرضه عن 992 بكسل ، قم بتحميل الصورة التي تبلغ 992 بكسل
  • على جهاز بحد أدنى ** عرض 1200 بكسل أو 1400 بكسل أو 2500 بكسل ، قم بتحميل صورة 1200 بكسل **

يضمن السطر الأخير أن المتصفح لا يقوم بتحميل حجم صورة أكبر عندما يكون حجم الحاوية 800 بكسل فقط (أو 1200 بكسل في حالتي عند النقر فوق توسيع المقالة)

أجد ما ورد أعلاه بالقرب من الكمال من حيث تحميل حجم الصورة الصحيح. حتى Google Pagespeed يعجبه ولا يصدر أي تحذيرات نظرًا لأننا نقوم بتحميل حجم الصورة الصحيح.

اختبار الصور المتجاوبة

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

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

ما عليك القيام به بسيط ، لا يستغرق الأمر سوى بعض الوقت:

  • افتح المتصفح الذي تريده وقم بتحميل صفحتك
  • افتح أدوات المطور وانتقل إلى علامة التبويب الشبكة وحدد فلتر “الصور” فقط
  • قم بتحديث صفحتك عبر العديد من الأجهزة (الأجهزة المحمولة والأجهزة اللوحية وما إلى ذلك) ومعرفة الصور التي يتم تحميلها

هذا كل شيء حقًا ، لا شيء خيالي.

النصائح والحيل

  • إذا كان لديك العديد من الصور (أكثر من رأس) ، فاستخدم السمة loading = lazy. يمكنك قراءة المزيد عنها هنا .
  • إذا لم تتمكن من تصدير صورك / تغيير حجمها بنفسك ، يمكنك استخدام الخدمة عبر الإنترنت للقيام بذلك. سيقدمون أيضًا شبكة CDN التي ستحمّل صورك بسرعة فائقة. أوصيك باستخدام صور Cloudflare .
  • قم بتسمية صورك بشكل صحيح ، هذا مهم للغاية. إذا لم تقم بتسمية صورك بشكل صحيح (مثل ، image-small.jpg أو image-320.jpg) ، فلن تتمكن بسهولة من معرفة الصورة التي يتم تحميلها أثناء الاختبار.

حسنًا ، هذا كل شيء ، آمل أن يكون هذا المقال قد ساعدك.