كيف تقلل من حجم الصور مع الحفاظ على جودتها لتحقيق تصفح سريع؟

وصل متوسط حجم صفحات الويب إلى ١,٦ ميجابايت حسب آخر الإحصائيات؛ تحتل منها الصور أكثر من٦٠٪، بالطبع هي أخبار سيئة للمستخدملاسيما ذوي الإتصال محدود السعة ومتصفحي الهواتف المحمولة والحواسيب اللوحية، إذ أنهم لا يواجهون فقط بطء تحميل الصفحة بل زيادة تكاليف التصفح!

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

١- استخدام CSS3:

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

• http://gradients.glrzad.com/
• http://www.colorzilla.com/gradient-editor/

حسنُ، هذا عن التدرجات، ماذا إذن في حالة الخلفيات؟ في حالة الخلفيات ذات النمط الواحد Pattern هناك موقع Patternizer ينتج لك أكواد CSS3 لخلفيات Pattern تحددها بنفسك. بالإضافة إلى ما سبق، يمكنك استبدال صور الأيقونات بأيقونات CSS3 خالصة في حالة ما إذا كانت أشكال بسيطة مثل التي يوفرها موقع Css Tricks.  أو أيقونات في صيغة خطوط، موقع Font Awesome يوفر مجموعة جميلة من أيقونات الخطوط، ومتكاملة مع Bootstrap Framework لكن يمكنك استخدامه بدونه إذا أردت. وهناك أيضاً موقع Fontello الذي يقدم تشكيلة أوسع بالإضافة إلى إمكانية تحويل أيقونات في صيغة SVG إلى خطوط. طبعاً لا تنسى التأكد من التوافقية مع المتصفحات، وكل الطرق السابقة متوافقة مع آخر اصدارات متصفحات Firefox, Chrome, Safari, Opera لكن بالطبع هناك بعض المشاكل كالعادة مع متصفح Internet Explorer، فعليك بالإضافة إلى كل ما سبق توفير بدائل للمتصفحات التي لا تدعم هذه الطرق..

٢- طريقة CSS Sprites:

تقنية CSS Sprites هي تقنية تساعد في زيادة سرعة تحميل الموقع، وفي هذه التقنية تجمع جميع الصور في صورة واحدة شاملة وبالتالي اختصار الـ HTTP Requests إلى واحد فقط للصورة الكبيرة، بدلاً من استدعاء كل صورة على حدة وهذا يختصر كثيراً من وقت تحميل الصفحة، وتستخدم هذه الطريقة العديد من المواقع الكبيرة مثل:

أمازون

يوتيوب

جوجل

يمكنك تنفيذ هذه العملية عن طريق تجميع الصور في صورة واحدة بأي برنامج تعديل صور (Photoshop, Gimp, etc.)، واستخدام أكواد Background-url & background-position، لكن قد تكون هذه العملية مزعجة قليلاً من حيث ترتيب الصور ومعرفة إحداثيات مكان كل صورة لتحديدها في كود CSS، وقد وفر موقع CSS Sprites العناء، إذ ترفع عليه الصور المطلوب ضمها في صورة واحدة وتعطيه بعض الاختيارات (المسافة بين كل صورة، خلفية الصورة المجمعة ملونة أم شفافة وما إلى ذلك) ويوفر لك الصورة المجمعة وإحداثيات مكان كل صورة على حدة لكتابتها في background-position. 

(مثال للنتيجة)

٣- اختيار الصيغة والجودة المناسبة للصورة:

من المهم اختيار الصيغة المناسبة، إذ أن كل صيغة تقبل أنواع معينة من الضغط image compression (وهذا سنتحدث عنه بالتفصيل في مقال لاحق)، وأشهر ثلاث صيغ JPG, PNG, GIF وهي أفضلهم للإنترنت، إذا كانت الصورة متحركة اختر لها صيغة GIF، أما في حالة وجود أجزاء شفافة في الصورة اختر PNG، وفيما عدا ذلك فإن أفضل صيغة منتشرة لملفات الصور للويب هي JPG،. بالنسبة لصيغة JPG، يختلف معيار اختيار الجودة للصور المستخدمة في المواقع عن معيار اختيار الجودة للتصميم الجرافيكي أو تصميم المطبوعات، إذ نجد أنه لا يوجد اختلاف ملحوظ بالنسبة للمستخدم العادي للويب حين يقارن بين جودة الصورة بنسبة ٧٥٪ إلى حودتها بنسبة ١٠٠٪، بينما فارق الحجم يصل إلى النصف تقريباً، ولا يبدأ فارق الجودة بالظهور غالباً إلا فيما تحت ٧٥٪.

جدول بنسب جودة الصور المستخدمة في المواقع الكبيرة.

٤- اختيار طريقة تحميل الصورة:

طريقة عرض Baseline

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

طريقة عرض Progressive

الطريقة الثانية أفضل بالطبع لأنها تبدو أسرع، والسرعة الظاهرية أفضل من السرعة الحقيقية ويمكنك إضافتها إلى الصور عن طريق أي برنامج لتعديل الصور، لكن لا يخلو الأمر من تكلفة، إذ أن إضافة خاصية التدرج Progressive في حالة صيغة JPG وInterlaced في حالة صيغة GIF/PNG يضيف إلى حجم ملف الصورة (زيادة ٢٠٪ من حجم ملف PNG أو زيادة ١٠٪ من حجم ملف JPG أو GIF) يمكن حفظ الصور progressive من خلال Adobe PhotoShop بإتباع الخطوات التالية:

طريقة حفظ الصور Progressive في Adobe Photoshop

• من قائمة File > Save For Web
• من الصندوق الذي سيظهر فعل خاصية progressive

خلاصة النصائح:

1. استبدل الصور البسيطة والتدرجات بأكواد CSS3 والخطوط الحديثة.
2. استخدم صورة مجمعة تضم جميع صور الموقع بقدر الإمكان بواسطة تقنية CSS Sprites.
3. احفظ صورك ذات صيغة JPG للويب بجودة ما بين ٨٥-٧٥٪.
4. احفظ صورك مع خاصية Progressive لصيغة JPG وخاصية Interlaced لصيغتي PNG/GIF.