Объяснение размеров изображений WordPress

Размеры изображений WordPress иногда могут быть загадкой! Вы когда-нибудь видели эту страницу настроек мультимедиа в своей области администратора и задавались вопросом, что это такое?

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

Какова роль размеров изображений в WordPress?

Очень важно, чтобы изображения на вашем сайте выглядели красиво, четко и качественно. Есть несколько элементов, которые будут определять это, включая физический размер изображения (как размеры, так и размер файла) и разрешение изображения. Если ваше изображение слишком велико (например, 10 000 пикселей в ширину) и размер файла слишком велик (т. е. превышает 1 МБ или около того), вы начнете замедлять скорость загрузки вашего сайта. И наоборот, если размер изображения слишком мал, вы, скорее всего, увидите ухудшение качества изображения… другими словами, оно может начать выглядеть размытым или зернистым.

Разместите свой сайт с Pressidium

60- ДНЕВНАЯ ГАРАНТИЯ ВОЗВРАТА ДЕНЕГ

ПОСМОТРЕТЬ НАШИ ПЛАНЫ

WordPress пытается найти баланс, предлагая оптимальный размер изображения в зависимости от его местоположения. Он делает это, создавая изображения 3 разных размеров каждый раз, когда вы загружаете изображение в медиатеку WordPress. Это «Размер миниатюры», «Средний размер» и «Большой размер» с размерами 150×150 пикселей, 300×300 пикселей (максимум) и 1024×1024 пикселей (максимум) соответственно. Наконец, он также будет хранить изображение «Полный размер», которое является исходным размером загруженного изображения.

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

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

Давайте рассмотрим пример, чтобы вы могли точно увидеть, что происходит «за кулисами», когда вы загружаете изображение в WordPress. Для целей этого примера мы собираемся загрузить изображение с именем «post1-feature-image». Он имеет размер 294 КБ и размеры 2089 × 1175 пикселей, и мы собираемся сделать это с активной темой WordPress по умолчанию Twenty Twenty (другие темы могут изменить то, как изображения обрабатываются WordPress).

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

Выделенные красным, вы увидите наши размеры изображений по умолчанию. Миниатюра была обрезана, так как она установлена ​​по умолчанию в настройках мультимедиа.

«Средний размер» и «Большой размер» были изменены таким образом, чтобы избежать изменения фактических пропорций изображения. Вот почему, например, «Средний размер» равен 300×169 вместо 300×300. Остальные сгенерированные изображения являются результатом некоторых основных файлов WordPress и кода темы Twenty Twenty.

Получение технических!

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

WordPress извлекает инструкции из файла с именем media.php, который находится в папке wp-includes/. Перейдите к этой строке 4861, и вы увидите следующее:

 /** * Add additional default image sub-sizes. * * These sizes are meant to enhance the way WordPress displays images on the front-end on larger, * high-density devices. They make it possible to generate more suitable `srcset` and `sizes` attributes * when the users upload large images. * * The sizes can be changed or removed by themes and plugins but that is not recommended. * The size "names" reflect the image dimensions, so changing the sizes would be quite misleading. * * @since 5.3.0 * @access private */ function _wp_add_additional_image_sizes() { // 2x medium_large size. add_image_size( '1536x1536', 1536, 1536 ); // 2x large size. add_image_size( '2048x2048', 2048, 2048 ); }

post1-feature-image-768x432.jpg создается из-за размера «medium_large», который был добавлен в WordPress версии 4.4 для лучшей поддержки отзывчивых изображений и может отображаться на различных портативных устройствах. Он определяется в папке «wp-admin/includes» в строке файла schema.php 522.

 // 4.4.0 'medium_large_size_w' => 768, 'medium_large_size_h' => 0,

и запросил в image.php в строке 86:

 } elseif ( 'medium_large' === $size ) { $max_width = intval( get_option( 'medium_large_size_w' ) ); $max_height = intval( get_option( 'medium_large_size_h' ) );

post1-feature-image-1200x675.jpg и post1-feature-image-1980x1114.jpg генерируются из темы «Twenty Twenty» внутри файла functions.php в строке 53:

 /* * Enable support for Post Thumbnails on posts and pages. * * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ */ add_theme_support( 'post-thumbnails' ); // Set post thumbnail size. set_post_thumbnail_size( 1200, 9999 ); // Add custom image size used in Cover Template. add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );

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

Наконец, изображение размером 1980 пикселей используется для избранного изображения других шаблонов сообщений. Вы можете увидеть это, изменив шаблон тестового поста на «Шаблон обложки». Затем в CSS-инспекторе HTML-элемента изображения обложки мы можем увидеть, как используется этот размер:

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

Удалить ненужные размеры изображений WordPress

Как мы видели, WordPress занят созданием изображений разных размеров всякий раз, когда мы загружаем изображение в нашу медиатеку. Но нужны ли нам все эти образы? На самом деле нет. Это не только замедляет скорость загрузки изображений, поскольку WordPress вынужден работать в фоновом режиме, создавая изображения разных размеров, но также занимает место в хранилище, которое нам не нужно использовать на нашем сервере. Итак, как нам запретить WordPress создавать размеры изображений, которые нам не нужны? Читай дальше что бы узнать!

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

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

Этого легко добиться, отредактировав файл functions.php темы и добавив следующий код:

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); // Remove default image sizes here. function prefix_remove_default_images( $sizes ) { unset( $sizes['thumbnail']); // 150x150 pixels unset( $sizes['medium']); // 300x300 pixels(maximum) unset( $sizes['large']); // 1024x1024 pixels(maximum) unset( $sizes['medium_large']); // 768px width return $sizes; }

