تحسين الصور

غالبًا ما تكون الصور مسؤولة عن معظم وحدات بايت التي يتم تنزيلها على صفحة الويب، كما أنها غالبًا ما تستهلك قدرًا كبيرًا من المساحة الظاهرة على الصفحة. ونتيجة لذلك، يمكن أن يؤدي تحسين الصور في الغالب إلى توفير كبير في وحدات بايت وتحسين في الأداء على موقع الويب: ذلك أنه كلما قلت وحدات بايت التي ينزلها المتصفح، قلت المنافسة على معدل نقل البيانات وتمكن المتصفح من تنزيل جميع الأصول وعرضها.

يعد تحسين الصور فنًا وعلمًا: فهو فن لأنه ليست هناك إجابة واحدة قاطعة بشأن الطريقة الأفضل لضغط الصورة الفردية، كما يعد علمًا لأن هناك العديد من الوسائل والخوارزميات المتطورة التي يمكنها خفض حجم الصورة كثيرًا. ويتطلب البحث عن الإعدادات المثالية للصورة تحليلاً دقيقًا على مستوى عدة أبعاد: إمكانيات التنسيق، ومحتوى البيانات المشفرة والجودة وأبعاد بكسل وغير ذلك الكثير.

التخلص من الصور واستبدالها

TL;DR

  • التخلص من موارد الصور غير اللازمة
  • الاستفادة من تأثيرات CSS3 متى أمكن ذلك
  • استخدام خطوط الويب بدلاً من ترميز النصوص في الصور

أول سؤال يجب أن تطرحه على نفسك يتعلق بما إذا كانت الصورة مطلوبة للوصول إلى التأثير الذي تسعى إليه. يتميز التصميم الجيد بالبساطة وسيظل دائمًا يحقق مستوى الأداء الأفضل. وإذا كان بإمكانك التخلص من مورد صورة تتطلب غالبًا عددًا كبيرًا من وحدات بايت ذات صلة بجافا سكريبت أو HTML أو CSS وعناصر أخرى على الصفحة، فهذه إذًا إستراتيجية التحسين الأفضل. إلا أن اختيار المكان المناسب للصورة يمكن أن ينقل معلومات لا يمكن لآلاف الكلمات التعبير عنها، فاهتم دائمًا بالبحث عن هذا التوازن.

بعد ذلك يجب التفكير في ما إذا كانت هناك تكنولوجيا بديلة يمكنها تقديم النتائج المطلوبة وبطريقة أكثر فعالية:

  • تأثيرات CSS (التدرجات والظلال وما إلى ذلك) ويمكن استخدام رسوم CSS المتحركة للحصول على أصول بدقة مستقلة تظهر دائمًا بشكل حاد في كل مستوى من مستويات الدقة والتكبير/التصغير، وغالبًا بجزء من وحدات بايت المطلوب بواسطة ملف صورة.
  • خطوط الويب مكِّن استخدام أنماط الكتابة الرائعة مع الحفاظ على إمكانية تحديد النص والبحث فيه وتغيير حجمه - ويعد هذا تحسينًا كبيرًا في إمكانية الاستخدام.

وإذا وجدت نفسك تشفِّر نصًا في أصل لصورة، فتوقف عن ذلك وأعد النظر في الأمر. يعد أسلوب الطباعة الرائع من الأهمية بمكان للحصول على تصميم جيد، وعلامة تجارية مشرقة وسهولة في الاستخدام، إلا أن وضع النصوص في الصور يؤدي إلى ترك انطباع سيئ لدى المستخدم: ذلك أنه لا يمكن تحديد هذا النص أو البحث فيه أو تكبيره أو تصغيره، ولا يمكن الوصول إليه واستخدامه مع الأجهزة مرتفعة نسبة DPI. يتطلب استخدام خطوط الويب مجموعة تحسين خاصة بذلك، إلا أن ذلك يزيل جميع المخاوف ويكون دائمًا الخيار الأفضل لعرض النص.

الفرق بين الصور المتجهية والصور النقطية

TL;DR

  • تعد الصور المتجهية الحل الأمثل للصور التي تتألف من أشكال هندسية
  • تعد الصور المتجهية مستقلة من حيث التكبير/التصغير والدقة
  • يجب استخدام الصور النقطية مع المشاهد المعقدة التي تتضمن العديد من الأشكال والتفاصيل غير المنتظمة

