Настройте подходящий размер изображений wordpress

Размеры изображений в WordPress — как изменить, добавить свои и удалить лишние

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

Оптимальный размер изображений напрямую зависит от того, в каком месте оно будет размещено. Допустим, вы подбираете на сайт красивую графику и выполнили поиск по картинке в интернете, а затем хотите загрузить ее на свой веб-проект. При этом изображения в шапке должно быть максимально качественное и большое, тогда как к миниатюрам требования куда более скромные – для превьюшек не обязательно использовать крупные фото. Более того, если на странице у вас будет много больших тяжелых медиафайлов, то это значительно замедлит ее загрузку.

Логика работы системы WordPress с размерами изображений

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

• Миниатюры (Thumbnail) — квадрат 150x150px;
• Средний (Medium) – с максимальным значением ширины/высоты 300px;
• Большой размер (Large) — 1024px максимум по высоте/ширине;
• Полный оригинальный размер загруженного вами файла.

Сразу после загрузки файла через админку в Медиабиблиотеку, система создаст несколько его копий на хостинге в соответствующих размерах. Если зайдете в папку /wp-content/uploads то сможете их увидеть:

Здесь для оригинального файла menu-account2.jpg созданы еще 3 новых JPG. Причем, если посмотреть на первый скриншот, то увидите, что для превью у меня включен параметр “обрезать миниатюру”, поэтому итоговая картинка получится квадратной. В то же время для средних/больших пропорции сохраняются, а один из размеров (ширина/высота) будет фиксированный, а второй нет.

В другом своем сайте с более новой версией WordPress, я обнаружил, что файлов создается еще больше:

Дело в том, что в WordPress 4.4 к базовым параметрам добавили значение “medium_large” для лучшей адаптивности и совместимости с другими устройствами. Плюс в коде media.php из папки wp-includes можно найти еще 2 значения (на скриншоте видим только 2xmedium_large, т.к. загружаемый файл был меньше 2000px):

Вообще этих копий на FTP можно встретить и больше, т.к. помимо самой системы новые форматы могут добавлять и разработчики шаблонов. Либо, когда картинка достаточно маленькая изначально, то большой формат не будет создан.

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

Как изменить базовые размеры и добавить свои

Если по каким-то причинам вас не устраивают стандартные параметры или вы, например, поменяли тему на другую, то внести правки достаточно легко. Переходите в админке сайта в раздел “Настройки” – “Медиафайлы” и указываете там свои значения.

В конце не забудьте сохранить изменения.

Регистрируем новый параметр

А что делать, когда вы хотите добавить в шаблон какую-то новую уникальную величину фоток, например, для галереи, виджетов, баннеров и т.п.?

Для этого используем функцию add_image_size, которая добавляется в файл functions.php. Ее синтаксис следующий:

add_image_size( name, width, height, crop );

• имя нового параметра размера картинки;
• ширина;
• высота;
• опция обрезать изображение или нет (по умолчанию false).

Например пишете что-то в стиле:

add_image_size( ‘our-new-size’, 400, 200 );

Если нужно четкое соответствие размеру, то указываем “true” для последнего параметра:

add_image_size( ‘our-new-size’, 400, 200, true );

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

add_image_size( ‘our-new-size’, 400, 200, array( ‘right’, ‘top’ ) );

Доступные значения для массива crop: center, top bottom, left, right.

Дополнительные нюансы

1. В названиях нельзя использовать стандартные имена: large, medium, thumbnail, thumb и post-thumbnail.

2. Если будете создавать свой шаблон для WP каталога тем, то в параметре используется имя темы + название, что-то вроде: newtheme-smallimg.

3. Теоретически пример выше можно записать и с проверкой для лучше совметимости:

if ( function_exists( ‘add_image_size’ ) )

4. Чтобы использовать какой-то размер для миниатюры необходимо его добавить с помощью функции:

Для вывода нового типа картинок в качестве миниатюр пишете:

Как удалить лишние размеры

Как вы уже поняли из скриншотов, в системе генерируется от 4 и более файлов на хостинге только дня одной(!) картинки. Думаю, в среднем их число может быть около 5-6 файлов (даже на стандартных шаблонах). Все это занимает лишнее место на диске. Если у вас сайт богат на разную графику + тариф хостинга имеет определенные ограничения, то лучше ненужные объекты удалять.

Вот как можно избавиться от стандартных размеров – пишете в functions.php код:

В сети находиле еще такой код, но, думаю, первый более логичный:

update_option( ‘thumbnail_size_h’, 0 ); update_option( ‘thumbnail_size_w’, 0 ); update_option( ‘medium_size_h’, 0 ); update_option( ‘medium_size_w’, 0 ); update_option( ‘large_size_h’, 0 ); update_option( ‘large_size_w’, 0 );

Внимание! Если верхние 2 варианта не помогают (у меня для дочерней темы не получилось), то попробуйте этот альтернативный подход. Он позволяет удалить размеры, добавленные в установленном шаблоне, но и с дефолтными тоже хорошо справляется:

Здесь “post-thumbnail” и “our-new-size” – это имена новых параметров размеров, которые хотите убрать.

Плагин Regenerate Thumbnails

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

Скачиваете/устанавливаете плагин Regenerate Thumbnails. После этого найдете одноименный пункт меню в разделе админки “Инструменты”

Тут, кстати, вы можете видеть все доступные и зарегистрированные на вашем сайте размеры медиафайлов. Это позволяет легко понять сколько их всего и какие можно удалить.

На выбор у вас будет несколько опций, с помощью которых можно:

• пропустить миниатюры, что уже существуют и соответствуют вашим новым правилам размеров (нет смысла создавать их повторно);
• удалить не используемые файлы – в этом случае следует действовать очень аккуратно, т.к. если в проекте или шаблоне должны выводиться изображения, которые собираетесь удалить, то это приведет к ошибкам;
• пересоздать миниатюры для всех объектов или только тех, что добавлены в записи/посты.

Лично я перед запуском модуля рекомендовал бы делать бекап, то есть скопировать все прошлые файлы на локальный компьютер. Если очистка FTP пройдет успешно и на веб-сайте не вылезет никаких ошибок, то этот бекап можно будет удалить.

Все дополнения/уточнения по теме размеров картинок в WordPress пишите нише.

Источник

Размеры изображений

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

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

Что такое размеры изображений и для чего они нужны?

Допустим, вы загрузили изображение на свой сайт. Где и как оно может использоваться? Некоторые из вариантов:

• Непосредственно в контенте ваших постов,
• А что, если вы используете какую-нибудь галерею-лайтбокс, когда у вас открывается полная версия изображения во всплывающем окне при клике на него?
• В качестве миниатюр на страницах архивов, например в рубрках, тегах, блоге.
• В виджетах, например «Популярные записи», «Распродажа» (если у вас интернет-магазин например) и т.д.,
• Да даже в админке можно сделать, чтобы посты или рубрики отображались с превьюшками!

В общем существует множество различных вариантов использования одного и того же изображения на сайте. Согласитесь, если во всех этих местах картинка будет одного и того же размера, да ещё и под несколько мегабайт, то это будет очень странно и тупо. Именно поэтому при загрузке изображения на сайт WordPress автоматически создаёт разные его копии (заранее зарегистрированные или указанные в настройках) и вы можете использовать эти копии там, где уместно. Например для админки это может быть копия изображения размером 100х100 пикселей.

Конечно, с дополнительными размерами изображений тоже лучше не злоупотреблять, ведь, чем их больше:

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

Возможно вас может забеспокоить тот факт – ну как же так, WordPress генерирует столько копий, зачееем. Но а какие ещё есть варианты? До того, как появился этот функционал, помню мы использовали PHP-скрипт, в который передавался URL изображения и размеры, которые нужно создать – явно так себе вариантик.

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

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

Вы должны кое-что знать про эти три размера: все загруженные вами изображения будут вписаны в те параметры высоты и ширины, которые указаны в админке (скриншот выше), исключение — миниатюры — если в настройках стоит галочка (снова смотрим скриншот), то миниатюры будут строго указанного размера.

Например, вы загрузили на сайт фотографию 1024х765, у вас в итоге получатся следующие копии: крупный — 1024х765, средний — 300х224, миниатюра — 150х150. Ну в общем думаю механизм понятен.

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

Идентификатор размера	Описание
thumbnail	Миниатюра, доступна в настройках медиафайлов.
medium	Средний размер, доступен в настройках медиафайлов.
large	Крупный размер, доступен в настройках медиафайлов.
medium_large	Этот размер изображений появился в версии WordPress 4.4 вместе с функцией адаптивных изображений, по умолчанию имеет фиксированную ширину 768 и пропорциональную высоту.
1536×1536 и 2048×2048	Эти два размера появились в версии WordPress 5.3 вместе с функцией оптимизацией больших изображений, видимо потому, что пользователи продолжали вставлять в контент своих сайтов картинки по 10-20МБ.
full	Оригинал изображений.

