Оптимальные размеры изображений WordPress для быстрых веб-сайтов

Помимо стандартных размеров изображений, система управления контентом WordPress предлагает возможность использования индивидуальных форматов изображений. Мы представляем важные шаги по настройке размеров изображений на основе WordPress 6.0.3.

Стандартные размеры изображений в WordPress

Размер файла изображений, встроенных в веб-сайт, оказывает большое влияние на скорость его загрузки. Оптимальные форматы изображений сокращают время загрузки и снижают нагрузку на хранилище на сервере. CMS WordPress предлагает набор стандартизированных размеров изображений на сервере при загрузке мультимедиа.

Размеры изображений WordPress по умолчанию	Размеры (Ш x В) в пикселях	Соотношение сторон
Миниатюры	150х150	можно деактивировать
Средний размер	300×300	остается сохраненным
Большой	1024×1024	остается сохраненным
Исходное изображение	как загружено	остается сохраненным

Сохраняйте и изменяйте размер изображений WordPress в серверной части

Эти размеры изображений определяются в настройках WordPress и могут быть настроены там в определенных пределах. Для этого перейдите в «Настройки» > «Медиа» в админке.

В панели управления WordPress вы можете индивидуально настроить предустановленные стандартные размеры изображений.

После загрузки мультимедиа в медиатеке появляются дополнительные файлы. Каталог для этого — https://mydomain. de/wp-content/uploads/ или https://mydomain. de/wp-content/uploads/2022/11/ (с активированными папками по месяцам и годам). Например, изображение доступно в следующих файлах:

• образец изображения-1024×683.jpg
• образец изображения-150×150.jpg
• образец изображения-1536×1024.jpg
• образец изображения-2048×1365.jpg
• образец изображения-300×200.jpg
• образец изображения-620×413.jpg
• образец изображения-scaled.jpg (2560×1707 пикселей)
• образец изображения.jpg (оригинал)

Это означает, что оптимальные размеры изображений доступны для большинства страниц или сообщений WordPress. Изображения для загрузки в медиатеку не должны быть больше 1920 пикселей по длинной стороне изображения. Их можно уменьшить до необходимого размера с помощью бесплатных программ редактирования изображений перед загрузкой. Взглянув на распространенные форматы изображений, вы также сможете с самого начала избежать неприятных сюрпризов. Это относится, например, к формату изображений WebP, который изначально поддерживается не всеми браузерами.

Для использования в темах WordPress установлены рекомендуемые размеры изображений :

Размеры изображений WordPress	Размеры (Ш x В) в пикселях
Логотипы	200х100
Миниатюры	150х150
Обои	1920×1080
Публикуйте изображения в портретном формате.	900×1200
Публикуйте изображения в альбомном формате.	1200×900
Изображения заголовков (баннеры)	1048×250
Изображения слайдера (в зависимости от темы)	до 1920 x примерно 600

Обзор часто используемых размеров изображений для веб-сайтов WordPress. Источник фото: ESB Professional/shutterstock.com

Конкретные требуемые размеры изображения зависят от компонентов и структуры темы WordPress. Их можно найти в документации соответствующей темы.

Настройте размеры изображений в библиотеке WordPress

Размеры изображений также можно настроить в медиатеке WordPress: помимо изменения исходных размеров изображения возможны обрезка, поворот и зеркальное отображение. Например, чтобы создать фотографию слайдера из изображения большего размера в библиотеке, выполните следующие действия:

Шаг 1. Выберите изображение в медиатеке и нажмите «Редактировать изображение».

Выберите изображение из библиотеки WordPress, чтобы настроить его размер. Источник фото: ESB Professional/shutterstock.com

Шаг 2. Установите метод и размер редактирования.

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

Здесь следует отметить, что кнопку «Обрезать» необходимо использовать дважды: один раз для активации функции, а затем второй раз после установки размеров изображения для выполнения операции.

Шаг 3. Сохраните изображение в медиатеке.

«Сохранить» сохраняет изображение в настроенном размере в библиотеке WordPress.

После сохранения обрезанного изображения файл окажется в папке загрузки.

• образец изображения-scaled-e1667121439976.jpg

Еще в пяти форматах с автоматически присвоенным идентификатором… -e1667121439976. Размеры вновь созданных изображений можно выбрать из медиа-библиотеки редактора Gutenberg при их вставке или замене. Там же доступны размеры изображения в пикселях.

Настройте размер изображения при вставке в контент WordPress

В контенте используются изображения из медиа-библиотеки WordPress. Размеры также можно впоследствии корректировать в широких пределах. Редактор WordPress Gutenberg предлагает значительно более широкие возможности, чем классический редактор TinyMCE.

Настройки блока изображений Гутенберга и панель инструментов позволяют максимально настроить изображение при вставке его в сообщение или на страницу. Альтернативный текст (!) обеспечивает доступность. Источник использованного изображения: ESB Professional/shutterstock.com.

Если вы хотите сохранить свои индивидуальные настройки для последующего повторного использования, вы можете использовать блок Гутенберга для «Добавить в повторно используемые блоки», а также заблокировать его от непреднамеренных изменений — огромная рабочая нагрузка, если вы часто публикуете новые сообщения.

Для страниц, посвященных конкретным заданиям, например. B. веб-сайт фотографа, для идеального представления творчества могут потребоваться дополнительные форматы изображений. Наше руководство » Сжатие изображений » предоставляет дополнительную помощь по настройке размеров изображений, например. B. для плагинов галереи WordPress.

Отключить размеры изображений WordPress по умолчанию

Самый простой способ отключить предустановленные размеры изображений — использовать плагин «Disable Media Sizes». Все семь сгенерированных форматов изображений также перечислены в его настройках.

Плагин «Отключить размеры мультимедиа» позволяет предотвратить создание предустановленных размеров изображений WordPress.

При показанных настройках плагина невыбранные форматы даже не создаются. Загрузку исходного изображения нельзя «отключить». Это преимущество, если вы захотите позже создать другие форматы.

Дальнейшая оптимизация изображений для WordPress с помощью плагинов.

На практике изображения в основном используются в форматах JPG и PNG. Размеры файлов этих форматов изображений можно дополнительно настроить с помощью программ редактирования изображений. В фотошопе есть запрос качества при сохранении или экспорте. Недостаток этого метода: каждое изображение нужно «трогать» индивидуально, а затем загружать. Плагины — более элегантное решение. Они часто имеют широкий набор функций, поэтому желательно внимательно изучить документацию используемого плагина.

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

• EWWW Image Optimizer: поддерживает форматы: JPG, PNG, GIF, PDF, WebP, SVG.
• TinyPNG: поддержка JPG, PNG, WebP.
• Imagify: поддержка JPG, PNG, PDF, GIF, WebP.
• Восстановить миниатюры: не обновлялось уже довольно давно.
• Регенерация изображения и выбор обрезки: то же самое

Прежде чем опробовать плагины, помните: резервная копия WordPress защищает от потери данных, если что-то действительно пойдет не так.

Вывод: оптимизируйте размеры изображений WordPress

Многие оптимальные размеры изображений могут быть достигнуты с помощью встроенных инструментов WordPress. Более обширные возможности доступны с плагинами. Вмешательство в PHP-код сайта WordPress должно быть разрешено только профессионалам в области программирования. И последнее, но не менее важное: следите за SEO изображений при оптимизации.