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

Изображения в WordPress — все, что нужно знать о размерах

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

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

Кроме этого подобный подход повысит популярность ваших постов, что приведет к увеличению просмотров и трафика. Статистика показывает, что читатели запоминают только 10% текстового контента, прочитанного ими три дня назад, но это число возрастает до 65%, если вы добавляете в свой контент визуально привлекательные изображения.

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

Поехали!

Содержание скрыть

Как WordPress управляет загруженными изображениями

Изображения в WordPress загружаются довольно просто, но многое происходит на фоне при их обработке движком.

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

  • Thumbnail
  • Medium
  • Large
  • Original Size

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

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

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

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

Мы уже обсуждали, как WordPress создает размеры изображений по умолчанию, но что если вам нужен размер, отличный от стандартного? А если вобще вам нужно больше размеров?

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

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

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

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

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

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

Где и как WordPress хранит ваши изображения?

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

изображения в медиатеке

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

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

Изображения хранятся в папке uploads вашего сайта (wp-content/uploads/). Чтобы получить доступ к этой папке, вам нужно использовать FTP/SFTP-клиент. В папке uploads вашего сайта будет несколько подпапок, в которых будут храниться изображения по дате загрузки (если вы оставили включенной опцию сортировки по дате в Настройках).

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

Каковы размеры изображения в WordPress по умолчанию?

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

  • Размер миниатюры: 150px (квадратный)
  • Средний размер: Максимальная ширина и высота 300px
  • Большой размер: Максимальная ширина и высота 1024px
  • Полный размер: Оригинальный размер вашего изображения

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

Как изменить размеры изображений по умолчанию (и когда это необходимо)

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

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

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

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

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

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

WordPress тоже это понимает, поэтому он позволяет изменять эти размеры по умолчанию.

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

Вот пошаговый процесс изменения размеров изображений по умолчанию в WordPress.

Шаг 1: Наведите курсор мыши на Настройки и нажмите на появившуюся опцию Медиа:

Настройки медиа в WordPress

Шаг 2: Измените размеры на нужные вам, отредактировав фигуры, как мы сделали ниже:

Изменение настроек медиа в WordPress

Шаг 3: Нажмите кнопку Сохранить изменения внизу.

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

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

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

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

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

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

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

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

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

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

Давайте сначала разберемся с методом плагина.

Добавление пользовательских размеров изображений с помощью Image Regenerate & Select Crop

Плагин Image Regenerate & Select Crop выходит за рамки плагина Regenerate Thumbnails (о котором речь пойдет ниже), обеспечивая более широкие возможности настройки и функциональности.

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

Плагин Image Regenerate & Select Crop

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

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

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

Там наведите курсор на пункт меню Appearance и выберите Editor (в некоторых случаях он может называться Theme Editor).

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

Если его там нет, вам нужно добавить эту строку в файл:

add_theme_support( 'post-thumbnails' );
Добавление пользовательских размеров изображений вручную

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

Теперь пришло время добавить код для конкретных пользовательских размеров изображений, которые вы хотите. Ищите строку «add_image_size» в файле functions.php, потому что именно там вам нужно будет внести изменения:

add_image_size( 'my-custom-image-size', 800, 640 );

В частности, вы должны изменить то, что находится внутри одинарных кавычек, на то, как вы хотите назвать новый пользовательский размер изображения. Мы рекомендуем использовать простое и описательное название (например, «main-post-image»).

После того как вы позаботились об имени, вам нужно объявить сами размеры изображения. Первое числовое значение — это ширина изображения, а второе — высота изображения.

Вот скриншот, показывающий наш пример кода, добавленного в файл functions.php:

пример кода, добавленного в файл functions.php

Понимание обрезки

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

Это точно так же, как физически разрезать фотографию. Если вы возьмете ножницы к портрету и вырежете все, что ниже плеч человека, вы «обрезаете» эту фотографию. В цифровом виде это работает точно так же.

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

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

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

Вот наш пример с включенной функцией обрезки.

add_image_size( 'name-for-your-custom-image', 800, 640, true );

