اليوم، سنتحدث عن موضوع قريب وعزيز على قلبي، وهو ضغط الصور! أنا نصف أمزح، ولكن هناك شيء مُرضٍ بشكل غريب حول خفض نسب كبيرة من حجم ملف الصورة دون التقليل من الجودة.

نبع الإلهام لهذا المنشور من منشور شائع جدًا في مجموعة Beaver Builders على Facebook. لقد قمت للتو بتصوير فيديو تعليمي حول تمكين واستخدام خوارزمية Guetzli الجديدة من Google في ImageOptim وقد صدمت من جميع الخيارات الأخرى التي لم أكن أعرفها من قبل. سنتحدث في هذه المقالة عن بعض النصائح والأدوات اللازمة لضغط الصور للويب.

المصطلحات الأولية

قبل أن نتعمق أكثر، دعونا نضع بعض المصطلحات الشائعة.

JPEG، PNG، SVG - هذه هي أنواع ملفات الصور الثلاثة الأكثر شيوعًا على الويب. في هذا البرنامج التعليمي، سنركز بشكل أساسي على ملفات JPEG وPNG لأنها تستفيد أكثر من الضغط والتحسين.

عادةً ما تكون ملفات JPEG أفضل للصور عالية الدقة مثل الصور ورسومات الويب التي لا تتمتع بأي شفافية.

تعد ملفات PNG رائعة لأشياء مثل الرموز والشعارات أو أي شيء يحتاج إلى الشفافية. يمكن أيضًا تحسين ملفات PNG بشكل كبير بعد خروجها من Photoshop أو أداة تحرير الرسومات التي تختارها.

Lossless وLossy - هذه هي طرق الضغط. يعني الضغط غير المنقوص أن صورتك لن تفقد أي جودة. حرفيا لا شيء على الإطلاق. يتضمن ذلك إزالة البيانات الوصفية من الصورة أو أي شيء لا يؤثر على الجودة.

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

نصيحة احترافية: بالنسبة لخلفيات الصور الكبيرة، غالبًا ما أقوم بطمس الصورة قليلاً أو إضافة طبقة ألوان غير شفافة فوق الصورة. يعد تقليل التفاصيل و/أو تطبيع اللون خيارًا جماليًا رائعًا يقلل حجم الملف بشكل كبير. يمكنك رؤية هذا عمليًا على صفحة الوظائف لدينا.

كم يجب أن أقوم بضغط الصور؟

الهدف من ضغط الصور هو تقليل حجم الملف قدر الإمكان دون التضحية بالكثير من الجودة. يعد هذا فنًا أكثر من كونه علمًا، وسيختلف مستوى "الجودة المقبولة" اعتمادًا على الموقف.

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

تسمح لك معظم برامج تحرير الصور بتصدير الصور بجودة مختلفة. بالرغم من ذلك، إذا كنت تستخدم أداة مخصصة لضغط الصور، فمن الأفضل أحيانًا تزويد هذا البرنامج بأفضل جودة ممكنة والسماح لخوارزميات الضغط الخاصة به بالعمل من هناك.

خيارات أدوات ضغط الصور

كما اكتشفت مؤخرًا، لا يوجد نقص في الخيارات عندما يتعلق الأمر بالأدوات والخدمات لضغط الصور.

إيماجوبتي

لقد بدأت مع ImageOptim وما زلت أفضّله. يتوفر ImageOptim فقط على OSX، ولكنه يدعم الضغط بدون فقدان أو فقدان البيانات لكل من ملفات JPEG وPNG. ويمكن أيضًا تهيئتها لاستخدام خوارزمية الضغط الجديدة نسبيًا من Google، Guetzli. يستطيع Guetzli، في المتوسط، تقليل أحجام الملفات بنسبة 20-30% أكثر من الخوارزميات الأخرى.

ImageOptim هو برنامج موجود في Mac's Dock ويمكنك ببساطة سحب الصور وإسقاطها على أيقونة البرنامج وسيقوم بضغطها. أميل إلى تحسين صورة أو صورتين في المرة الواحدة، لذا فإن هذا الحل يعمل بشكل رائع بالنسبة لي. ولكن، إذا كنت تعمل على عدد كبير من الصور أو الصور ذات أحجام ملفات كبيرة، فقد تكون بعض الخيارات الأخرى خيارًا أفضل للمهام الكبيرة.

