استخدِم srcset لاختيار حجم الصورة الصحيح تلقائيًا.
وفقًا لـ أرشيف HTTP، تزن صفحة الويب النموذجية على الأجهزة الجوّالة ما يزيد عن 2.6 ميغابايت، ويمثل أكثر من ثلثي هذا الوزن صور. هذه فرصة رائعة للتحسين!
ملخّص
- لا تحفظ صورًا يزيد حجمها عن حجم عرضها.
- احفظ أحجامًا متعددة لكل صورة واستخدِم السمة
srcset
للسماح للمتصفّح باختيار أصغرها. تحدّد القيمةw
للمتصفِّح عرض كل إصدار:
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
حفظ الصور بالحجم المناسب
يمكنك جعل موقعك الإلكتروني أسرع وأقل استهلاكًا للبيانات باستخدام صور ذات أبعاد تتطابق مع حجم العرض. بمعنى آخر، امنح الصور العرض والارتفاع الصحيحين عند حفظها.
ألقِ نظرة على الصور أدناه.
تبدوا متطابقتين تقريبًا، لكن حجم ملف إحداهما أكبر بـ 10 مرات من الأخرى.
![القط الصغير ولياس: قطتان عتابيتان عمرهما 10 أسابيع.](https://web.developers.google.cn/static/articles/use-srcset-to-automatically-choose-the-right-image/image/little-puss-lias-ten-w-3c69ee66b6ca5.jpg?authuser=5&hl=ar)
![القط الصغير ولياس: قطتان عتابيتان عمرهما 10 أسابيع.](https://web.developers.google.cn/static/articles/use-srcset-to-automatically-choose-the-right-image/image/little-puss-lias-ten-w-1dffb2ed3ac31.jpg?authuser=5&hl=ar)
تكون الصورة الأولى أكبر بكثير في حجم الملف، لأنّه يتم حفظها بأبعاد أكبر بكثير من حجم العرض. يتم عرض كلتا الصورتين بعرض ثابت يبلغ 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، أو نظيرها مفتوح المصدر، مثل Thumbor الذي تثبِّته وتديره بنفسك.
يمكنك تحميل صور عالية الدقة، وحينئذٍ تنشئ خدمة الصور تلقائيًا تنسيقات وأحجامًا مختلفة للصور وتعرضها استنادًا إلى معلَمات عناوين URL. على سبيل المثال، افتح نموذج الصورة هذا على Cloudinary وجرِّب تغيير القيمة w
أو امتداد الملف في شريط عنوان URL.
تشتمل خدمات الصور أيضًا على ميزات أكثر تقدّمًا، مثل القدرة على تشغيل "الاقتصاص الذكي" لأحجام الصور المختلفة وعرض صور WebP تلقائيًا إلى المتصفّحات التي تتوافق مع التنسيق، بدلاً من ملفات JPEG، بدون تغيير إضافة الملف.
ماذا لو كانت الصورة لا تبدو صحيحة بأحجام مختلفة؟
في هذه الحالة، عليك استخدام العنصر <picture>
لتنفيذ "اتجاه الرسومات" من خلال توفير صورة أو صورة مختلفة واقتصاصها بأحجام مختلفة. لمزيد من المعلومات، يمكنك الاطّلاع على الدرس التطبيقي حول ترميز "الاتجاه الفني".
ماذا عن كثافة وحدات البكسل؟
تشتمل الأجهزة المتقدمة على وحدات بكسل فعلية أصغر (أكثر كثافة). على سبيل المثال، قد يحتوي الهاتف المتطور على ضعف أو ثلاثة أضعاف وحدات البكسل في كل صف من وحدات البكسل مقارنةً بجهاز أرخص.
يمكن أن يؤثر ذلك في الحجم الذي تحتاجه لحفظ صورك. لن ندخل في التفاصيل الدموية هنا، ولكن يمكنك معرفة المزيد من خلال الدرس التطبيقي حول الترميز "Useكاتدرائية" (استخدام أدوات وصف الكثافة).
ماذا عن حجم عرض الصورة؟
يمكنك استخدام 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.