تعد أداة Lighthouse من Google Chrome مصدرًا قيمًا للمطورين الذين يسعون إلى تحسين مواقعهم على الويب للأداء وإمكانية الوصول وتحسين محركات البحث. إحدى الفرص الرئيسية التي حددتها Lighthouse هي الحاجة إلى "حجم الصور المناسب". يسرد هذا الجانب من التقرير ، الموجود ضمن قسم "الفرص" ، جميع الصور الموجودة على صفحتك والتي لم يتم تحديد حجمها بشكل مناسب. من خلال تغيير حجم هذه الصور ، يمكنك حفظ البيانات وتحسين أوقات تحميل صفحتك بشكل ملحوظ.
فهم الحاجة إلى الحجم المناسب للصورة
تعاني العديد من مواقع الويب من بطء أوقات التحميل بسبب الصور التي تكون أكبر من اللازم. تستغرق الصورة كبيرة الحجم وقتًا أطول للتحميل وتستخدم المزيد من البيانات ، مما قد يمثل مشكلة خاصة للمستخدمين الذين يستخدمون اتصالات الإنترنت أو الأجهزة المحمولة الأبطأ. لا يؤدي تغيير حجم الصور بشكل صحيح إلى تحسين سرعة موقع الويب الخاص بك فحسب ، بل يؤدي أيضًا إلى تحسين تجربة المستخدم ويمكن أن يكون له تأثير إيجابي على مُحسّنات محرّكات البحث لديك.
تحديد الفرص مع المنارة
يوفر Lighthouse قائمة مفصلة بالصور التي لم يتم تغيير حجمها بشكل مناسب في قسم الفرص في تقرير التدقيق. يتم سرد كل صورة جنبًا إلى جنب مع التوفير المحتمل بالكيلو بايت (KB) والذي يمكن تحقيقه عن طريق تغيير حجمها لتناسب حجم عرضها بشكل أفضل.
تحسب الأداة هذا الحفظ المحتمل من خلال مقارنة حجم الصورة الحالي بحجم عرضها. يمثل الاختلاف في KB مقدار البيانات التي يمكن حفظها والتحسين المقابل في وقت التحميل.
تنفيذ التغييرات
بعد تحديد الصور التي تحتاج إلى تغيير حجمها ، فإن الخطوة التالية هي إنشاء نسخ تم تغيير حجمها من هذه الصور. هناك العديد من الأدوات المتاحة لإنجاز هذه المهمة. واحد شائع هو:
- Imagelato ، أداة عبر الإنترنت تمكنك من تحويل صور الويب وتغيير حجمها وتحسينها.
بمجرد تغيير حجم صورك ، تأكد من الإشارة إليها بشكل صحيح في HTML. يتضمن هذا عادةً تحديث السمة "src" لعنصر HTML "img" للإشارة إلى الصورة الجديدة الأصغر.
استخدام عنصر صورة HTML
بالإضافة إلى تغيير حجم الصور ، يمكنك تحسين موقع الويب الخاص بك بشكل أكبر باستخدام عنصر HTML لتحديد إصدارات بديلة من الصورة. تتيح لك هذه العلامة تقديم صور مختلفة بناءً على ظروف مختلفة مثل حجم منفذ العرض ودعم تنسيق الصورة. توفر [وثائق MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) دليلاً ممتازًا لاستخدام عنصر .
على سبيل المثال ، يمكنك استخدام سمة "الوسائط" لتقديم صور عالية الدقة للشاشات ذات كثافة بكسل أعلى. يمكنك أيضًا استخدام السمة "النوع" لتحديد تنسيقات مختلفة مثل WebP و JPEG. إليك كيفية استخدام علامة `` :
في هذا المثال ، سيحاول المتصفح اختيار أفضل مصدر بناءً على إمكانياته وظروف الوسائط. توفر CSS-Tricks مزيدًا من المعلومات حول استخدام سمة "الوسائط" مع نسبة بكسل للجهاز.
توافق المتصفح والتصميم سريع الاستجابة
أثناء تغيير حجم صورك ، من الضروري مراعاة توافق المتصفح والتصميم سريع الاستجابة. ستتطلب الأجهزة وأحجام الشاشات المختلفة أحجام صور مختلفة لتبدو في أفضل حالاتها. لذلك ، يجب عليك تقديم إصدارات متعددة من كل صورة واستخدام ميزات HTML و CSS مثل السمة "srcset" أو عنصر "الصورة" لتقديم الصورة الأكثر ملاءمة لكل مستخدم.
لمزيد من المعلومات حول الصور المتجاوبة وتوافق المستعرض ، هل يمكنني استخدامه هو مورد ممتاز للتحقق من دعم الميزات المختلفة عبر المتصفحات المختلفة ، ويوفر دليل CSS Tricks الخاص بالصور المستجيبة تفاصيل شاملة حول هذا الموضوع.
خاتمة
تعد فرصة "الصور ذات الحجم المناسب" التي توفرها أداة Lighthouse من Google طريقة فعالة لتحديد تحسينات الأداء المحتملة لموقعك على الويب. من خلال تغيير حجم صورك لتتناسب مع حجم عرضها ، يمكنك حفظ البيانات وتحسين أوقات تحميل موقع الويب الخاص بك بشكل كبير. يؤدي استخدام علامة `` مع مراعاة توافق المتصفح إلى تحسين موقعك بشكل أكبر. يمكن أن تؤدي خطوة التحسين البسيطة هذه إلى تجربة مستخدم أفضل ، وتحسين محركات البحث ، ووجود أكثر كفاءة على شبكة الإنترنت.
