جلوگیری از ایجاد خودکار سایز مختلف تصویر در وردپرس

هر زمان که تصویری را از طریق کتابخانه رسانه به سایت وردپرس خود آپلود می‌کنید، به‌صورت خودکار چندین نسخه اضافی از آن تصویر ایجاد و ذخیره می‌شود. اگر سایت شما از این اندازه‌های اضافی استفاده نمی‌کند، آنها فضای ذخیره‌سازی ارزشمندی را اشغال کرده و اندازه پشتیبان‌های سرور شما را افزایش می‌دهند.

در این راهنما، اندازه‌های پیش‌فرض تصویر را بررسی می‌کنم، توضیح می‌دهم چرا آنها ایجاد می‌شوند، نحوه شناسایی اندازه‌های تصویر اضافی را نشان می‌دهم و کد لازم برای جلوگیری از ایجاد اندازه‌های غیرضروری توسط وردپرس را در اختیار شما قرار می‌دهم.

اندازه‌های پیش‌فرض تصاویر در وردپرس

در اینجا جدولی از همه اندازه‌های پیش‌فرض تصاویر در وردپرس آورده شده است:

نام	سایز پیش فرض	توضیحات
thumbnail	150×150	اندازه تصویر بندانگشتی تعریف شده توسط کاربر
medium	300×300	اندازه متوسط ​​تعریف شده توسط کاربر
medium_large	768×0	برای نمایشگرهای واکنش‌گرا و HDPI.
large	1024×1024	اندازه بزرگ تعریف شده توسط کاربر.
1536×1536	1536×1536	برای نمایشگرهای رتینا/HDPI
2048×2048	2048×2048	برای نمایشگرهای بزرگتر و با وضوح بالا.
-scaled	~2560	وقتی سایز تصویر آپلود شده بزرگتر از اندازه استاندارد وردپرس باشد
full	–	بزرگترین سایز ممکن از تصویر

همان‌طور که می‌بینید، تعدادشان کم نیست!

این بدان معناست که هر بار که تصویری را به سایت وردپرس خود آپلود می‌کنید، ممکن است تا ۷ نسخه اضافی از تصویر روی سرورتان ایجاد و ذخیره شود! و این فقط اندازه‌های پیش‌فرضی است که در هسته تعریف شده‌اند و شامل اندازه‌های اضافی تعریف‌شده توسط پوسته‌ها و افزونه‌های شما نمی‌شود.

اندازه‌های تصویر ایجاد شده توسط قالب و پلاگین‌های وردپرس شما

بیشتر قالب‌های کلاسیک وردپرس (قالب‌های غیر بلاک) از اندازه‌های پیش‌فرض کوچک، متوسط و بزرگ استفاده نمی‌کنند. آن‌ها معمولاً اندازه‌های تصویر خودشان را ثبت می‌کنند که با طراحی و چیدمان قالب بهترین همخوانی را دارند.

پلاگین‌ها هم ممکن است اندازه‌های تصویر جدیدی ایجاد کنند. این مورد در پلاگین‌هایی که برای نمایش پست‌ها یا انواع پست‌های سفارشی استفاده می‌شوند رایج است. مثال‌های بارز شامل پلاگین‌های دایرکتوری، رویدادها، املاک، تجارت الکترونیک، LMS، صفحه سازها و غیره است.

این بدان معناست که سایت شما ممکن است اندازه‌های تصویری بیشتری ایجاد کند و واقعاً حجم سرور و فایل‌های پشتیبان شما را افزایش دهد.

ایده خوبی است که مستندات مربوط به قالب و همه پلاگین‌های سایت خود را بخوانید تا مطمئن شوید که اندازه‌های غیرضروری برای تصاویر شما ایجاد نمی‌کنند. بیشتر قالب‌ها و پلاگین‌های به خوبی کدنویسی شده تنظیمی برای تغییر یا غیرفعال کردن اندازه‌های تصویر اضافی ارائه می‌دهند.

