كيفية ضغط صور الويب و تحسينها مع الحفاظ على جودتها
من المؤكد أن استخدام الصور لنقل فكرة ما هو في الواقع أكثر فعالية من استخدام الكلمات, مما يعني أن استخدام الصور المثالية على صفحات الويب والمواقع الإلكترونية أحد أفضل الطرق لإحداث انطباع جيد عند الأشخاص الذين يتصفحون الموقع لأول مرة.
بالإضافة إلى ذلك ، اعتماداً على الصور التي تستخدمها ، فإنه من الممكن تحميل مواقع الويب بوقت قصير أو خلال وقت أكبر بكثير ، مما قد يحدد مقدار المشاهدات التي يحصل عليها المحتوى الخاص بك مع كل نقرة. فكلما كان تحميل موقع الويب أسرع كلما كان أفضل . عادةً لا يستغرق تحميل موقع ويب ومحتوياته أكثر من ثانيتين. هذا هو السبب في أن نوع محتوى الوسائط الذي تستخدمه على وسائل التواصل الاجتماعي مهم حقاً ، سواء كان صورة متحركة أو صورة عادية .في مثل هذه الحالات ، يكون ضغط الصور ضرورياً جدا.
هناك بعض الأدوات والموارد التي تسمح لك بضغط الصور مع الحفاظ على جودتها الأصلية . مما يعني أن مواقع الويب الخاصة بك تستخدم محتوى مرئي يحركه الجودة ، ولديك ميزة إضافية تتمثل في الاستجابة العالية جداً. تتضمن العملية الأساسية تقنياً تشغيل صورة من خلال خوارزمية تعمل على تقليل حجم ملف الصورة ، والاستفادة من أي من الأدوات العديدة التي يمكنك العثور عليها عبر الانترنت ،منها :
-
- Kraken
- TinyJPG/ TinyPNG
- ImageOptimizer
- io
تصنيف الصور
اعتماداً على الخوارزمية المستخدمة ، يمكن أن تخضع الصور لضغط مع فقدان البيانات أو من دون فقدانها. بينما ينتج النوع الأول صوراً بجودة أقل بشكل ملحوظ بعد الضغط ،بينما يحافظ الأخير على جودة الصور الاصلية. لذلك ، يستخدم الضغط بدون فقد بيانات تقنيات مختلفة تخزن خصائص الصورة الأساسية التي تحدد مستوى جودتها. من أمثلة تنسيقات الصور التي لا يسبب ضغطها فقدان البيانات : GIF و TIFFs و PNG .
على الرغم من أن تنسيقات الملفات هذه هي خيارات مثالية لضغط الصور ، إلا أن لكل منها مزاياه وعيوبه ، وقد يمثل التعرف على هذه الاختلافات الدقيقة الفرق في امتلاك موقع ويب يعمل ضمن المعايير المثلى. مع وضع ذلك في بعين الاعتبار،
دعنا نتحدث عن تنسيقات الملفات هذه و نشاهد كل منها :
JPEG :
من الجدير بالذكر أن معظم الصور الموجودة على الويب موجودة بتنسيق JPEG وهذا يجعلها أحد أكثر أنواع الملفات شيوعاً . تتضمن الطريقة الفريدة التي يعمل JPEG بها تقليل حجم الصورة فقط عن طريق استبعاد ومسح بيانات الصورة التي لا يمكن ملاحظتها بسهولة بالعين المجردة.
ومع ذلك ، هناك عيب : فكلما كانت الصورة أصغر ، تصبح ذات بكسلات أكثر. و هذا يعني أن تنسيق JPEG يستخدم خوارزميات تحويل مع فقدان البيانات ، والتي بطبيعتها لا رجعة فيها.
GIF :
GIFsتستخدم خوارزميات لضغط الصور إما مع فقد أو بدون فقد ، والبيانات الرئيسية المستهدفة هنا هي تلك التي تحدد لون الصورة. عادةً ما تحتوي الصور بتنسيق الملف هذا على لوحة ألوان 8 بت وما يصل إلى 256 لوناً كحد أقصى. وبالتالي فإن ضغط الصور على هذا التنسيق يعني تقليل عدد الألوان ، أو استخدام أنماط أصغر بدلاً من الألوان الكبيرة. في النهاية ، على سبيل المثال ، إذا تم ضغط صورة أقل من 256 لوناً ، فستظل معظم جودة الصورة كما هي. ومع ذلك ، بالنسبة للصورة كاملة الألوان ، سيتم فقد ما يصل إلى 99% من اللون.
TIFF :
خوارزميات TIFF يمكن أيضاً أن تستخدم تنسيقات ملفات لضغط الصور مع فقد أو بدون فقد ، وعلى الرغم من المرونة العالية جداً ، إلا أن قابلية ضغط هذه الملفات غير ممكنة. وهذا يعني الحفاظ على جودة الصورة ، وهو ما يُترجم أيضاً إلى صور كبيرة الحجم تشغل مساحة كبيرة على القرص وتجعل وقت النقل والتحميل أطول بشكل ملحوظ. وعلى الجانب الإيجابي تعتبر ملفات TIFF مثالية فيما يتعلق بتخزين الرسومات والطباعة.
PNG :
بخلاف JPEG تستخدم PNG خوارزمية ضغط بدون فقدان ، مما يعني أنه يمكن استعادة الصور إلى تنسيقها الأصلي. ومع ذلك ، فإنه يركز على أنماط الصورة لضغط الملف. تستخدم ملفات هذا التنسيق أيضاً 256 لوناً وتسمح بترميز 8 بت. تؤدي البيانات الإضافية إلى زيادة حجم الملف بشكل كبير.
ضغط الصور قبل تحميلها :
هناك قاعدة عملية واحدة فقط تحتاج إلى معرفتها عندما يتعلق الأمر بضغط الصور ، وهي أن الصور التي تنوي استخدامها يجب ألا يزيد حجمها عن 1 ميجابايت. بخلاف ذلك ، عادةً ما يكون برمجية الطرف الثالث موثوقاً به لضغط الصور دون المساومة على الجودة لهذا الغرض ، يمكنك استخدام :
Adobe Photoshop
في المقام الأول يعد Adobe photoshop الخيار المفضل الذي يستخدمه العديد من الأشخاص لأنه يحافظ على جودة الصورة ، مع تقليل حجم الملف. بالنسبة إلى تلك الصور بتنسيق JPEG والتي تحتوي على ألوان كاملة للصورة ، يتم الاحتفاظ بالألوان ، ويمكن بسهولة ضغط الصور ذات الألوان الأقل إما إلى أنواع ملفات PNG-8 أو PNG-24 . يحتوي Adobe photoshop أيضاً على ميزات تخصيص يمكن استخدامها لتحرير الألوان ودقة الصورة ، والأهم من ذلك ، حجم ملف الصورة. بعد ذلك ، يمكن معاينة الصورة المضغوطة النهائية بسهولة بالإضافة إلى حجم الملف في نافذة المعاينة.
GIMP :
GIMP ليس مجانياً وقابلا للتنزيل فحسب ، بل إنه أيضاً مفتوح المصدر ومتوافق بسهولة مع أنظمة التشغيل الشائعة مثل Linux و Windows و Mac Os . يمكنك باستخدامه عرض حجم ملف الصورة بعد الضغط في نافذة الصورة.
Tiny JPG :
Tiny JPG هي أداة لضغط الصور يمكنك استخدامها للعمل على ملفات صور مختلفة في وقت واحد. إنه مجاني وسهل الاستخدام ، والشرط الرئيسي الوحيد هو الوصول إلى جميع الصور التي تحتاج إلى تحويلها. بعد ذلك ، يمكنك بسهولة تنزيل إصدارات الصور المضغوطة.
كيف تضغط ملفات الصور التي تم تحميلها بالفعل ؟
إذا كنت قلقاً بشأن الصور التي قمت بتحميلها بالفعل على موقع الويب دون ضغطها أولاً ، فلا تقلق. لا يزال بإمكانك ضغطها دون التأثير على الجودة التي تظهر بها. إليك ما تستخدمه:
- استخدم Google Pagespeed Insights
بغض النظر عن تقديم اقتراحات لك حول الطرق المختلفة التي يمكنك من خلالها تحسين موقع الويب الخاص بك ، تمنحك هذه الأداة أيضاً خيارات الصور المضغوطة التي يمكنك استخدامها بدلاً من تلك التي لديك بالفعل على موقع الويب.
- محسن الصور EWWW
يعد محسن الصور EWWW مثالياً بشكل خاص إذا كنت بدايةً تستخدم WordPress . كمكوّن إضافي ، تحتاج أولاً إلى تحميله على WordPress وبعد ذلك سيقوم بفحص وقع الويب الخاص بك وتحسين الصور الموجودة بالفعل على الموقع تلقائياً.
ما الهدف من ضغط الصور؟
يعتمد قياس مدى استجابة موقع الويب الخاص بك على ما إذا كانت الصور التي قمت بتحميلها مضغوطة أم لا. الصور المضغوطة تُحوّل إلى موقع ويب مُحسّن بشكل جيد. خلاف ذلك ، سيكون موقع الويب الخاص بك بطيئاً ، ومع كل نقرة ، سيستغرق تحميله وقتاً أطول بكثير ، مما قد يؤثر بدوره على عدد الأشخاص الذين يزورون موقعك.
علاوةً على ضغط صورك ، استخدم الأبعاد الصحيحة. الصور الكبيرة جداً أو الصغيرة جداً ليست مثالية. سيؤثر حجمها الكبير جداً على وقت تحميل صفحتك ، ولكن جعلها صغيرة جداً سيؤدي إلى ضعف الجودة.