Очевидно, что фотографии являются неотъемлемой частью нашей жизни. Следовательно, мы вряд ли можем представить сайт без изображений. Картинки привлекают внимание посетителей и помогают упорядочить содержимое сайта. Изображения делают страницу интересной, информативной и улучшают взаимодействие с пользователем.
Крупногабаритные изображения негативно влияют на производительность веб-сайта, поэтому изображения следует масштабировать в соответствии с активной темой. Это важные элементы веб-сайта, и они заслуживают того, чтобы их отображали наилучшим образом. Очень важно отображать масштабированные изображения на сайте WordPress.
Размеры масштабированных изображений корректируются до нужного размера в соответствии с размерами, определенными в HTML и CSS. Тем не менее, не многие веб-мастера обращают внимание на эту важную деталь дизайна. Возьмите в качестве примера изображение размером 500 x 500 пикселей для миниатюры 50 x 50. Веб-браузер должен загрузить изображение и уменьшить его, чтобы его можно было отобразить посетителю. Очевидно, что это неэффективно и замедлит работу сайта.
Разница в разрешении не видна, и, следовательно, вес, который несут с собой большие изображения, часто остается незамеченным. Большинство людей даже не подозревают, что это чрезмерное разрешение вызывает проблемы, и проблема остается нерешенной. Они оставляют проблему на усмотрение браузера.
Зачем размещать масштабированные изображения на сайте WordPress
Основная причина использования масштабированных изображений заключается в том, что изображения с полным высоким разрешением замедляют работу веб-сайта и увеличивают время загрузки. Медленная страница приводит к плохому взаимодействию с пользователем, и вместо того, чтобы оставаться и возвращаться, они уходят и остаются в стороне. Статистика Kissmetrics показывает, что страницы, загрузка которых занимает более трех секунд, имеют более высокий показатель отказов.
Благодаря оптимизированным размерам изображений на веб-сайте время загрузки будет меньше. Люди с большей вероятностью дольше остаются на сайте и возвращаются позже. Это улучшит SEO и повысит рейтинг сайта.
Большие изображения вызывают разные проблемы
- Это увеличивает нагрузку на производительность браузера. Браузер должен будет выполнять дополнительные запросы к серверу. Он не может показать изображение быстро, но вместо этого потребуется время и ресурсы для изменения размера изображения. Сайты с тяжелыми изображениями загружаются дольше.
- Если большие изображения с высоким разрешением отображаются на веб-сайте маленькими, они тратят время и загружают данные. Это тот случай, например, когда селфи с мобильного телефона используется необработанным для крохотного Граватара.
Как масштабировать изображения на сайтах WordPress
Вручную
Чтобы начать с самого начала, проанализируйте изображения на веб-сайте с помощью такого инструмента, как GTMetrix. GTMetrix — это инструмент анализа производительности, разработанный GT.net. Эта компания известна мониторингом и оптимизацией скорости, а также Pingdom. После того, как GTMetrics проанализирует веб-сайт, он создаст отчет. Это показывает, какие проблемы были обнаружены и какие улучшения он рекомендует.
При просмотре отчета обратите особое внимание на вкладку «Структура». На этой вкладке нажмите «Изображения правильного размера». Он покажет список изображений неправильного размера.
WordPress не сжимает изображения автоматически, когда это возможно, а добавляет их на сайт без обработки. Для решения этой проблемы есть два варианта.
Даже если использование плагинов нежелательно, есть и другие варианты. Первый способ масштабирования изображений — это ручная настройка размера каждого из них с помощью фоторедактора, например Photoshop. Может показаться, что этот метод неэффективен, но на самом деле это не так.
В Photoshop помимо регулировки высоты и ширины изображения есть больше возможностей. Еще одна вещь, которую нужно проверить, это разрешение изображения. В большинстве случаев для веб-приложений 72 PPI достаточно для хорошего просмотра.
Второй — использовать плагин для масштабирования изображений. Этот вариант простой и быстрый. Для этого в WordPress есть собственная функция — srcset. Этот инструмент может преобразовывать графику, например изображения, в адаптивные файлы. Адаптивные изображения автоматически адаптируются к различным устройствам и размерам экрана. Ниже приведены некоторые другие плагины, которые отлично справляются с уменьшением размеров изображений.
Оптимоле
Отличным инструментом для обслуживания масштабированных изображений является Optimole. Это плагин WordPress, который может изменять размер изображений для разных устройств. Он автоматически изменяет размер изображения до оптимального для различных типов устройств. В результате получаются масштабированные изображения высокого качества.
Вот некоторые из особенностей, которые делают Optimole интересным выбором:
- Обработанные изображения меньше, но сохраняют свое качество.
- Он полностью автоматизирован. Это только вопрос загрузки изображений.
- Optimole поддерживает все форматы изображений.
- Он поддерживает различные типы изображений, включая Retina и WebP.
- Он поддерживает облачные библиотеки изображений.
- Optimole предоставляет глобальные образы CDN бесплатно.
- Нет необходимости угадывать или прикидывать желаемый размер. Optimole использует характеристики устройства посетителя.
- Существует полная поддержка конструкторов сайтов, таких как Elementor.
Функция автоматической обработки изображений — большой плюс этого плагина. Нет необходимости просматривать длинный список настроек; Optimole делает все сам.
В разделе «Медиа» > «Оптимоле» плагин показывает статус услуг, а также их использование и достигнутую оптимизацию.
Раздел «Параметры» находится на вкладке «Настройки ». Здесь есть две особенности, которые заслуживают особого упоминания:
- Включить замену изображения. Убедитесь, что этот параметр включен, чтобы воспользоваться расширенными функциями оптимизации изображения.
- Масштабирование изображений и отложенная загрузка. Эта опция позволяет масштабировать изображения в зависимости от размера экрана посетителя. Ленивая загрузка отображает эти изображения.
Оптимизация изображения Smush
Smush Image Optimization, Compression и Lazy Load — это полное название в этом списке плагинов. При уменьшении изображения убедитесь, что качество изображения сохранено.
Чтобы использовать WP Smush, необходимо сначала установить и активировать его. После этого на панели управления WordPress появится значок Smush. На панели инструментов отображается статистика, которую накапливает Smush, и текущее состояние различных функций.
Рядом с данными об общей экономии появится значок, сообщающий обо всех изображениях в медиатеке, требующих обработки. Если есть изображения, требующие обработки, проще всего это сделать в модуле Bulk Smush. Это уменьшит размер всех изображений, которые он помечает.
Чтобы обработать изображения по отдельности, перейдите в Медиатеку и щелкните Повторная проверка изображений. Это производит обновление в реальном времени изображений, которые должны быть обработаны.
Smush имеет функции, позволяющие фильтровать изображения по статусу Smush и выборочное масштабирование изображений.
Плагин Smush не обрабатывает видео и файлы GIF. Файлы изображений, которые не масштабируются, указывают на то, что мощность Smush не используется в полной мере.
EWWW Оптимизатор изображений
EWWW Image Optimizer также является плагином WordPress, оптимизирующим размеры и форматы изображений. Он работает с новыми загрузками и существующими изображениями. Он имеет опцию, которая сканирует все изображения на веб-сайте и оптимизирует их.
Чтобы начать использовать его, загрузите и установите его, а затем активируйте в админке сайта WordPress. Находясь в среде Dashboard, нажмите «Настройки », а затем «EWWW Image Optimizer». В разделе «Основные настройки» находятся различные параметры, например удаление метаданных из изображений. Уровень оптимизации для GIF, JPG и PNG должен быть установлен на Pixel Perfect. Только платная версия позволяет оптимизировать файлы PDF.
Вкладка «Изменить размер» содержит параметр «Обнаружение изменения размера ». В Resize Images установите максимально допустимую высоту и ширину изображений на сайте. Кроме того, включите параметры «Изменить размер других изображений» и «Изменить размер существующих изображений ». Не забудьте сохранить изменения.
ShortPixel
Последней рекомендацией для обслуживания масштабированных изображений является плагин ShortPixel. Это правильный вариант для тех, кому нужно показывать масштабированные изображения, но ограничен бюджет. Бесплатная версия предлагает 100 масштабирований изображений в месяц.
ShortPixel прост и удобен в использовании. Он автоматически обрабатывает изображения до тех размеров, которые указывает пользователь при загрузке на сайт. Помимо автоматической опции, есть также возможность обрабатывать изображения вручную.
Плагин уменьшает размер изображения либо без потерь, либо с потерей разрешения. Он может обрабатывать изображения GIF, JPEG и PNG и даже оптимизировать файлы PDF.
Завершение размышлений о том, как обслуживать масштабированные изображения
Очевидно, что существует множество способов размещения масштабированных изображений на сайте WordPress, и это не обязательно должно быть сложным или дорогим. Проблема в том, что сайт давно находится в сети и нужно обработать много изображений.
Масштабирование изображений — важный навык для любого, кто создает или поддерживает веб-сайт. Это помогает ускорить работу медленных веб-сайтов и дает другие преимущества в производительности. Правильная спецификация изображения улучшит скорость любого веб-сайта.
Если вам понравилось читать эту статью о том, как отображать масштабированные изображения в WordPress, вы должны прочитать эту статью о том, как сделать номер телефона кликабельным в WordPress.
Мы также писали о нескольких связанных темах, таких как встраивание видео из Facebook в WordPress, удаление тем WordPress, сканирование базы данных WordPress на наличие вредоносных программ, загрузка HTML-файла в WordPress, очистка базы данных WordPress и т. д. как найти и заменить URL в базе данных WordPress и как скрыть автора в WordPress