غالبًا ما تشكّل الصور معظم وحدات البايت التي يتم تنزيلها على صفحة الويب، وغالبًا ما تشغل قدرًا كبيرًا من المساحة المرئية. نتيجةً لذلك، غالبًا ما يؤدي تحسين الصور إلى تحقيق أكبر قدر من التوفير في وحدات البايت وإجراء تحسينات على أداء موقعك الإلكتروني: كلما قلّ عدد وحدات البايت التي ينزِّلها المتصفّح، قلّت المنافسة على معدل نقل بيانات العميل وزادت سرعة تنزيل المحتوى المفيد وعرضه على الشاشة.
إنّ تحسين الصور هو فن وعلم لأنّه لا تتوفّر إجابة واحدة محددة لضغط صورة فردية، وعلم لأنّ هناك العديد من التقنيات والخوارزميات المتطورة التي يمكنها تقليل حجم الصورة بشكل كبير. وللعثور على الإعدادات المثلى لصورتك، عليك إجراء تحليل دقيق على مستوى العديد من الأبعاد، مثل إمكانات التنسيق ومحتوى البيانات المشفَّرة والجودة وأبعاد البكسل وغير ذلك.
تحسين صور المتجهات
تدعم جميع المتصفحات الحديثة الرسومات الموجّهة التي يمكن تغيير حجمها (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" icon="utf-8"?>
وكما هو واضح، فهو يتضمن الكثير من البيانات الوصفية، مثل معلومات الطبقة والتعليقات ومساحات الاسم بتنسيق XML التي غالبًا ما تكون غير ضرورية لعرض مادة العرض في المتصفح. ونتيجةً لذلك، من الأفضل دائمًا تصغير ملفات SVG من خلال تشغيل أداة مثل SVGO.
على سبيل المثال، يقلل SVGO حجم ملف SVG أعلاه الذي تم إنشاؤه بواسطة Illustrator بنسبة 58%، ويأخذه من 470 إلى 199 بايت من 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) القناة الحمراء و(G) القناة الخضراء و(B) القناة الزرقاء و (A) قناة ألفا (الشفافية).
داخليًا، يخصص المتصفح 256 قيمة (ظلال) لكل قناة، مما يُترجم إلى 8 بت لكل قناة (2 ^ 8 = 256)، و4 بايت لكل بكسل (4 قنوات × 8 بت = 32 بت = 4 بايت). نتيجة لذلك، إذا عرفنا أبعاد الشبكة، يمكننا بسهولة حساب حجم الملف:
- يتكون صورة 100×100 بكسل من 10000 بكسل
- 10000 بكسل × 4 بايت = 40000 بايت
- 40000 بايت / 1024 = 39 كيلوبايت
| الأبعاد | صورة من البكسلات | حجم الملف |
|---|---|---|
| 100 × 100 | 10,000 | 39 كيلوبايت |
| 200 × 200 | 40000 | 156 كيلوبايت |
| 300 × 300 | 90000 | 351 كيلوبايت |
| 500 × 500 | 250000 | 977 كيلوبايت |
| 800 x 800 | 640000 | 2500 كيلوبايت |
قد لا يبدو حجم 39 كيلوبايت لصورة بحجم 100×100 بكسل مشكلة كبيرة، لكن حجم الملف يزداد بسرعة عندما يكون حجم الصور أكبر ويجعل تنزيل مواد عرض الصور بطيئًا ومكلفًا في الوقت نفسه. ركّزت هذه المشاركة حتى الآن على تنسيق الصورة "غير المضغوطة" فقط. لحسن الحظ، يمكن القيام بالكثير لتقليل حجم ملف الصورة.
تتمثل إحدى الإستراتيجيات البسيطة في تقليل "عمق البت" للصورة من 8 بت لكل قناة إلى لوحة ألوان أصغر: تمنحنا 8 بت لكل قناة 256 قيمة لكل قناة و16777216 لونًا (256 ^ 3) إجمالاً. ماذا لو قمت بتقليل لوحة الألوان إلى 256 لونًا؟ ثم ستحتاج إلى 8 وحدات بت فقط لقنوات RGB مع توفير مساحة 2 بايت لكل بكسل على الفور، وهو ما يمثل توفيرًا في الضغط بنسبة 50% على التنسيق الأصلي البالغ 4 بايت لكل بكسل.
تتطلّب المشاهد المعقدة ذات التغيّرات التدريجية للألوان (على سبيل المثال، التدرجات أو السماء) لوحات ألوان أكبر لتجنّب العناصر المرئية مثل السماء المتقطّعة في مادة العرض ذات 5 وحدات بت. من ناحية أخرى، إذا كانت الصورة تستخدم عدد قليل من الألوان فقط، فإن لوحة الألوان الكبيرة ببساطة تهدر وحدات بت ثمينة!
بعد ذلك، بمجرد تحسين البيانات المخزنة في وحدات البكسل الفردية، يمكنك أن تصبح أكثر ذكاءً وإلقاء نظرة على وحدات البكسل المجاورة أيضًا: يتضح أن العديد من الصور، وخاصة الصور، تحتوي على العديد من وحدات البكسل القريبة ذات الألوان المتشابهة - على سبيل المثال، السماء، وتكرار الزخارف، وما إلى ذلك. وبفضل هذه المعلومات، يمكن للضاغط تطبيق ترميز دلتا حيث يمكنك تخزين الفرق بين وحدات البكسل القريبة بدلاً من تخزين القيم الفردية لكل بكسل: إذا كانت وحدات البكسل المجاورة متطابقة، تكون قيمة دلتا "صفر" وتحتاج فقط إلى تخزين وحدة بت واحدة. ولكن لماذا نتوقف عند هذا الحد...
تتمتع العين البشرية بمستوى مختلف من الحساسية للألوان المختلفة: يمكنك تحسين ترميز الألوان لحساب ذلك عن طريق تقليل لوحة تلك الألوان أو زيادتها. تشكل وحدات بكسل "القريبة" شبكة ثنائية الأبعاد. هذا يعني أن كل بكسل له عدة جيران: يمكنك استخدام هذه الحقيقة لتحسين ترميز دلتا بشكل أكبر. وبدلاً من النظر إلى الجيران المباشرين فقط لكل بكسل، يمكنك النظر إلى كتل أكبر من وحدات البكسل القريبة وترميز كتل مختلفة بإعدادات مختلفة.
يمكنك القول أن تحسين الصور يزداد تعقيدًا بسرعة (أو ممتعًا، حسب منظورك)، وهو مجال نشط للبحث الأكاديمي والتجاري. تشغل الصور الكثير من وحدات البايت، وهناك قيمة كبيرة في تطوير تقنيات أفضل لضغط الصور! للحصول على مزيد من المعلومات، يمكنك الانتقال إلى صفحة ويكيبيديا أو الاطّلاع على التقرير العملي حول أساليب ضغط WebP للاطّلاع على أمثلة عملية.
حسنًا، أودّ الإشارة إلى أنّ هذا الأمر رائع، ولكنه أكاديمي أيضًا: كيف يساعدك في تحسين الصور على موقعك الإلكتروني؟ من المهم فهم شكل المشكلة: وحدات بكسل RGBA، والعمق البت، وأساليب التحسين المختلفة. تُعد جميع هذه المفاهيم مهمة لفهمها ووضعها في الاعتبار قبل التعمق في المناقشات حول مختلف تنسيقات الصور النقطية.
ضغط الصور بدون فقدان البيانات مقابل ضغط الصور مع فقدان البيانات
بالنسبة إلى أنواع معينة من البيانات، مثل رمز المصدر لصفحة أو ملف تنفيذي، من الضروري ألا يغيّر الضاغط أيًا من المعلومات الأصلية أو يفقدها: قد يؤدي جزء واحد مفقود أو خاطئ من البيانات إلى تغيير معنى محتوى الملف تمامًا، أو الأسوأ من ذلك، إلى تدميره تمامًا. بالنسبة لبعض أنواع البيانات الأخرى، مثل الصور والصوت والفيديو، قد يكون من المقبول تمامًا تقديم تمثيل "تقريبي" للبيانات الأصلية.
في الواقع، نظرًا لطريقة عمل العين، يمكننا غالبًا تجاهل بعض المعلومات عن كل بكسل من أجل تقليل حجم ملف الصورة - على سبيل المثال، تكون لدى أعيننا حساسية مختلفة للألوان المختلفة، مما يعني أنه يمكننا استخدام عدد أقل من وحدات البت لترميز بعض الألوان. ونتيجةً لذلك، يتألف مسار تحسين الصور النموذجي من خطوتَين عاليتَين المستوى:
- تتم معالجة الصورة باستخدام فلتر lossy لإزالة بعض بيانات البكسل.
- تتم معالجة الصورة باستخدام فلتر بدون فقدان البيانات يضغط بيانات البكسل.
الخطوة الأولى اختيارية وستعتمد الخوارزمية الدقيقة على تنسيق الصورة المحدد، ولكن من المهم أن تفهم أن أي صورة يمكن أن تخضع لخطوة ضغط مع فقدان البيانات لتقليل حجمها. في الواقع، يكمن الفرق بين تنسيقات الصور المختلفة، مثل GIF وPNG وJPEG وغيرها، في الجمع بين الخوارزميات المحدّدة التي تستخدمها (أو تحذفها) عند تطبيق الخطوات المفقودة وبدون فقدان البيانات.
إذًا، ما هي التكوين "الأمثل" لعملية التحسين مع فقدان البيانات بدون فقدان البيانات؟ تعتمد الإجابة على محتوى الصورة وعلى معاييرك الخاصة مثل المفاضلة بين حجم الملف والعناصر التي يتم تقديمها من خلال الضغط مع فقدان البيانات: في بعض الحالات، قد تحتاج إلى تخطي تحسين فقدان البيانات لتوصيل التفاصيل المعقدة بدقة كاملة. في حالات أخرى، قد تتمكن من تطبيق تحسينات قوية لفقدان البيانات بهدف تقليل حجم ملف مادة عرض الصورة. هذا هو المكان الذي ينبغي أن يؤثر فيه حكمك وسياقك - لا يوجد مكان عالمي واحد.
كمثال عملي، عند استخدام تنسيق مع فقدان البيانات مثل JPEG، يعرض الضاغط عادةً إعداد "جودة" قابل للتخصيص (على سبيل المثال، شريط تمرير الجودة الذي توفّره ميزة "الحفظ للويب" في Adobe Photoshop)، والذي عادةً ما يكون رقمًا بين 1 و100 للتحكُّم في الأعمال الداخلية للمجموعة المحدَّدة من الخوارزميات التي تعرض فقدان البيانات بدون فقد أو فقدان البيانات. للحصول على أفضل النتائج، جرب إعدادات جودة مختلفة لصورك، ولا تتردد في تخفيض مستوى الجودة، فالنتائج المرئية غالبًا ما تكون جيدة جدًا ويمكن أن يكون مقدار التوفير في حجم الملف كبيرًا جدًا.
تأثيرات ضغط الصور على "مؤشرات أداء الويب الأساسية"
بما أنّ الصور غالبًا ما تكون مرشحة لعرض سرعة عرض أكبر جزء من المحتوى على الصفحة، يمكن أن يؤدي تقليل وقت تحميل الصور إلى تحسين سرعة عرض أكبر محتوى مرئي (LCP) في كل من المختبر والمجال.
عند استخدام إعدادات الضغط في تنسيقات الصور النقطية، احرص على تجربة تنسيقات WebP وAVIF لمعرفة ما إذا كان بإمكانك تقديم الصورة نفسها بمسافة صغيرة بالمقارنة مع التنسيقات القديمة.
ومع ذلك، عليك الحرص على عدم ضغط الصور النقطية. ويمكن حل هذه المشكلة من خلال استخدام شبكة توصيل للمحتوى (CDN) لتحسين الصور للعثور على أفضل إعدادات الضغط المناسبة لك، ولكن يمكن بدلاً من ذلك استخدام أدوات مثل Butteraugli لتقدير الاختلافات البصرية لكي لا يتم ترميز الصور بشكل كبير جدًا وتفقد جودتها بشكل كبير.
قائمة التحقّق الخاصة بتحسين الصور
إليك بعض النصائح والتقنيات التي يجب مراعاتها عند تحسين صورك:
- تفضيل تنسيقات المتجهات: الصور المتجهة هي صور مستقلة من حيث الدقة والمقياس، ما يجعلها مناسبة تمامًا للبيئات ذات الأجهزة المتعددة والدقة العالية.
- تصغير مواد العرض بتنسيق SVG والضغط عليها: غالبًا ما يحتوي ترميز XML الذي يتم إنشاؤه من خلال معظم تطبيقات الرسم على بيانات وصفية غير ضرورية يمكن إزالتها. احرص على إعداد خوادمك لتطبيق ضغط GZIP لمواد العرض بتنسيق SVG.
- تفضيل WebP أو AVIF على تنسيقات الصور النقطية القديمة: تكون WebP وصور AVIF عادةً أصغر بكثير من تنسيقات الصور القديمة.
- اختر أفضل تنسيق للصور النقطية: حدد متطلباتك الوظيفية واختر الحل الذي يناسب كل مادة عرض معينة.
- جرِّب إعدادات الجودة المُثلى لتنسيقات الصور النقطية: لا تقلق من تخفيض إعدادات "الجودة"، فغالبًا ما تكون النتائج جيدة جدًا بالإضافة إلى تقليل وحدات البايت إلى حد كبير.
- أزِل البيانات الوصفية غير الضرورية للصور: يحتوي العديد من الصور النقطية على بيانات وصفية غير ضرورية حول مادة العرض، مثل معلومات الموقع الجغرافي ومعلومات الكاميرا وما إلى ذلك. استخدم الأدوات المناسبة لإزالة هذه البيانات.
- اعرض صورًا متدرجة: غيِّر حجم الصور وتأكَّد من أنّ حجم "العرض" قريب قدر الإمكان من حجم الصورة "الطبيعي". انتبه جيدًا للصور الكبيرة على وجه الخصوص، لأنّها تشكّل أكبر قدر من النفقات العامة عند تغيير حجمها!
- استخدام الأساليب المبرمَجة والتشغيل الآلي لها:يمكنك الاستثمار في الأدوات والبنية الأساسية المبرمَجة التي تضمن تحسين جميع مواد عرض الصور على الدوام.