Как ограничить ширину и высоту загрузки изображений в WordPress?

Картинка стоит тысячи слов — вы можете легко объяснить длинную концепцию, используя одно изображение. WordPress также упрощает загрузку изображений на ваш сайт. Но многие люди не знают, что WordPress автоматически ограничивает размеры больших изображений определенным размером. Однако вы также можете вручную ограничить ширину и пропорциональную высоту изображения, чтобы сэкономить место на сервере и сократить время загрузки страницы.

Поведение WordPress по умолчанию

Прежде чем продолжить, важно понять поведение WordPress по умолчанию. Давайте загрузим большое изображение исходного размера 2500 x 2000 пикселей через раздел Медиатека. Размер загруженного изображения составляет 2500 x 1536 пикселей, что означает ширину 2500 пикселей и высоту 1536 пикселей. Как видите, ширина сохраняется, а высота ограничена 1536 пикселями.

Опять же, давайте загрузим изображение размером 5000 x 3000 пикселей. На этот раз вы обнаружите, что WordPress ограничивает ширину и высоту до 2560 x 1536 пикселей.

Итак, если вы не изменили поведение по умолчанию, WordPress масштабирует большое изображение до размера 2560 x 1536 пикселей. Эта функция была представлена в WordPress версии 5.3, как описано в разделе эта документация.

Ограничить максимальную ширину изображения

Если поведение по умолчанию вам не подходит, вы можете использовать дополнительные плагины для ограничения ширины.

Войдите в панель администратора WordPress.
Перейдите в раздел «Плагины > Добавить новый плагин».
Найдите «оптимизатор скорости» и отфильтруйте плагин Speed Optimizer.
Нажмите кнопку «Установить сейчас», а затем кнопку «Активировать».

Установите плагин оптимизатора скорости

Перейдите в раздел «Оптимизатор скорости > Медиа».
Прокрутите вниз и щелкните раскрывающийся список напротив параметра «Максимальная ширина изображения» под заголовком «Оптимизация мультимедиа».

Выберите максимальный размер

Выберите один из доступных вариантов ширины — 2560 пикселей, 2048 пикселей или 1920 пикселей. Вы можете выбрать 1920 пикселей, чего более чем достаточно для обычного использования.
Изменения будут мгновенно сохранены, и ограничение на загрузку изображений шириной 1920 пикселей вступит в силу немедленно.

Теперь загрузите изображение размером 2500 x 2000 пикселей через раздел «Медиа > Добавить новый медиафайл». Загруженное изображение будет иметь размер 1920 x 1536 пикселей. Это связано с тем, что плагин ограничивает ширину до 1920 пикселей, а WordPress по умолчанию ограничивает высоту до 1536 пикселей.

Проверка размера загруженного изображения

Полностью ограничить загрузку по размеру высоты и ширины

Многие плагины работают по вышеуказанной логике, комбинируя настройки WordPress + плагина, что может сбить с толку обычного пользователя. Если вы хотите просто запретить загрузку изображений, размер которых превышает определенный размер, вы можете использовать для этой цели плагин ThumbPress.

Перейдите в раздел «Плагины > Добавить новый плагин» в панели администратора WordPress.
Найдите плагин ThumbPress по запросу «thumbpress».
Установите плагин и активируйте его на своем сайте.

Установите плагин ThumbPress

Плагин предложит вам запустить мастер установки и нажать кнопку «Запустить мастер установки».

Запустите мастер установки

Включите опцию «Ограничение загрузки изображений» на этапе «Настройки».

Включите ограничение на загрузку изображений в мастере

Альтернативно перейдите в меню «ThumbPress > Модули» и активируйте модуль «Ограничение загрузки изображений».

Модуль ограничения загрузки изображений

Теперь вы увидите дополнительный пункт под названием «Лимит загрузки изображений» в разделе «Модули» и перейдете в этот раздел.
Установите максимальный размер в КБ, максимальную ширину в пикселях и максимальную высоту в пикселях.
Нажмите кнопку «Сохранить настройки».

Установить ограничение размера, ширины и высоты

Перейдите в раздел «Медиа > Добавить новый медиафайл» и загрузите изображение, размер которого превышает размер, установленный на странице настроек плагина. Вы увидите, что загрузка не удалась, и от плагина появится предупреждающее сообщение о том, что изображение превысило максимально допустимое разрешение.

Размер загрузки ограничен ThumbPress

Примечание: Вы также можете загрузить изображение прямо в редакторе поста, используя «Изображение» или любой другой медиаблок. Вы увидите ту же ошибку загрузки изображения, как показано ниже:

Загрузка с ограничениями в редакторе сообщений

Другие моменты, которые следует учитывать

Если у вас нет сайта с фотографиями или портфолио, вам следует рассмотреть возможность ограничения размеров изображения. Плагины, такие как ThumbPress, также помогают обойти ограничения WordPress и позволяют устанавливать любую ширину/высоту.
Если вы видите проблему накопительного смещения макета (CLS) в Google PageSpeed Insights, вам следует добавить атрибуты измерения ширины/высоты во все теги . Вы можете сделать это автоматически, используя такие плагины, как WP Rocket of Perfmatters.