Простой способ оптимизации изображений для публикации в интернете

Скорость загрузки веб-страниц является одним из факторов «отношения» поисковиков к вашему сайту. Чем быстрее загружаются страницы, тем лояльнее к сайту и пользователи — никому не нравится долго ждать и тратить много трафика.

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

Для среднестатистического контентного ресурса на недорогом хостинге и бесплатной CMS типа WordPress (да, я говорю о своём и тысячах подобных сайтов) возможности оптимизации ограничиваются установкой кэширующих плагинов и работой с изображениями. «Корячить» тему и сокращать HTML, CSS и JavaScript код может не каждый, да и такие действия, как правило, приводят к разным ошибкам и «выпадению» функционала.

Для работы с изображениями под WordPress существует ряд плагинов, конвертирующих и сжимающих картинки с потерями или без потерь, на лету или по запросу. Самый лучший, на мой взгляд, из таких плагинов — EWWW Image Optimizer.

В качестве альтернативы можно подключить какой-нибудь CDN-сервис, чтобы статический контент, а именно графика отдавалась со сторонних серверов, немного разгрузив файловый сервер хостинга и за счёт распределения источников ускорив загрузку страниц. В моём случае этим занимается модуль Photon в составе чрезвычайно популярного и периодически подвергающегося ожесточённой критике плагина JetPack.

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

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

В справке к PageSpeed Insights рекомендуемый специалистами Google процесс оптимизации изображений описан так:

Оптимизируйте изображения

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

Общая информация

Постарайтесь свести размер изображений к минимуму: это ускорит загрузку ресурсов. Правильный формат и сжатие изображений позволяет сократить их объем. Благодаря этому пользователи смогут сэкономить время и деньги.

Рекомендации

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

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

Существуют инструменты, выполняющие дополнительное сжатие файлов JPEG и PNG без потерь и снижения качества. Для файлов JPEG рекомендуется использовать jpegtran или jpegoptim (доступно только для Linux, выполнять с параметром —strip-all). Для PNG лучше использовать OptiPNG или PNGOUT.

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

Рассмотрим пример. Сегодня я фотографировал для следующей публикации складной нож и прогнал получившиеся фотографии через приложение FastStone Image Viewer («художественная» обрезка + изменение размеров до 1280 точек по ширине). Получилась папка с восемью файлами весом больше 3 (!) мегабайт.

Судя по всему, свежеустановленный просмотрщик FastStone Image Viewer по умолчанию сохраняет отредактированные фотографии в близком к максимальному качестве, что приводит к неоправданно большому «весу» файлов. Но такая настройка в нашем случае вполне оправданна, потому что алгоритмы Google сжимают фотки без видимой потери качества при 100 %-ном мастабировании, а значит, хорошего качества изображения останутся таковыми и после загрузки в Google Photos.

Для удобства лучше поместить загруженные фотографии в новый альбом, который практически сразу после создания можно скачать целиком в виде ZIP-архива:

Google Photos скачивание альбома целиком

Если сравнить сжатые в Google Photos фотографии с исходными, получится неслабая экономия.

Google Photos оптимизация изображений - результаты

816 Кб против 3,27 Мб. При этом качество фотографий, на мой взгляд, не пострадало вовсе. Тем же Фейсбуку и ВКонтакте стоит поучиться у Гугла оптимизировать фотографии. Более того, GPhotos наделён неплохими инструментами редактирования изображений — от наложения фильтров до ручной настройки контраста, яркости, насыщенности и т. д.

Таким образом, Google Photos — не только отличное облако для хранения и публикации фотографий, но и мощный инструмент оптимизации изображений для публикации в вебе. Только в случае с WordPress не забудьте отключить оптимизирующие плагины и тот же джетпаковский модуль Photon, иначе уже подготовленные к публикации фотографии подвергнутся дополнительному сжатию, что приведёт к заметной потере качества (см. для примера прошедшие через Google Photos, а затем Photon скриншоты в этой записи).

Простой способ оптимизации изображений для публикации в интернете: 5 комментариев

  1. Интересный подход. Даже не думал об этом. Кстати, в FSViewer можно поиграть с алгоритмами и степенями сжатия JPG и получить почти тот же результат что и у G.Photo.

    1. Наверное, но так или иначе придётся идти на компромисс, потому что даже скручивание качества Jpeg меньше 70 отражается на детализации фотографии.

      И даже обработанные специальными плагинами типа EWWW Image Optimizer изображения при сжатии без потери качества не проходят проверку тем же PageSpeed Insights, хотя, конечно, дело вовсе не в бенчмарке, а в балансе между качеством и размером. Главное достоинство моего способа — ничего настраивать не надо, картинки на выходе не отличить от оригинала, а один из авторитетнейших бенчмарков подтверждает, что лучше сжать невозможно.

      Photon в моём блоге очевидно портит картинки, но я продолжаю его использовать, потому что и фотки сами не ценные совсем, и заниматься оптимизацией через Google Photos довольно муторно. Хотя… можно скачать через FTP всю пачку опубликованных изображений, загрузить их в сервис, выкачать обратно и отключить Photon. Возни не так уж много, надо подумать)

  2. Я обхожусь без плагинов по сжатию, а сжимаю изображения ещё до загрузки в медиафайлы. Для этого использую онлайн сервис Optimizilla. Я стараюсь использовать как можно меньше wordpressовских плагинов, особенно когда что-то на сайте можно сделать ручками.

    1. Собственно, об этом в заметке и идёт речь) С другой стороны, если есть проверенный плагин, который делает всё «на лету», зачем корячиться «ручками»?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *