كيفية ضغط صورة إلى أقل من 50 كيلوبايت (للصور المصغرة والأفاتار)

آخر تحديث: June 27, 2026

يُعد 50KB هدفاً ضيقاً، ولكن بالنسبة للصور المصغرة (thumbnails)، وأفاتارز المستخدمين (avatars)، والأيقونات الصغيرة، فهو أكثر من كافٍ ليبدو حادًا — إذا قمت بتغيير حجمه أولاً. الخطأ الذي يرتكبه معظم الناس هو ضغط صورة كبيرة دون تغيير حجمها؛ عند 50KB، لا يمكنك تخطي خطوة تغيير الحجم. يوضح هذا الدليل المسار الموثوق به مع أحجام الملفات الفعلية التي قمت بقياسها على صورة مصدر واحدة بحجم 126 KB.

إجابة سريعة: كيف تضغط صورة لتكون أقل من 50KB؟

قم بتصغير الصورة إلى حجم العرض الصغير الذي ستظهر به فعليًا (عادةً ما بين 200–600px للصور المصغرة أو الصور الرمزية)، ثم قم بترميزها كـ WebP. في الصورة التجريبية، أدى تصغيرها إلى 600px وترميزها باستخدام WebP q70 إلى ملف بحجم 15 KB — وهو أقل بكثير من 50KB، دون أي فقدان مرئي للجودة عند حجم العرض هذا.

لمعرفة الأساس المنطقي لهذه الأرقام المتعلقة بالتنسيقات، راجع AVIF vs WebP vs JPEG comparison.

لماذا يعد تغيير الحجم إلزاميًا عند 50KB

عند استهداف حجم 50KB، يفشل ضغط الجودة فقط. تبدو صورة بحجم 1600px مضغوطة في 50KB بصيغة JPEG متكتلة لأن المُشفِّر يضطر إلى التخلص من الكثير لكل بكسل. لكن نفس الصورة المعروضة عند 600px تحتوي على عدد أقل بنحو 7× من البكسلات — لذا يحتفظ كل بكسل بميزانية جودة أكبر بكثير.

يعود انخفاض الحجم بالكامل تقريباً إلى تغيير الحجم، وليس إلى التبديل في التنسيق:

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

ما هو عرض التحجيم الذي يناسب كل حالة استخدام؟

يعتمد العرض المناسب على المكان الذي ستُعرض فيه الصورة. هذه هي الأبعاد التي تتناسب بشكل مريح تحت 50KB بعد ترميز WebP على صورة فوتوغرافية نموذجية:

قم بالتصدير بعرض يبلغ حوالي 1.5–2× عرض العرض للحفاظ على الحدة على الشاشات عالية DPI، ولكن ليس كبيرًا جدًا لدرجة أنك تهدر البايتات. قاعدة الـ 2× لأفاتار بحجم 96px هي 192px — وليس 1200px.

كيف يتناسب حجم 50KB مع مقاييس أداء الويب الأساسية (Core Web Vitals)؟

نادراً ما تكون الصور المصغرة الصغيرة هي عنصر LCP، لذا فإن الوصول إلى 50KB لها يتعلق أكثر بالوزن الإجمالي للصفحة وسلاسة التمرير منه بـ LCP بشكل مباشر. حيث يكمن الأهمية هو وزن الصفحة على الهاتف المحمول: قائمة منتجات بها 40 صورة مصغرة، كل منها بحجم 150KB، تعني 6 MB من الصور ليتم تنزيلها عبر اتصال خلوي قبل اكتمال تحميل الصفحة. أما القائمة نفسها بحجم 15KB لكل صورة، فستكون 600 KB - وهو تخفيض بمقدار 10× يسرّع كل صفحة على الموقع. ضغط الصور المصغرة هو أمر ذو تأثير كبير (high-leverage) لأن هناك الكثير منها. يغطي دليل Google حول الصور و Core Web Vitals جانب LCP؛ أما جانب الصور المصغرة فهو يتعلق بميزانية البايتات (byte budgeting) الخالص.

