WordPress me upload ke baad image blurry kyu dikhti hai (aur iska fix)

Das me se nau baar aapki image asal me blurry hoti hi nahi — WordPress ne use upload par downscale kar diya aur ab wahi capped copy serve kar raha hai. WordPress 5.3 ke baad, 2560px se zyada chaudi ya lambi koi bhi image chupchap ek -scaled version se replace ho jaati hai jiska sabse lamba edge 2560px par cap ho jaata hai, aur wahi chhoti file aapka theme khinchkar hero, full-width block, ya retina display bharne ke liye use karta hai. Iska fix ye hai ki pehle sabit karein ki wahi hua, phir ya to threshold badha dein ya un images ko upload karna band kar dein jinhe unke box se badi honi zaroori hai.

Ye kyu hota hai

Jab aap koi photo upload karte hain, WordPress wp_create_image_subsizes() (jo wp-admin/includes/image.php me hai) chalata hai. Agar sabse lamba edge big_image_size_threshold — default 2560px — se zyada hai, to ye _wp_image_meta_replace_original() ko call karta hai, your-photo-scaled.jpg banata hai, aur attachment metadata ko dobara likh deta hai taaki ab full size scaled copy ki taraf point kare. Aapki asli original file disk par your-photo.jpg ke roop me rakhi jaati hai aur wp_get_original_image_path() se reference hoti hai, lekin front end par use kuch bhi serve nahi karta. Har intermediate size aur har srcset candidate 2560px scaled file se generate hota hai, us cheez se nahi jo aapne upload ki thi.

To yaha blur ki wajah hai. Aap ek full-bleed header ke liye crisp 4000px image upload karte hain. WordPress use 2560px par cap kar deta hai. Ek standard display par 1600px chaude container me ye theek hai. Lekin 2x retina screen par browser ko us container ko sharp bharne ke liye lagbhag 3200 asli pixel chahiye, use sirf 2560 milte hain, aur baaki farak ko upscale kar deta hai. Soft edges, image ke andar ka mushy text — bilkul wahi “upload ke baad blurry” wala symptom.

Isi problem ka doosra aadha hissa hai srcset ka aisa size chunna jo bahut chhota ho. Agar aapka theme aisi content width report karta hai jo asli rendered box se match nahi karti, to WordPress browser ko -1024x683 ya -1536x1024 intermediate de deta hai aur wo khinch jaata hai. Wahi wajah — display box available pixels se bada — lekin trigger alag.

Dekhein WordPress ne asal me kya serve kiya

Andaza mat lagayein. Blurry image par right-click karein, use naye tab me kholein, aur URL me filename dekhein. Agar wo -scaled.jpg par ya -1024x683.jpg jaise dimension suffix par khatam hoti hai, to aapne confirm kar liya: browser ek downscaled derivative render kar raha hai, aapki upload ki hui file nahi. Aap element inspect karke currentSrc bhi padh sakte hain ye dekhne ke liye ki browser ne asal me kaunsa candidate chuna.

Kuch bhi dobara upload karne se pehle poori tasveer dekhne ke liye, image ko WordPress image sizes tool me daalein — ye dikhata hai ki us exact file se WordPress har derivative kya generate karega, ismein ye bhi ki -scaled copy banti hai ya nahi aur kis dimension par, taaki aapko pehle se pata ho ki aapka source us jagah ke liye kaafi bada hai jaha aap use rakh rahe hain.

Server par aap har capped file list kar sakte hain:

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

Ise kaise fix karein, kram me

1. Agar aapki images ko sach me 2560px se badi honi zaroori hai (bade heroes, retina, print-quality galleries), to threshold badhayein:

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

Ya cap ko poori tarah band kar dein:

add_filter( 'big_image_size_threshold', '__return_false' );

2. Affected images ko dobara upload karein. Yahi step log skip karte hain. Threshold badalne ka asar sirf naye uploads par padta hai. Aapki library me pehle se maujood images apna purana metadata rakhti hain, aur thumbnail regenerate karne se intermediate sizes capped -scaled file se hi dobara banti hain — ye us resolution ko wapas nahi laata jo phenk di gayi thi. Bharosemand tarika ye hai: filter badlein, attachment delete karein, phir se upload karein.

3. Agar aapka source pehle se hi ≤2560px hai aur phir bhi blurry hai, to threshold aapki problem nahi hai — display box image se bada hai. Bada source upload karein, ya container chhota karein. Retina sharpness ke liye, aapka source us box ki CSS pixel width se lagbhag dugna hona chahiye jise wo bharti hai.

4. Upar wale sab ke baad hi thumbnail regenerate karein taaki intermediate sizes consistent rahein — lekin samajh lein ki ye cleanup hai, ilaaj nahi.

Kya nahi karna chahiye

JPEG quality ko 100 tak mat badhayein. WordPress wp_editor_set_quality ke through default 82 quality par compress karta hai, aur online aadhi salah aapko ise override karne ko kehti hai:

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

Compression artifacts kam karne ke liye ye theek hai, lekin ek khinchi hui, upscaled image ek resolution problem hai, compression ki nahi. 82 se 100 par jaane se aapki files phul jaati hain aur jo softness aap dekh rahe hain uske liye lagbhag kuch nahi karta.

Reflex me -scaled ko disable mat karein. Cap ko band karna (iske liye ek tool hai) sahi faisla hai agar aap 2560px se badi images serve karte hain — lekin agar aapki asli dikkat ek bahut chhote intermediate ka khinchna hai, to ise disable karne se kuch nahi badalta aur aap bina wajah bandwidth ki bachat kho dete hain. Pehle diagnose karein.

Cache ko blame mat karein ya pehle thumbnail regenerate mat karein. Regeneration usi capped source se padhta hai, isliye wo detail wapas nahi la sakta. CDN ya page cache clear karna us file ko chhuega bhi nahi jo disk par shuru se hi chhoti thi.

Theme ki CSS ya object-fit ki taraf mat bhagein. Kitni bhi styling pixels nahi jodegi. Agar serve ki gayi file -scaled par ya dimension suffix par khatam hoti hai, to file problem hai, layout nahi.

Ab bhi atke hue hain?

Agar aapne confirm kar liya hai ki serve ki gayi file aapki full-resolution upload hai — na -scaled, na dimension suffix — aur phir bhi soft hai, to check karein ki koi plugin (koi optimizer, CDN image-resizer, ya lazy-load library) aapke src ko compressed proxy me to dobara nahi likh raha. Image ko image sizes tool se chalayein ye confirm karne ke liye ki WordPress ko asal me kya generate karna chahiye, phir use browser jo asal me load karta hai uske saath compare karein. Jab ye dono aapas me na milein, to WordPress aur browser ke beech koi cheez culprit hai.