لقد كنا جميعًا هناك: لقد نسيت تصغير حجم الصورة قبل إضافتها إلى الصفحة. تبدو الصورة جيدة، لكنها تهدر بيانات المستخدمين وتُضرّ بأداء الصفحة.
تحديد الصور ذات الحجم غير الصحيح
تسهِّل أداة Lighthouse تحديد الصور ذات الحجم غير الصحيح. شغِّل تدقيق الأداء (Lighthouse > الخيارات > الأداء) وابحث عن نتائج التدقيق "الحجم الصحيح للصور". يسرد التدقيق أي صور تحتاج إلى تغيير حجمها.
تحديد حجم الصورة الصحيح
يمكن أن يكون تغيير حجم الصور معقّدًا بشكل مخادع. لهذا السبب، قدمنا نهجين: "جيد" و"أفضل". كلاهما سيحسن الأداء، ولكن قد يستغرق النهج "الأفضل" وقتًا أطول قليلاً لفهمه وتنفيذه. ومع ذلك، فإنه سيكافئك أيضًا بتحسينات في الأداء أكبر. الخيار الأفضل بالنسبة لك هو الخيار الذي تشعر بالراحة في تنفيذه.
ملاحظة سريعة حول وحدات CSS
هناك نوعان من وحدات CSS لتحديد حجم عناصر HTML، بما في ذلك الصور:
- الوحدات المطلقة: سيتم دائمًا عرض العناصر ذات النمط باستخدام وحدات مطلقة بالحجم نفسه، بغض النظر عن الجهاز. إليك أمثلة على وحدات CSS المطلقة والصالحة: px، cm، mm، in.
- الوحدات النسبية: سيتم عرض العناصر ذات النمط باستخدام وحدات نسبية بأحجام متفاوتة، بناءً على الطول النسبي المحدد. أمثلة على وحدات CSS النسبية والصالحة: %، vw (1vw = 1% من عرض إطار العرض)، وem (1.5 em = 1.5 مرة حجم الخط).
النهج "الجيد"
للصور التي يتمّ تغيير حجمها بالاستناد إلى...
- الوحدات النسبية: يمكنك تغيير حجم الصورة إلى حجم مناسب لجميع الأجهزة.
قد يكون من المفيد التحقق من بيانات التحليلات (على سبيل المثال، إحصاءات Google) لمعرفة أحجام العرض الشائعة الاستخدام من قبل المستخدمين. بدلاً من ذلك، توفر screensiz.es معلومات حول شاشات العرض للعديد من الأجهزة الشائعة. - الوحدات المطلقة: يمكنك تغيير حجم الصورة لتتناسب مع الحجم الذي يتم عرضها به.
يمكن استخدام لوحة عناصر DevTools لتحديد حجم الصورة.
نهج "أفضل"
بالنسبة إلى الصور ذات الحجم المطلق والنسبي على حدّ سواء، استخدِم السمتَين srcset
وsizes
لعرض صور مختلفة بكثافات عرض مختلفة.
اقرأ دليل الصور المتجاوبة مع مختلف الأجهزة.
تشير "كثافة العرض" إلى حقيقة أن الشاشات المختلفة تتضمّن كثافات بكسل مختلفة. مع تساوي جميع العوامل الأخرى، ستبدو شاشة العرض العالية الكثافة بالبكسل أكثر وضوحًا من شاشة العرض المنخفضة الكثافة.
نتيجةً لذلك، من الضروري استخدام نسخ متعددة من الصور إذا أردت أن يطّلع المستخدمون على أوضح الصور الممكنة بغض النظر عن كثافة وحدات البكسل لأجهزتهم.
وتقنيات الصور سريعة الاستجابة تجعل هذا الأمر ممكنًا من خلال السماح لك بإدراج نُسخ متعددة من الصور وأن يختار الجهاز الصورة الأنسب له.
وتكون الصورة التي تعمل على جميع الأجهزة كبيرة بشكل غير ضروري على الأجهزة الأصغر حجمًا. تتيح لك تقنيات الصور المتجاوبة، تحديدًا srcset والأحجام، تحديد نُسخ متعددة من الصور، ويختار الجهاز الحجم الأنسب له.
تغيير حجم الصور
أيًا كان الأسلوب الذي تختاره، قد يكون من المفيد استخدام ImageMagick لتغيير حجم صورك. تُعد ImageMagick أداة سطر الأوامر الأكثر شيوعًا لإنشاء الصور وتعديلها. يستطيع معظم الأشخاص تغيير حجم الصور بسرعة أكبر عند استخدام واجهة سطر الأوامر (CLI) مقارنةً بمحرر الصور المستند إلى واجهة المستخدم الرسومية.
لتغيير حجم الصورة إلى 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 للتأكّد من أنّك لم يفوتك أي شيء.