Для проверки давайте загрузим новое изображение (в нашем примере оно называется post2-featured-image) в медиатеку и обновим FTP-представление папки загрузки.

Как видите, сказав WordPress удалить 4 размера изображений по умолчанию через наш файл functions.php, мы остановили WordPress для их создания в нашей папке мультимедиа. Двигаясь вперед, это простое обновление кода нашей темы означает, что мы не будем забивать наш сервер нежелательными размерами изображений. Это сэкономит место и ускорит процесс загрузки изображения.

Удаление старых размеров изображений из медиатеки

Возможно, вы заметили, что, хотя 4 размера изображения по умолчанию не были созданы для нашего нового изображения, которое мы загрузили, ранее загруженное изображение по-прежнему имеет все 8 вариантов, сохраненных в медиатеке. По всей вероятности, если это не новый веб-сайт, вы загрузили десятки, если не сотни изображений, и во всех случаях были созданы эти «лишние» размеры. Так что делать?

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

Отличный способ справиться с этими нежелательными файлами старых изображений — использовать плагин Force Regenerate Thumbnail, который автоматически удалит их. Установите и активируйте плагин, а затем нажмите кнопку «Регенерировать все эскизы» в меню плагина (Инструменты->Принудительно регенерировать эскизы).

Обновите представление вашей FTP-папки мультимедиа, и вы увидите, что изображения WordPress по умолчанию исчезли. Хороший!

Еще один простой способ добиться того же результата для размеров по умолчанию — изменить значение их размеров на «0» в разделе «Настройки»> «Медиа» в файле wp-admin. Затем вы увидите что-то вроде этого:

Альтернативный метод — изменить update_option('SIZE_w/h', 0); внутри functions.php. Не забудьте сделать это с файлом 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 );

Когда это обновление будет сделано, вы увидите, что значение, которое будет отражать значение размеров в настройках мультимедиа (из WP Admin), теперь обновлено до 0.

Удалить дополнительные размеры изображения темы

Теперь мы успешно разобрались с изображениями по умолчанию, созданными ядром WordPress. Теперь мы можем двигаться дальше и заняться изображениями, созданными темой (в данном случае Twenty Twenty). Если, как и в случае с размерами изображений по умолчанию, вы пришли к выводу, что они не нужны, вы можете внести некоторые изменения в код своей темы, чтобы WordPress не создавал эти размеры в будущем.

Для этого мы будем использовать хук инициализации и базовую функцию remove_image_size. Скопируйте приведенный ниже код и вставьте его в файл functions.php. Если вы не используете тему Twenty Twenty, как мы здесь, замените имена «post-thumbnail» и «twentytwenty-fullscreen» названием вашей активной темы.

 function remove_extra_image_sizes() { foreach ( get_intermediate_image_sizes() as $size ) { if ( in_array( $size, array( 'post-thumbnail', 'twentytwenty-fullscreen' ) ) ) { remove_image_size( $size ); } } } add_action('init', 'remove_extra_image_sizes');

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

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

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

Как мы решаем, какие размеры изображений нам нужны?

Предположим, что у вас есть веб-сайт с основной колонкой шириной 960 пикселей, где изображение функции находится вверху, а содержимое сообщения — внизу. Тогда желаемый размер изображения будет 960 пикселей. Не забудьте также рассчитать отступ CSS, если он есть. Например, если родительские элементы имеют отступы в сумме 20 пикселей, то правильная ширина изображения будет 920 пикселей. Это 960 пикселей минус 20 пикселей для левого заполнения минус 20 пикселей для правого заполнения.

Регистрация новых размеров изображений

Один из простых способов зарегистрировать новые размеры — использовать встроенную функцию add_image_size(), предоставляемую WordPress. Структура функции такова:

 add_image_size( name, width, height, crop )

Большинство этих опций говорят сами за себя. Последний параметр (обрезка) определяет, будет ли WordPress учитывать пропорции нашего изображения при изменении размера или обрезать наше изображение. Если для параметра обрезки установлено значение «true», изображение будет обрезано, а пропорции не будут соблюдаться. Если параметр обрезки пропущен или установлен в false, пропорции нашего изображения будут соблюдены.

Давайте попробуем это в действии и проследим за результатом, используя тестовое изображение размером 2089×1175 пикселей.

Сначала добавим этот код:

 add_image_size( 'new-post-thumb', 220, 180 );

Это создаст post2-feature-image-220x124.jpg вместо 220×180 в нашей папке загрузок, потому что обрезка не установлена ​​(false). То же самое произойдет, если вы вставите следующее:

 add_image_size( 'new-post-thumb', 220, 180, false );

Однако, если вы установите для обрезки значение true, то будет сохранено изображение post2-feature-image-220x180.jpg .

 add_image_size( 'new-post-thumb', 220, 180, true );

Наконец, вы можете указать, как будет располагаться урожай. Вместо «true» просто используйте такие параметры, как «left» или «top» или оба:

 add_image_size( 'custom-size', 220, 220, array( 'left', 'top' ) );

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

Для x_crop_position: «слева», «по центру» или «справа».
Для y_crop_position: «сверху», «по центру» или «снизу».

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

Альтернативой выполнению этого вручную путем добавления кода в нашу тему является использование плагина, такого как Simple Image Sizes. Тем не менее, полезно понимать, что происходит за кулисами, даже если вы используете такой плагин.

Вывод

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