الطريقة 1: ضاغط المتصفح

لصورة واحدة، استخدم Imagic AI Image Compressor: قم بالتحميل، وقم بتغيير الحجم ليناسب عرض العرض (200–600px)، واختر WebP، واضبط الجودة حوالي 70، وقم بالتنزيل بمجرد أن يصبح الحجم المُبلغ عنه أقل من 50KB. وللحصول على تحكم بصري دقيق، يعرض Squoosh حجم الإخراج مباشرة أثناء تحريك أشرطة التمرير.

الطريقة الثانية: WebP عبر سطر الأوامر

يصل WebP إلى هدف الـ 50KB بجودة أعلى من JPEG، ولذلك فهو الخيار الافتراضي المناسب للصور المصغرة على الويب.

## Resize to 600px wide, encode WebP at quality 70
cwebp -q 70 -resize 600 0 input.jpg -o thumb.webp

لمجلد من الصور المصغرة:

mkdir -p out
for f in *.jpg; do cwebp -q 70 -resize 600 0 "$f" -o "out/${f%.jpg}.webp"; done

الطريقة 3: Python مع ضمان الحجم

عندما يفرض نظام التحميل حد 50KB، قم بتخفيض الجودة بشكل متكرر (loop) حتى يصبح حجم الملف مناسبًا، وذلك بعد إجراء تغيير في الأبعاد أولاً:

from PIL import Image
from pathlib import Path

def to_under_50kb(src: Path, dest: Path, width: int = 600):
    with Image.open(src) as img:
        if img.width > width:
            ratio = width / img.width
            img = img.resize((width, int(img.height * ratio)), Image.LANCZOS)
        quality = 80
        while quality >= 20:
            img.save(dest, "WebP", quality=quality)
            if dest.stat().st_size <= 50 * 1024:
                return dest.stat().st_size / 1024
            quality -= 5
    return dest.stat().st_size / 1024

print(to_under_50kb(Path("photo.jpg"), Path("thumb.webp")))

أي طريقة يجب أن تختارها؟

الأخطاء الشائعة

• ضغط الصورة دون تغيير حجمها. هذا يضمن مخرجًا قبيحًا عند 50KB. قم بتغيير الحجم أولاً.
• استخدام عرض تغيير حجم كبير جدًا. صورة مصغرة بحجم 1200px معروضة على 200px تهدر البايتات. طابق حجم العرض.
• الاحتفاظ ببيانات EXIF الوصفية. قم بإزالتها للصور المصغرة على الويب؛ البيانات الوصفية تمثل جزءًا مهمًا من ملف بحجم 50KB.
• إعادة ترميز صورة JPEG صغيرة الحجم بالفعل. كل تمريرة تضيف عيوباً. اعمل من ملف رئيسي.

قائمة مراجعة نهائية قبل التصدير

• ابدأ بأصغر أبعاد بكسل مقبولة.
• استخدم WebP قبل محاولة إعدادات جودة JPEG القصوى.
• تجنب 50KB لصور البطل (hero) ذات العرض الكامل.
• قم بإزالة البيانات الوصفية والصور المصغرة من التصدير.
• تحقق من النصوص والوجوه وحواف المنتجات عند 100%.

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

هل يمكن أن تبدو الصورة جيدة عند أقل من 50KB؟

نعم - عند أحجام العرض الصغيرة التي تستخدمها الصور المصغرة والأفاتارات فعليًا (أقل من ~600px). لن تبدو جيدة بالحجم الكامل، لأنه لا توجد بيانات كافية. طابق البكسلات مع العرض.

JPEG أم WebP لهدف 50KB؟

WebP. يصل إلى الهدف بجودة أعلى. احتفظ بـ JPEG في احتياطي (fallback) داخل عنصر <picture> للعملاء القدامى جدًا.

ما هو الحجم الذي يجب أن أقوم بتغيير حجمه إليه؟

حجم العرض. يحتاج الأفاتار بحجم 96px إلى مصدر يتراوح بين ~96–200px؛ والصورة المصغرة لقائمة بحجم 300px تحتاج إلى ~300–600px. راجع تعميق ضغط الصور لمعرفة سبب تغيير الحجم قبل الضغط.

