لماذا تظهر صور ووردبريس ضبابية بعد الرفع (وطريقة الحل)

في تسع حالات من أصل عشر، صورك ليست ضبابية فعلاً — ووردبريس صغّر أبعادها عند الرفع وصار يعرض النسخة المحدودة. منذ ووردبريس 5.3، أي صورة يزيد عرضها أو ارتفاعها عن 2560 بكسل يُستبدل بها بصمت نسخة -scaled محدودة بحد أقصى 2560 بكسل على أطول ضلع، وهذا الملف الأصغر هو ما يمدّده قالبك ليملأ ترويسة أو كتلة بعرض كامل أو شاشة retina. الحل هو أن تثبت أن هذا ما حدث فعلاً، ثم إما أن ترفع الحد أو تتوقف عن رفع صور تحتاج أن تكون أكبر من الصندوق الذي توضع فيه.

لماذا يحدث ذلك

عندما ترفع صورة، يشغّل ووردبريس الدالة wp_create_image_subsizes() (في wp-admin/includes/image.php). إذا كان أطول ضلع يتجاوز big_image_size_threshold — وهو 2560 بكسل افتراضياً — فإنه يستدعي _wp_image_meta_replace_original()، وينشئ your-photo-scaled.jpg، ويعيد كتابة بيانات المرفق الوصفية بحيث يشير حجم full الآن إلى النسخة المصغّرة. يُحفظ أصلك الحقيقي على القرص باسم your-photo.jpg ويُشار إليه عبر wp_get_original_image_path()، لكن لا شيء في الواجهة الأمامية يعرضه. كل حجم وسيط وكل مرشّح في srcset يُولَّد من ملف الـ 2560 بكسل المصغّر، لا مما رفعته أنت.

وهنا يكمن سبب الضبابية. ترفع صورة واضحة بعرض 4000 بكسل لترويسة بعرض كامل. يحدّها ووردبريس عند 2560 بكسل. على شاشة عادية داخل حاوية بعرض 1600 بكسل، لا مشكلة. لكن على شاشة retina بكثافة 2x يحتاج المتصفح إلى نحو 3200 بكسل حقيقي ليملأ تلك الحاوية بوضوح، وليس لديه سوى 2560، فيكبّر الفرق. حواف ناعمة، ونص داخل الصورة مشوّش، وهذا بالضبط عرَض “الضبابية بعد الرفع”.

النصف الآخر من المشكلة نفسها هو أن srcset يختار حجماً أصغر من اللازم. إذا كان قالبك يبلّغ عن عرض محتوى لا يطابق الصندوق المعروض فعلاً، فإن ووردبريس يسلّم المتصفح نسخة وسيطة -1024x683 أو -1536x1024 فتُمدَّد للأعلى. نفس السبب — صندوق العرض أكبر من البكسلات المتاحة — لكن بمُحفّز مختلف.

تحقق مما عرضه ووردبريس فعلاً

لا تخمّن. انقر بزر الفأرة الأيمن على الصورة الضبابية، وافتحها في تبويب جديد، وانظر إلى اسم الملف في عنوان URL. إذا كان ينتهي بـ -scaled.jpg أو بلاحقة أبعاد مثل -1024x683.jpg، فقد تأكدت: المتصفح يعرض نسخة مصغّرة مشتقة، لا صورتك الأصلية. يمكنك أيضاً فحص العنصر وقراءة currentSrc لترى بالضبط أي مرشّح اختاره المتصفح.

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

على الخادم يمكنك سرد كل ملف محدود:

find wp-content/uploads -name '*-scaled.*'

كيف تحلها، بالترتيب

1. إذا كانت صورك تحتاج فعلاً أن تكون أكبر من 2560 بكسل (ترويسات كبيرة، أو retina، أو معارض بجودة طباعة)، ارفع الحد:

// functions.php or a small mu-plugin
add_filter( 'big_image_size_threshold', function () {
    return 3840; // longest edge, in pixels
} );

أو أوقف الحد بالكامل:

add_filter( 'big_image_size_threshold', '__return_false' );

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

3. إذا كان مصدرك أصلاً ≤2560 بكسل وما زال ضبابياً، فالحد ليس مشكلتك — صندوق العرض أكبر من الصورة. ارفع مصدراً أكبر، أو صغّر الحاوية. لوضوح retina، يجب أن يكون مصدرك ضعف عرض الصندوق تقريباً بوحدات بكسل الـ CSS.

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

ما يجب ألا تفعله

لا ترفع جودة JPEG إلى 100. يضغط ووردبريس بجودة افتراضية مقدارها 82 عبر wp_editor_set_quality، ونصف النصائح على الإنترنت تخبرك بتجاوزها:

add_filter( 'wp_editor_set_quality', function () { return 90; } );

هذا جيد لتقليل عيوب الضغط، لكن الصورة الممدَّدة المكبّرة مشكلة دقة، لا مشكلة ضغط. الانتقال من 82 إلى 100 يضخّم ملفاتك ولا يفعل شيئاً تقريباً للنعومة التي تراها.

لا تعطّل -scaled كردّ فعل تلقائي. إيقاف الحد (هناك أداة لذلك) هو القرار الصحيح إذا كنت تعرض صوراً فوق 2560 بكسل — لكن إن كانت مشكلتك الحقيقية نسخة وسيطة صغيرة جداً تُمدَّد، فتعطيله لا يغيّر شيئاً وتخسر توفير عرض النطاق بلا داعٍ. شخّص أولاً.

لا تلُم التخزين المؤقت ولا تعِد توليد الصور المصغّرة أولاً. إعادة التوليد تقرأ من المصدر المحدود نفسه، لذا لا يمكنها استعادة التفاصيل. مسح CDN أو التخزين المؤقت للصفحة لن يمسّ ملفاً كان صغيراً على القرص من الأساس.

لا تلجأ إلى CSS القالب أو object-fit. لا يوجد قدر من التنسيق يضيف بكسلات. إذا كان الملف المعروض ينتهي بـ -scaled أو بلاحقة أبعاد، فالمشكلة في الملف، لا في التخطيط.

ما زلت عالقاً؟

إذا تأكدت أن الملف المعروض هو صورتك المرفوعة بدقتها الكاملة — بلا -scaled وبلا لاحقة أبعاد — وما زالت ناعمة، فتحقق مما إذا كانت إحدى الإضافات (أداة تحسين، أو أداة تغيير حجم الصور في CDN، أو مكتبة تحميل كسول) تعيد كتابة src إلى وسيط مضغوط. مرّر الصورة عبر أداة أحجام الصور لتأكيد ما ينبغي لووردبريس توليده، ثم قارن ذلك بما يحمّله المتصفح فعلاً. عندما يختلف الاثنان، فإن شيئاً ما بين ووردبريس والمتصفح هو المسبب.