در ادامه این راهنما، یک راه‌حل ساده مبتنی بر کد برای مشاهده همه اندازه‌های تصویری ثبت شده در سایتتان ارائه خواهم داد.

چرا تصاویر اضافی تغییر اندازه داده می‌شوند

پیش از توضیح چگونگی جلوگیری از ایجاد اندازه‌های جایگزین تصویر توسط وردپرس برای آپلودهایتان، مهم است که بفهمیم چرا وردپرس این اندازه‌های اضافی را ایجاد می‌کند. در زیر فهرستی از دلایل اصلی آمده است:

• زمان بارگذاری سریع‌تر: تصاویر کوچک‌تر سریع‌تر بارگذاری می‌شوند.
• تصاویر واکنش‌گرا: ارائه اندازه‌های جایگزین تصویر برای صفحه‌نمایش‌های مختلف.
• یکنواختی: برای نگه‌داشتن تمام تصاویر شاخص به یک اندازه.
• صفحه‌نمایش‌های با وضوح بالا: ارائه تصاویر جایگزین برای نمایشگرهای با وضوح بالا و رتینا.
• تصاویر شاخص: ارائه اندازه‌های جایگزین برای استفاده در بخش‌های مختلف سایت یا عناصر خاص تم/پلاگین‌ها.
• عملکرد سرور: همان‌طور که در مورد تصویر -scaled در جدول بالا ذکر شده است.

پنل مدیریت تنظیمات رسانه وردپرس

وقتی وارد سایت وردپرس خود می‌شوید و به تنظیمات > رسانه بروید، گزینه‌هایی برای تنظیم سه اندازه اصلی تصاویر وردپرس (بندانگشتی، متوسط، بزرگ) پیدا خواهید کرد.

تنظیم عرض و ارتفاع همه فیلدها روی 0 باعث می‌شود که وردپرس این تصاویر اضافی را ایجاد نکند. این اولین کاری است که هر بار وردپرس نصب می‌کنم انجام می‌دهم و برای بیشتر سایت‌ها توصیه می‌کنم.

با این حال، این یک راه‌حل کامل برای جلوگیری از تغییر اندازه تصاویر ناخواسته در سایت شما نیست. به خواندن ادامه دهید تا بیشتر بدانید و نمونه کد من برای غیرفعال کردن تمام اندازه‌های تصویر را ببینید.

آستانه اندازه تصویر بزرگ در وردپرس

در وردپرس نسخه 5.3.0 چیزی به نام آستانه اندازه تصویر بزرگ معرفی شد. این حد اکثر عرض یا ارتفاعی است که یک تصویر می‌تواند داشته باشد و وردپرس اندازه‌های اضافی تصویر را هنگام آپلود آن تولید کند. مقدار پیش‌فرض 2560 است.

اگر تصویری در کتابخانه رسانه‌ای آپلود شود که از این آستانه بزرگ‌تر باشد، وردپرس تصویر را کوچک‌تر می‌کند و به‌عنوان بزرگ‌ترین اندازه موجود استفاده خواهد کرد. سپس وردپرس همه اندازه‌های اضافی تصویر تعریف‌شده در سایت شما را بر اساس نسخه کوچک‌شده تولید می‌کند.

بنابراین، اگر تصاویری را آپلود می‌کنید که بزرگ‌تر از 2560 (عرض یا ارتفاع) هستند، وردپرس تصاویر اضافی روی سرور شما ایجاد خواهد کرد. ممکن است بخواهید این ویژگی را غیرفعال کرده یا به صورت دلخواه تنظیم کنید.

غیرفعال کردن آستانه اندازه تصویر بزرگ

اگر می‌خواهید تصاویر بزرگ را به سایت خود آپلود کنید بدون اینکه وردپرس آن‌ها را کوچک کند و نسخه جایگزین ایجاد کند، می‌توانید از کد زیر استفاده کنید:

// Disable the big image size threshold
add_filter( 'big_image_size_threshold', '__return_false' );

