غالبًا ما تمثل الصور معظم وحدات البايت التي يتم تنزيلها على صفحة الويب وغالبًا ما تشغل قدرًا كبيرًا من المساحة المرئية. نتيجةً لذلك، غالبًا ما يؤدي تحسين الصور إلى توفير أكبر قدر من التوفير في وحدات البايت وتحسين أداء موقعك الإلكتروني: كلما قلّ عدد وحدات البايت التي يجب على المتصفح تنزيلها، انخفضت المنافسة على معدل نقل البيانات للعميل وزادت سرعة تنزيل المحتوى المفيد وعرضه على الشاشة.
تحسين الصور هو فن وعلم في الوقت نفسه: فن لأنه لا توجد إجابة محددة محددة لأفضل طريقة لضغط الصورة الفردية، وعلم بسبب وجود العديد من التقنيات والخوارزميات المتطورة التي يمكن أن تقلل حجم الصورة بشكل كبير. ويتطلّب العثور على الإعدادات المثلى لصورتك تحليلاً دقيقًا على مستوى العديد من الأبعاد، مثل إمكانات التنسيق ومحتوى البيانات المشفَّرة والجودة وأبعاد البكسل وغير ذلك.
تحسين الصور المتجهة
تتوافق جميع المتصفّحات الحديثة مع رسومات موجّهة يمكن تغيير حجمها (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 version="1.0" reporting="utf-8"?>
ويمكنك القول إنّها تحتوي على الكثير من البيانات الوصفية، مثل معلومات الطبقة والتعليقات ومساحات اسم XML التي غالبًا ما تكون غير ضرورية لعرض مادة العرض في المتصفّح. ونتيجةً لذلك، من الأفضل دائمًا تصغير ملفات SVG من خلال تشغيل أداة مثل SVGO.
على سبيل المثال، تقلّل SVGO من حجم ملف SVG أعلاه الذي تم إنشاؤه بواسطة Illustrator بنسبة 58%، فتأخذه من 470 إلى 199 بايت.
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><circle fill="red" stroke="#000" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></svg>
بما أنّ SVG هو تنسيق مستند إلى XML، يمكنك أيضًا تطبيق ضغط GZIP لتقليل حجم النقل، لذا تأكّد من إعداد الخادم لضغط مواد العرض بتنسيق SVG.
الصورة النقطية هي ببساطة شبكة ثنائية الأبعاد مكونة من "وحدات بكسل" فردية - على سبيل المثال، الصورة بحجم 100×100 بكسل عبارة عن تسلسل من 10000 بكسل. يخزِّن كل وحدة بكسل قيم "RGBA" وهي: القناة الحمراء (R) والقناة الخضراء (B) والقناة الزرقاء (A) وقناة ألفا (الشفافية).
ويخصص المتصفح 256 قيمة (ظلال) لكل قناة، وهذا يعني 8 بت لكل قناة (2 ^ 8 = 256)، و4 بايت لكل بكسل (4 قنوات × 8 بت = 32 بت = 4 بايت). ونتيجة لذلك، إذا عرفنا أبعاد الشبكة يمكننا بسهولة حساب حجم الملف:
- تتكون الصورة بحجم 100×100 بكسل من 10000 بكسل
- 10,000 بكسل × 4 بايت = 40,000 بايت
- 40,000 بايت / 1024 = 39 كيلوبايت
| الأبعاد | صورة من البكسلات | حجم الملف |
|---|---|---|
| 100 × 100 | 10,000 | 39 كيلوبايت |
| 200 × 200 | 40,000 | 156 كيلوبايت |
| 300 × 300 | 90,000 | 351 كيلوبايت |
| 500 x 500 | 250000 | 977 كيلوبايت |
| 800 x 800 | 640000 | 2500 كيلوبايت |
قد لا يبدو حجم 39 كيلوبايت لصورة بحجم 100x100 بكسل أمرًا مهمًا، ولكن حجم الملف ينعكس بسرعة على الصور الأكبر حجمًا ويجعل تنزيل مواد عرض الصور بطيئة ومكلفة. ركّزت هذه المشاركة حتى الآن على تنسيق الصورة "غير المضغوط" فقط. لحسن الحظ، يمكن إجراء الكثير لتقليل حجم ملف الصورة.
تتمثل إحدى الإستراتيجيات البسيطة في تقليل "عمق بت" الصورة من 8 بت لكل قناة إلى لوحة ألوان أصغر: تمنحنا 8 بت لكل قناة 256 قيمة لكل قناة و16,777,216 (256 ^ 3) لونًا إجمالاً. ماذا لو قمت بتقليل لوحة الألوان إلى 256 لونًا؟ ستحتاج بعد ذلك إلى 8 بت فقط لقنوات أحمر أخضر أزرق، وتوفير 2 بايت لكل بكسل على الفور، وهذا يعني توفير الضغط بنسبة 50% مقارنةً بتنسيق 4 بايت الأصلي لكل بكسل!
تتطلب المَشاهد المعقّدة ذات الانتقالات تدريجيًا في الألوان (مثل التدرجات أو السماء) لوحات ألوان أكبر لتجنّب العناصر المرئية، مثل السماء ذات التقطيع في مادة العرض التي تتضمّن 5 بت. من ناحية أخرى، إذا كانت الصورة تستخدم بضعة ألوان فقط، فإن اللوحة الكبيرة تعني ببساطة إهدار بعض الأجزاء الثمينة!
بعد ذلك، بعد تحسين البيانات المخزَّنة بوحدات بكسل فردية، يمكنك الاستفادة من وحدات البكسل القريبة بطريقة أكثر ذكاءً والاطّلاع أيضًا على وحدات البكسل القريبة: يتبيّن أنّ العديد من الصور، وخاصةً الصور، تحتوي على العديد من وحدات البكسل القريبة ذات الألوان المتشابهة، مثل السماء، والزخارف المتكررة، وما إلى ذلك. باستخدام هذه المعلومات، يمكن للضاغط تطبيق ترميز دلتا بدلاً من تخزين القيم الفردية لكل بكسل، ويمكنك تخزين الفرق بين وحدات البكسل المجاورة. فإذا كانت وحدات البكسل المجاورة متطابقة، تكون قيمة دلتا "صفر" وتحتاج فقط إلى تخزين وحدة بت واحدة. ولكن لمَ أتوقَّف عند هذا الحد...
لدى العين البشرية مستوى مختلف من الحساسية للألوان المختلفة: يمكنك تحسين ترميز الألوان لمراعاة ذلك عن طريق تقليل لوحة الألوان لتلك الألوان أو زيادتها. تشكل وحدات البكسل "بالقرب" شبكة ثنائية الأبعاد. وهذا يعني أن كل بكسل له عناصر مجاورة متعددة: ويمكنك الاستفادة من هذه الحقيقة لتحسين ترميز دلتا بشكل أكبر. فبدلاً من النظر إلى العناصر المجاورة المباشرة لكل وحدة بكسل، يمكنك النظر إلى كتل أكبر من وحدات البكسل القريبة وترميز كتل مختلفة بإعدادات مختلفة.
كما ترى، يصبح تحسين الصور معقدًا سريعًا (أو ممتعًا، حسب وجهة نظرك)، ويشكّل مجالاً نشطًا للأبحاث الأكاديمية والتجارية. تشغل الصور الكثير من وحدات البايت وهناك قيمة كبيرة لتطوير أساليب أفضل لضغط الصور. إذا أردت معرفة المزيد من المعلومات، يمكنك الانتقال إلى صفحة ويكيبيديا أو الاطّلاع على التقرير الموجز لتقنيات الضغط WebP للحصول على مثال عملي.
وهذا كله شيء رائع ولكنه أكاديمية للغاية: كيف تساعدك في تحسين الصور على موقعك؟ من المهم فهم شكل المشكلة: وحدات بكسل RGBA وعمق البت وأساليب التحسين المتنوعة. لا بد من فهم كل هذه المفاهيم ووضعها في الاعتبار قبل التعمّق في المناقشات حول تنسيقات الصور النقطية المختلفة.
ضغط الصور بدون فقدان البيانات مقابل فقدان البيانات
بالنسبة إلى أنواع معينة من البيانات، مثل رمز المصدر لصفحة أو ملف تنفيذي، من المهم ألا يغيّر الضاغط أي معلومات أصلية أو يفقدها: يمكن أن تؤدي وحدة بت واحدة مفقودة أو خاطئة من البيانات إلى تغيير معنى محتوى الملف تمامًا، أو ما هو أسوأ من ذلك، قد يؤدي إلى تعطّله تمامًا. بالنسبة إلى بعض الأنواع الأخرى من البيانات، مثل الصور والصوت والفيديو، قد يكون من المقبول تمامًا تقديم تمثيل "تقريبي" للبيانات الأصلية.
في الواقع، بسبب طريقة عمل العين، يمكننا غالبًا تجاهل بعض المعلومات الخاصة بكل بكسل لتقليل حجم ملف الصورة. على سبيل المثال، لدى أعيننا حساسية مختلفة للألوان المختلفة، مما يعني أنه يمكننا استخدام وحدات بت أقل لترميز بعض الألوان. نتيجةً لذلك، يتألّف مسار تحسين الصور النموذجي من خطوتَين عاليتَين:
- تتم معالجة الصورة باستخدام فلتر فقدان البيانات، ما يؤدي إلى إزالة بعض بيانات البكسل.
- تتم معالجة الصورة باستخدام فلتر بدون فقدان البيانات يضغط بيانات البكسل.
الخطوة الأولى اختيارية، وستعتمد الخوارزمية الدقيقة على تنسيق الصورة المحدد، ولكن من المهم إدراك أن أي صورة يمكن أن تخضع لخطوة ضغط مع فقدان البيانات لتقليل حجمها. في الواقع، يكمن الفرق بين تنسيقات الصور المختلفة، مثل GIF وPNG وJPEG وغيرها، في الجمع بين الخوارزميات المحدّدة التي يستخدمونها (أو يحذفونها) عند تطبيق الخطوات التي تؤدي إلى فقدان البيانات بدون فقدان البيانات.
إذًا، ما هي الإعدادات "المثالية" للتحسين مع فقدان البيانات وبدون فقدان البيانات؟ تعتمد الإجابة على محتوى الصورة والمعايير الخاصة بك مثل المفاضلة بين حجم الملفات والعناصر الناتجة عن الضغط مع فقدان البيانات: في بعض الحالات، قد تحتاج إلى تخطي التحسين مع فقدان البيانات لعرض التفاصيل المعقدة بدقة كاملة. في حالات أخرى، قد يكون بإمكانك تطبيق تحسين صارم مع فقدان البيانات لخفض حجم ملف مادة عرض الصورة. هذا هو المكان الذي يجب فيه دور حكمك وسياقك - لا يوجد وضع عالمي واحد.
كمثال عملي، عند استخدام تنسيق مع فقدان البيانات مثل JPEG، يعرض الضاغط عادةً إعداد "جودة" قابل للتخصيص (على سبيل المثال، شريط تمرير الجودة الذي توفّره وظيفة "الحفظ للويب" في Adobe Photoshop)، والذي يكون عادةً رقمًا يتراوح من 1 إلى 100 ويتحكّم في طريقة العمل الداخلية لمجموعة محدّدة من الخوارزميات المفقودة وغير المفقودة. للحصول على أفضل النتائج، جرب إعدادات مختلفة للجودة لصورك، ولا تخشى خفض الجودة - غالبًا ما تكون النتائج المرئية جيدة جدًا ويمكن أن يكون التوفير في حجم الملف كبيرًا جدًا.
تأثيرات ضغط الصور في "مؤشرات أداء الويب الأساسية"
وبما أنّ الصور غالبًا ما تكون مؤهّلة للظهور في سرعة عرض أكبر محتوى مرئي، يمكن أن يؤدي تقليل مدة تحميل موارد الصورة إلى تحسين سرعة عرض أكبر جزء من المحتوى على الصفحة في الميزة الاختبارية والميدان.
عند استخدام إعدادات الضغط على تنسيقات الصور النقطية، احرص على تجربة تنسيقات WebP وAVIF لمعرفة ما إذا كان بإمكانك عرض الصورة نفسها بحجم صغير مقارنةً بالتنسيقات القديمة.
ومع ذلك، احرص على عدم المبالغة في ضغط الصور النقطية. ويتمثل الحل الجيد في استخدام شبكة توصيل محتوى (CDN) لتحسين الصور من أجل العثور على أفضل إعدادات الضغط لك، ولكن يمكنك بدلاً من ذلك استخدام أدوات مثل Butteraugli لتقدير الاختلافات المرئية كي لا يتم ترميز الصور بقوة كبيرة وتفقد الكثير من الجودة.
قائمة التحقّق الخاصة بتحسين الصور
إليك بعض النصائح والتقنيات التي يجب مراعاتها أثناء العمل على تحسين صورك:
- تفضيل تنسيقات المتجهات: صور المتجهات هي صور مستقلة عن درجة الدقة والمقياس، ما يجعلها مناسبة تمامًا للبيئات المتعددة الأجهزة والدقة العالية.
- تصغير مواد العرض بتنسيق SVG واضغطها: غالبًا ما يحتوي ترميز XML الذي يتم إنشاؤه من خلال معظم تطبيقات الرسم على بيانات وصفية غير ضرورية يمكن إزالتها. تأكّد من إعداد خوادمك لتطبيق ضغط GZIP على مواد العرض بتنسيق SVG.
- تفضيل WebP أو AVIF على تنسيقات الصور النقطية القديمة: عادةً ما تكون صور WebP وAVIF أصغر بكثير من تنسيقات الصور القديمة.
- اختر أفضل تنسيق للصور النقطية: حدد متطلباتك الوظيفية واختر التنسيق الذي يناسب كل مادة عرض معينة.
- جرّب إعدادات الجودة المثلى لتنسيقات الصور النقطية:لا تتردد في تخفيض إعدادات "الجودة"، فغالبًا ما تكون النتائج جيدة جدًا وتوفير وحدات البايت بشكل كبير.
- إزالة البيانات الوصفية غير الضرورية للصور: يحتوي الكثير من الصور النقطية على بيانات وصفية غير ضرورية حول مادة العرض، مثل معلومات الموقع الجغرافي ومعلومات الكاميرا وما إلى ذلك. استخدم الأدوات المناسبة لإزالة هذه البيانات.
- اعرض صورًا تم تحجيمها: غيِّر حجم الصور واحرص على أن يكون حجم "العرض" أقرب ما يمكن من حجم الصورة "الطبيعي". انتبه جيدًا للصور الكبيرة على وجه الخصوص، لأنها تمثل أكبر تكلفة عامة عند تغيير حجمها!
- التشغيل الآلي والتشغيل الآلي له: استثمِر في الأدوات والبنية الأساسية المبرمَجة التي ستضمن تحسين جميع مواد عرض الصور على الدوام.