Всякий раз, когда вы загружаете изображение на свой сайт WordPress через медиатеку, он автоматически создает и сохраняет несколько дополнительных версий этого изображения. Если сайт не использует эти дополнительные размеры изображений (ДРИ), они будут занимать ценное дисковое пространство и увеличивать объем резервных копий.
В этом руководстве мы расскажем о размерах изображений по умолчанию, объясним, почему они генерируются таким образом. Также покажем, как определить ДРИ, и предоставим фрагмент кода, который не позволит WordPress создавать ненужные файлы.
Размеры изображений по умолчанию в WordPress
В таблице представлены все используемые варианты по умолчанию в WordPress:
| Name | Размер по умолчанию | Описание |
|---|---|---|
| thumbnail | 150×150 | Миниатюры определяется пользователем. |
| medium | 300×300 | Средний объем, определяемый пользователем. |
| medium_large | 768×0 | Для адаптивных и HDPI-дисплеев. |
| large | 1024×1024 | Большой размер, определяемый пользователем. |
| 1536×1536 | 1536×1536 | Для дисплеев Retina/HDPI. |
| 2048×2048 | 2048×2048 | Для больших дисплеев с высоким разрешением. |
| -scaled | ~2560 | Если исходное загруженное изображение превышает пороговое значение, WordPress создает эту масштабированную версию. |
| full | – | Оригинальное или масштабированное изображение. |
Как видите, их довольно много!
Это означает, что каждый раз, когда на сайт 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 Regenerate Thumbnails. Сто очень удобно, что можно включить плагин, запустить процесс, а затем удалить его с сайта.
Плагин работает, проходя по каждому прикрепленному изображению на сайте, извлекая его определенные размеры из метаданных и удаляя их все. После их удаления он запускает основную wp_generate_attachment_metadata()функцию, которая заново создаст промежуточные размеры изображения для прикрепления. Таким образом, если вы отключили ДРИ с помощью предыдущего кода, картинки не будут сгенерированы.
Плагин Force Regenerate Thumbnails будет проходить по каждому изображению за раз, и если возникнут какие-либо проблемы, он запишет их в журнал и отобразит. А также покажет, какие картинки были удалены и сгенерированы, что очень здорово!
Мы считаем, что отключение всех ДРИ является лучшим для большинства веб-сайтов. Это гарантирует, что место на сервере не будет занято изображениями (многие из которых никогда не будут использоваться) и, в свою очередь, значительно сократит размер резервных копий. Также может быть аргумент в пользу SEO: наличие множества одинаковых изображений разного размера может вызвать проблемы.
Источник: wpexplorer.com
Комментарии к записи: 0