احتیاط: حد آستانه تصویر بزرگ به دلیلی وجود دارد و من به شدت توصیه می‌کنم که آن را غیرفعال نکنید. غیرفعال کردن این ویژگی ممکن است باعث مشکلات عملکردی در سرور شود. اگر می‌دانید که فقط تصاویر کوچکتر به سایت آپلود می‌شوند، می‌توانید آن را غیرفعال کنید، اما به هر حال اگر روشن بماند مشکلی نخواهد بود.

تغییر آستانه اندازه تصویر بزرگ

اگر سایت شما نیاز به استفاده از تصاویر بزرگ‌تر دارد (مثلاً یک وب‌سایت عکاسی)، ممکن است بخواهید مقدار آستانه اندازه تصویر بزرگ را تغییر دهید. به این صورت، وردپرس تصاویر شما را کوچک نمی‌کند.

در اینجا مثالی از چگونگی تغییر مقدار از 2560 به 5000 آورده شده است:

// Modify the big image size threshold
add_filter( 'big_image_size_threshold', function( $threshold ) {
    return 5000;
} );

چگونه سایزهای تصاویر تعریف‌شده در سایت خود را بررسی کنیم؟

متأسفانه وردپرس به‌طور پیش‌فرض راهی برای نمایش لیست همه سایزهای تصویر ثبت‌شده در سایت ندارد. برای این کار می‌توانید از افزونه‌ها استفاده کنید، اما چون بیشتر روی آموزش‌های مبتنی بر کد تمرکز دارم، به شما نشان خواهم داد که چگونه با استفاده از کد، لیستی از تصاویر ثبت‌شده در سایت خود را نمایش دهید.

روش سریع و “ساده”

اگر این کد را در فایل functions.php خود کپی و جای‌گذاری کنید و سپس سایت خود را رفرش کنید، لیستی از اندازه‌های تصویر ثبت‌شده را در بالای سایت خواهید دید. می‌توانید این لیست را کپی کرده و در یک فایل متنی برای مراجعه در آینده قرار دهید و سپس کد را حذف کنید.

// Display all defined image sizes at the top of the site inside a <pre> tag
add_action( 'wp_head', function() {
	echo '<pre>';
	foreach ( (array) wp_get_registered_image_subsizes() as $size => $dims ) {
		$width = $dims['width'] ?? 0;
		$height = $dims['height'] ?? 0;
		echo "{$size}: {$width}x{$height}n";
	}
	echo '</pre>';
} );

نمایش اندازه‌های عکس ثبت‌شده در مدیریت وردپرس

دسترسی به لیستی از اندازه‌های عکس ثبت‌شده در پنل مدیریت وردپرس بسیار ایده‌آل است. به این ترتیب، اگر زمانی افزونه جدیدی فعال کردید یا قالب‌ها را تغییر دادید، می‌توانید به‌سرعت بررسی کنید که آیا اندازه‌های عکس جدید تعریف شده‌اند یا خیر.

کد زیر یک جدول از تمامی اندازه‌های عکس تعریف‌شده را در پایین پنل تنظیمات > رسانه نمایش می‌دهد:

// Add a table of image sizes to the Settings > Media admin page
add_action( 'admin_init', function() {
	add_settings_section(
		'dummy_registered_image_sizes_info',
		esc_html__( 'Registered Image Sizes', 'text_domain' ),
		function() {
			echo '<table class="wp-list-table widefat fixed striped">';
			echo '<thead><tr><th>' . esc_html__( 'Name', 'text_domain' ) . '</th><th>' . esc_html__( 'Dimensions', 'text_domain' ) . '</th></tr></thead>';
			foreach ( (array) wp_get_registered_image_subsizes() as $size => $dims ) {
				if ( ! in_array( $size, [ 'thumbnail', 'medium', 'large' ], true ) ) {
					$width = $dims['width'] ?? 0;
					$height = $dims['height'] ?? 0;
					echo "<tr><td><strong>{$size}</strong></td><td>{$width}x{$height}</td>";
				}
			}
			echo '</table>';
		},
		'media'
	);
}, PHP_INT_MAX );

