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