بعد أن تحدد أن تنسيق صورة معينة يعد مثاليًا للوصول إلى التأثير المطلوب، يأتي دور تحديد التنسيق المناسب:

صورة متجهية تم تكبيرها
المتجهي
صورة نقطية تم تكبيرها
النقطي

ويختص كل تنسيق بمجموعة من الميزات والعيوب. تتناسب التنسيقات المتجهية تمامًا مع الصور التي تتألف من أشكال هندسية بسيطة (مثل الشعرات والنصوص والرموز وهكذا)، كما تقدم نتائج حادة في كل إعداد دقة أو تكبير/تصغير، مما يجعله تنسيقًا مثاليًا للشاشات عالية الدقة والأصول التي تحتاج إلى العرض بأحجام متباينة.

إلا أن التنسيقات المتجهية تعجز عن الوفاء بمتطلبات المشهد المتشابك (مثل الصور): ذلك أن مقدار ترميز SVG المطلوب لوصف جميع الأشكال قد يكون عاليًا بشكل حرج وقد تظل النتيجة تبدو بتصوير غير واقعي. وعندما يكون الوضع كذلك، تكون بحاجة إلى استخدام تنسيق الصورة النقطية مثل GIF أو PNG أو JPEG أو أحد التنسيقات الحديثة مثل JPEG-XR أو WebP.

لا تتضمن الصور النقطية الخصائص الرائعة نفسها المتوفرة في الصورة المستقلة من حيث الدقة والتكبير/التصغير - وعند ضبط صورة نقطية ستظهر لك رسومات ممزقة وضبابية. ونتيجة لذلك، قد تحتاج إلى حفظ عدة نسخ من الصورة النقطية بنسب دقة متباينة لترك الانطباع المثالي للمستخدمين.

مقتضيات الشاشات عالية الدقة

TL;DR

  • تتضمن الشاشات عالية الدقة العديد من وحدات بكسل في الجهاز لكل بكسل في CSS
  • تتطلب الصور عالية الدقة عددًا كبيرًا جدًا من وحدات بكسل ووحدات بايت
  • تعد أساليب تحسين الصور متماثلة بغض النظر عن الدقة

عند التحدث عن وحدات بكسل للصورة، يجب التمييز بين أنواع وحدات البكسل المختلفة: وحدات بكسل في CSS ووحدات بكسل في الجهاز. قد تتضمن وحدة بكسل CSS المفردة عدة وحدات بكسل في الجهاز - على سبيل المثال، قد تناسب وحدة بكسل CSS الواحدة مباشرة وحدة بكسل واحدة للجهاز، وقد يتم دعمها بواسطة عدة وحدات بكسل للجهاز. ولكن ما الفكرة في ذلك؟ كلما زادت وحدات بكسل للجهاز، أصبحت تفاصيل المحتوى المعروض على الشاشة أكثر دقة.

الفرق بين وحدات بكسل في CSS وفي الجهاز

تساعد الشاشات مرتفعة نسبة DPI المعروفة اختصارًا باسم HiDPI في الحصول على نتائج رائعة، إلا أن هناك مشكلة في مقابل ذلك: تتطلب أصول الصورة مزيدًا من التفاصيل للاستفادة من عدد وحدات بكسل المرتفع في الجهاز. الجيد في الأمر أن الصور المتجهية تتناسب مع هذه المهمة تمامًا، نظرًا لأنه يمكن عرضها بأية دقة والحصول على نتائج دقيقة - وقد نتحمل تكلفة معالجة أعلى لعرض التفاصيل الدقيقة، ولكن يكون الأصل المطلوب هو نفسه وبدقة مستقلة.

وفي المقابل، تمثل الصور النقطية تحديًا أكبر بكثير نظرًا لأنها تشفر بيانات الصور على أساس لكل بكسل. ولذلك كلما زاد عدد وحدات بكسل، زاد حجم ملف الصورة النقطية. على سبيل المثال، يمكننا النظر إلى الفرق بين أصل الصورة المعروض بقياس 100×100 بكسل (CSS):