با این کد بخش تنظیمات جدیدی رو به صورت فنی تعریف می‌کنیم اما واقعاً هیچ تنظیماتی رو ثبت نمی‌کنیم. در عوض، تابع callback رو برای بخش‌مون تنظیم می‌کنیم تا یک جدول برگردونه که همه اندازه‌های تصویر ثبت‌شده رو نمایش بده.

در اینجا یک تصویر از نتیجه نهایی آمده است:

همین طور که می‌توانید مشاهده کنید، جایی که اندازه تصاویر ثبت‌شده در قالب پیش‌فرض به ۹۹۹۹x۹۹۹۹ تنظیم شده که بسیار بزرگ است تا به‌طور پیش‌فرض هرگز برش نخورد.

جلوگیری از ایجاد سایزهای اضافی تصاویر در وردپرس

هیچ گزینه‌ای در پنل مدیریت وردپرس نیست که بتوانید آن را تیک بزنید تا از ایجاد نسخه‌های برش خورده تصاویر جلوگیری کنید، بنابراین باید از یک مقدار کد استفاده کنید. خوشبختانه، این کار با یک خط کد قابل انجام است!

// Return false for calculated resized image dimensions
add_filter( 'image_resize_dimensions', '__return_false' );

برای درک نحوه کار این کد، به عملکرد اصلی image_resize_dimensions() نگاهی می‌اندازیم. این تابع نسبتاً طولانی است، بنابراین اینجا آن را قرار نمی‌دهم، اما اگر می‌خواهید تمام کدهای مربوط به این تابع را ببینید، می‌توانید روی لینک فوق کلیک کنید.

به‌طور کلی، هرگاه وردپرس بخواهد اندازه جدیدی از تصویر ایجاد کند، از این تابع برای بازگرداندن ابعاد محاسبه شده برای تغییر اندازه تصویر استفاده می‌کند، که سپس آن را به کلاس WP_Image_Editor می‌فرستد. اتصال به فیلتر image_resize_dimensions و بازگرداندن مقدار false باعث می‌شود که تابع به زودی خارج شود و هیچ محاسبه‌ای انجام نشود و در نهایت هیچ تصویر اضافی تولید نشود.

قطعه کد بهینه‌سازی‌شده

قطعه کد قبلی باعث می‌شود تا وردپرس هنگام درخواست یک اندازه تصویر جدید، هیچ تصویری را برش ندهد. این کار بدون توجه به زمان درخواست اندازه تصویر عمل می‌کند.

اما می‌توانیم کد خود را با استفاده از هوک intermediate_image_sizes_advanced که آرایه‌ای از اندازه‌های تصاویر ایجادشده هنگام بارگذاری تصویر را برمی‌گرداند، بهینه کنیم.

// Return an empty list of image sizes to generate on upload
add_filter( 'intermediate_image_sizes_advanced', '__return_empty_array' );

با بازگرداندن یک آرایه خالی برای فیلتر، به وردپرس می‌گوییم که نباید تصویر اضافی زمانی که تصویر جدیدی به سایت ما آپلود می‌شود، ایجاد شود. اکنون، هر زمان که عکسی را به وبسایت خود آپلود کنید، فقط تصویر اصلی به سرور اضافه خواهد شد.

کد کامل:

در اینجا هر دو کد با هم ترکیب شده‌اند:

// Return false for calculated resized image dimensions
add_filter( 'image_resize_dimensions', '__return_false' );

// Return an empty list of image sizes to generate on upload
add_filter( 'intermediate_image_sizes_advanced', '__return_empty_array' );

حالا، اگر به intermediate_image_sizes_advanced متصل هستید، لزوماً نیازی نیست که به image_resize_dimensions هم متصل شوید.

دلیل اینکه به هر دو فیلتر متصل می‌شوید این است که ممکن است یک تم یا افزونه از راه‌حل برش “آنلاین” خود استفاده کند – که امیدواریم از تابع image_resize_dimensions() استفاده کند.

