أهم النصائح لتحسين أداء الويب

استخدم srcset لاختيار حجم الصورة الصحيح تلقائيًا.

Sam Dutton

وفقًا لـ أرشيف HTTP، يبلغ حجم صفحة الويب النموذجية المتوافقة مع الأجهزة الجوّالة أكثر من 2.6 ميغابايت، وأكثر من ثلثي ذلك الحجم الوزن عبارة عن صور. إنها فرصة رائعة للتحسين!

ملخّص

• لا تحفظ صورًا يزيد حجمها عن حجم عرضها.
• احفظ أحجامًا متعددة لكل صورة واستخدِم srcset لتمكين المتصفح من اختيار الأصغر. توضّح القيمة w للمتصفّح عرض كل إصدار على النحو التالي:

<img src="small.jpg"
     srcset="small.jpg 500w,
             medium.jpg 1000w,
             large.jpg 1500w"
     alt="…">

حفظ الصور بالحجم المناسب

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

ألقِ نظرة على الصور أدناه.

تبدو متطابقة تقريبًا، لكن حجم ملف واحد أكبر من 10 مرات أكبر من الآخر.

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

بالنسبة إلى العرض الثابت، استخدِم صورًا محفوظة بالأبعاد نفسها حجم العرض

ماذا لو اختلف حجم العرض؟

في عالم متعدد الأجهزة، لا تُعرَض الصور دائمًا بحجم ثابت واحد.

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

...وماذا عن الأجهزة التي تعاني من ضعف الشاشة، مثل شاشات Retina؟

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

ألن يكون جيدًا أن تتمكن من إتاحة كل صورة بأحجام مختلفة، هل تريد السماح للمتصفّح باختيار أفضل حجم للجهاز وحجم العرض؟ لسوء الحظ هناك catch-22 لمعرفة الصورة الأفضل. يجب أن يستخدم المتصفح أصغر قدر ممكن الصورة، ولكنها لا تستطيع معرفة عرض الصورة دون تنزيلها للتحقق منها.

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

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     alt="…">

تعرض قيم w عرض كل صورة بالبكسل. على سبيل المثال: يخبر small.jpg 500w المتصفّح بأنّ حجم ملف small.jpg هو 500. عرض البكسل. يمكّن هذا المتصفح من اختيار أصغر صورة ممكنة، اعتمادًا على نوع الشاشة وحجم إطار العرض، بدون الحاجة إلى قم بتنزيل الصور للتحقق من حجمها.

يمكنك رؤية srcset عمليًا للصورة أدناه. إذا كنت تستخدم كمبيوتر محمول أو كمبيوتر سطح مكتب، يمكنك تغيير حجم نافذة المتصفح وإعادة فتح هذه الصفحة. بعد ذلك، استخدِم لوحة "الشبكة" في أدوات المتصفح لمعرفة الصورة التي تم استخدامها. (ستحتاج إلى إجراء ذلك في نافذة تصفُّح متخفٍ أو خاص، وإلا سيتم تخزين ملف الصورة الأصلي مؤقتًا).

كيف يمكنني إنشاء أحجام صور متعددة؟

يجب توفير أحجام متعدّدة لكل صورة تريد استخدامها مع srcset.

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

دمج معالجة الصور في عملية التصميم

كجزء من عملية التصميم، يمكنك إضافة خطوات لإنشاء صور بأحجام مختلفة. نُسخ مختلفة من صورك. راجِع "استخدام Imagemin لضغط الصور". لمعرفة المزيد.

استخدام خدمة صور

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

تحميل صورك العالية الدقة، وسيتم تلقائيًا تحميل خدمة الصور. إنشاء وعرض تنسيقات وأحجام مختلفة للصور اعتمادًا على عنوان URL المعلَمات. على سبيل المثال، افتح نموذج الصورة هذا على Cloudinary وجرِّب تغيير القيمة w أو امتداد الملف في شريط عناوين URL.

وتشمل خدمات الصور أيضًا المزيد من الميزات المتقدّمة، مثل القدرة على برمجة التطبيقات. "الاقتصاص الذكي" لأحجام الصور المختلفة وعرض صور WebP تلقائيًا إلى المتصفحات التي تتيح استخدام التنسيق بدلاً من صور JPEG بدون تغيير الملف الإضافة.

ماذا لو كانت الصورة لا تبدو صحيحة بأحجام مختلفة؟

في هذه الحالة، ستحتاج إلى استخدام العنصر <picture> لـ "الاتجاه الفني": توفير اقتصاص صورة أو صورة مختلفة بأحجام مختلفة. معرفة المزيد يمكنك إلقاء نظرة على الدرس التطبيقي حول الترميز "اتجاه الفن".

ماذا عن كثافة البكسل؟

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

يمكن أن يؤثر ذلك في الحجم الذي تحتاجه لحفظ صورك. لن ندخل في الدماء التفاصيل هنا، ولكن يمكنك معرفة المزيد من خلال درس تطبيقي حول الترميز "استخدام أدوات وصف الكثافة":

ماذا عن حجم عرض الصورة؟

يمكنك استخدام sizes لتحسين أداء srcset.

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

في المثال أدناه، يخبر sizes="50vw" المتصفّح بأنّ هذه الصورة سيتم يتم عرضه بنسبة 50% من عرض إطار العرض.

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="50vw"
     alt="…">

يمكنك رؤية ذلك عمليًا على simpl.info/sizes والدرس التطبيقي "تحديد عرض خانات متعددة".

ماذا عن دعم المتصفح؟

يتوافق تطبيقا srcset وsizes بأكثر من 90% من على مستوى العالم

في حال عدم توافق المتصفّح مع srcset أو sizes، سيتم استخدام السمة src فقط.

يساهم هذا الإجراء في إضافة تحسينات تدريجية إلى srcset وsizes.

مزيد من المعلومات

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