Щоразу, коли ви завантажуєте зображення на свій сайт WordPress через медіатеку, він автоматично створює та зберігає кілька додаткових версій цього зображення. Якщо сайт не використовує ці додаткові розміри зображень (ДРІ), вони займатимуть цінний дисковий простір та збільшуватимуть обсяг резервних копій.
У цьому посібнику ми розповімо про розміри зображень за промовчанням, пояснимо, чому вони генеруються таким чином. Також покажемо, як визначити ДРІ, та надамо фрагмент коду, який не дозволить WordPress створювати непотрібні файли.
Розміри зображень за промовчанням у WordPress
У таблиці представлені всі варіанти за замовчуванням у WordPress:
| ІМ'Я | За замовчуванням | Опис |
|---|---|---|
| слайдами | 150 × 150 | Мініатюри визначається користувачем. |
| середа | 300 × 300 | Середній обсяг, який визначається користувачем. |
| medium_large | 768 × 0 | Для адаптивних та HDPI-дисплеїв. |
| великий | 1024 × 1024 | Великий розмір, який визначається користувачем. |
| 1536 × 1536 | 1536 × 1536 | Для екранів Retina/HDPI. |
| 2048 × 2048 | 2048 × 2048 | Для великих дисплеїв з високою роздільною здатністю. |
| -масштабований | ~ 2560 | Якщо вихідне завантажене зображення перевищує граничне значення, WordPress створює цю масштабовану версію. |
| Повний | - | Оригінальне чи масштабоване зображення. |
Як бачите, їх чимало!
Це означає, що кожного разу, коли на сайт WordPress завантажується картинка, він може генерувати та зберігати на сервері до 7 додаткових версій! І це лише розміри за замовчуванням, визначені в ядрі, вони не включають додаткових варіантів, визначених вашими темами і плагінами.
Розміри зображень, створені темою WordPress та плагінами
Більшість класичних тем WordPress (неблокові теми) не використовують основні розміри мініатюр, середніх та великих зображень. Зазвичай вони реєструють власні варіанти, які найкраще підходять для дизайну та макета теми.
Плагіни також можуть реєструвати нові розміри картинок. Це поширене в плагінах, що використовуються для відображення постів або включення типів користувача постів. Яскравими прикладами можуть бути каталоги, новини, нерухомість, електронна комерція, LMS, конструктори сторінок і т.д.
Це означає, що ваш сайт може створювати зображення ще більшого розміру та суттєво роздмухувати сервер та файли резервних копій.
Хорошою ідеєю прочитатиме документацію по темі та всім плагінам, що використовуються на сайті, і переконатися, що вони не створюють непотрібні змінені версії картинок. Більшість добре написаних тем та плагінів запропонують налаштування для зміни чи відключення будь-яких додаткових розмірів.
Читайте також:
Як створити інтерактивні картинки у WordPress
Навіщо створюються зображення із зміненим розміром
Перш ніж пояснювати, як зупинити WordPress від генерації альтернативних розмірів, насамперед важливо зрозуміти, чому WordPress створює ці додаткові розміри. Нижче наведено список основних причин:
- Швидше завантаження: маленькі картинки завантажуються швидше
- Адаптивні: надати адаптацію для різних екранів.
- Узгодженість: для підтримки однакового розміру всіх картинок.
- Дисплеї високої роздільної здатності: надання альтернативних варіантів для дисплеїв високої роздільної здатності та Retina.
- Вибрані мініатюри: надають альтернативні розміри для використання в різних частинах сайту або з елементами, специфічними для теми/плагінів.
- Продуктивність сервера: як і у випадку -scaled зображення, як зазначено в таблиці вище.
Панель адміністратора налаштувань медіа WordPress
Якщо ви увійдете на сайт WordPress і перейдете за посиланням, Settings > Media то побачите опції для встановлення трьох основних варіантів (мініатюра, середня, велика).
Встановлення ширини та висоти всіх полів на 0 не дозволить WordPress створювати ці додаткові зображення. Це перше, що я роблю, коли встановлюю Вордпрес і рекомендую це для більшості сайтів.
Однак це не повне рішення для запобігання небажаним змінам на сайті.
Великий поріг розміру зображення в WordPress
У WordPress 5.3.0 було запроваджено так званий поріг розміру великого зображення. Це максимальна ширина або висота, для якої Вордпрес генеруватиме ДРІ при завантаженні зображення. Значення за замовчуванням 2560.
Якщо в медіа-бібліотеці завантажено зображення, що перевищує граничне значення, WP зменшить його і використовуватиме його як максимально можливий розмір. Потім WordPress згенерує всі ДРІ, визначені на сайті, на основі зменшеної версії.
Отже, якщо ви завантажуєте зображення більше 2560 (ширина або висота), WordPress створить на сервері додаткові зображення. Ви можете вимкнути чи налаштувати це належним чином.
Як вимкнути граничне значення
Щоб завантажувати великі зображення на сайт без необхідності їх зменшення WordPress та створення альтернативної версії, використовуйте наступний фрагмент коду:
// 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;
} );
Як перевірити, які розміри зображень на сайті?
На жаль WordPress не має власного способу перегляду списку всіх розмірів, зареєстрованих на сайті. Для цього є плагіни, але оскільки в цьому посібнику ми зосереджені в основному на навчальних матеріалах на основі коду, то покажемо, як можна використовувати код для відображення списку зареєстрованих зображень.
Швидкий та «брудний» метод
Якщо ви скопіюєте та вставите цей код у файл 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>
';
} );
Відображення зареєстрованих розмірів у WP Admin
Ідеально мати доступ до цього списку на панелі адміністратора Вордпрес. Таким чином, якщо ви коли-небудь увімкнете новий плагін або зміните тему, зможете швидко перевірити, чи визначаються нові розміри зображень.
Наступний фрагмент коду відобразить таблицю всіх певних значень у нижній частині Settings > Mediaпанелі:
// 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 );
Технічно тут визначається новий розділ налаштувань за допомогою цього коду, але насправді не реєструємо жодних налаштувань. Натомість встановлюємо зворотний виклик для нашого розділу, щоб повернути таблицю, яка циклічно проходить та відображає всі зареєстровані варіанти.
Скріншот кінцевого результату:
Цей приклад взято з теми Total, де зареєстровані за промовчанням значення встановлені на 9999×9999, що дуже багато, тому вони ніколи не будуть обрізані за промовчанням.
Як заборонити WordPress створювати картинки додаткових розмірів
Немає можливості просто перевірити в адміністраторі WP, тому для того, щоб зупинити WordPress від створення обрізаних версій, потрібно буде використовувати невеликий код. На щастя, це можна зробити за допомогою одного рядка коду!
// Return false for calculated resized image dimensions add_filter( 'image_resize_dimensions', '__return_false' );
Щоб зрозуміти, як працює цей код, розглянемо основну image_resize_dimensions()функцію. Вона досить довга, тож не будемо її тут публікувати.
По суті, щоразу, коли WordPress збирається створити новий розмір, він використовує цю функцію для повернення розрахованих значень, які потім передає класу WP_Image_Editor. Приєднання до image_resize_dimensionsфільтру та повернення false змусить функцію вийти заздалегідь, тому ніякі обчислення не будуть виконані, і зрештою ніяке додаткове зображення не буде згенеровано.
Оптимізований фрагмент коду
Попередній фрагмент не дозволить WordPress обрізати будь-яке зображення за запитом нового розміру. Це буде працювати незалежно від того, коли запитується розмір картинки.
Однак ми можемо оптимізувати наш код, підключившись до intermediate_image_sizes_advancedфільтр, який повертає масив значень, автоматично згенерований при завантаженні картинки.
// Return an empty list of image sizes to generate on upload add_filter( 'intermediate_image_sizes_advanced', '__return_empty_array' );
Повертаючи порожній масив для фільтра, ми даємо WP знати, що не повинно бути жодних додаткових варіантів, згенерованих під час завантаження нової картинки на сайт. Тепер при завантаженні на сайт на сервер буде додано лише вихідне зображення.
Ось обидва фрагменти разом:
// 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()функцію.
Плагін WP Disable All Image Sizes
Ми також помістили фрагмент коду в невеликий плагін, якщо ви захочете просто завантажити та встановити його замість ручної вставки коду. Цей плагін ніколи не повинен вимагати жодних оновлень, а процес перевірки плагіна WordPress - це кошмар, тому поки ми просто залишимо його на Github: плагін WP Disable all Image Sizes Repository Github.
Плагін робитиме 3 речі:
- Вимикати поріг великого розміру.
- Повертатиме false для фільтра image_resize_dimensions.
- Повертайте порожній масив для фільтра intermediate_image_sizes_advanced.
Що робити, якщо додаткові розміри все одно створюються?
Якщо додавши фрагмент коду на сайт, ви виявили, що при завантаженні картинок їх варіації, як і раніше, генеруються, то доведеться відключити по черзі плагіни та/або тему, щоб знайти винуватця.
Як згадувалося раніше, можливо, на сайті є рішення для обрізання картинок «на льоту», яке не використовує основні функції WP, і тому основні фільтри не будуть на нього впливати.
Як виключити під час завантаження певні розміри зображень
У випадку, коли не потрібно запобігати генерації всіх розмірів, можна змінити код, щоб виключити лише певні значення, наприклад:
// 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.
Ми включили в сніпет мініатюру, середній і великий розміри. Таким чином, навіть якщо хтось зіпсує налаштування в адмінці ці варіанти будуть виключені.
Поради щодо зменшення необхідності зміни розміру зображень
На початку статті вказані деякі причини, з яких WordPress створює ДРІ. Враховуючи їх, ось кілька порад, які допоможуть вам не створювати зайвих проблем, якщо ви плануєте відключити додаткові розміри зображень.
- Не завантажуйте величезні зображення: переконайтеся, що не завантажуєте величезні картинки на сайт Якщо у вас немає контролю над цим, переконайтеся, що не видаляєте поріг великих зображень і змиріться з тим, що сайт створюватиме масштабовані зображення при необхідності.
- Завантажуйте «досить великі» зображення: важко сказати, наскільки великим є досить великий розмір, оскільки це залежить від сайту та контексту, в якому додається картинка. Але ви хочете, щоб ваші картинки були досить великими, щоб вони добре виглядали на екранах з високою роздільною здатністю, і в той же час досить маленькими (кілобайт), щоб не сповільнювати завантаження сайту.
- Оптимізуйте їх перед завантаженням: існує безліч відмінних плагінів для оптимізації, але навіщо роздмухувати свій сайт і споживати ресурси сервера, якщо можна оптимізувати все перед завантаженням. Як альтернативу плагінам можна використовувати tinypng.com та конвертувати файли у формат webP перед завантаженням.
- Використовуйте співвідношення сторін: одна з головних причин створення розмірів зображень - збереження одноманітного вигляду у всіх постах. Оскільки усі вибрані зображення будуть обрізані до однакових параметрів. Замість цього можна використовувати параметри CSS aspects-ratio.
Як видалити старі розміри картинок із сервера
Додавання коду для запобігання створенню ДРІ WordPress вплине лише на нещодавно завантажені. На сервері можуть бути тонни старих обрізаних картинок, які також потрібно очистити.
Існує кілька методів видалення старих зображень, і багато блогів рекомендують використовувати CLI (термінал) - проте WordPress зберігає розміри метаданих вкладень, тому не рекомендуємо це рішення.
Найпростіший спосіб - це використовувати плагіна Force Регенерація Мініатюри. Сто дуже зручно, що можна увімкнути плагін, запустити процес, а потім видалити його із сайту.
Плагін працює, проходячи по кожному прикріпленому зображенню на сайті, витягуючи його певні розміри з метаданих та видаляючи їх усі. Після їх видалення він запускає основну wp_generate_attachment_metadata()функцію, яка знову створить проміжні розміри зображення для прикріплення. Таким чином, якщо ви відключили ДРІ за допомогою попереднього коду, зображення не будуть згенеровані.
Плагін Force Regenerate Thumbnails проходитиме по кожному зображенню за раз, і якщо виникнуть якісь проблеми, він запише їх у журнал і відобразить. А також покаже, які картинки були видалені та згенеровані, що дуже чудово!
Ми вважаємо, що відключення всіх ДРІ є найкращим для більшості веб-сайтів. Це гарантує, що місце на сервері не буде зайнято зображеннями (багато хто з яких ніколи не буде використовуватися) і, у свою чергу, значно скоротить розмір резервних копій. Також може бути аргумент на користь SEO: наявність множини однакових зображень різного розміру може викликати проблеми.
Джерело: wpexplorer.com
Коментарі до запису: 0