تحسين الصور

يتم تشغيل هذه القاعدة عندما يكتشف 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

cuppa.png
cuppa.png (1,763 بايت)

convert cuppa.png -strip cuppa_converted.png

cuppa_converted.png
cuppa_converted.png (856 بايت)

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

puzzle.jpg
puzzle.jpg (13,501 بايت)

convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg

puzzle_converted.jpg
puzzle_conversioned.jpg (4,599 بايت)

إضافة ملاحظات

هل كان المحتوى في هذه الصفحة مفيدًا؟