دقة الشاشة إجمالي عدد وحدات بكسل حجم الملفات غير المضغوطة (4 بايت لكل بكسل)
1x 100 × 100 = 10000 40000 بايت
2x 100 × 100 × 4 = 40000 160000 بايت
3x 100 × 100 × 9 = 90,000 360000 بايت

عند مضاعفة دقة الشاشة المادية، يزيد إجمالي عدد وحدات بكسل أربعة أضعاف: ضعف عدد وحدات بكسل الأفقية، وأضعاف عدد وحدات بكسل العمودية. ولذلك، لا تتضاعف الشاشة بمقاس 2x فقط، ولكنها تصل إلى 4 أضعاف عدد وحدات بكسل المطلوب.

ولكن ما معنى ذلك في الواقع؟ تمكننا الشاشات عالية الدقة من عرض صور رائعة، ويمكن أن يمثل هذا ميزة رائعة في المنتج. إلا أن الشاشات عالية الدقة تتطلب أيضًا صورًا عالية الدقة: ولذلك يمكنك اللجوء إلى الصور المتجهية قدر الإمكان نظرًا لأنها مستقلة من حيث الدقة ودائمًا ما تقدم نتائج دقيقة، وإذا كانت الصورة النقطية هي المطلوبة، فيمكنك تقديم عدة نسخ متباينة لكل صورة وتحسينها - ويمكنك متابعة القراءة للحصول على مزيد من التفاصيل.

تحسين الصور المتجهية

TL;DR

  • يعد SVG تنسيق صور يعتمد على XML
  • يجب التقليل من ملفات SVG لخفض حجمها
  • يجب ضغط ملفات SVG باستخدام GZIP

تتوافق جميع المتصفحات الحديثة مع الرسومات المتجهية القابلة للتوسيع (SVG)، وهو تنسيق صور يعتمد على XML للرسومات ثنائية الاتجاه: ويمكننا تضمين ترميز SVG مباشرة في الصفحة، أو في شكل مورد خارجي. وفي المقابل، يمكن إنشاء ملف SVG باستخدام معظم برامج الرسم باستخدام التنسيق المتجهي، أو باليد وفي محرر النصوص المفضل مباشرة.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
  <g>
    <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
  </g>
</g>
</svg>

يعرض المثال الوارد أعلاه شكل دائرة بسيطًا يتضمن مخططًا أسود وخلفية حمراء وتم تصديره من Adobe Illustrator. وكما تعرف، فهو يتضمن العديد من البيانات الوصفية، مثل تعليقات معلومات الطبقة ومساحات اسم XML التي تكون في الغالب غير لازمة لعرض الأصل في المتصفح. ونتيجة لذلك، من الجيد تقليل حجم ملفات SVG من خلال استخدام أداة مثل svgo معها.

ومن الحالات المتعلقة بذلك أن svgo يساعد في خفض حجم ملف SVG سالف الذكر الذي تم إنشاؤه بواسطة Illustrator بنسبة 58%، بحيث يصبح حجمه 199 بايت بعد أن كان 470 بايت. علاوة على ذلك، ونظرًا لأن SVG يعد تنسيقًا يعتمد على XML، يمكننا أيضًا تطبيق ضغط GZIP لخفض حجم النقل - ولكن تأكد من أن الخادم قد تمت تهيئته على ضغط أصول SVG.

تحسين الصور النقطية

TL;DR

  • تمثل الصورة النقطية شبكة من وحدات بكسل
  • تضع كل وحدة بكسل تشفيرًا لمعلومات اللون والشفافية
  • تستخدم أدوات ضغط الصور مجموعة مختلفة من الأساليب لخفض عدد وحدات بت المطلوبة لكل بكسل حتى يتم خفض حجم ملف الصورة

