Изображение какого размера использовать в WordPress (ключевые факторы и советы)

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

Понимание размеров изображений в WordPress

Размеры изображений в WordPress определяются размерами (в пикселях) и размером файла изображения в килобайтах (КБ) или мегабайтах (МБ). При отображении изображения на вашем сайте WordPress важно знать, что размер изображения влияет не только на эстетику — он напрямую влияет на производительность сайта, взаимодействие с пользователем и поисковую оптимизацию (SEO). WordPress поможет защитить пользователей от использования чрезвычайно больших изображений, автоматически создавая масштабированную версию при загрузке. Кроме того, каждое загружаемое вами изображение будет иметь разные варианты или размеры, которые отображаются в зависимости от того, где оно используется на вашем сайте. Подробнее об этом ниже.

Функциональность SRCSet

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

Например, если ваш пост в блоге содержит изображение, и пользователь посещает ваш сайт с настольного компьютера с большим экраном, браузер может загрузить большую версию (например, 1024 пикселя). С другой стороны, если пользователь просматривает сайт с мобильного телефона, браузер выберет меньшую версию (например, 300 пикселей), которая загружается быстрее.

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

• Миниатюра: 150 x 150 пикселей.
• Средний: 300 x 300 пикселей (может варьироваться в зависимости от ваших настроек)
• Большой: 1024 x 1024 пикселей (может варьироваться в зависимости от ваших настроек)
• Полный размер: Исходные размеры.

Если вы хотите изменить размеры изображений по умолчанию, вы можете найти их в «Настройки» → «Медиа» на панели управления WordPress:

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

В большинстве случаев размер файла изображения не должен превышать 200 КБ. Размер большинства изображений должен быть около 50–100 КБ или меньше. Чтобы файлы изображений оставались в этом диапазоне, вам необходимо учитывать другие факторы, такие как размеры.

Вот некоторые общие рекомендуемые размеры изображений для WordPress:

• Изображения сообщений в блоге: 1200 x 630 пикселей.
• Избранные изображения (миниатюры сообщений): 1200 x 800 пикселей.
• Изображения заголовка/изображения героев: 1600 x 900 пикселей или 1920 x 1080 пикселей.
• Фоновые изображения: 1920 x 1080 пикселей.
• Слайдеры и баннеры: 1200 x 600 пикселей или 1920 x 800 пикселей.
• Изображения продуктов (WooCommerce): 800 x 800 пикселей или 1000 x 1000 пикселей.
• Изображение логотипа: 200 x 100 пикселей или 250 x 100 пикселей.

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

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

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

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

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

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

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

Размер файла

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

В идеале размер файла изображения должен быть ниже 500 КБ. Однако если изображение отображается на видном месте, для лучшего качества можно разрешить размер до 1 МБ. Используйте инструменты сжатия изображений, чтобы уменьшить размер файлов, сохраняя при этом визуальное качество. Для ручного сжатия хорошо подходят такие инструменты, как TinyPNG или JPEG-Optimizer. После сжатия проверьте время загрузки вашей страницы с помощью таких инструментов, как Google PageSpeed ​​Insights или GTmetrix. Если время загрузки медленное, уменьшите размеры изображений еще больше.

Формат файла

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

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

Соотношение сторон

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

Для изображений в фиксированном макете (например, слайдеров или баннеров) всегда следуйте рекомендованному соотношению сторон из документации вашей темы или плагина (например, соотношение сторон 16:9 для баннеров). Для галерей или сеток выберите одно соотношение сторон (например, 4:3 или 1:1 для квадратных миниатюр) и обрежьте все изображения до этого соотношения для единообразия. Если вы используете адаптивные настройки изображения, протестируйте свой сайт на разных устройствах и размерах экрана, чтобы убедиться, что соотношения сторон хорошо работают в различных окнах просмотра.

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

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

Изменение размера изображений до соответствующих размеров

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

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

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

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

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

В деталях изображения нажмите кнопку «Редактировать изображение».

В разделе «Масштабировать изображение» введите новые размеры (ширину или высоту), и WordPress пропорционально масштабирует изображение. Нажмите «Масштабировать», чтобы применить изменения.

ПРИМЕЧАНИЕ. Вы не можете масштабировать изображения больше исходной версии. WordPress сообщит вам об этом, если вы это сделаете.

Используйте инструменты сжатия изображений

Как обсуждалось ранее, сжатие изображений помогает уменьшить размер их файлов. Доступны различные инструменты сжатия изображений, включая программное обеспечение для редактирования, такое как Adobe Photoshop или Microsoft Photos.

Кроме того, для достижения этой цели вы можете использовать онлайн-инструменты, такие как TinyPNG.

Этот инструмент предпочитает сжатие с потерями, чтобы минимизировать размер файлов WEBP, JPEG и PNG. Просто загрузите свои изображения, и TinyPNG выполнит сжатие за вас.

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

После установки и активации Imagify на вашем сайте WordPress перейдите в «Настройки» > «Imagify», чтобы настроить параметры сжатия:

