استخدِم سياسات الصور المحسّنة لضمان استخدام موقعك الإلكتروني للصور الأفضل أداءً.
غالبًا ما تشغل الصور مساحة مرئية كبيرة وتشكّل معظم البايتات التي يتم تنزيلها على موقع إلكتروني. يمكن أن يؤدي تحسين الصور إلى تحسين أداء التحميل وتقليل عدد الزيارات إلى الشبكة.
من المفاجئ أنّ أكثر من نصف المواقع الإلكترونية على الويب تعرض صورًا مضغوطة بشكلٍ سيئ أو كبيرة جدًا بدون داعٍ. وهذا يترك مساحة كبيرة لتحسين الأداء من خلال تحسين الصور ببساطة.
قد تتساءل، كيف يمكنني معرفة ما إذا كانت صوري محسّنة وكيف يمكنني تحسينها؟
نحن نختبر مجموعة جديدة من سياسات الميزات لتحسين
الصور: oversized-images
وunoptimized-lossy-images
unoptimized-lossless-images
وunoptimized-lossless-images-strict
.
وأصبحت جميعها متاحة الآن لإصدارات الإصدارات العلنية
التجريبية.
سياسات الصور المحسّنة
تُقدّم سياسة الأذونات مجموعة جديدة من القيود على الصور التي يمكن تطبيقها من خلال فرضها في وقت التطوير. سيتم عرض الصور التي تنتهك أيًا من القيود كصور نائبة، ومن السهل التعرّف عليها وإصلاحها. يمكن تحديد هذه السياسات في وضع "الإبلاغ فقط" حيث سيتم عرض الصور بشكل طبيعي بدون فرض قيود عليها أثناء رصد الانتهاكات من خلال التقارير. (اطّلِع على وضع "الإبلاغ فقط" في الإصدار العلني، أدناه لمعرفة التفاصيل).
oversized-images
تفرض سياسة أذونات oversized-images
قيودًا على الأبعاد الأساسية
للصورة بالنسبة إلى حجم الحاوية.
عندما يستخدم المستند السياسة oversized-images
، سيتم استبدال أي عنصر <img>
بصورة عنصر نائب إذا كانت دقته الأساسية أكثر من X مرة من حجم الحاوية في أي بُعد.
لماذا؟
إنّ عرض صور أكبر من حجم الشاشة التي يعرضها الجهاز، على سبيل المثال، عرض صور مخصّصة للكمبيوتر المكتبي على الأجهزة الجوّالة، أو عرض صور ذات كثافة وحدات بكسل عالية على جهاز ذو كثافة وحدات بكسل منخفضة، يتسبّب في إهدار حركة المرور على الشبكة ومساحة التخزين في الجهاز. اطّلِع على المقالتَين عرض الصور بأبعادها الصحيحة وعرض صور متجاوبة للحصول على معلومات عن تحسين صورك.
أمثلة
في ما يلي بعض الأمثلة على ذلك. يوضّح ما يلي السلوك التلقائي عند قطع حجم عرض الصورة إلى النصف.
في حال تطبيق سياسة الأذونات التالية، أحصل على صورة عنصر نائب بدلاً من ذلك.
Permissions-Policy: oversized-images *(2);
أحصل على نتائج مماثلة في حال تخفيض العرض أو الارتفاع فقط.
How to use
باختصار، يمكن تحديد سياسة oversized-images
من خلال أيّ من الخيارَين التاليَين:
- عنوان HTTP
Permissions-Policy
- سمة
<iframe>
allow
للإبلاغ عن سياسة oversized-images
، يجب تقديم ما يلي:
- اسم العنصر،
oversized-images
(مطلوب) - قائمة بالمصادر (اختيارية)
- قيم الحدّ الأدنى (أي نسبة التصغير X) للمصادر، المحدّدة في قوس (اختياري)
ننصحك بخفض نسبة العرض إلى الارتفاع تبلغ 2.0 أو أقل. ننصحك باستخدام صور سريعة الاستجابة بدرجات دقة مختلفة لأجل عرض الصور على النحو الأمثل على مختلف أحجام الشاشات ودرجات الدقة وما إلى ذلك.
مزيد من الأمثلة
Permissions-Policy: oversized-images *(2.0)
يتم فرض السياسة على جميع المصادر التي تبلغ قيمة الحدّ الأدنى لها 2.0. لا يُسمح بأي عنصر
<img>
يحتوي على صورة بنسبة تصغير أكبر من
2.0، وسيتم استبداله بعنصر نائب للصورة.
Permissions-Policy: oversized-images *(inf) 'self'(1.5)
يتم فرض السياسة على مصدر الموقع الإلكتروني بقيمة حدّية تبلغ 1.5.
لن يتم عرض عناصر <img>
في سياقات التصفّح ذات المستوى الأعلى وسياقات التصفّح المُدمجة ذات المصدر نفسه بشكلٍ طبيعي إلا إذا كانت نسبة التصغير أقل مما يلي أو تساويه: 1.5. سيتم عرض عناصر <img>
في أي مكان آخر بشكل طبيعي.
unoptimized-{lossy,lossless}-images
تقيِّد سياسات ميزات unoptimized-lossy-images
وunoptimized-lossless-images
unoptimized-lossless-images-strict
حجمملف
الصورة بالنسبة إلى دقتها الأساسية:
unoptimized-lossy-images
- يجب ألا تتجاوز التنسيقات المفقودة نسبة البايت لكل بكسل من X، مع حد أقصى ثابت قدره 1 كيلوبايت. بالنسبة إلى الصورة التي تبلغ أبعادها W x H، يتم احتساب الحدّ الأقصى لحجم الملف على النحو التالي: W x H x X + 1024.
unoptimized-lossless-images
- يجب ألا تتجاوز التنسيقات الأقل انخفاضاً نسبة البايت لكل بكسل من X، مع حد أقصى ثابت قدره 10 كيلوبايت. بالنسبة إلى الصورة التي تبلغ أبعادها "العرض x الارتفاع"، يتم احتساب الحدّ الأقصى لحجم الملف على النحو التالي: "العرض x الارتفاع x X" + 10240.
unoptimized-lossless-images-strict
- يجب ألا تتجاوز تنسيقات "الصور غير المُعدَّلة" نسبة بايت لكل بكسل قدرها X، مع السماح بمساحة تخزين إضافية ثابتة تبلغ 1 كيلوبايت. بالنسبة إلى صورة بتنسيق العرض × الارتفاع، يتم احتساب الحدّ الأقصى لحجم الملف على النحو التالي: العرض × الارتفاع × X + 1024.
عندما يستخدم مستند أيًا من هذه السياسات، سيتم استبدال أي عنصر <img>
ينتهك
القيود بصورة نائبة.
لماذا؟
كلما زاد حجم التنزيل، استغرق تحميل الصورة وقتًا أطول. يجب إبقاء حجم الملف صغيرًا قدر الإمكان عند تحسين الصورة: إزالة البيانات الوصفية واختيار تنسيق جيد للصورة واستخدام ضغط الصور وما إلى ذلك. اطّلِع على المقالتَين استخدام Imagemin لضغط الصور واستخدام صور WebP للحصول على معلومات عن تحسين صورك.
مثال
يوضح الجدول التالي سلوك المتصفِّح التلقائي. بدون سياسة الأذونات، يمكن عرض صورة غير محسّنة ذات فقدان للبيانات تمامًا مثل الصورة المحسّنة.
في حال تطبيق سياسة الأذونات التالية، ستظهر لي صورة نائبة بدلاً من ذلك.
Permissions-Policy: unoptimized-lossy-images *(0.5);
How to use
إذا كنت مستخدمًا جديدًا لسياسة الأذونات، يُرجى الاطّلاع على مقدمة عن سياسة الأذونات للحصول على مزيد من التفاصيل.
باختصار، يمكن تحديد سياسات unoptimized-{lossy,lossless}-images
من خلال:
- عنوان HTTP
Permissions-Policy
- سمة
<iframe>
allow
لبيان سياسة unoptimized-{lossy,lossless}-images
، عليك
تقديم ما يلي:
- اسم الميزة، على سبيل المثال،
unoptimized-lossy-images
(مطلوب) - قائمة بالمصادر (اختيارية)
- قيم الحدود الدنيا (أي نسبة البايت لكل بكسل X) للمصادر، المحدّدة بالأقواس (اختيارية)
ننصحك بأن تكون نسبة البايت لكل بكسل 0.5 أو أقل للوحدة الإعلانية "unoptimized-lossy-images
" وأن تكون نسبة البايت لكل بكسل 1 أو أقل لكل من unoptimized-lossless-images
وunoptimized-lossless-images-strict
.
تتميّز تنسيقات WebP بنسب ضغط أفضل من التنسيقات الأخرى. اعرض جميع صورك بتنسيق WebP مع فقدان البيانات إذا استطعت. إذا لم يكن ذلك كافيًا، جرِّب تنسيق WebP غير القابل للفقدان. استخدِم تنسيق JPEG على المتصفّحات التي لا تتيح استخدام تنسيقات WebP. استخدِم تنسيق PNG إذا لم تنجح أي من هذه التنسيقات.
إذا كنت تستخدم تنسيقات WebP، جرِّب استخدام حدود أكثر صرامة:
- 0.2 لـ WEBPV8
- 0.5 لـ WEBPL
مزيد من الأمثلة
Feature-Policy: unoptimized-lossy-images *(0.5);
unoptimized-lossless-images *(1.0);
unoptimized-lossless-images-strict *(1.0);
ويتم فرض هذه السياسة على جميع المصادر ذات قيمة حدّية تبلغ 0.5 (للتنسيقات التي تؤدي إلى فقدان البيانات) و1 (للتنسيقات التي لا تؤدي إلى فقدان البيانات). لا يُسمح بأي عنصر <img>
تكون فيه نسبة كثافة البتات لكل بكسل في الصورة تتجاوز الحدّ المسموح به، وسيتم استبداله
بصورة نائبة.
Feature-Policy: unoptimized-lossy-images *(inf) 'self'(0.3);
unoptimized-lossless-images *(inf) 'self'(0.8);
unoptimized-lossless-images-strict *(inf) 'self'(0.8);
يتم فرض هذه السياسة على مصدر الموقع الإلكتروني باستخدام قيمة حدّ أدنى تبلغ 0.3 (لتنسيقات
الفقدان) و0.8 (لتنسيقات عدم فقدان البيانات). لن يتم عرض عناصر <img>
في سياقات التصفّح ذات المستوى الأعلى وسياقات التصفّح المتداخلة نفسها إلا إذا استوفت نسبة البايت لكل بكسل هذه القيود. سيتم عرض عناصر <img>
في أي مكان آخر بشكل طبيعي.
وضع "إعداد التقارير فقط" في البرية
قد لا يكون ما تريده نشر موقع إلكتروني يحتوي على صور لعناصر نائبة. يمكنك استخدام
السياسات في وضع التنفيذ (مع عرض الصور غير المحسّنة كصور بدلاء) أثناء التطوير والنشر التجريبي، واستخدام وضع "إعداد التقارير فقط" في مرحلة النشر. (اطّلِع على سياسة الأذونات
الإبلاغ
لمزيد من التفاصيل). على غرار عنوان HTTP Permissions-Policy
، يتيح لك عنوان
Permissions-Policy-Report-Only
مراقبة تقارير الانتهاكات في
الشبكة بدون أي إجراءات تنفيذية.
القيود
لا تعمل سياسات الصور إلا على عناصر صور HTML (<img>
و<source>
وما إلى ذلك) ولا يمكن استخدامها بعد في صور الخلفية أو المحتوى الذي يتم إنشاؤه. إذا كنت تريد تطبيق سياسات على المحتوى الأوسع نطاقًا، يُرجى إعلامنا بذلك.
تحسين الصور
تحدثت كثيرًا عن تحسين الصور، لكنني لم أتحدث عن كيفية إجراء ذلك. لا يتناول هذا المقال هذا الموضوع، ولكن يمكنك الاطّلاع على مزيد من المعلومات من خلال الروابط أدناه ومن خلال ورشات رموز البرامج المدرَجة في نهاية المقالة.
يُرجى إرسال ملاحظاتك إلينا
نأمل أن تكون هذه المقالة قد منحت فهمًا جيدًا لسياسات الصور وأثارت حماسك. يسعدنا حقًا تجربة السياسات وإرسال ملاحظاتك إلينا.
يمكنك إرسال ملاحظاتك حول كل ميزة من الميزات المذكورة في هذه المقالة إلى قائمتنا البريدية: feature-control@chromium.org.
نودّ معرفة قيم الحدّ التي استخدمتها وكانت مفيدة لك. نودّ معرفة ما إذا كان الخيار unoptimized-lossless-images
أو
unoptimized-lossless-images-strict
أكثر سهولة وبساطة في الاستخدام، أو ما إذا كان علينا
استخدام بدل نفقات عامة مختلف بدلاً من ذلك. سنرسل إليك ملفًا شخصيًا عند قرب انتهاء الفترة التجريبية. يُرجى متابعة أخبارنا باستمرار.