نصائح ودروس

طريقة تقليل حجم الصور من أجل تسريع الموقع

تعلم طريقة ضغط الصور بواسطة الفوتوشوب

من بين الأسباب التي تجعل موقعك بطيئا حجم الصور الكبير. ومن أجل تقليل حجم الصور مع الحفاظ على دقتها كل ماعليك هو فهم خاصية الحفظ من أجل الويب الخاصة بالفوتوشوب.

خاصية الحفظ من أجل الويب الخاصة بالفوتوشوب

في هذه الخاصية سوف نستغني عن خيار “حفظ” و “حفظ باسم” .

من أجل إختيار خاصية حفظ الصور من أجل الويب قم بتباع هذا المسار بعد فتح الصورة في برنامج الفوتوشوب

File > Save for Web & Devices  أو File > Export >Save for Web
أو عبر الضغط على الإختصار التالي : Alt+Shift+Ctrl+S

ومن هذه القائمة يمكنك التحكم بحجم وجودة الصورة، مع معاينة كيف ستبدو الصورة بعد الضغط

في هذه الخاصية سوف نجد أربع تنسيقات

  • jpg تنسيق الضياع، وهو ممتاز للصور الفوتوغرافية.
  • png 8bit مضغوط بأقل حجم ممكن من هذا النوع ويتميز بنطاق ألوان محدود.
  • gif وهو أيضًا مضغوط بحجم ضئيل يشابه png 8bit ولكن png يشكّل خيارًا أفضل.

ستكون هنالك حالات قد تختار فيها نوعية png 24bit وهي التي تستخدم عادة للصور التي تحوي قناة ألفا من أجل الأجزاء الشفافة على الويب ولكننا لن نتحدث عن ذلك في هذا الدرس. وهي عادة أكبر حجمًا من باقي الأنواع نظرًا لاستخدام نطاق أوسع من الألوان.

تنسيق jpg

إن تنسيق jpg هو الخيار المناسب للصور ذات نطاق ألوان واسع التي لا تحوي تحولات حادة أو حواف ناعمة. بسبب الضغط الخوارزمي الخاص بها فهي ممتازة للصور الفوتوغرافية. من الممكن جدًا تخفيض حجم الصور وضغطه إلى حد كبير مع المحافظة على دقة عالية للصورة. خذ الصورة التالية كمثال: سيكون من الصعب جدًّا التمييز بين الصور الثلاث خصوصًا ما بين الصورة ذات الدقة العالية جدًّا (جزء مكبّر من الصورة الأصلية) والصورة المحفوظة بدقة “عالية” (أو دقة 60%). الصورة المثال تمثّل ربع حجم الصورة الأصلية.

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

تنسيق png و gif

إن تنسيقي gif و png 8bit هما الأفضل للصور ذات نطاق ألوان محدود (إنها تظهر حتى 256 لونًا فقط) والتي تحوي على مساحات واسعة من لون واحد. تقدّم هذه التنسيقات في هذه الحالة نتيجة قريبة جدًّا من الصورة الأصلية مع توفير أكبر من حيث الحجم بالمقارنة مع تنسيق jpg. وهي عادة ما تُستخدم من أجل عناصر الواجهات والأيقونات والصور التي تحوي نصوصًا يتوجب أن تظهر بدقة جيدة.
في معظم الأحيان يقدّم png 8bit ضغطًا أفضل من تنسيق gif. وكلا التنسيقان يدعمان شفافية أجزاء الصور (ينبغي عدم الخلط مع مسألة شفافية ألفا لتنسيق png 24bit).

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

نتمنى أن يكون هذا الدرس قد نال إعجابكم

الوسوم

أنس بوغداد

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

اترك تعليق

كن أوّل من يعلّق

أضف تعليق

‫wpDiscuz
إغلاق