يتم تشغيل هذه القاعدة عندما يكتشف PageSpeed Insights أنه يمكن تحسين الصور على الصفحة لتقليل حجم ملفاتها بدون التأثير بشكل كبير على جودة الصورة المرئية.
نظرة عامة
غالبًا ما تشكّل الصور معظم وحدات البايت التي يتم تنزيلها في الصفحة. نتيجةً لذلك، يؤدي تحسين الصور في أغلب الأحيان إلى توفير أكبر قدر من وحدات البايت وتحسين الأداء: فكلما قل عدد وحدات البايت التي ينزّلها المتصفح، قلّ التنافس على معدل نقل البيانات لدى العميل وزادت سرعة تنزيل المحتوى وعرضه على الشاشة من خلال المتصفّح.
اقتراحات
ويتطلّب العثور على التنسيق الأمثل واستراتيجية التحسين لمواد عرض الصور تحليلاً دقيقًا على مستوى العديد من الأبعاد: نوع البيانات التي يتم ترميزها، وإمكانات تنسيق الصور، وإعدادات الجودة، ودرجة الدقة، وغيرها. بالإضافة إلى ذلك، عليك التفكير في ما إذا كان من الأفضل عرض بعض الصور بتنسيق متّجه، وما إذا كان من الممكن تحقيق التأثيرات المطلوبة عبر CSS، وكيفية تقديم مواد عرض تم تحجيمها بشكل مناسب لكل نوع من الأجهزة.
تحسينات لجميع أنواع الصور
- اتّبِع أفضل الممارسات لعرض الصور المتجاوبة مع مختلف الأجهزة.
- اتّبِع قائمة التحقّق الخاصة بتحسين الصور للصور الفردية.
تحسينات للصور بتنسيق GIF وPNG وJPEG
تشكِّل تنسيقات GIF وPNG وJPEG 96% من إجمالي الزيارات إلى الصور على الإنترنت. ونظرًا لمدى رواج هذه الأداة، توفّر "إحصاءات PageSpeed" توصيات محددة لتحسين الأداء. ولتسهيل الأمر عليك، يمكنك تنزيل الصور المحسّنة مباشرةً من "إحصاءات PageSpeed" (التي تستخدم مكتبة تحسين الصور من modpagespeed.com).
يمكنك أيضًا استخدام أدوات مثل البرنامج الثنائي تحويل الذي أنشأته ImageMagick والذي يمكنه تطبيق تحسينات مماثلة. راجع التعليمات النموذجية أدناه.
إذا كنت تستخدم أدوات تابعة لجهات خارجية، يُرجى العلم أنّ هذا التحويل قد يجعل صورك أكبر، إذا سبق أن تم تحسين صورك بشكل جيد. وفي هذه الحالة، يُرجى استخدام النُسخ الأصلية.
GIF وPNG هما تنسيقان لا يؤديان إلى فقدان البيانات، لأنّهما لا تؤدي عملية الضغط إلى إجراء أي تعديل مرئي على الصور. بالنسبة إلى الصور الثابتة، يحقّق تنسيق PNG نسبة ضغط أفضل مع جودة مرئية أفضل. بالنسبة إلى الصور المتحركة، يمكنك استخدام عنصر video بدلاً من ملف GIF لضمان ضغط أفضل.
- يجب دائمًا تحويل ملف GIF إلى PNG إلا إذا كان الملف الأصلي متحركًا أو صغيرًا (أقل من بضع مئات من وحدات البايت).
- بالنسبة إلى كل من GIF وPNG، عليك إزالة قناة ألفا إذا كانت جميع وحدات البكسل معتمة.
على سبيل المثال، يمكنك استخدام تحويل البرنامج الثنائي لتحسين صور GIF وPNG باستخدام الأمر التالي (المَعلمات داخل الأقواس اختيارية):
convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
convert cuppa.png -strip cuppa_converted.png
JPEG: تنسيق مع فقدان البيانات. تؤدي عملية الضغط إلى إزالة التفاصيل المرئية للصورة، ولكن يمكن أن تكون نسبة الضغط أكبر 10 مرات من GIF أو PNG.
- قلّل الجودة إلى 85 إذا كانت أعلى. مع جودة أكبر من 85، تصبح الصورة أكبر بسرعة، في حين أن التحسين المرئي قليل.
- يُرجى تقليل عيّنة التدرّج اللوني إلى 4:2:0 لأنّ النظام البصري البشري أقل حساسية للألوان مقارنةً بالسطوع.
- استخدِم تنسيقًا متدرجًا للصور التي يزيد حجمها عن 10 كيلوبايت. عادةً ما يكون لدى JPEG التقدمي نسبة ضغط أعلى من تنسيق JPEG الأساسي للصور الكبيرة، وله مزايا العرض التدريجي.
- استخدام مساحة اللون بالتدرج الرمادي إذا كانت الصورة بالأبيض والأسود.
على سبيل المثال، يمكنك استخدام تحويل البرنامج الثنائي لتحسين صورك بتنسيق JPEG باستخدام الأمر التالي (تكون المَعلمات داخل الأقواس اختيارية):
convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg
إضافة ملاحظات
هل كان المحتوى في هذه الصفحة مفيدًا؟