كيف تقلّل حجم ملف الصورة للويب

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

لنضع أرقامًا حقيقية على ذلك.

أحجام مستهدفة تهدف إليها

لست بحاجة إلى التخمين. إليك ميزانيات وزن عملية تُبقي الصفحات سريعة:

• صورة بطل / لافتة بعرض كامل: تحت 200 كيلوبايت، مثاليًا ~100–150 كيلوبايت.
• صورة داخل المقال: 80–150 كيلوبايت لكل واحدة.
• صورة مصغرة / أفاتار: 10–30 كيلوبايت.
• شعار أو أيقونة (PNG/SVG): تحت 30 كيلوبايت؛ غالبًا أقلّ بكثير.

والأبعاد:

• بطل بعرض كامل: 1600–2000 بكسل عرضًا تكفي وتزيد لمعظم التخطيطات (ضاعفها فقط إن كنت تستهدف Retina وتحتمل البايتات).
• صورة داخل العمود: طابق عرض محتواك — غالبًا 800–1200 بكسل.
• صورة مصغرة: الحجم الذي تُعرض به فعلاً، مثلاً 300–400 بكسل.

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

الخطوة 1: غيّر المقاس إلى عرض العرض الحقيقي

هذه هي الخطوة التي يتخطّاها الناس، وهي أكبر رافعة. صورة خارجة توًّا من هاتف غالبًا عرضها 4000+ بكسل. إن عُرضت في عمود 800 بكسل، فأنت تشحن بكسلات أكثر بـ 25 ضعفًا مما تُظهره الشاشة — وعدد البكسلات يحدّد حجم الملف أكثر من أي شيء آخر.

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

ضبط الحجم وحده كثيرًا ما يقلّص حجم الملف بنسبة 80–90٪ قبل أن تضغط بايتًا واحدًا.

الخطوة 2: اضغط ما تبقّى

الآن قلّص البيانات داخل تلك الأبعاد الصحيحة.

• الصور (JPG/WebP): اضبط منزلق الجودة على 75–85. ذلك خالٍ من الفقدان بصريًا لمعظم الصور مع تقليص الحجم بشدة.
• صور PNG (لقطات الشاشة، الرسومات): تقلّصها أداة ضغط الصور إلى لوحة 256 لونًا، موفّرةً عادةً 60–80٪ دون تغيير مرئي ومُبقيةً الشفافية.

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

اختر الصيغة الصحيحة وأنت في ذلك

إن كانت صورك ستُقدَّم لمتصفحات حديثة، فتحويل الصور إلى WebP يتفوّق عادةً على JPEG بنسبة 25–35٪ إضافية بالجودة نفسها. الرسومات المسطحة تبقى PNG (أو WebP). لا تحفظ الصور الفوتوغرافية كـ PNG — ذلك خطأ الانتفاخ الكلاسيكي، بسهولة عقوبة 5–10 أضعاف.

سير عمل واقعي

لتدوينة مدونة بخمس صور:

1. غيّر مقاس كلٍّ إلى عرض عمودك (لنقل 1200 بكسل).
2. اضغط بجودة 80، أو حوّل إلى WebP.
3. تأكّد أن كلًّا يستقرّ تحت ~150 كيلوبايت.
4. افحص قصّة 100٪ لصورة واحدة للتأكّد من صمود الجودة.

خمس صور بدأت بـ 20 ميغابايت إجماليًا ستستقرّ حول 600 كيلوبايت — صفحة تُحمَّل في طرفة عين بدلاً من التعثّر.

خاص ودون اتصال

كل ما سبق يعمل بالكامل في متصفحك باستخدام Canvas وWebAssembly. لا تُرفع أي صورة إلى خادم، وبعد زيارتك الأولى تُخزَّن الأدوات وتعمل دون اتصال. يمكنك تحسين صور تدوينة كاملة بلا اتصال وبلا مغادرة أي شيء جهازك.