دليل ضغط الصور: تقليل حجم الملف دون فقدان الجودة

لقد أمضيت فترة ما بعد الظهيرة كاملة في إقناع العميل &#39؛ كان الموقع بطيئًا بسبب خطأ في العرض في كود React الخاص بي. تم تحديد المكونات وحفظ الأشياء وإعادة العرض المطاردة. كانت المشكلة الفعلية هي صورة بطل الخلفية: ملف JPEG بحجم 3.1 ميجابايت تم حفظه بجودة 100%، في حين أن نفس الصورة بدقة بجودة 80% كانت ستبلغ 480 كيلو بايت وتبدو متطابقة. لقد بالغت في هندسة التطبيق وقللت من التفكير في الأصول. That&#39؛s طريقة مطور للغاية لإضاعة يوم واحد.

منذ ذلك الحين، أصبح ضغط الصور أول شيء أتحقق منه، وليس الأخير. It&#39؛s أيضًا الأكثر سوء فهم - &quot؛ اضغط دون فقدان الجودة والاقتباس؛ يتم التعامل معه كمفارقة، في حين أنه &#39؛s فقط مسألة معرفة الرافعة التي تتجاهل البيانات وأيها لا تتجاهل &#39؛t. هذا الدليل هو النموذج العقلي الذي أستخدمه، والذي تم إنشاؤه أثناء شحن Toolz.dev والضبط الحيوية الأساسية للويب على مواقع العملاء: كيف يعمل الضغط فعليًا، ومتى يتم استخدام مع فقدان البيانات مقابل عدم فقدان البيانات، ولماذا يستمر رقم جودة محدد في الفوز.

ليرة تركية؛DR: يستخدم ضغط الصورة بجودة تبلغ حوالي 80% لصور الويب - that&#39؛s المكان الجميل الذي يتقلص فيه الملف بنسبة 60،80% ولا يزال بإمكانك &#39؛t تمييزه عن الأصل بالحجم الطبيعي. ضغط من الأصل (لا تقم أبدًا بإعادة ضغط ملف JPEG)، ودائمًا تغيير الحجم لعرض الأبعاد قبل الضغط. لتحقيق أقصى قدر من التوفير، يحول صور ل ويب بي أولاً. كل شيء يعمل في متصفحك - لا شيء يتم تحميله.

ماذا &#39؛s يحدث بالفعل عند ضغط صورة؟

الصورة الرقمية عبارة عن شبكة من وحدات البكسل، كل منها يخزن اللون. That&#39؛s لماذا الصور الأولية هائلة. صورة 1920×1080 بلون 24 بت هي:

1920 × 1080 × 3 bytes = 6,220,800 bytes ≈ 5.93 MB

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

