لقد مررنا جميعًا بهذه التجربة: لقد نسيت تصغير حجم صورة قبل إضافتها إلى الصفحة. تبدو الصورة جيدة، ولكنّها تستهلك بيانات المستخدمين وتؤثر سلبًا في أداء الصفحة.
تحديد الصور ذات الحجم غير الصحيح
يسهّل Lighthouse تحديد الصور ذات الحجم غير الصحيح. نفِّذ تدقيق الأداء (Lighthouse > الخيارات > الأداء) وابحث عن نتائج تدقيق تحديد الحجم المناسب للصور. يسرد سجلّ التدقيق أي صور تحتاج إلى تغيير حجمها.
تحديد حجم الصورة المناسب
قد يكون تحديد حجم الصورة معقّدًا بشكل مخادع. لهذا السبب، قدّمنا طريقتَين: "جيدة" و"أفضل". سيؤدي كلا الخيارَين إلى تحسين الأداء، ولكن قد يستغرق الخيار "الأفضل" وقتًا أطول قليلاً لفهمه وتنفيذه. في المقابل، ستكافئك هذه الاستراتيجية بتحسينات أكبر في الأداء. الخيار الأفضل لك هو الخيار الذي تشعر بالراحة عند تنفيذه.
ملاحظة سريعة حول وحدات CSS
هناك نوعان من وحدات CSS لتحديد حجم عناصر HTML، بما في ذلك الصور:
- الوحدات المطلقة: سيتم دائمًا عرض العناصر التي تم تصميمها باستخدام وحدات مطلقة بالحجم نفسه، بغض النظر عن الجهاز. أمثلة على وحدات CSS الصالحة والمطلقة: px وcm وmm وin
- الوحدات النسبية: سيتم عرض العناصر التي تم تصميمها باستخدام وحدات نسبية بأحجام مختلفة، وذلك حسب الطول النسبي المحدّد. أمثلة على وحدات CSS صالحة ونسبية: % وvw (1vw =% 1 من عرض إطار العرض) وem (1.5 em = 1.5 مرة من حجم الخط).
النهج "الجيد"
بالنسبة إلى الصور التي يتم تحديد حجمها استنادًا إلى…
- الوحدات النسبية: تغيير حجم الصورة إلى حجم مناسب لجميع الأجهزة
قد يكون من المفيد الاطّلاع على بيانات الإحصاءات (مثل "إحصاءات Google") لمعرفة أحجام الشاشات التي يستخدمها المستخدمون عادةً. بدلاً من ذلك، يوفّر الموقع الإلكتروني screensiz.es معلومات عن شاشات العرض للعديد من الأجهزة الشائعة. - الوحدات المطلقة: لتغيير حجم الصورة بما يتناسب مع حجم عرضها
يمكن استخدام لوحة "العناصر" في "أدوات مطوّلي البرامج" لتحديد حجم الصورة المعروضة.
الأسلوب "الأفضل"
بالنسبة إلى الصور التي تتضمّن أحجامًا مطلقة ونسبية، استخدِم السمتَين srcset وsizes لعرض صور مختلفة بدرجات كثافة عرض مختلفة.
اطّلِع على الدليل حول الصور المتجاوبة مع مختلف الأجهزة.
تشير "كثافة العرض" إلى أنّ شاشات العرض المختلفة تتضمّن كثافات مختلفة من وحدات البكسل. إذا كانت كل العوامل الأخرى متساوية، ستبدو الشاشة ذات كثافة البكسل العالية أكثر وضوحًا من الشاشة ذات كثافة البكسل المنخفضة.
نتيجةً لذلك، تتوفّر إصدارات متعددة من الصور إذا كنت تريد أن يحصل المستخدمون على أوضح صور ممكنة، بغض النظر عن كثافة البكسل في أجهزتهم.
تتيح تقنيات الصور السريعة الاستجابة إمكانية إدراج عدة إصدارات من الصورة، ما يتيح للجهاز اختيار الصورة الأنسب له.
ستكون الصورة التي تعمل على جميع الأجهزة كبيرة جدًا بدون داعٍ بالنسبة إلى الأجهزة الأصغر حجمًا. تتيح لك تقنيات الصور المتجاوبة مع مختلف الأجهزة، وتحديدًا srcset وsizes، تحديد نُسخ متعددة من الصور، كما تتيح للجهاز اختيار الحجم الأنسب له.
تغيير حجم الصور
بغض النظر عن الأسلوب الذي تختاره، قد يكون من المفيد استخدام ImageMagick لتغيير حجم الصور. ImageMagick هي أداة سطر الأوامر الأكثر شيوعًا لإنشاء الصور وتعديلها. يمكن لمعظم المستخدمين تغيير حجم الصور بسرعة أكبر بكثير عند استخدام واجهة سطر الأوامر مقارنةً بأداة تعديل الصور المستندة إلى واجهة المستخدم الرسومية.
تغيير حجم الصورة إلى% 25 من حجمها الأصلي:
convert flower.jpg -resize 25% flower_small.jpg
تغيير حجم الصورة لتناسب "عرض 200 بكسل وارتفاع 100 بكسل":
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
إذا كنت ستغيّر حجم العديد من الصور، قد يكون من الأنسب استخدام برنامج نصي أو خدمة لأتمتة العملية. يمكنك الاطّلاع على مزيد من المعلومات حول هذا الموضوع في دليل "الصور المتجاوبة".
تجنُّب تغييرات التصميم من خلال تحديد الأبعاد
على الرغم من أنّ هذا الدليل يناقش أحجام الصور في سياق تقليل عدد البايتات غير الضرورية التي يتم تنزيلها، من المهم ملاحظة أنّ حجز المساحة الصحيحة للصور في التصميم هو مكوِّن أساسي آخر لتقليل مقياس متغيّرات التصميم التراكمية للصفحة. عند عرض الصور بتنسيق HTML، احرص على استخدام سمات width وheight المناسبة لكي يعرف المتصفّح مقدار المساحة التي يجب تخصيصها في التنسيق للصورة:
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
بدون هذه السمات أو تحديد الحجم المكافئ في CSS، لن يعرف المتصفّح مقدار المساحة التي ستشغلها الصورة إلى أن يتم تحميلها. سيؤدي ذلك إلى حدوث تغييرات في التصميم في المستند، ما قد يزعج المستخدمين عندما يتحرك المحتوى بعد أن يبدأوا في استخدامه. ويمكن أن يؤدي ذلك إلى فقدان المستخدمين لموضعهم أثناء القراءة، أو إلى "تفويت" الهدف المقصود من النقرة والنقر على شيء آخر لم يقصدوه أثناء تحميل الصفحة.
بدلاً من توفير العرض والارتفاع بشكلٍ صريح، يمكنك استخدام السمة aspect-ratio في CSS على الصورة. ويكون لهذا تأثير مشابه على حجم العنصر مثل تأثير السمتَين width وheight من حيث أنّ الحاوية ستحافظ على نسبة عرض إلى ارتفاع ثابتة. ومع ذلك، يكمن الاختلاف في أنّ ذلك قد يؤدي إلى استخدام نسبة عرض إلى ارتفاع مختلفة عن تلك التي تم توفير الصورة بها، لذا من المحتمل أنّك تريد استخدام إعداد object-fit لضمان عدم تشويه الصورة في طريقة العرض الواضحة هذه بنسبة 16/9:
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
تأكيد
بعد تغيير حجم جميع الصور، أعِد تشغيل Lighthouse للتأكّد من أنّك لم تغفل عن أي تفاصيل.