تعد الصورة النقطية ببساطة شبكة ثنائية الاتجاه تتكون من وحدات بكسل فردية - على سبيل المثال، الصورة التي تبلغ دقتها 100×100 بكسل وتعد تسلسلاً لـ 10000 وحدة بكسل. وفي المقابل، تخزن كل وحدة بكسل قيم [RGBA](http://en.wikipedia.org/wiki/RGBA_color_space): (R) قناة حمرا، (G) قناة خضراء، (B) قناة زرقاء، (A) قناة ألفا (شفافية).

وعلى المستوى الداخلي، يحدد المتصفح 256 قيمة (ظلاً) لكل قناة، وبذلك تتم ترجمة 8 بت لكل قناة (2 ^ 8 = 256) و4 بايت لكل بكسل (4 قنوات × 8 بت = 32 بت = 4 بايت). ونتيجة لذلك، إذا كنا نعرف أبعاد الشبكة، فيمكننا بسهولة حساب حجم الملف:

  • تتألف الصورة 100 × 100 بكسل من 10000 بكسل
  • 10000 بكسل × 4 بايت = 40000 بايت
  • 40000 بايت / 1024 = 39 كيلوبايت
الأبعاد وحدات بكسل حجم الملف
100 × 100 10000 39 كيلوبايت
200 × 200 40000 156 كيلوبايت
300 × 300 90000 351 كيلوبايت
500 × 500 250000 977 كيلوبايت
800 × 800 640000 2500كيلويابت

قد لا يكون الحجم 39 كيلوبايت لصورة مقاس 100×100 بكسل أمرًا كبيرًا، ولكن سريعًا ما يمتد حجم الملف مع الصور الكبيرة وتصبح أصول الصورة بطيئة ومكلفة عند التنزيل. إلا أنه ولحسن الحظ ما ذكرناه حتى الآن يتعلق بتنسيق الصور غير المضغوطة. فما الذي يمكننا تنفيذه لخفض حجم ملف الصورة؟

هناك إستراتيجية بسيطة وهي خفض عمق بت في الصورة من 8 بت في القناة إلى لوحة ألوان أصغر: نحصل من خلال 8 بت في القناة على 256 قيمة في القناة و16777216 (2563) لونًا إجمالاً. وماذا لو تم تخفيض لوحة الألوان إلى 256 لونًا؟ عندها لن نحتاج إلا إلى 8 بت إجمالاً لقنوات RGB وفي الحال نوفر 2 بايت في البكسل -- وهذا يعني توفير 50% بالضغط من حجم 4 بايت الأصلي لكل تنسيق بكسل.

أدوات الضغط

بعد تحسين البيانات المخزنة في وحدات بكسل الفردية، سنحصل على وحدات بكسل أكثر فعالية وأفضل تجاورًا كذلك: وقد اتضح لنا أن العديد من الصور، وخاصة الصور الفوتوغرافية، تتضمن العديد من وحدات بكسل المتجاورة ذات الألوان المتشابهة - مثل السماء، والنسيج المتكرر، وهكذا. ومن خلال استخدام هذه المعلومات لصالحنا، يمكن لأداة الضغط تطبيق [ترميز delta](http://en.wikipedia.org/wiki/Delta_encoding) بدلاً من تخزين قيم فردية لكل وحدة بكسل، ويمكننا تخزين الفرق بين وحدات بكسل المجاورة: وإذا كانت وحدات بكسل المجاورة هي نفسها، فستكون delta تساوي صفر ولن نحتاج إلا إلى تخزين بت واحد. لكن لماذا نتوقف عند هذا الحد...

تتمتع العين البشرية بمستوى مختلف من الحساسية لألوان مختلفة: ويمكننا تحسين ترميز الألوان ليكون مسؤولاً عن ذلك من خلال خفض لوحة الألوان أو زيادتها لهذه الألوان. وتشكِّل وحدات بكسل المجاورة شبكة ثنائية الأبعاد، وهذا يعني أن كل وحدة بكسل لديها مجاورات متعددة: ويمكننا استخدام هذه الحقيقة في تحسين ترميز delta. وبدلاً من النظر إلى المجاورات المباشرة فقط لكل وحدة بكسل، يمكننا النظر إلى مجموعات من وحدات بكسل المجاورة على نطاق أوسع وترميز مجموعات مختلفة باستخدام إعدادات مختلفة. وهكذا...

وكما تعلم، يحدث تشابك في تحسين الصور سريعًا (بناءً على وجهة نظرك في الأمر بالطبع) ويعد ذلك مجالاً نشطًا من حيث الأبحاث الأكاديمية والتجارية. تشغل الصور العديد من وحدات بايت ويحتل ذلك قيمة كبيرة في إعداد أساليب أفضل لضغط الصور. إذا كنت مهتمًا بمعرفة المزيد حول هذا الأمر، فيمكنك الاطلاع على صفحة Wikipedia، أو قراءة ورقة أوصاف أساليب ضغط WebP للحصول على أمثلة عملية.

كل ذلك رائع، ولكنه أكاديمي إلى حد كبير: فما الفائدة التي ستعود علينا من تحسين الصور على صفحاتنا؟ بالطبع لن نهتم بابتكار أساليب ضغط جديدة، ولكن من الضروري استيعاب المشكلة: وحدات بكسل في RGBA، وعمق بت، وأساليب التحسين المتنوعة. تمثل جميع هذه المفاهيم أهمية كبيرة ويجب استيعابها قبل الغوص في النقاش حول تنسيقات الصور النقطية المتعددة.

الفرق بين ضغط الصور باستخدام ضغط البيانات المنقوص وغير المنقوص

TL;DR

  • نظرًا لآلية عمل العين، تعد الصور عناصر مؤهلة جدًا لضغط البيانات المنقوص
  • يعد تحسين الصور إحدى وظائف ضغط البيانات المنقوص وغير المنقوص
  • ترجع الاختلافات في تنسيقات الصور إلى الاختلاف في كيفية استخدام واختيار خوارزميات ضغط البيانات المنقوص وغير المنقوص لتحسين الصورة
  • ليس هناك تنسيق واحد يعد الأفضل أو إعداد جودة لجميع الصور: ذلك أن كل توليفة تضم أداة ضغط معينة ومحتويات صورة ما تأتي بنتيجة فريدة

بالنسبة إلى أنواع معينة من البيانات، مثل شفرة مصدر الصفحة أو الملف القابل للتنفيذ، من الضروري ألا تغير أداة الضغط أية معلومات أصلية أو تفقدها: وقد يؤدي فقد بت واحد من البيانات أو الخطأ فيه إلى تغيير معنى محتويات الملف تمامًا، والأسوأ من ذلك أنه قد يؤدي إلى تلف تام. وبالنسبة إلى الأنواع الأخرى من البيانات، مثل الصور والصوت والفيديو، قد يكون مقبولاً تمامًا تقديم تمثيل تقريبي للبيانات الأصلية.

وفي الحقيقة، نظرًا لطريقة عمل العين، يمكننا في الغالب تجاهل بعض المعلومات حول كل بكسل بدون لوم لتقليل حجم ملف الصورة - على سبيل المثال، تتضمن أعيننا حساسية مختلفة للألوان المختلفة، وهذا يعني أنه يمكننا استخدام وحدات بت أقل لترميز بعض الألوان. ونتيجة لذلك، تتألف قناة تحسين الصور العادية من خطوتين على مستوى رفيع:

  1. تتم معالجة الصورة باستخدام فلتر [ضغط البيانات المنقوص](http://en.wikipedia.org/wiki/Lossy_compression) الذي يتخلص من بعض بيانات بكسل
  2. تتم معالجة الصورة باستخدام فلتر [ضغط البيانات غير المنقوص](http://en.wikipedia.org/wiki/Lossless_compression) الذي يضغط بيانات بكسل

الخطوة الأولى اختيارية والخوارزمية الدقيقة ستعتمد على تنسيق الصورة المحدد، إلا أنه من الضروري استيعاب أنه يمكن خضوع الصورة لخطوة ضغط البيانات المنقوص لتقليل حجمها. في الحقيقة، يكمن الاختلاف بين العديد من تنسيقات الصور، مثل GIF وPNG وJPEG وغيرها في الجمع بين خوارزميات معينة يتم استخدامها (أو إسقاطها) عند تطبيق خطوتي ضغط البيانات المنقوص وغير المنقوص.

لذلك، ما التهيئة المثالية لتحسين ضغط البيانات المنقوص وغير المنقوص؟ تعتمد الإجابة على محتويات الصورة، كما أنك تمتلك معايير مثل التعويض بين حجم الملف وأدوات يوفرها ضغط البيانات المنقوص: وفي بعض الحالات قد تحتاج إلى تخطي تحسين ضغط البيانات المنقوص لتوصيل تفاصيل معقدة بأمانة كاملة، وفي حالات أخرى قد تتمكن من تطبيق تحسين ضغط البيانات المنقوص تطبيقًا متشددًا لخفض حجم الملف في أصل الصورة. وهذه الحالة تمتلك فيها القرار ونحتاج فيها إلى سياق - فليس هناك إعداد عام.

الحفظ للويب

كمثال عملي، عند استخدام تنسيق ضغط البيانات المنقوص مثل JPEG، ستكشف أداة الضغط عادة عن إعداد جودة قابل للتخصيص (مثل مؤشر الجودة المتوفر في وظيفة الحفظ للويب في Adobe Photoshop)، الذي يتراوح عادة بين الرقم 1 و100 ويتحكم في عناصر العمل الداخلية لمجموعة محددة من خوارزميات ضغط البيانات المنقوص وغير المنقوص. للحصول على أفضل نتائج، جرب مجموعة مختلفة من إعدادات الجودة للصور ولا تنزعج من خفض الجودة - لأن النتائج التي تظهر تكون جيدة في الغالب ويمكن أن يكون التوفير في حجم الملف كبيرًا جدًا.

اختيار تنسيق الصور المناسب

TL;DR

  • 'ابدأ بتحديد التنسيق العام المناسب: GIF أو PNG أو JPEG'
  • 'جرب الإعدادات الأفضل وحددها لكل تنسيق: الجودة ولوحة الألوان والحجم وما إلى ذلك.'
  • جرب إضافة أصول WebP وJPEG XR للصور المضبوطة للبرامج الحديثة

بالإضافة إلى خوارزميات ضغط البيانات المنقوص وغير المنقوص، تتوافق تنسيقات الصور المختلفة مع الميزات المختلفة مثل قنوات الرسوم المتحركة وقنوات الشفافية (alpha). ونتيجة لذلك، يعد اختيار التنسيق المناسب لصورة ما مجموعة من النتائج البصرية والمتطلبات الوظيفية المفضلة.

التنسيق الشفافية الرسم المتحرك المتصفح
GIF نعم نعم الكل
PNG نعم لا الكل
JPEG لا لا الكل
JPEG XR نعم نعم IE
WebP نعم نعم Chrome وOpera وAndroid

هناك ثلاثة تنسيقات صور متوافقة: GIF وPNG وJPEG. وبالإضافة إلى هذه التنسيقات، تتوافق بعض المتصفحات أيضًا مع التنسيقات الجديدة مثل WebP وJPEG XR، التي تقدم ميزات ضغط أفضل وأكثر بشكل عام. لذا، ما التنسيق الذي يجب استخدامه؟

الحفظ للويب

  1. هل تريد الحصول على رسم متحرك؟ إذا كان الأمر كذلك، فالخيار العام الوحيد هو GIF.
  2. يقيد GIF لوحة الألوان بعدد 256 لونًا، مما يجعله اختيارًا رديئًا لمعظم الصور. علاوة على ذلك، يقدم PNG-8 إمكانية ضغط أفضل للصور التي تتضمن لوحة ألوان صغيرة. ونتيجة لذلك، يعد GIF الخيار الوحيد المناسب عند الحاجة إلى رسم متحرك.
  3. هل تريد الحفاظ على التفاصيل الدقيقة بأعلى دقة؟ استخدم PNG.
  4. لا يطبق PNG أية خوارزميات لضغط البيانات المنقوص بخلاف اختيار حجم لوحة الألوان. ونتيجة لذلك، ستحصل على صورة بأعلى جودة، ولكن بتكلفة أعلى كثيرًا من حيث حجم الملف تزيد عن التنسيقات الأخرى. ولذلك فكِّر مليًا.
  5. إذا كان أصل الصورة يتضمن صورًا مكونة من أشكال هندسية، فيمكنك تحويلها إلى تنسيق متجهي (SVG).
  6. إذا كان أصل الصورة يتكون من نصوص، ففكر مليًا وأعد النظر في الأمر. لا يمكن تحديد النصوص داخل الصور أو البحث فيها أو تكبيرها/تصغيرها. وإذا كنت تحتاج إلى نقل مظهر مخصص (لعلامة تجارية أو أسباب أخرى)، فاستخدم خط الويب بدلاً من ذلك.
  7. هل تريد تحسين صورة أو لقطة شاشة أو أصل صورة شبيه؟ استخدم JPEG.
  8. يجمع JPEG بين التحسين بضغط البيانات المنقوص وغير المنقوص لخفض حجم ملف أصل الصورة. جرب عدة مستويات جودة في JPEG للحصول على أفضل جودة مقارنة بتعويض حجم الملف للأصل.

وأخيرًا، بعد تحديد تنسيق الصورة المثالي وإعداداتها لكل أصل من الأصول، جرب إضافة متغير إضافي مرمَّز في WebP وJPEG XR. يعد كل من هذين التنسيقين جديدًا، وللأسف لم يتم اعتمادهما بعد على نطاق عام في جميع المتصفحات، ولكن يمكن الاستفادة منهم في تحقيق توفير كبير للعملاء الجدد - على سبيل المثال، يوفر WebP في المتوسط 30% أقل في حجم الملف مقارنة بصورة JPEG.

نظرًا لأنه لم يتم بعد اعتماد أي من WebP وJPEG XR على نطاق عام، فستحتاج إلى إضافة منطق آخر إلى تطبيقك أو خوادمك لعرض المورد المناسب:

  • توفر بعض وحدات CDN تحسين صور كخدمة ، بما في ذلك توفير JPEG XR وWebP.
  • تتولى بعض الأدوات مفتوحة المصدر (مثل PageSpeed على Apache أو Nginx) تحسينًا تلقائيًا وتحويلاً وعرضًا للأصول المناسبة.
  • يمكنك إضافة منطق تطبيق إضافي لاكتشاف العميل، ومعرفة التنسيقات المتوافقة وعرض أفضل تنسيق صور متاح.

أخيرًا، لاحظ أنه عند استخدام Webview لعرض المحتوى في تطبيق أصلي، فستكون لديك الصلاحية الكاملة للتحكم في العميل ويمكنك استخدام WebP حصريًا. Facebook وGoogle+‎ والعديد من المنصات الأخرى تستفيد من WebP في عرض جميع الصور داخل التطبيقات - ودائمًا ما يكون التوفير مشجعًا على ذلك. للتعرف على مزيد من المعلومات حول WebP، راجع العرض التقديميWebP: نشر صور أسرع وأصغر وأكثر جمالاً من Google I/O 2013.

الأدوات وضبط المعلمات

لا يوجد تنسيق مثالي للصور، أو أداة مثالية أو مجموعة من معلمات التحسين المثالية التي تسري على جميع الصور. وللحصول على أفضل نتائج، يتعين عليك اختيار التنسيق وإعداداته بناءً على محتويات الصورة ومتطلباتها البصرية والفنية الأخرى.

الأداة الوصف
gifsicle إنشاء صور GIF وتحسينها
jpegtran تحسين صور JPEG
optipng تحسين PNG بضغط البيانات غير المنقوص
pngquant تحسين PNG بضغط البيانات المنقوص

لا تقلق من تجربة المعلمات مع كل أداة ضغط. قلل الجودة وشاهد النتيجة، ثم كرر التجربة. وبعد الوصول إلى مجموعة جيدة من الإعدادات، يمكنك تطبيقها على الصور الأخرى الشبيهة في موقعك، ولكن لا تفترض أنه يجب ضغط جميع الصور باستخدام الإعدادات نفسها.

عرض أصول صور مضبوطة

TL;DR

  • يعد توفير أصول مضبوطة أحد أبسط وسائل التحسين وأكثرها فعالية
  • اهتم اهتمامًا بالغًا بالأصول الكبيرة نظرًا لأنها تؤدي إلى تكلفة عالية
  • قلل عدد وحدات بكسل غير اللازمة من خلال ضبط الصور على حجم الشاشة

يمكن استخلاص معيارين من تحسين الصور: تحسين عدد وحدات بايت المستخدم لترميز كل بكسل في الصورة، وتحسين إجمالي عدد وحدات بكسل: وساوى حجم ملف الصورة إجمالي عدد وحدات بكسل مضروبًا في عدد وحدات بايت المستخدم لترميز كل بكسل. لا أكثر ولا أقل.

ونتيجة لذلك، يعد أحد أبسط أساليب تحسين الصور وأكثرها فعالية ضمان عدم تقديم أية وحدات بكسل إضافية على الوحدات اللازمة لعرض الأصل بحجمه المطلوب في المتصفح. أمر سهل، أليس كذلك؟ للأسف معظم الصفحات تخفق في اجتياز هذا الاختبار مع العديد من أصول الصور: فهي عادة تقدم الأصول الكبيرة وتعتمد على المتصفح في إعادة ضبطها، ومن ثم تستهلك أيضًا مزيدًا من موارد وحدة المعالجة المركزية - كما تعرضها بدقة منخفضة.

الصورة التي يتم تغيير حجمها

تكمن مشكلة تقديم وحدات بكسل غير لازمة لمطالبة المتصفح بإعادة ضبط الصورة نيابة عنا في فقد فرصة خفض عدد وحدات بايت المطلوبة لعرض الصفحة وتحسينها. علاوة على ذلك، لاحظ أن إعادة ضبط الحجم ليس وظيفة عدد وحدات بكسل التي يتم بموجبها خفض الصورة، ولكنه أيضًا من الحجم الطبيعي.

الحجم الطبيعي حجم العرض وحدات بكسل غير اللازمة
110 × 110 100 × 100 110 × 110 - 100 × 100 = 2100
410 × 410 400 × 400 410 × 410 - 400 × 400 = 8100
810 × 810 800 × 800 810 × 810 - 800 × 800 = 16100

لاحظ أنه في الحالات الثلاث جميعها التي تزيد عن حجم العرض يكون 10 وحدات بكسل أصغر فقط عن الحجم الطبيعي للصورة. إلا أن عدد وحدات بكسل الإضافي الذي يتعين علينا ترميزه وتقديمه يكون أعلى كثيرًا من الحجم الطبيعي الكبير. ونتيجة لذلك، على الرغم من أنه قد لا يكون بوسعك ضمان تقديم كل أصل بحجم العرض الدقيق، يجب التأكد من أن عدد وحدات بكسل غير اللازمة لا يتجاوز الحد الأدنى، وأن الأصول الكبيرة على وجه التحديد يتم تقديمها على أقرب حال من حجم العرض.

قائمة التحقق من تحسين الصور

يعد تحسين الصور فنًا وعلمًا: فهو فن لأنه ليست هناك إجابة واحدة قاطعة بشأن الطريقة الأفضل لضغط الصورة الفردية، كما يعد علمًا لأن هناك العديد من الوسائل والخوارزميات المتطورة التي يمكنها خفض حجم الصورة كثيرًا.

في ما يلي بعض النصائح والتقنيات التي يجب وضعها في الاعتبار عند تحسين الصور:

  • التنسيقات المتجهية المفضلة: تعد الصور المتجهية منفصلة عن الدقة والحجم، مما يجعلها مناسبة تمامًا لأجهزة متعددة وبدقة عالية.
  • خفض أصول SVG وضغطها: يتضمن ترميز XML الناتج عن معظم تطبيقات الرسم في الغالب بيانات وصفية غير لازمة يمكن إزالتها؛ ولذلك تأكد من أن الخوادم مهيأة لتطبيق ضغط GZIP مع أصول SVG.
  • اختر تنسيق الصور النقطية الأفضل: حدد المتطلبات الوظيفية واختر الأكثر ملاءمة لكل أصل على حدة.
  • جرب إعدادات الجودة المثالية للحصول على التنسيقات النقطية: ولا تقلق بشأن خفض إعدادات الجودة، لأن النتائج تكون في الغالب جيدة جدًا وموفرة لوحدات بايت إلى حد كبير.
  • أزل البيانات الوصفية للصورة غير اللازمة: تتضمن العديد من الصور النقطية بيانات وصفية غير لازمة حول الأصل: المعلومات الجغرافية، ومعلومات الكاميرا، وهكذا. استخدم الأدوات المناسبة لإزالة هذه البيانات.
  • قدم صورًا مضبوطة: غير حجم الصور على الخادم وتأكد من أن حجم العرض أقرب ما يكون من الحجم الطبيعي للصورة. اهتم اهتمامًا كبيرًا بالصور الكبيرة على وجه التحديد، نظرًا لأنها تؤدي إلى تكلفة كبيرة عند تغيير الحجم.
  • اهتم بتنفيذ المهام تلقائيًا: استثمر في أدوات تنفيذ المهام تلقائيًا والبنية التي تضمن تحسين جميع أصول الصور دائمًا.