كيف أقوم بضغط صورة لتكون أقل من 50KB؟

قم بتغيير الحجم إلى عرض صغير أولاً (إلزامي عند 50KB)، ثم حولها إلى WebP واضغطها بجودة 75–80. عند 50KB، أنت في منطقة الصور المصغرة والأفاتارات - فلن تتناسب صورة المحتوى بشكل نظيف. طابق عرض تغيير الحجم مع حالة الاستخدام الصغيرة: حوالي 300–600px للصورة المصغرة أو الأفاتار.

أين تُستخدم صورة بحجم 50KB؟

الأفاتارات، والصور المصغرة، والأيقونات، والرسومات الويب الصغيرة - أي شيء يتم عرضه بحجم صغير. صورة 50KB ليست مناسبة لصورة البطل (hero) أو صورة المحتوى؛ فهذه تحتاج إلى المزيد من البكسلات والبايتات. طابق الميزانية مع حجم العرض: عرض صغير، ملف صغير؛ عرض كبير، ملف أكبر.

هل يجب أن أستخدم WebP أم JPEG عند 50KB؟

WebP. إنه أصغر بنسبة 25 إلى 35 بالمائة من JPEG عند نفس الجودة، لذا يصل ملف WebP إلى 50KB بجودة أعلى وتفاصيل أكثر حدة. قدمه مع احتياطي JPEG عبر عنصر <picture> حتى تحصل المتصفحات الأقدم على صورة عاملة.

ما هو عرض تغيير الحجم الذي يتناسب مع 50KB؟

حوالي 300–600px للصورة المصغرة أو الأفاتار بجودة WebP 75. لن تتناسب صورة أكبر في 50KB دون تشوهات كبيرة (artifacting). اختر العرض بناءً على مكان عرض الصورة، ليصبح هدف 50KB قابلاً للوصول إليه بشكل نظيف.

هل حجم 50KB صغير بما يكفي لـ Core Web Vitals؟

نعم - يتم تحميل صورة بحجم 50KB بشكل فوري تقريبًا ويحافظ على LCP صحيًا، ولهذا السبب تناسب الصور المصغرة والأفاتارات التي تظهر فوق الطية (above the fold). المقايضة هي البُعد: عند 50KB أنت في منطقة الصور الصغيرة، وليس تصوير المحتوى. طابق الميزانية مع حجم العرض والتنسيق (WebP) لتحقيق ذلك بشكل نظيف.

هل يمكن أن تتناسب صورة تحت 50KB؟

فقط عند الأبعاد الصغيرة. لن تتناسب صورة المحتوى (1200px+) تحت 50KB دون تشوهات كبيرة وتدرج لوني واضح في التدرجات اللونية (banding in gradients). يناسب 50KB الأفاتارات والصور المصغرة ورسومات الويب الصغيرة. بالنسبة لصور المحتوى، استهدف 200KB أو اقبل ملفًا أكبر. طابق ميزانية البايتات مع حجم العرض - عرض صغير، ملف صغير.

هل يوفر تغيير الحجم أم الضغط المزيد من البايتات؟

تغيير الحجم، بفارق كبير. إزالة البكسلات تقلل البيانات التي يخزنها المُشفِّر؛ وتقليل الجودة يضغط كل بكسل متبقٍ بقوة أكبر فحسب. خاصة عند هدف 50KB، يجب عليك أولاً تغيير الحجم إلى عرض صغير، لأنه لا يوجد إعداد جودة يتناسب مع صورة كبيرة في 50KB دون تشوهات كبيرة (artifacting).

اعتمادات الصور

• مقارنة مسار الضغط، قبل/بعد، ومخطط الحجم — تم إنشاؤها بواسطة المؤلف من صورة بأسلوب التجارة الإلكترونية (Pexels #16675632، صورة بواسطة Mikael Blomkvist) لعرض أحجام الملفات المقاسة الفعلية لهدف 50KB.