چرا تصاویر وردپرس بعد از آپلود کیفیت پایینی دارند (و راهحل آن)
در ۹ مورد از ۱۰ مورد، تصاویر شما واقعاً بیکیفیت نیستند — وردپرس هنگام آپلود آنها را کوچک کرده و حالا همان نسخهٔ محدودشده را نمایش میدهد. از وردپرس ۵.۳ به بعد، هر
منتشرشده
در ۹ مورد از ۱۰ مورد، تصاویر شما واقعاً بیکیفیت نیستند — وردپرس هنگام آپلود آنها را کوچک کرده و حالا همان نسخهٔ محدودشده را نمایش میدهد. از وردپرس ۵.۳ به بعد، هر تصویری که عرض یا ارتفاع آن بیشتر از ۲۵۶۰ پیکسل باشد، بیسروصدا با یک نسخهٔ -scaled جایگزین میشود که بلندترین ضلع آن حداکثر ۲۵۶۰ پیکسل است، و همین فایل کوچکتر همان چیزی است که قالب شما آن را کش میآورد تا یک هدر، بلوک تمامعرض یا نمایشگر رتینا را پر کند. راهحل این است که اول ثابت کنید همین اتفاق افتاده، سپس یا آستانه را بالا ببرید یا از آپلود تصاویری که باید بزرگتر از جعبهای باشند که در آن قرار میگیرند خودداری کنید.
چرا این اتفاق میافتد
وقتی یک عکس آپلود میکنید، وردپرس تابع wp_create_image_subsizes() را اجرا میکند (در wp-admin/includes/image.php). اگر بلندترین ضلع بیشتر از big_image_size_threshold — که بهطور پیشفرض ۲۵۶۰ پیکسل است — باشد، تابع _wp_image_meta_replace_original() را فراخوانی میکند، فایل your-photo-scaled.jpg را میسازد و متادیتای پیوست را بازنویسی میکند تا اندازهٔ full حالا به نسخهٔ scaled اشاره کند. فایل اصلی واقعی شما با نام your-photo.jpg روی دیسک نگه داشته میشود و از طریق wp_get_original_image_path() قابل ارجاع است، اما هیچ چیزی در بخش نمایشی (front end) آن را ارائه نمیدهد. هر اندازهٔ میانی و هر گزینهٔ srcset از روی فایل scaled با ابعاد ۲۵۶۰ پیکسل ساخته میشود، نه از چیزی که شما آپلود کردید.
پس دلیل کاهش کیفیت اینجاست. شما یک تصویر واضح ۴۰۰۰ پیکسلی برای یک هدر تمامعرض آپلود میکنید. وردپرس آن را روی ۲۵۶۰ پیکسل محدود میکند. روی یک نمایشگر معمولی در یک کانتینر ۱۶۰۰ پیکسلی، این مشکلی ندارد. اما روی یک صفحهٔ رتینای ۲x، مرورگر برای پر کردن واضح آن کانتینر به حدود ۳۲۰۰ پیکسل واقعی نیاز دارد، فقط ۲۵۶۰ پیکسل در اختیار دارد و تفاوت را با بزرگنمایی جبران میکند. لبههای نرم، متن مبهم داخل تصویر — دقیقاً همان نشانهٔ «کاهش کیفیت بعد از آپلود».
نیمهٔ دیگر همین مشکل این است که srcset اندازهای انتخاب میکند که خیلی کوچک است. اگر قالب شما عرض محتوایی را گزارش کند که با جعبهٔ واقعیِ رندرشده مطابقت ندارد، وردپرس یک نسخهٔ میانی مانند -1024x683 یا -1536x1024 را به مرورگر میدهد و آن هم کش میآید. علت یکسان است — جعبهٔ نمایش بزرگتر از پیکسلهای موجود — اما محرک آن متفاوت است.
بررسی کنید وردپرس واقعاً چه چیزی را ارائه داده است
حدس نزنید. روی تصویر بیکیفیت راستکلیک کنید، آن را در یک تب جدید باز کنید و به نام فایل در URL نگاه کنید. اگر به -scaled.jpg یا یک پسوند ابعادی مانند -1024x683.jpg ختم میشود، این را تأیید کردهاید: مرورگر در حال رندر یک نسخهٔ مشتقشدهٔ کوچکشده است، نه فایل آپلودی شما. همچنین میتوانید عنصر را بازرسی (inspect) کنید و مقدار currentSrc را بخوانید تا دقیقاً ببینید مرورگر کدام گزینه را انتخاب کرده است.
برای اینکه قبل از آپلود دوبارهٔ هر چیزی تصویر کاملی داشته باشید، تصویر را در ابزار اندازهٔ تصاویر وردپرس بیندازید — این ابزار هر نسخهٔ مشتقشدهای را که وردپرس از آن فایل دقیق میسازد نشان میدهد، از جمله اینکه آیا یک نسخهٔ -scaled ساخته میشود و با چه ابعادی، تا از قبل بدانید که آیا منبع شما برای جایی که آن را قرار میدهید به اندازهٔ کافی بزرگ هست یا نه.
روی سرور میتوانید هر فایل محدودشده را فهرست کنید:
find wp-content/uploads -name '*-scaled.*'چطور آن را بهترتیب برطرف کنیم
۱. اگر تصاویر شما واقعاً باید بزرگتر از ۲۵۶۰ پیکسل باشند (هدرهای بزرگ، رتینا، گالریهای با کیفیت چاپ)، آستانه را بالا ببرید:
// 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' );۲. تصاویر تأثیرگرفته را دوباره آپلود کنید. این همان مرحلهای است که مردم از آن رد میشوند. تغییر آستانه فقط روی آپلودهای جدید تأثیر میگذارد. تصاویری که از قبل در کتابخانهٔ شما هستند متادیتای قدیمی خود را نگه میدارند، و بازتولید تصاویر بندانگشتی، اندازههای میانی را از روی فایل محدودشدهٔ -scaled بازسازی میکند — رزولوشنی را که دور ریخته شده بازنمیگرداند. مسیر قابلاعتماد این است: فیلتر را تغییر دهید، پیوست را حذف کنید، دوباره آپلود کنید.
۳. اگر منبع شما از قبل ≤۲۵۶۰ پیکسل است و همچنان بیکیفیت است، مشکل شما آستانه نیست — جعبهٔ نمایش بزرگتر از تصویر است. یک منبع بزرگتر آپلود کنید یا کانتینر را کوچک کنید. برای وضوح رتینا، منبع شما باید تقریباً دو برابر عرض پیکسل CSS جعبهای باشد که آن را پر میکند.
۴. فقط بعد از مراحل بالا، تصاویر بندانگشتی را بازتولید کنید تا اندازههای میانی یکدست شوند — اما بدانید که این کار پاکسازی است، نه درمان.
چه کارهایی نکنید
کیفیت JPEG را روی ۱۰۰ نبرید. وردپرس با کیفیت پیشفرض ۸۲ از طریق wp_editor_set_quality فشردهسازی میکند، و نیمی از توصیههای آنلاین به شما میگویند که آن را بازنویسی کنید:
add_filter( 'wp_editor_set_quality', function () { return 90; } );این برای کاهش نویزهای فشردهسازی خوب است، اما یک تصویر کشآمده و بزرگنماییشده یک مشکل رزولوشن است، نه فشردهسازی. رفتن از ۸۲ به ۱۰۰ حجم فایلهای شما را باد میکند و تقریباً هیچ کاری برای بیکیفیتیای که میبینید انجام نمیدهد.
بهعنوان یک واکنش غریزی -scaled را غیرفعال نکنید. خاموش کردن محدودیت (برای این کار ابزاری هست) کار درستی است اگر تصاویری بالای ۲۵۶۰ پیکسل ارائه میدهید — اما اگر مشکل واقعی شما این است که یک نسخهٔ میانیِ خیلی کوچک کش میآید، غیرفعال کردن آن هیچ تغییری ایجاد نمیکند و صرفهجویی در پهنای باند را بیدلیل از دست میدهید. اول تشخیص دهید.
اول کش را مقصر ندانید یا تصاویر بندانگشتی را بازتولید نکنید. بازتولید از روی همان منبع محدودشده میخواند، پس نمیتواند جزئیات را بازگرداند. پاک کردن CDN یا کش صفحه به فایلی که از همان ابتدا روی دیسک کوچک بوده دست نمیزند.
سراغ CSS قالب یا object-fit نروید. هیچ مقدار استایلدهیای پیکسل اضافه نمیکند. اگر فایل ارائهشده به -scaled یا یک پسوند ابعادی ختم میشود، مشکل خودِ فایل است، نه چیدمان.
هنوز گیر کردهاید؟
اگر تأیید کردهاید که فایل ارائهشده همان آپلود با رزولوشن کامل شماست — بدون -scaled، بدون پسوند ابعادی — و همچنان بیکیفیت است، بررسی کنید که آیا یک افزونه (یک بهینهساز، یک تغییردهندهٔ اندازهٔ تصویر در CDN، یا یک کتابخانهٔ lazy-load) در حال بازنویسی src شما به یک پروکسی فشردهشده است یا نه. تصویر را از ابزار اندازهٔ تصاویر عبور دهید تا تأیید کنید وردپرس باید چه چیزی بسازد، سپس آن را با چیزی که مرورگر واقعاً بارگذاری میکند مقایسه کنید. وقتی این دو با هم اختلاف دارند، چیزی بین وردپرس و مرورگر مقصر است.