Как легко обслуживать масштабированные изображения в WordPress (шаг за шагом)

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

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

Но don't волнуйтесь, we've позаботились о вас! Следуйте быстрому руководству ниже, чтобы узнать, как легко обслуживать масштабированные изображения!

Почему вы должны обслуживать масштабированные изображения?

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

Например, ваше оригинальное изображение может иметь размер 4000 × 3000 пикселей, но ваш сайт отображает его только в размере 800 × 600 пикселей. Если вместо уменьшенной версии будет использовано оригинальное изображение, ваш сайт будет загружаться медленнее.

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

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

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

Пошаговое руководство

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

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

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

Чтобы изменить размер изображения перед загрузкой, следуйте инструкциям ниже:

• Откройте ваше изображение в Photoshop.
• Нажмите Image вкладку и выберите Image Size.

• В появившемся диалоговом окне измените размер изображения в соответствии с требованиями к отображению веб‑страницы. 

Например, если ваше оригинальное изображение имеет размер 1281 x 493 пикселей и вы хотите масштабировать его до 3600 x 2400 пикселей, введите новые размеры. 

• Измените Разрешение до 72 PPI для веб‑использования, или 300 PPI, если вам нужна высокая печатная чёткость.
• Затем выберите метод ресемплинга. Два наиболее подходящих варианта для оптимизации веб‑контента:

• Нажмите ОК чтобы применить изменения. Ваше изображение теперь изменено в размере.
• Чтобы сохранить изображение, откройте Файл вкладку и выберите Экспорт.

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

2. Используйте встроенные размеры изображений WordPress'

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

Эту функцию можно открыть, щёлкнув по любому изображению в вашей записи или медиатеке. Кроме того, вы можете задать пользовательские размеры изображений, изменив файл functions.php в вашей теме.

Чтобы упростить задачу, давайте начнём с простого руководства ниже:

• Загрузите изображение в свою запись WordPress. 

• Выберите изображение, затем нажмите Заменить и выберите Открыть медиатеку из меню.

• В боковой панели нажмите Редактировать изображение.

• Вы будете перенаправлены в редактор изображений. Нажмите Масштабировать чтобы изменить размер изображения

• Введите новый размер для вашего изображения. Например, измените его с 1198 × 744 пикс. до 805 x 500 пикс.. Соотношение сторон ограничено, поэтому другое значение будет автоматически подстраиваться в зависимости от введённой ширины или высоты.

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

3. Используйте плагины

• Установите и активируйте WP Meta SEO на вашем сайте WordPress.

• В панели управления WordPress перейдите к WP Meta SEO > Редактор изображений.

• Откройте настройки Image SEO & HTML Resize.

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

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

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

Для получения более подробной информации вы можете изучить официальную документацию и обзор функций:

• WP Meta SEO Функция Image SEO & HTML Resize
• Динамический Документация по изменению размеров изображений

4. Реализуйте адаптивные изображения, используя атрибут srcset

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

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

Если вы хотите узнать, как вручную обслуживать масштабированные изображения, следуйте инструкциям ниже:

• Откройте HTML‑файл сайта в вашем редакторе кода.
• Найдите тег для изображения, которое вы хотите оптимизировать.

• Отредактируйте тег и добавьте атрибут srcset, как показано на рисунке. 

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

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

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

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

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

1. Использование Google PageSpeed Insights

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

Чтобы быстро проверить, вы можете следовать инструкции ниже:

• Откройте Google PageSpeed Insight по адресу https://pagespeed.web.dev.

• Вставьте полный URL вашей веб‑страницы в поле ввода.
• Нажмите Analyze чтобы запустить процесс.
• Подождите, пока процесс завершится. Затем PSI предоставит вам отчет о производительности.
• Прокрутите вниз, чтобы найти запись с меткой Правильный размер изображений.
• Если они присутствуют, вы увидите список некалиброванных изображений, найденных на вашем сайте.

Если одно из ваших изображений помечено как некалиброванное, Google PageSpeed Insights может предложить несколько рекомендаций, включая:

• Подача изображений в форматах следующего поколения, например WebP, AVIF, JPEG XR или JPEG2000.
• Правильное изменение размеров изображений в соответствии с различными требованиями к размеру, например изменение до 1000 x 1000 px для страницы деталей продукта, или до 400 x 400 px для страницы списка продуктов.
• Используя lazy loading, так что только изображения, видимые на экране пользователя, загружаются сразу.

2. Проведение регулярного аудита сайта

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

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

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

Также обратите внимание на то, правильно ли масштабированы изображения. Если они'не масштабированы, не забудьте следовать приведённому выше руководству.

Вывод

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

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