سحق من WPMU Dev

Smush عبارة عن مكون إضافي مجاني لـ WordPress من WPMU Dev والذي يمكن تهيئته لتحسين الصور الموجودة في تثبيت WordPress الخاص بك و/أو أثناء تحميلها إلى WordPress. يعد Smush رائعًا لأن المهام الثقيلة تتم بواسطة خوادم WPMU Dev وكلاهما يعملان على تحسين الصور وتغيير حجمها.

إذا كنت تقوم بإنشاء مواقع ويب للعملاء - وخاصة أولئك الذين يرغبون في تحميل صور متعددة الميجابايت مباشرة من الكاميرا الرقمية الخاصة بهم - فإن Smush يعد خيارًا رائعًا للضبط والنسيان.

تايني PNG

TinyPNG عبارة عن ضاغط صور قائم على الويب. يمكنك تحميل صورك (حتى 5 مليار) وتنزيل النسخة المضغوطة. سيؤدي هذا إلى استخدام النطاق الترددي، لذلك قد لا يكون الخيار الأفضل إذا كنت تستخدم اتصال إنترنت بطيئًا أو مدفوع الأجر. وهو يدعم أنواع الملفات JPEG وPNG. إنه مجاني. لا يبدو أنه يوفر أي تحكم في مستوى جودة الضغط.

بعد اللعب باستخدام TinyPNG، أعتقد أنني ما زلت أفضل ImageOptim، ولكنه سيكون خيارًا رائعًا لمستخدمي Windows، أو المهام السريعة لمرة واحدة، أو المستخدمين الذين يبحثون بشكل خاص عن ضاغط يستند إلى الويب. أو، إذا كنت تحاول إلغاء تحميل المعالجة على السحابة مقابل جهازك المحلي.

تخيل

Imagify هو خيار SASS آخر قائم على الويب يوفر مكونًا إضافيًا مخصصًا لـ WordPress لتحسين الصور وتغيير حجمها أثناء تحميلها أو مباشرة من منطقة إدارة WordPress. يتمتع مكون Imagify WordPress الإضافي بمراجعة رائعة بمتوسط ​​4.5 نجوم وتشير العديد من المراجعات إلى أن جودة الصورة التي يتم تحقيقها باستخدام Imagify أفضل من البدائل.

لدى Imagify خطة مجانية تسمح لك بتحميل وتحسين الصور التي يقل حجمها عن 2 ميجابايت. ستظل النسخة المحسنة من الصور متاحة للتنزيل من خوادمها لمدة 24 ساعة.

JPEGmini

JPEGMini هي خدمة SASS والتي يجب أن تجذب الأشخاص الذين يبحثون عن حل فعال. تخيل أنك مكلف بتحسين عشرات الآلاف من صور المنتجات عالية الدقة لمتجر التجارة الإلكترونية. سيمكنك JPEGMini من تفريغ كل تلك المعالجة إلى خوادمهم السحابية، التي يُفترض أنها سريعة ومحسنة.

ShortPixel

ShortPixel هو SASS آخر على شبكة الإنترنت. إذا كنت تتطلع إلى إلغاء تحميل ضغط الصور إلى خادم سحابي، فهذا خيار رائع للتحقق منه. تسمح لك خطتهم المجانية بتحسين ما يصل إلى 100 صورة شهريًا ولديهم خطط متميزة تبدأ من 5 دولارات شهريًا للمزيد. يحتوي ShortPixel أيضًا على مكون إضافي لـ WordPress وهو المفضل لدى بقية أعضاء فريق BB.

تخيل

ما هو المفضل لديك؟

إذا قمت بزيارة موضوع Facebook الأصلي الذي ألهم هذا المنشور، فسترى العديد من الخيارات الأخرى والأشخاص الذين يفضلون واحدًا أو آخر لعدة أسباب. هل نفتقد مفضلتك؟ أخبرنا ما هو ولماذا أعجبك في التعليقات.

وأيضًا، إذا كنت من النوع الذي يأكل وينام ويتنفس أثناء الأداء، فمن المرجح أن تروق لك هذه المقابلة مع جون براون حول أفضل ممارسات الأداء الحديثة.