كيفية ضغط الصور للويب دون إتلافها

معظم الصور التي تبدو "كبيرة جدًا" بالنسبة لموقع ويب لا يتم ضغطها بشكل سيئ. إنها ببساطة أوسع وأطول مما ينبغي. يمكن أن يصل عرض الصورة مباشرة من الهاتف إلى 4000 بكسل وينتهي بها الأمر في صندوق بعرض 700 بكسل. يؤدي تغيير حجم تلك الصورة إلى تحقيق تأثير أكبر بكثير بالنسبة لحجم ملفها مقارنة بدفع شريط تمرير الجودة على الإطلاق.

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

ابدأ بالأبعاد، وليس شريط تمرير الجودة

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

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

ما الذي يتغير في الواقع إعداد الجودة

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

• حوالي 80-85 هو نطاق مريح للصور التي تحتاج إلى أن تبدو نظيفة. عادة ما يكون من الصعب رؤية الفرق عن النسخة الأصلية بحجم العرض العادي.
• حوالي 70-78 يعمل بشكل جيد مع صور الويب التي توجد في تخطيط ولا يتم فحصها عن كثب أبدًا. تنخفض أحجام الملفات بشكل ملحوظ.
• أقل من 60 تقريبًا، يصبح اكتشاف القطع الأثرية أسهل: بقع ممتلئة في سماء ناعمة، وهالات حول الحواف، ونص غامض. بالنسبة إلى لقطات الشاشة أو الرسومات ذات النوع، تجنب الوصول إلى هذا المستوى المنخفض.

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

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

اختر التنسيق قبل ضبطه

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

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

سير عمل معقول

1. احتفظ بالأصل. اعمل من نسخة ولا تقم أبدًا بالكتابة فوق النسخة الوحيدة من الصورة التي تهمك.
2. قم بتغيير الحجم إلى الحجم الأكبر الذي سيتم عرضه. استخدم ضعف عرض التخطيط إذا كنت تريد أن تظل الشاشات عالية الكثافة حادة. لا تقم بالقص أو التمدد لمجرد الوصول إلى رقم ما؛ احتفظ بنسبة العرض إلى الارتفاع ما لم تكن التركيبة بحاجة إلى التغيير.
3. اختر التنسيق بناءً على المحتوى. الصورة: JPEG أو WebP. رسم مسطح أو شفافية: PNG أو WebP.
4. ابدأ بالجودة 80. قارنها بـ 75 و 85 إذا لم تكن متأكدًا. قم بالتحريك لأسفل فقط بينما تظل الصورة صامدة بالحجم الذي يراها الأشخاص.
5. انظر إليها بنسبة 100% وحجم التخطيط. عند التصغير، يبدو كل شيء تقريبًا على ما يرام. عند تكبير الصورة، يمكنك اكتشاف القطع الأثرية حول الحواف والوجوه. تحقق على حد سواء.

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

الأخطاء الشائعة وماذا تفعل بدلا من ذلك

الضغط قبل تغيير الحجم

يؤدي حفظ صورة بحجم 6000 بكسل بجودة 50 إلى إنتاج ملف لا يزال كبيرًا، والآن به تلف واضح. قم بتغيير الحجم أولاً، ثم قم بالضغط. عادةً ما تبدو الصورة نفسها بدقة 1600 بكسل وبجودة 80 أفضل وتزن أقل.

مطاردة أصغر ملف ممكن

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

تحويل الشفافية إلى JPEG

إذا كان الشعار ذو خلفية شفافة، فسيملأه JPEG باللون الأبيض. على صفحة ملونة، يظهر ذلك كمربع واضح. احتفظ بصيغة PNG أو WebP، أو قم بإعداد نسخة مصممة للون خلفية معين.

إعادة حفظ نفس ملف JPEG بشكل متكرر

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

نسيان البيانات الوصفية

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

حيث يحدث الضغط

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

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

هل أنت مستعد لتجربتها؟ ضغط الصورة أو القراءة ما يعنيه التشغيل محليًا في الواقع.