Как только вы настроитесь, нажмите «Сохранить изменения». Затем Imagify автоматически сжимает любые изображения, которые вы загружаете на свой сайт.

Изменить максимальный лимит загрузки

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

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

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

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

Большинство тем и плагинов WordPress сегодня предлагают встроенную поддержку отложенной загрузки. Сам WordPress даже включает в себя встроенную отложенную загрузку, начиная с версии 5.5. Кроме того, различные плагины, такие как WP Rocket, Lazy Load от WP Rocket и a3 Lazy Load, предлагают более расширенный контроль и настройку процесса отложенной загрузки, что позволяет легко реализовать его на любом сайте WordPress без особых технических знаний.

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

Как создать изображения идеального размера с помощью Divi

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

1. Загрузите и установите Divi

Divi можно приобрести через Elegant Themes, предлагая два варианта цен: годовая лицензия за 89 долларов США или пожизненная лицензия за 249 долларов США . После покупки вы можете легко загрузить и установить тему на свой сайт WordPress, выполнив следующие действия:

1. В панели управления WordPress перейдите в «Внешний вид» > «Темы» .
2. Нажмите «Добавить новую», затем выберите «Загрузить тему».
3. Выберите загруженный ZIP-файл Divi и нажмите «Установить сейчас».
4. После завершения установки нажмите «Активировать», чтобы сделать Divi активной темой.

Подробное руководство смотрите в видео ниже.

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

Начните работу с Диви

2. Создайте свой веб-сайт, откройте Divi Builder и выберите свое изображение.

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

Кроме того, вы можете использовать Divi Quick Sites для создания профессионального веб-сайта за одну или две минуты.

После создания веб-сайта и добавления соответствующих изображений вы можете получить доступ к Divi Builder и настроить размеры изображений WordPress. Сначала зайдите на свой существующий веб-сайт Divi и нажмите «Включить Visual Builder».

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

3. Измените размер добавленных изображений в WordPress с помощью настроек Divi Responsive.

Адаптивные настройки Divi упрощают изменение размера изображений в WordPress для различных устройств (настольных компьютеров, планшетов и мобильных устройств). В настройках модуля изображения перейдите на вкладку «Дизайн». Здесь происходит большая часть настройки, включая адаптивные настройки. На вкладке «Дизайн» прокрутите вниз, чтобы найти раздел «Размеры».

Здесь вы можете настроить несколько размеров выбранного изображения, например:

1. Ширина
2. Максимальная ширина
3. Выравнивание модулей
4. Минимальная высота
5. Высота
6. Максимальная высота

ПРИМЕЧАНИЕ. Вы также можете принудительно использовать полную ширину, включив соответствующую опцию. Однако это сделает ширину и максимальную ширину неизменяемыми.

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

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

Функциональность SRCSet

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

Получить Диви

Другие инструменты для оптимизации изображений

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

1. EWWW Image Optimizer: мощный плагин WordPress, который автоматически сжимает новые изображения при загрузке и предлагает массовую оптимизацию для существующих медиафайлов. Он позволяет изменять размер изображения и удалять метаданные, а также поддерживает отложенную загрузку и преобразование в формат WebP для лучшего сжатия. Бесплатная версия работает непосредственно на вашем сервере без ограничений на размер файла, а премиум-версия использует облачные сервисы для улучшенной оптимизации и более высокой степени сжатия.
2. ShortPixel Image Optimizer: этот плагин оптимизирует изображения и PDF-файлы, автоматически изменяя их размер. Он предлагает гибкие варианты сжатия — с потерями, без потерь и глянцевое — предоставляя пользователям сбалансированный выбор. Плагин создает резервные копии исходных изображений, удаляет метаданные и конвертирует PNG в JPEG, оптимизируя изображения и миниатюры Retina. Однако для получения ключа API вам необходимо предоставить свой адрес электронной почты.
3. Optimole: бесплатный универсальный плагин для оптимизации изображений, который обрабатывает изображения в реальном времени через облачный сервер. Он отличается выбором оптимального размера изображения в зависимости от области просмотра посетителя и реализацией отложенной загрузки для эффективного отображения. Обновление до премиум-плана предлагает неограниченное количество преобразований изображений и расширенные функции, включая высококачественное сжатие, сохраняющее исходную четкость при уменьшении размера файла, а также автоматическое создание версий Retina и WebP.
4. WP Smush: этот плагин является частью набора плагинов WPMU DEV. Он автоматически оптимизирует изображения после их загрузки на ваш сайт WordPress. WP Smush имеет опцию массовой оптимизации, которая позволяет сжимать до 50 изображений одновременно, что позволяет легко улучшить существующие медиафайлы. Плагин также включает в себя параметры изменения размера изображения и отложенную загрузку, и вы можете настроить его на удаление метаданных из изображений при загрузке. Он поддерживает изображения размером до 5 МБ, но вам необходимо перейти на премиум-версию, чтобы оптимизировать файлы большего размера.

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

Заключение

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

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

Получить Диви

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