Однако если вы не хотите обрезать изображения, вы можете либо поставить «false» вместо «true», либо опустить оба варианта. Если не ставить ни то, ни другое, код автоматически примет значение «false». Таким образом, WordPress не будет обрезать ваши изображения.

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

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

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

Теперь вам нужно найти файл вашей темы в цикле post и добавить в него следующий код:

the_post_thumbnail( 'your-specified-image-size' );

Чтобы найти этот файл, нажмите на Theme Editor в настройках Appearance. Найдите здесь файл index.php — это файл темы, в котором находится цикл постов, который вам нужно отредактировать.

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

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

Опять же, будет лучше, если вы замените часть «new-homepage-feature» на название созданного вами пользовательского размера изображения.

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

Обновление старых миниатюр

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

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

Плагин Regenerate Thumbnails

Regenerate Thumbnails позволяет автоматически переводить изображения в новых размерах, включая любые пользовательские размеры изображений, которые вы добавили.

Чтобы установить его, наведите курсор на пункт меню Plugins и нажмите Add New. Затем введите «Regenerate thumbnails» в поле поиска.

Установите плагин Regenerate Thumbnails, нажав на кнопку Install Now.

Установка плагина Regenerate Thumbnails

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

Затем наведите курсор на меню Инструменты слева и нажмите на пункт Перегенерировать миниатюры:

Перегенерация миниатюр с помощью плагина Regenerate Thumbnails

Вы можете нажать на Regenerate Thumbnails for All [#] Attachments, чтобы создать новые размеры изображений для всех старых изображений.

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

Как видно из приведенного выше изображения, программа Regenerate Thumbnails также выводит список всех размеров изображений, которые в настоящее время активны на вашем сайте.

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

Использование встроенного редактора размеров изображений WordPress

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

Мы вкратце объясним вам, как можно использовать встроенный редактор для быстрого и простого редактирования размеров изображений.

Сначала нажмите на меню Медиа, чтобы перейти в Медиатеку. Затем щелкните изображение, размер которого вы хотите изменить.

Затем нажмите на кнопку Редактировать изображение прямо под изображением:

Использование встроенного редактора размеров изображений WordPress

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

Изменение размеров изображений WordPress с помощью встроенного редактора

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

Редактирование изображений в WordPress Gutenberg

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

Редактирование изображений в WordPress Gutenberg

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

Если вы добавили новые пользовательские размеры изображений в файл темы, вы найдете их в выпадающем меню Image Size.

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

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

Оптимизация изображений

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

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

С учетом сказанного, вот несколько кратких советов, которые помогут вам начать работу по оптимизации изображений.

Определитесь с типом файла

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

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

С другой стороны, PNG обычно становится лучшим вариантом для рисунков, текста, большинства скриншотов и графики.

Изменение размера изображений

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

Если максимальная ширина вашего сайта составляет 1200px, не имеет смысла размещать на сайте ни одного изображения, ширина которого превышает 1200px.

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

Воспользуйтесь сжатием с потерями

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

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

Используйте ленивую загрузку

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

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

Плагины редактирования изображений для WordPress

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

  • Imagify: Впечатляюще настраиваемый уровень сжатия и другие функции оптимизации изображений
  • Kraken: Полезный плагин для сжатия без потерь, но только если вы купите премиум-версию
  • ShortPixel: Поддерживает сжатие как с потерями, так и без потерь и работает с различными типами изображений
  • Optimole: Для CDN и ленивой загрузки, которые являются высокоэффективными способами оптимизации изображений.

Резюме

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

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

Мы ничего не упустили? Оставьте комментарий ниже, если вам трудно понять что-либо о размерах изображений WordPress!

Источник: https://kinsta.com/

Вконтакте
Linkedin
Telegram
Whatsapp

Похожие статьи

Как создать магазин Facebook с помощью WooCommerce (5 шагов)


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


Добавляем на WordPress сайт подсветку синтаксиса Prism.js


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


У этой статьи пока нет комментариев


Добавить комментарий


Ваш адрес email не будет опубликован. Обязательные поля помечены *

12 + 18 =