Без изображений невозможно обойтись ни на одном сайте. Иначе, он будет выглядеть не презентабельно. А изображения являются ресурсоемкими. Но их обработку система затрачивает довольно много усилий и трафика потребителя. Следовательно, чтобы достичь эффективного взаимодействия и не заставлять долго ждать, необходимо произвести их оптимизацию.
Проведение аудита сайта при помощи Google PageSpeed Insights, позволяет не только получить его оценку, но и увидеть ошибки, влияющие на скорость загрузки и ранжирование. Их устранение способствует лучшему взаимодействию со страницей. Одна из типичных рекомендаций, которая может отобразится после аудита: «Настройте эффективную кодировку изображений».
Google сам по себе не особо любит картинки. А особенно те из них, которые не прошли процесс минимизации. В совете разработчиков указано, что оптимизация изображений позволит загружать страницу быстрее и приведёт к снижению потребления ресурсов. Это особенно критично при работе с версиями веб-порталов для мобильных устройств. 1/3 всех пользователей, просматривают интересующий их контент со смартфонов или планшетов без доступа к Wi-Fi. Поэтому, для них критично потребление трафика. Согласно аналитическим данным, именно данный сегмент юзеров отличается наивысшей конверсией.
Как провести оптимизацию изображений
Google PageSpeed Insights всегда будет недоволен изображениями на вашем сайте, такова его природа. Даже если вы по максимуму примените к ним все инструменты WordPress. Но это вовсе не значит, то стоит пропустить данный совет, оптимизацию провести нужно.
В первую очередь, начните с формата в котором вы загружаете изображения. GIF, PNG или JPEG, а также современные WebP и JPEG XR, которые потребляю меньше ресурсов. Задайте для каждого из них оптимальные настройки, такие как качество, размер, цветовая палитра и прочие. Уже на этом этапе вы сможете существенно сэкономить загруженность каналов, что позволит картинкам меньше весить, а сайту — загружаться быстрее.
Как оптимизировать изображения без плагина
Оптимизировать изображения можно без использования специальных инструментов. Этот путь более долгий и предусматривает владение PhotoShop как минимум на базовом уровне. Именно в этой программе и следует создавать изображения.
Одним из основных преимуществ использования PhotoShop является тот факт, что получившийся результат можно увидеть ещё до сохранения картинки. Инструменты для оптимизации встроены непосредственно в саму программу и ими можно смело пользоваться. Для того, чтобы экспортировать файл в уже минифицированном формате, необходимо выполнить следующие действия:
Выбрать кнопку Файл > Экспортировать > Сохранить для Web или Alt+Shift+Ctrl+S. Вне зависимости от версии PhotoShop, данная опция есть в каждой из них. Поэтому, затруднений процесс не вызовет.
После того, как данные действия будут выполнены, вы увидите окно, в котором будут доступны настройки и предварительный просмотр. С их помощью можно выбрать тот опционал, который необходим именно вам. В частности:
- Уровень качества
- Формат изображения
- Степень оптимизации
- Установить авторские права
В зависимости от потребностей, можно изменить качество и степень оптимизации. Вполне допустимо выбирать средние значения, при них вес изображения будет уменьшен без потери качества. Можно, к примеру, оставить средний уровень качества, но выбрать «Прогрессивную» оптимизацию и картинка будет минифицирована ещё больше.
Это же окно наглядно демонстрирует и скорость с которой пользователю будет доступен данный контент. Для чистоты результата, можно протестировать её на различном интернете, к примеру, Wi-Fi и мобильном.
Оптимизация изображений при помощи плагинов
Если нет желания возиться с PhotoShop, можно оптимизировать изображения при помощи плагинов WordPress. Они представлены разные, но многие из них являются платными. Впрочем, цена за действительно качественный сервис не высока. Среди них можно выделить:
- EWWW Image Optimizer
- WP Smush
- Smush.it
- WebP Express
и многие другие. WebP Express является достаточно удобным инструментом, к тому же — бесплатным. В нём можно произвести все нужные вам настройки самостоятельно, установив уровень сжатия изображения. Работает он быстро, производит замену всех картинок, которые необходимо минимизировать и не искажает оригинальные изображения. К тому же, если браузер не поддерживает WebP, то пользователю будет доступен контент в его первоначальном виде.
Данный плагин прост в использовании, работает с изображениями в формате JPG или PNG. В настройках просто нужно выбрать тот вариант, который является актуальным для вашего сайта.
Веб-сервисы для оптимизации CDN и изображений
CDN оптимизации изображения
- Akamai Image Manager
- imgix
- Image Engine
- Cloudinary
- Uploadcare
API оптимизации изображения
- ShortPixel
- Fastly Image Optimizer
- Kraken.io
- TinyPNG
- Imagify
Совсем иначе работает оптимизатор, который установлен непосредственно на компьютер. Он запускается через графический интерфейс. Например, с помощью ImageOptim вы перетаскиваете изображения в его пользовательский интерфейс, а затем он автоматически сжимает изображения без заметного ухудшения качества. Если вы работаете на небольшом сайте и можете вручную оптимизировать все изображения, этот вариант вам отлично подойдёт.
Данный оптимизатор является абсолютно бесплатным, поэтому не стоит скачивать его подделки, воспользуйтесь оригиналом. ImageOptim отлично подходит для публикации изображений в Интернет (легко сжимает изображения «Сохранено для Интернета» в Photoshop). Это особенно важно для уменьшения размера приложений Mac и iPhone / iPad (если вы настраиваете Xcode для лучшей оптимизации).
ImageOptim удаляет метаданные EXIF, среди которых положение GPS и серийный номер камеры, так что вы можете публиковать изображения без раскрытия приватной информации. Если эти данные вам нужны, то сохранить их возможность предусмотрена.
Lighthouse собирает все изображения на странице, устанавливает уровень сжатия каждого изображения равный 85, а затем сравнивает исходную версию со сжатой. Если потенциальная экономия составляет 4 КБ или больше, Lighthouse помечает изображение как оптимизируемое.
