Вы хотите разместить масштабированные изображения на своем сайте WordPress?
Новички часто замедляют работу своих сайтов, загружая изображения, не обращая внимания на их размер. Обслуживание изображений с правильными размерами повысит производительность WordPress без снижения качества.
В этой статье мы покажем вам, как легко отображать масштабированные изображения в WordPress.
Зачем использовать масштабированные изображения в WordPress?
На вашем веб-сайте WordPress вам понадобятся изображения для сообщений в блоге, миниатюры, заголовки страниц, обложки и многое другое.
В зависимости от вашей темы эти изображения будут занимать определенное количество пикселей. Например, ваше избранное изображение может занимать 680 × 382 пикселей, а миниатюра — 100 × 100 пикселей.
Важно использовать изображения, которые были масштабированы, чтобы соответствовать правильным размерам, необходимым для вашего сайта. Например, если ваши избранные изображения занимают 680 × 382 пикселя, вы должны сохранить их именно в этом размере.
В противном случае работа вашего сайта может замедлиться или ухудшится качество взаимодействия с пользователем. Вот несколько распространенных причин этого:
- Вашим посетителям придется загружать файлы большего размера, чем необходимо, что увеличивает время загрузки.
- Если вы используете изображения с меньшим количеством пикселей, чем позволяет пространство, они будут выглядеть размытыми при отображении в большем размере.
- Вашему веб-сайту придется изменять размеры изображений на лету, а это значит, что он должен запускать больше процессов, прежде чем сможет показать контент пользователям.
В любом случае, это создаст неприятные впечатления у ваших пользователей, а также может негативно повлиять на SEO вашего изображения.
Вот почему, если вы проверяете производительность своего веб-сайта с помощью сканирования GTMetrix, он часто рекомендует использовать масштабированные изображения для ускорения вашего веб-сайта.
С учетом сказанного давайте посмотрим, как легко обслуживать масштабированные изображения в WordPress. Мы рассмотрим два метода:
Метод 1: обслуживание масштабированных изображений с помощью плагина
Самый простой способ использовать масштабированные изображения — использовать плагин, который автоматически отображает изображения вашего веб-сайта в правильном размере. Этот метод является самым простым, но не обеспечивает такой гибкости, как второй метод.
СвободаОптимолеplugin — один из лучших плагинов для сжатия изображений WordPress, который автоматически масштабирует ваши изображения. Однако, если у вас более 5000 посетителей в месяц, вам понадобится премиум-версия.
Во-первых, вам нужно установить и активировать плагин Optimole. Для получения более подробной информации см. наше пошаговое руководство по установке плагина WordPress.
После активации вы автоматически попадаете в Медиа » Оптимоле страницу и попросили зарегистрироваться для получения ключа API или ввести существующий ключ API. Это очень легко.
Просто убедитесь, что ваш адрес электронной почты указан правильно, затем нажмите кнопку «Создать и подключить учетную запись». После этого подключение к Optimole произойдет автоматически. Вам даже не нужно будет посещать другой веб-сайт или вручную вставлять ключ.
Теперь Optimole начнет оптимизировать ваши изображения в фоновом режиме. Он автоматически выберет правильный размер изображения для устройства и браузера каждого посетителя, а изображения будут обслуживаться из быстрой CDN облачной службы Optimole.
Когда вы нажмете на вкладку «Настройки», вы увидите, что изображения в ваших сообщениях и на страницах будут автоматически заменены изображениями, оптимизированными и масштабированными с помощью Optimole.
Это не делается на лету, потому что это происходит через CDN, а это означает, что производительность вашего сайта не пострадает.
Кроме того, в плагине включена ленивая загрузка, что означает, что изображения на странице, которые в данный момент не видны, не будут загружаться до тех пор, пока они не потребуются. Это еще один эффективный способ сократить время загрузки страницы и повысить производительность сайта.
Эти настройки будут хорошо работать для большинства веб-сайтов. Однако вы можете дополнительно настроить Optimole, используя настройки в меню «Дополнительно», чтобы увидеть, что лучше всего подходит для вашего веб-сайта.
Если вы вносите какие-либо изменения в настройки, то не забудьте нажать кнопку «Сохранить изменения» внизу страницы.
Способ 2: обслуживание масштабированных изображений вручную
Вы также можете масштабировать изображения без плагина. Есть три способа сделать это: вы можете использовать программное обеспечение для редактирования изображений, функцию редактирования изображений в библиотеке мультимедиа WordPress или изменить значения в настройках мультимедиа WordPress.
Масштабирование изображений с помощью программного обеспечения для редактирования изображений
Вы можете масштабировать изображения до нужного размера, прежде чем загружать их на свой веб-сайт, с помощью программного обеспечения для редактирования фотографий на вашем компьютере, такого как Adobe Photoshop или Affinity Photo.
Программное обеспечение позволяет вам выбрать правильное количество пикселей для вашего изображения и сохранить его с небольшим размером файла и форматом файла, который вы предпочитаете.
Например, вот скриншот, демонстрирующий инструмент обрезки Affinity Photo.
Помимо получения правильного размера изображения с самого начала, есть и другие вещи, которые вы можете сделать перед загрузкой изображений, чтобы убедиться, что они не замедляют работу вашего веб-сайта.
Для получения дополнительной информации см. наше руководство о том, как оптимизировать изображения для веб-производительности.
Масштабирование изображений в медиатеке WordPress
Знаете ли вы, что вы можете выполнять базовое редактирование изображений в WordPress? Функция WordPress «Редактировать изображение» позволяет вам обрезать, поворачивать, переворачивать и масштабировать изображения.
При редактировании сообщения или страницы вам нужно нажать на изображение, которое вы хотите отредактировать. Затем вы должны нажать кнопку «Заменить», а затем выбрать «Открыть медиатеку» в меню.
Это откроет Медиатеку WordPress с выбранным изображением.
Справа находится область, где вы можете добавить альтернативный текст, заголовок, подпись и описание для вашего изображения. Вы также найдете ссылку «Редактировать изображение».
Просто нажмите на эту ссылку, чтобы перейти на страницу «Редактировать изображение».
Здесь вы найдете предварительный просмотр изображения, кнопки редактирования и несколько других опций, полезных при масштабировании или обрезке изображения.
Чтобы масштабировать изображение, просто измените одно из значений «Новые размеры» в разделе «Масштаб изображения» справа.
Например, это изображение имеет очень большое разрешение 2560×1637 пикселей. Мы можем уменьшить его до ширины 1200 пикселей, набрав в первом поле «Масштаб изображения».
Все, что вам нужно изменить, это ширину, потому что значение высоты изображения будет изменено автоматически, чтобы сохранить пропорции изображения.
После этого просто нажмите кнопку «Масштаб», чтобы изменить разрешение изображения.
Обратите внимание, что вы можете уменьшать изображение только в WordPress. Вы не можете увеличить изображения, увеличив размеры изображения.
Подробные инструкции см. в наших руководствах о том, как выполнять базовое редактирование изображений в WordPress и как обрезать и редактировать миниатюры записей WordPress.
Настройка размеров изображения в настройках мультимедиа
Когда вы загружаете изображения на свой веб-сайт, WordPress автоматически создает несколько копий разных размеров. Вы можете настроить эти размеры, посетив Настройки » Мультимедиа страницу в админке WordPress.
Здесь вы можете легко изменить размеры миниатюр, средних и больших размеров изображения.
На некоторых веб-сайтах вам может потребоваться больше размеров изображений, чем просто миниатюры, средние и большие. Вы можете узнать, как создавать эти размеры, следуя нашему руководству о том, как создавать дополнительные размеры изображений в WordPress.
Если вы измените размеры изображений по умолчанию или создадите дополнительные размеры изображений, это повлияет только на новые изображения. Вам необходимо повторно сгенерировать размеры изображения для существующих изображений.
Когда вы добавляете изображение в публикацию или на страницу, вы можете выбрать размер изображения в настройках блока в левой части страницы.
Мы надеемся, что это руководство помогло вам научиться работать с масштабированными изображениями в WordPress. Вы также можете узнать, как создать целевую страницу, или ознакомиться с нашим списком плагинов социальных сетей для WordPress.
Если вам понравилась эта статья, то, пожалуйста, подпишитесь на нашу Канал YouTube для видеоуроков WordPress. Вы также можете найти нас на Твиттер а также Фейсбук.
Сообщение Как легко обслуживать масштабированные изображения в WordPress (шаг за шагом) впервые появилось на WPBeginner.