Как отключить и удалить стандартные размеры изображений?

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

Отключение в админке

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

На случай, если вам интересно, эти опции в базе данных имеют следующие ключи: thumbnail_size_h , thumbnail_size_w , medium_size_h , medium_size_w , large_size_h , large_size_w

Но помимо этого, все размеры изображений вы можете отключить и через код.

Отключение в коде

В этом случае всё свободится к использованию фильтра intermediate_image_sizes_advanced :

Если вы не знаете, куда вставлять код, читайте этот урок.

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

Удаление ненужных копий из папки uploads

После вставки этого кода или обновления настроек копии новых изображений с этими размерами не будут создаваться при загрузке. Однако нам как-то нужно избавиться и от старых изображений, которые уже лежат в нашей папке uploads . Для того рекомендую поставить какой-нибудь плагин, который позволит пересоздать все уже существующие копии изображений на сайте и удалить те, которые мы отключили. Мне например для этой цели нравится плагин «Force Regenerate Thumbnails».

Как вы можете заметить, был удалён размер изображения 270х190 (видимо он и был отключен), остальные же размеры рефрешнулись, что может быть полезно кстати, если мы не отключаем размер, а только изменяем его параметры ширины и высоты.

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

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

Тем не менее коротко об этом расскажу ниже.

В админке

Если мы говорим о добавлении изображений в контент поста в Gutenberg, то настройки размера изображения находятся в сайдбаре справа – там же, где и настройки любого другого блока.

Фотография с Эльбруса сделана мной на iPhone 7 🏂

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

В коде

В WordPress есть различные функции для работы с изображениями в коде. Для вывода изображений я например чаще всего пользуюсь функциями get_the_post_thumbnail(), the_post_thumbnail(), wp_get_attachment_image_src().

Большинство из них имеет параметр $size , в котором вы можете задать название размера. Чуть выше я уже перечислял названия стандартных размеров.

Вот пример вывода миниатюры (большого размера) текущего поста в цикле

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

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

1. Регистрация размера функцией add_image_size()

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

Это можно сделать при помощи функции add_image_size() и вот такого например кода:

В целом эту функцию рекомендуют добавлять на хук after_setup_theme , и я решил так и поступить. Но я кстати не замечал никаких проблем и при использовании этой функции напрямую без хука.

• Первый параметр функции – идентификатор размера.
• Второй – ширина в пикселях.
• Третий – высота в пикселях.
• Четвёртый параметр – как обрезать или не обрезать. Подробнее про этот параметр здесь.

2. Добавление размера в медиазагрузчик и в Gutenberg

Как я уже говорил выше, этот шаг необязательный. Но легко осуществимый – для этих целей нам всего лишь понадобится фильтр-хук image_size_names_choose .

Кстати, важный момент – размер конкретного изображения не появится в выпадающем списке, если не существует копии этого изображения этого размера. Возможно потребуется пересоздать размеры.

Также благодаря хуку image_size_names_choose размер изображения появится и в Gutenberg:

Как обновить изображения при изменении их размеров или смене темы

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

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

Что делать в этой ситуации? Если на вашем сайте 2-3 картинки, вы конечно можете их просто перезагрузить. А если 2-3 тысячи? Не перезагружать же все картинки по-новой?

Могу порекомендовать вам два классных плагина, которые использовал сам:

1. «Ajax Thumbnail Rebuild» – хорош тем, что позволяет выбрать только определённые размеры изображений, которые вы хотите пересоздать. Или же вообще только миниатюры записей. Внушительно сэкономит время обновления изображений, особенно если у вас там десятки тысяч копий.
2. «Force Regenerate Thumbnails» – подходит к процессу более глобально – полностью удаляет и пересоздаёт заново копии для всех зарегистрированных размеров изображений.

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

Пример работы плагина «Force regenerate Thumbnails»

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

Давайте сначала я опишу задачу, с которой мне пришлось столкнуться.

Итак, на сайте имеется 10 зарегистрированных типов постов, при этом для каждого из них в шаблоне задействовано по 2-3 размера. Нетрудно перемножить эти числа, чтобы понять, что при загрузке любой фотки на сайт у нас создается по 20-30 копий!

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

Также рекомендую свой видеокурс по созданию темы WordPress на основе готовой вёрстки.

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!

Источник