ضغط بدون فقدان يجد الأنماط في البيانات ويقوم بتشفيرها بشكل أكثر إحكاما، دون التخلص من أي شيء. الصورة التي تم فك ضغطها مطابقة للبكسل مقابل البكسل للأصل. التقنيات أنيقة: ينهار التشفير بطول التشغيل &quot؛ الأحمر والأحمر والأحمر والأحمر والأحمر والاقتباس؛ في &quot؛5× أحمر واقتباس؛؛ يقوم ترميز القاموس (خوارزمية الانكماش في PNG&#39؛s الأساسية) باستبدال الأنماط المتكررة برموز قصيرة؛ تقوم تصفية التنبؤ بتخزين كل بكسل على أنه اختلافه عن القيمة المتوقعة، بحيث تصبح التدرجات السلسة عبارة عن مجموعات طويلة من الأرقام الصغيرة التي يتم ضغطها بشكل جميل. تعمل كل من PNG وWebP بدون فقدان وAVIF بدون فقدان بهذه الطريقة.

ضغط فاقد يحقق وفورات أكبر بكثير عن طريق التخلص من البيانات التي من غير المرجح أن يلاحظها نظامك المرئي - وهو &#39؛ أكثر ذكاءً من &quot؛ احذف بعض وحدات البكسل.&quot؛ فهو يحول الصورة من RGB إلى نموذج النصوع بالإضافة إلى اللون (عينك أكثر حساسية للسطوع من اللون)، ثم يقلل من دقة قنوات الألوان مع الحفاظ على السطوع حادًا. فهو يقسم الصورة إلى كتل، ويحول كل منها إلى معاملات تردد، ويقارب المعاملات عالية التردد - الأنسجة الدقيقة والضوضاء - وصولاً إلى قيم أقل. خطوة التقريب هذه، والتكميم، هي المكان الذي يتم فيه فقدان البيانات فعليًا. يتبع كل من JPEG وWebP المفقود وAVIF المفقود هذا القوس.

النتيجة العملية: بدون فقدان البيانات مخصص للصور التي يكون فيها كل بكسل ذا معنى - الشعارات ولقطات الشاشة والرسوم البيانية وأي شيء يحتوي على نص واضح. Lossy مخصص للصور الفوتوغرافية والصور الطبيعية، حيث &quot؛ يبدو متطابقًا وحاصلًا؛ يهم أكثر بكثير من &quot؛ متطابق بت مقابل بت.&quot؛

ماذا تعني إعدادات الجودة في الواقع؟

&quot؛ الجودة 80%&quot؛ هو عدد من الأشخاص يتم تعيينهم دون معرفة ما يشتريه لهم. هنا &#39؛s الخريطة التي أستخدمها لـ JPEG وWebP المفقودة، استنادًا إلى الكثير من المقارنات قبل وبعد بحجم العرض الحقيقي.

100% (الحد الأقصى): تقريبا أبدا الاختيار الصحيح. غالبًا ما يكون حجم الملف أكبر بنسبة 3 × 5 أكبر من 80% دون أي تحسن واضح. تم حفظ صورة البطل الضائعة بعد الظهر هنا.

85.95% (مرتفع): بالنسبة لمحافظ التصوير الفوتوغرافي والصور التي تكون فيها التفاصيل الدقيقة مهمة حقًا. بنسبة 90%، تكون القطع الأثرية غير مرئية لمعظم المشاهدين حتى عند التكبير بنسبة 100%.

75.85% (نقطة الويب الحلوة): أصغر بنسبة 60.70% من الحد الأقصى، مع وجود قطع أثرية غير مرئية بحجم العرض العادي. هذا هو المكان الذي تنتمي إليه جميع صور الويب تقريبًا.

50.75% (عدواني): للحصول على الصور المصغرة والمعاينات حيث يكون الحجم أمرًا بالغ الأهمية. تبدأ القطع الأثرية في الظهور بتدرجات سلسة وأنسجة دقيقة إذا نظرت عن كثب.

أقل من 50%: حجب مرئي ونطاقات الألوان. احجزه للحصول على صور ذات أولوية منخفضة حقًا أو قيود الحجم الصعب.

PNG لا &#39؛ لديها &quot؛ الجودة والحصة؛ شريط التمرير لأنه &#39؛s بدون فقدان البيانات - يمكنك تحسينه بشكل مختلف. يقوم مستوى الضغط (0 bict9) باستبدال وقت التشفير بملف أصغر، مع 6 ألوان افتراضية معقولة. يساعد تقليل عمق الألوان بشكل كبير عندما تستخدم الصورة عددًا قليلاً من الألوان: يتقلص الشعار المكون من 16 لونًا من 24 بت إلى 8 بت بشكل كبير مع عدم وجود تغيير مرئي. وتجريد البيانات الوصفية - EXIF وملفات تعريف الألوان والطوابع الزمنية - يؤدي إلى تقليم البايتات التي لم تؤثر أبدًا على الصورة.

WebP هو الإعداد الافتراضي الخاص بي للويب: عند الجودة 80، يعمل بمعدل 25 بوصة أصغر بنسبة 35% من JPEG بجودة مكافئة، كما أنه يقوم أيضًا بوضع بدون فقدان يتفوق على PNG بمقدار الربع تقريبًا. يضغط AVIF بقوة أكبر - عادةً 50%+ أصغر من JPEG - ولكنه يشفر بشكل أبطأ وهو &#39؛ مدعوم عالميًا تمامًا، لذلك أقدمه باستخدام WebP احتياطي بدلاً من تقديمه بمفرده.

ما هو التنسيق الذي يجب الضغط عليه؟

اختيار التنسيق هو نصف معركة الضغط، والقرار أبسط من الخيارات التي تجعله يبدو. هنا &#39؛s المقارنة I&#39؛d تسليم زميل جديد في الفريق:

الخطأ الوحيد الأكثر شيوعًا في التنسيق - وI&#39؛ لقد التقطته في مراجعة التعليمات البرمجية مرات أكثر مما أستطيع حسابه - هو حفظ الصور الفوتوغرافية كـ PNG. نظرًا لأن PNG لا تفقد البيانات، فإن الصورة المحفوظة كـ PNG يمكن أن تكون أكبر بعدة مرات من نفس الصورة مثل ملف JPEG بجودة 85% دون أي فرق واضح. PNG مخصص للرسومات ذات الحواف الصلبة والنص، وليس للصور الطبيعية. استخدم JPEG أو WebP للصور وستستعيد معظم وزن الصفحة &#39؛ المتضخم في تغيير واحد.

التحويل هو مهمة بنقرتين على محول التنسيق. النمط الذي أقوم بشحنه بالفعل يتيح للمتصفح التفاوض

<img src="photo-800.webp"
     srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="Description">

الذي - التي srcset يسلم المتصفح عدة أحجام ويتيح له تنزيل المستعرض الذي يناسب الجهاز، لذلك لا يسحب الهاتف صورة سطح المكتب أبدًا. بالاشتراك مع التنسيق الصحيح، فإنه &#39؛s الفرق بين الموقع السريع والموقع البطيء.

ماذا &#39؛s الترتيب الصحيح لضغط صور الويب؟

النظام مهم أكثر من أي إعداد فردي، والخطأ هو الخطأ الهادئ وراء معظم &quot؛ لقد ضغطته وما زال &#39؛s ضخمًا وحاصلًا؛ الشكاوى. التسلسل في كل مرة:

تغيير الحجم أولاً. يؤدي ضغط صورة مقاس 4000×3000 والتي سيتم عرضها عند 800×600 إلى إهدار الجهد المبذول على وحدات البكسل التي على وشك التخلص منها، ولا تزال النتيجة أكبر بكثير من اللازم. تغيير الحجم لأبعاد العرض (مزدوج لشبكية العين) قبل لمس الضاغط. تعمل عملية إعادة الترتيب هذه على إصلاح مشكلات الصورة كبيرة الحجم أكثر من أي تعديل في الجودة.

تحويل الثانية. انقل الصور إلى WebP (أو AVIF مع نسخة احتياطية) باستخدام محول التنسيق. أنت &#39؛ نقوم الآن بضغط الصورة الأصغر حجمًا والأفضل تنسيقًا.

ضغط الثالث. يجري ضغط الصورة عند حوالي 80% لصور الويب المفقودة، حكم على النتيجة بحجم المشاهدة الفعلي- لم يتم تكبيرها إلى 400%، لأنه لا أحد يشاهد صفحة الويب بهذه الطريقة.

لجعل هذا ملموسًا، هنا #39؛s، يتم تشغيل بطاقة تحسين الويب على صفحة حقيقية: قم بالتدقيق باستخدام Lighthouse للعثور على الصور الثقيلة، وتغيير حجم كل منها إلى حجم العرض الخاص بها، وتحويلها إلى WebP، والضغط بنسبة 75.80%، ثم أعد تشغيل Lighthouse للتأكيد. النتيجة النموذجية هي خصم 50.80% على إجمالي وزن الصورة وقفزة قابلة للقياس في أكبر طلاء مثير للمحتوى - وهو المقياس الذي أرسلني إلى هذا المسار بأكمله في المقام الأول.

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

ما هي أخطاء الضغط الأكثر تكلفة؟

هناك عدد قليل من الأخطاء تمثل معظم البايتات الضائعة وأضرار الجودة الأكثر وضوحًا. أنا &#39؛ لقد صنعت كل واحد من هذه.

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

استخدام PNG للصور الفوتوغرافية. تمت تغطيته أعلاه، لكنه &#39؛s هو أكبر فوز فردي عندما تكتشفه: تصبح صورة PNG بحجم 5 ميجابايت ملف JPEG بحجم 500 كيلو بايت دون أي فرق واضح.

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

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

تجاهل التنسيقات الحديثة. إن تقديم JPEG عند توفر WebP يترك 25 شريحة و35% من التوفير المحتمل على الطاولة دون سبب.

إذا كنت تريد التحقق من عملك بموضوعية، فإن المقاييس الإدراكية موجودة - SSIM أعلى من 0.95 بشكل عام &quot؛ بدون فقدان بصري، &quot؛ وGoogle&#39؛ درجات Butteraugli أقل من 1.0 تعني أن الاختلافات غير مرئية بشكل أساسي - ولكن بصراحة، بالنسبة للعمل اليومي، فإن عرض النسخة الأصلية والمضغوطة جنبًا إلى جنب بالحجم الفعلي يخبرك تقريبًا بكل ما قد تفعله الرياضيات.

الأسئلة الشائعة

كيف يمكنني ضغط الصور دون فقدان الجودة؟

للحصول على ضغط حقيقي بدون فقدان للبكسل، استخدم PNG أو WebP بدون فقدان. ل &quot؛ بدون فقدان البصر؛ - لا يوجد فرق يمكنك رؤيته - استخدم JPEG أو WebP بجودة 80،90%. ال ضغط الصورة تتيح لك الأداة ضبط الجودة ومقارنة النسخة الأصلية بالإصدار المضغوط قبل التنزيل، حتى تتمكن من العثور على النقطة المحددة التي ينخفض فيها الحجم ولكن الصورة لا تزال تبدو دون تغيير.

لماذا تعتبر الجودة 80% الرقم السحري؟

عبر الكثير من الاختبارات قبل وبعد بحجم العرض الحقيقي، فإن جودة JPEG أو WebP التي تبلغ حوالي 80% هي المكان الذي تقلص فيه الملف بنسبة 60،70% من الحد الأقصى ولكن العناصر لا تزال غير مرئية دون اختلاس النظر بالبكسل. انتقل إلى أعلى وتدفع الكثير من البايتات مقابل التفاصيل التي لا يراها أحد؛ انتقل إلى مستوى أقل بكثير وتبدأ التدرجات في النطاق. It&#39؛s أفضل توازن لاستخدام الويب، ولهذا السبب &#39؛s هو الإعداد الافتراضي الذي أصل إليه.

ما هو أفضل تنسيق صور لمواقع الويب لعام 2026؟

WebP هو أفضل الإعداد الافتراضي - أصغر بنسبة 25 بت و35% تقريبًا من JPEG مع دعم عالمي فعال للمتصفح. لتحقيق أقصى قدر من التوفير، استخدم AVIF (أصغر بحوالي 50% من JPEG) الذي يتم تقديمه مع WebP الاحتياطي في ملف <picture> عنصر. تحويل مع محول التنسيق. احتفظ بالفن المتجه الأصلي مثل الشعارات كـ SVG بدلاً من ضغطها كنقطي.

ما الفرق بين الضغط مع فقدان البيانات والضغط بدون فقدان البيانات؟

يؤدي الضغط بدون فقدان البيانات إلى إعادة ترتيب البيانات بشكل أكثر كفاءة دون التخلص من أي منها، وبالتالي تكون النتيجة مطابقة للبكسل مقابل البكسل الأصلي - يعمل PNG بهذه الطريقة. يؤدي الضغط المفقود إلى إزالة البيانات بشكل دائم ومن غير المرجح أن تلاحظها عينك، مما يحقق وفورات أعلى بكثير - يعمل JPEG بهذه الطريقة. عادةً ما يؤدي فقدان البيانات إلى تقليل بنسبة 10 أجزاء و40%؛ يؤدي فقدان البيانات عادةً إلى 60،90%. استخدم بدون فقدان للنصوص والرسومات، مع فقدان الصور الفوتوغرافية.

هل يجب علي تغيير حجم الصورة قبل الضغط أم بعده؟

قم دائمًا بتغيير الحجم أولاً. يؤدي ضغط صورة كبيرة ثم تقليصها إلى إهدار جهد الضغط على وحدات البكسل التي يتجاهلها تغيير الحجم، مما يترك ملفًا &#39؛s أكبر وأقل جودة مما ينبغي. قم بتغيير الحجم إلى أبعاد العرض أولاً، ثم قم بضغط الصورة الأصغر - وينتج عن هذا الترتيب النتيجة الأصغر والأنظف.

هل من الآمن ضغط الصور باستخدام أداة عبر الإنترنت؟

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

لماذا يعتبر ضغط نفس الصورة مرتين فكرة سيئة؟

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

كيف أعرف إذا كانت صوري كبيرة جدًا؟

قم بتشغيل Google Lighthouse أو PageSpeed Insights على صفحتك؛ يشير كلاهما إلى الصور كبيرة الحجم ويقترحان أحجامًا أفضل. قاعدة أساسية سريعة: إذا كانت أي صورة فردية تزيد عن 200 كيلو بايت، فإن it&#39؛s تستحق التحسين، ويجب أن تكون صور الأبطال بشكل خاص أقل من ذلك نظرًا لأنها تقود أكبر رسم محتوى. قم بإطعام المخالفين من خلال سير عمل تغيير الحجم وتحويل الضغط وإعادة التدقيق.

كيف يمكنني ضغط صورة إلى حجم ملف محدد مثل 200 كيلو بايت أو 1 ميجا بايت؟

قم بتغيير الحجم إلى أبعاد الشاشة أولاً، ثم قم بتخفيض الجودة حتى تقوم بمسح الهدف: ابدأ بنسبة 80%، وإذا كنت &#39؛ فلا يزال هناك ما زال، جرب 70%، ثم 60%. ال ضغط الصورة تعرض الأداة حجم الإخراج أثناء تحريك شريط التمرير، حتى تتمكن من مشاهدته وهو يتجاوز الحد الأدنى بدلاً من التخمين وإعادة التصدير. عادةً ما يشتري لك تحويل التنسيق إلى WebP 25،35% أخرى بنفس إعداد الجودة، وهو ما يكفي في كثير من الأحيان من تلقاء نفسه.

هل يؤدي ضغط الصورة إلى تقليل دقتها أو أبعادها؟

لا - الضغط وتغيير الحجم عمليتان منفصلتان. ضغط صورة بحجم 3000×2000 يتركها بحجم 3000×2000؛ فهو يقوم فقط بتخزين وحدات البكسل هذه باستخدام بايتات أقل، على حساب بعض التفاصيل الدقيقة. إذا كنت تريد عددًا أقل من وحدات البكسل، فهذا &#39؛s تغيير الحجم، وit&#39؛s التغيير الذي يوفر عادةً أكبر قدر من الوزن. إن القيام بالأمرين معًا، بهذا الترتيب، هو ما يحول ملف كاميرا بحجم 6 ميجابايت إلى صورة ويب بحجم 90 كيلو بايت.