اگر هنوز اندازه‌های اضافی تصاویر ایجاد می‌شوند، چه کنیم؟

اگر کد را به سایت خود اضافه کرده‌اید و متوجه شده‌اید که هنگام بارگذاری تصاویر همچنان اندازه‌های اضافی ایجاد می‌شوند، باید افزونه‌ها و/یا پوسته خود را غیرفعال کنید تا عامل مشکل را پیدا کنید.

همان‌طور که قبلاً ذکر شد، ممکن است یک راه‌حل سفارشی برای برش تصاویر در سایت شما وجود داشته باشد که از قابلیت‌های اصلی وردپرس استفاده نمی‌کند و بنابراین فیلترهای اصلی روی آن تاثیر نمی‌گذارند.

جلوگیری از ایجاد اندازه‌های خاص تصاویر هنگام بارگذاری

شاید نمی‌خواهید همه اندازه‌های تصویر تولید نشوند. می‌توانید کد را تغییر دهید تا فقط اندازه‌های خاصی از تصاویر را حذف کند، به این صورت:

// Exclude certain image sizes from being generated on upload
add_filter( 'intermediate_image_sizes_advanced', function( $sizes ) {
	$sizes_to_exclude = [
		'thumbnail',
		'medium',
		'large',
		'medium_large',
		'1536×1536',
		'2048×2048',
	];
	foreach ( $sizes_to_exclude as $size_to_exclude ) {
		unset( $sizes[ $size_to_exclude ] );
	}
    return $sizes;
} );

اگر می‌خواهید فقط اندازه‌های خاصی از تصاویر را حذف کنید، مطمئن شوید که به image_resize_dimensions متصل نشده‌اید و مقدار false بر نمی‌گردانید.

و احتمالاً متوجه شدید که اندازه‌های تصویر بندانگشتی، متوسط و بزرگ را در کد قرار داده‌ام. به این شکل، حتی اگر کسی تنظیمات را در بخش مدیریت تغییر دهد، این اندازه‌های تصویر حذف خواهند شد.

نکاتی برای کاهش نیاز به تغییر اندازه تصاویر

در ابتدای مقاله برخی دلایل ایجاد اندازه‌های اضافی تصاویر در وردپرس را توضیح دادم. با در نظر گرفتن آن‌ها، اگر قصد دارید اندازه‌های اضافی تصویر را غیرفعال کنید، این نکات را دنبال کنید تا مشکلی ایجاد نشود.

• تصاویر بزرگ آپلود نکنید: مطمئن شوید تصاویری با اندازه بسیار بزرگ در سایت خود آپلود نمی‌کنید. اگر کنترل این مورد را ندارید، مطمئن شوید که حد آستانه تصویر بزرگ را حذف نکنید و با ایجاد تصاویر مقیاس‌بندی شده در صورت لزوم مشکلی نداشته باشید.
• تصاویر به اندازه کافی بزرگ آپلود کنید: گفتن اینکه دقیقاً چه اندازه‌ای کافی است، سخت است زیرا این مورد به سایت و زمینه‌ای که تصویر در آن قرار می‌گیرد بستگی دارد. اما تصاویر شما باید به اندازه کافی بزرگ باشند تا در صفحه‌نمایش‌های با وضوح بالا خوب به نظر برسند و در عین حال به اندازه کافی کوچک باشند (بر حسب کیلوبایت) تا سرعت بارگذاری سایت را کاهش ندهند.
• تصاویر را قبل از بارگذاری بهینه کنید: پلاگین‌های بسیاری برای بهینه‌سازی تصاویر وجود دارد، اما چرا سایت خود را سنگین کنید و منابع سرور را مصرف کنید وقتی می‌توانید تصاویر خود را قبل از بارگذاری بهینه‌سازی کنید. من شخصاً از tinypng.com استفاده می‌کنم و تصاویرم را به فرمت webP قبل از بارگذاری تبدیل می‌کنم.
• از نسبت تصویر استفاده کنید: یکی از دلایل اصلی ایجاد اندازه‌های تصویر، حفظ یک ظاهر هماهنگ در پست‌ها است، زیرا همه تصاویر شاخص شما به همان ابعاد برش داده می‌شوند. در عوض می‌توانید از خصوصیت CSS aspect-ratio برای هدف‌گذاری تصاویر خود استفاده کنید.

