كيفية تحسين الصور وضغطها وحفظها للويب

كيفية تحسين الصور وضغطها وحفظها للويب

كيفية تحسين الصور وضغطها وحفظها للويب

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

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

استخدام Photoshop لحفظ الصور للويب

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

يمكنك الوصول إلى Save for Web ضمن ملف> تصدير> حفظ للويب والأجهزة.

سيظهر ذلك قائمة تعرض معاينة لصورتك ، بالإضافة إلى لوحة جانبية من الخيارات. هنا يمكنك مقارنة تأثيرات خيارات الضغط الخاصة بك في الوقت الحقيقي. خفض جودة JPG إلى 0 على سبيل المثال ، لمعرفة مدى فظاعة حقا قد يبدو. يمكن لهذه النافذة تنفيذ ملفات بتنسيقات JPG و GIF و PNG ، مع كل مجموعة رائعة من الأوضاع والإعدادات. استكشفها للتعرف على نوع التأثيرات التي تتضمنها الإعدادات على صورك. يمكنك أيضًا استكشاف الإعدادات المسبقة المدمجة لمعرفة ما يفكر فيه Photoshop قد يكون مفيدًا.

يمكن أيضًا أن تكون الألواح 2-up و 4-up مفيدة. هنا ، يمكنك المقارنة بين منهجين أو أربعة أساليب ضغط مختلفة ، مما يجعل من السهل اختيار الطريقة التي تناسب احتياجاتك.

انقر على الصورة لاستكشاف فائدة جزء 4-Up.

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

انظر أسفل أي معاينة لرؤية حجم الملف وإحصائيات بشكل أساسي.

إذا كنت تريد مشاهدة الصورة في نافذة متصفح ، فيمكنك النقر على زر "معاينة" لتحميلها في المتصفح الافتراضي.

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

ضغط الصور بفعالية مع أدوات مجانية

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

1. TinyPNG

ستعمل أداة TonePNG ، هذه الأداة المتواضعة في الويب ، مع كل من JPG و PNG. يعمل مع أي ملف بين 5 ميغابايت ، ويمكن معالجة 20 ملف في وقت واحد. يقلل بسرعة وبشكل فعال أحجام كل من أنواع الملفات ، وغالبا ما يطرق بين 30 و 50 في المئة من حجم الملف. ليس من غير المألوف أن نرى تخفيضات تصل إلى 90 في المئة مع ملفات البدء غير فعالة بشكل خاص. إذا لم تعجبك واجهة الويب ، فيمكنك بدلاً من ذلك اختيار الوصول إلى واجهة برمجة التطبيقات وإنشاء الأداة الخاصة بك. يمكنك أيضًا دفع رسوم لمرة واحدة تبلغ 50 دولارًا أمريكيًا لمكوّن Photoshop الإضافي. بهذه الطريقة ، يمكنك التخلص من Save for Web والانتقال مباشرة إلى أدوات ضغط TinyPNG الرائعة. إذا كنت مريضًا من حد 5 ميغابايت أو 20 ملفًا لكل ضغط ضغط ، فاشترك في TinyPNG Pro بسعر 25 دولارًا سنويًا وأزل كليهما.

2. Compressor

مثل TinyPNG ، الضاغط هو أداة في المتصفح لتقليص الملفات. يقبل JPG و PNGs بالإضافة إلى ملفات GIF و SVG ، بحد أقصى 10 ميغابايت. كما يوفر تحكمًا أكثر قليلاً: يمكن للمستخدمين الاختيار بين الضغط الفاسد والغير ضار. لسوء الحظ ، يمكنك فقط تحميل صورة واحدة في كل مرة ، كما أن الضغط ليس قويًا مثل خوارزمية TinyPNG. فهي تنتج صورًا ذات جودة أعلى قليلاً ، ولكنك تحتاج بالفعل إلى تكبير 100٪ لملاحظة الفرق.

3. Kraken

كراكن هي أداة احترافية للمستخدمين الذين يحتاجون إلى أكبر قدر من التحكم وأعلى حجم. هناك نسخة مجانية يمكنك تجربتها ، وحتى هذه الميزة غنية بشكل مدهش. يتضمن ذلك جزءًا كبيرًا من إعدادات الخبراء للمستخدمين الملمين جيدًا ، بما في ذلك مستويات الجودة وإدارة البيانات الوصفية وحتى اختيار طريقة chroma subampling لـ JPGs. المستخدمون الذين يتطلعون إلى الحصول على التجربة الكاملة مع Kraken Pro يحصلون أيضًا على تغيير حجم الصورة ، والاستيراد من عنوان URL وضغط الصفحة الكاملة ، والوصول الكامل إلى واجهة برمجة التطبيقات ، ومكونات WordPress و Magento وسعة التخزين السحابي في Kraken. تمتد الخطط من 5 دولارات إلى 79 دولارًا شهريًا ، حسب حجم الميغابايت المضغوطة. يقتصر الإصدار المجاني على 1 ميغابايت ، ولكن لا تزال جميع أدوات ضغط الصور تعمل بشكل كامل.

باستخدام كلاهما؟

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