Руководство для начинающих по размерам изображений WordPress (+ лучшие практики)

Откройте для себя основы изменения размера изображений в WordPress в этом простом руководстве для начинающих. Узнайте, как WordPress автоматически создает миниатюры, средние и большие версии изображений, почему эти размеры имеют значение для внешнего вида и производительности вашего сайта и как WP Media Folder может помочь вам оставаться организованным.

 Это руководство объясняет стандартные размеры изображений WordPress (миниатюра, средний, большой), почему они существуют и как настроить их для вашей темы. Мы также сможем увидеть, как плагин WP Media Folder может помочь управлять вашими изображениями. Если вы не технический специалист, это будет легко понять. Но вы узнаете точно, как WordPress обрабатывает размеры изображений и как их настроить.

Обзор размеров изображений по умолчанию в WordPress

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

• Миниатюра: квадратная версия 150 × 150 пикселей. Часто используется в списках предварительного просмотра блога, виджетах и галереях.
• Средний: версия масштабируется так, чтобы самая длинная сторона была 300 пикселей. Если ваше изображение выше, чем ширина, оно может быть высотой 300 и меньшей шириной, или наоборот.
• Большой: версия, где самая длинная сторона составляет 1024 пикселя. Хорошо подходит для полноширинных избранных изображений или заголовков блог-постов.
• Полный: точный файл, который вы загрузили, без изменений.

WordPress выбирает оптимальный размер для доставки в зависимости от того, где отображается изображение. Маленькая миниатюра в списке постов доставляется размером 150 × 150; баннер с изображением может использовать максимальный размер 1024px. Эта система оптимизирует скорость загрузки, использование полосы пропускания и внешний вид на разных устройствах и размерах экрана.

Почему WordPress генерирует эти размеры автоматически

• Чтобы изображения правильно вписывались в области дизайна (т. е. не были увеличены или размыты).
• Чтобы уменьшить размер файла и улучшить производительность загрузки страницы, особенно на мобильных устройствах
• Чтобы упростить рабочий процесс для создателей контента — не требуется ручное изменение размера.

Если загруженное изображение меньше размера, который генерирует WordPress (например, фотография шириной 800 пикселей), WordPress создаст размеры только до размеров, которые поддерживает изображение — так что большой размер не превысит исходный размер.

Лучшие практики использования размеров изображений по умолчанию

Вот некоторые общие случаи использования для каждого размера по умолчанию:

Миниатюры

Используйте для галерейных сеток, предварительных просмотров блог-постов, виджетов или списков боковой панели. Не используйте размер миниатюры для большой области отображения; он будет отображаться пикселированно.

Для этого примера мы использовали галерею, созданную с помощью WP Media folder.

Средний

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

Большой размер

Используйте для полноразмерных изображений, главных заголовков, слайдеров или полноэкранных секций. Избегайте использования полноразмерных оригиналов, если это не абсолютно необходимо (например, высококачественные фотографии), поскольку они могут быть громоздкими и замедлять загрузку страницы.

Загрузка очень больших исходных файлов (например, тысяч пикселей в ширину или высокое разрешение изображений TIFF или PNG) не рекомендуется. Они занимают больше места на диске и могут замедлить ваш сайт или сервер обработки медиа. В идеале, загружайте изображения, измененные примерно до максимальной ширины отображения вашей темы (например, 1200 пикселей в ширину, если область контента составляет 1200 пикселей).

Как настроить размеры изображений для вашей темы

По умолчанию WordPress использует размеры в Настройки > Медиафайлы, но вы можете адаптировать эти размеры или добавить новые для требований вашей темы.

Изменение размеров по умолчанию через экраны администратора

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

Однако существующие изображения, уже загруженные, не будут автоматически перегенерированы, вам нужно будет использовать плагин регенерации миниатюр, если вы измените размеры позже.

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

ВАЖНОЕ ПРИМЕЧАНИЕ: Вы не должны применять какой-либо пользовательский код без предварительного создания резервной копии.

Чтобы зарегистрировать новые размеры изображений помимо миниатюр/средних/больших, вы можете добавить код в файл functions.php вашей темы или в пользовательский плагин. Пример:

add_image_size( 'custom-feature', 800, 600, true ); 

Это регистрирует новый размер с именем 'custom-feature', шириной 800px, высотой 600px и включенным кадрированием.

Затем вы можете вызвать его в файлах вашей темы:

the_post_thumbnail( 'custom-feature' ); 

Или в Gutenberg вы можете увидеть новый размер в выпадающем списке блока изображения, если ваша тема поддерживает это.

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

Лучшие практики при выборе ваших пользовательских размеров

• Сопоставьте размеры с макетом вашей темы. Например, размер баннера заголовка, размер избранного изображения в публикации или ширина изображения в статье.
• Избегайте изменения размера изображений до размеров, намного превышающих контейнеры — это приводит к бесполезному расходованию дискового пространства и замедлению загрузки.
• Используйте кадрирование, когда вам нужны изображения с постоянным соотношением сторон, например, 16:9 или 4:3. Установите кадрирование в true или false в зависимости от того, предпочтительно ли кадрирование или пропорциональное масштабирование.
• Проверьте вставленные изображения после добавления пользовательских размеров, чтобы убедиться, что они правильно отображаются на настольных компьютерах и мобильных устройствах.

Перегенерация миниатюр

Если вы измените размеры по умолчанию или добавите новые размеры, старые изображения не будут автоматически иметь новые размеры. Используйте плагин вроде «Regenerate Thumbnails» или аналогичный, чтобы регенерировать все размеры изображений для прошлых загрузок. Это гарантирует, что ваша медиатека имеет подходящие размеры, которые WordPress может использовать в различных контекстах.

Сводка лучших практик

• Загружайте изображения, размер которых близок к максимальной ширине отображения вашей темы (например, 1200 пикселей в ширину). Позвольте WordPress создавать меньшие размеры.
• Сохраните размеры по умолчанию: 150px (миниатюра), 300px (средний) и 1024px (большой), если ваша тема не требует других значений. Измените в разделе Настройки > Медиа.
• Добавьте пользовательские размеры с помощью функции add_image_size() в коде вашей темы или плагина для уникальных областей отображения (например, героические баннеры, выделенные блоки).
• После изменения размеров или добавления новых, регенерируйте миниатюры, чтобы WordPress создал эти размеры для старых загрузок.
• Используйте кадрирование, когда требуется постоянное соотношение сторон, или пропорциональное масштабирование, когда вы предпочитаете сохранение исходных пропорций.

Дополнительный совет: имейте в виду WP Media Folder если вам нужна организация на основе папок, улучшенный поиск/фильтр медиа, более простое создание галереи, замена медиа и другие улучшения рабочего процесса. Он работает без проблем с вашей настройкой размеров изображений.

В заключение: Освоение размеров изображений в WordPress для быстрых и красивых сайтов

Понимание размеров изображений WordPress помогает вам отображать правильное изображение в нужном месте. Миниатюра, средний и большой размеры предназначены для баланса качества и производительности. Вы можете настроить эти размеры или добавить новые, чтобы соответствовать макету вашей темы.WP Media Folder добавляет структуру папок, расширенное управление, инструменты замены, водяные знаки и инструменты галереи поверх стандартной медиасистемы WordPress.

Даже если вы не считаете себя техническим специалистом, эти шаги просты: настройте параметры в разделе Медиа, установите плагин регенерации после изменений, при необходимости зарегистрируйте пользовательские размеры в своей теме и используйте WP Media Folder для более эффективной организации медиатеки. Таким образом, ваши изображения выглядят отлично, загружаются быстро и легко управляются.