این‌ها نکات اصلی بودند که به ذهنم می‌رسید، اگر پیشنهادات یا نگرانی‌های دیگری دارید که باید مورد بررسی قرار بگیرد، در نظرات با من در میان بگذارید.

چگونه اندازه‌های قدیمی تصاویر را از سرور خود حذف کنیم

افزودن کد برای جلوگیری از ایجاد اندازه‌های اضافی تصاویر توسط وردپرس فقط برای تصاویر جدید بارگذاری شده تأثیر خواهد داشت. اگر این کد را به سایتی موجود اضافه می‌کنید، ممکن است حجم زیادی از تصاویر قدیمی برش خورده در سرور داشته باشید که باید پاک کنید.

روش‌های متعددی برای حذف تصاویر قدیمی تغییر اندازه داده شده وجود دارد و بسیاری از وبلاگ‌ها توصیه می‌کنند از CLI (ترمینال) استفاده کنید، اما وردپرس اندازه‌های تصویر را در داده‌های متا پیوست ذخیره می‌کند بنابراین من این راه‌حل را توصیه نمی‌کنم.

آسان‌ترین روشی که من پیدا کردم استفاده از افزونه Force Regenerate Thumbnails است. می‌توانید افزونه را فعال کنید، فرآیند را اجرا کنید و سپس آن را از سایت خود حذف کنید.

این افزونه با عبور از هر پیوست تصویر در سایت، اندازه‌های تعریف شده آن را از متا دیتا می‌گیرد و همه آن‌ها را حذف می‌کند. پس از حذف اندازه‌های تصویر، تابع اصلی wp_generate_attachment_metadata() را اجرا می‌کند که اندازه‌های جدید تصاویر میانجی برای پیوست را ایجاد می‌کند. بنابراین، اگر اندازه‌های اضافی تصاویر را از طریق کد قبلی غیرفعال کرده‌اید، هیچ تصویری ایجاد نخواهد شد.

می‌توانم یک قطعه کد برای حذف اندازه‌های قدیمی تصاویر از سایت شما ارائه دهم، اما این فرآیند می‌تواند بسیار منابع‌بَر باشد و بهترین روش استفاده از AJAX است. افزونه Force Regenerate Thumbnails از هر تصویر به نوبت عبور می‌کند و اگر مشکلی باشد، آن را ثبت و نمایش می‌دهد.

این افزونه همچنین به شما نشان می‌دهد که چه تصاویری حذف و ایجاد شده‌اند که بسیار خوب است!

همیشه، قبل از نصب هر افزونه جدید یا حذف چیزی از سایت خود، مطمئن شوید که یک پشتیبان کامل دارید. من بارها بدون هیچ مشکلی از این افزونه استفاده کرده‌ام، اما بهتر است مطمئن باشید تا متاسف.

نتیجه‌گیری

به نظر من، غیرفعال کردن تمام اندازه‌های اضافی تصویر برای اکثر وب‌سایت‌ها بهترین کار است. این کار باعث می‌شود فضای سرور شما با تصاویری اشغال نشود (بسیاری از آنها هرگز استفاده نخواهند شد) و در نتیجه، پشتیبان‌گیری‌های شما به‌طور قابل‌توجهی سریع تر و کوچک‌تر می‌شود.

همچنین می‌توان برای سئو هم استدلال کرد. درباره بهینه‌سازی جستجوی تصاویر گوگل اطلاعات زیادی ندارم، اما شاید داشتن چندین تصویر یکسان با اندازه‌های مختلف می‌تواند مشکل ایجاد کند. اگر شما یک کارشناس سئو هستید، لطفاً در نظرات به من اطلاع دهید که آیا این موضوع صحت دارد؟