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

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

Сбалансированная оптимизация изображения

Проблема оптимизации изображений заключается в том, что нет никаких 100% правил. Оптимизация изображения — это всегда тонкий баланс между пользовательским опытом, привлекательностью и производительностью страницы.

Raluca Budiu, директор исследования Nielsen Norman Group, объясняет:

«Поскольку у мобильных устройств небольшой экран, слишком маленькие изображения дают слишком мало информации, а слишком большие изображения могут очень сильно замедлять страницу. Мы рекомендуем начать с картинки минимального размера и позволить пользователям увеличивать (или загружать увеличенную картинку).

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

Нет точных правил насколько маленькое должно быть изображение для мобильного устройства — это компромисс между качеством и размером страницы. Согласно httpArchive, средний JPG составляет 29 КБ, а средний PNG — 16 КБ.

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

Ряд инструментов позволяют эффективно сжимать изображения по отдельности или по партиям изображений. Например, изображение домашней страницы, приведенное выше, было сжато с использованием TinyPNG, что привело к снижению веса на 79%.

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

При разработке сайтов для мобильных устройств, планшетов и настольных компьютеров, будь то через выделенные URL-адреса (site.com и m.site.com) или на разных сайтах через один URL-адрес (адаптивный веб-дизайн), подразумевается, что размер изображений должен соответствовать самому большому устройству в этой категории.
Такая позиция, не совсем подходит для адаптивного веб-дизайна (RWD). У RWD принцип состоит в том, чтобы обслуживать один и тот же сайт на разных устройствах, используя CSS для форматирования содержимого в соответствии с возможностями устройства и размером экрана.

Однако, это не означает, что веб-сайты должны обязательно применять однообразный подход к изображениям, говорит Alex Painter, консультант по веб-эффективности в NCC Group:

«Страницы часто медленны на мобильных устройствах из-за невозможности загрузки изображений, соответствующих размерам для окна просмотра. Может быть, отчасти виновата популярность RWD — идея о том, что один и тот же контент может быть изменен, чтобы макет работал в любом видовом экране, и может замаскировать тот факт, что изображения не были оптимизированы для мобильных устройств.

Множество сайтов загружают одни и те же изображения как на рабочий стол, так как и на мобильные устройства, — при этом мобильные версии просто уменьшаются в размерах. Пользователь высокопроизводительных устройств в быстрых и надежных сетях может это сразу и не заметить. Но это может сделать веб-сайты совершенно непригодными для людей с более слабыми мобильными устройствами, или с плохой связью.
.
У этой большой проблемы есть две причины. Первая: для доставки излишне большого изображения по сети требуется больше времени.
Вторая причина часто упускается из виду: мобильному устройству приходится серьезно потрудиться, чтобы: а) декодировать и б) масштабировать изображение. Это дорого стоит с точки зрения мощности обработки и памяти».

Но так не должно быть. Поддерживая Responsive Images Community Group, спецификация HTML упрощает разработчикам создание нескольких альтернативных изображений для разных типов устройств — для разных размеров экрана (просмотр), разрешений (количество пикселей) или возможности устройства.

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

Alex Painter:
«Выбор правильного изображения для окна просмотра теперь достаточно прост. У нас были мультимедийные запросы CSS для фоновых изображений в течение некоторого времени, но до недавнего времени изображения, упоминаемые в HTML, были скорее проблемой.

Теперь у нас есть характеристика чувствительных изображений: элемент С атрибутом thesrcset, который позволяет определить, какое изображение должно быть выбрано, для какой ширины видового экрана (или разрешить браузеру сделать наиболее подходящий выбор из набора изображений).
Эта функция теперь очень хорошо поддерживается браузерами, и разработчики должны в идеале использовать ее, а не использовать JavaScript для достижения той же цели».

Кто использует изображения с откликом?

Быстрый взгляд на исходный код основных веб-сайтов, таких как Amazon, Facebook и BBC, подтверждает, что ни один из них еще не использует элемент Для обслуживания откликов.

Получат ли они пользу, если станут его использовать? Обслуживание различных изображений на каждой платформе потенциально имеет ряд преимуществ:

  • Позволяет веб-сайту показывать изображение большего размера с более высоким разрешением на рабочем столе.
  • Уменьшает размеры изображения и общий вес страницы и тем самым ускоряет время загрузки.
  • Позволяет мобильному сайту показывать увеличенное изображение на мобильном устройстве (обратите внимание на обрезанное изображение собаки выше).
  • Розничные продавцы могут отображать Mobile-Friendly Hero Images на мобильных устройствах, придерживаясь традиционных снимков на больших дисплеях.

Поиск лучшего формата изображений

Как мы уже знаем, наиболее распространенный формат изображений, используемых на мобильных и дружественных им сайтах: JPEG 46%, PNG 28%, GIF 23% и SVG 1% по данным httpArchive.

Существует два типа веб-изображения: растр и вектор. Первое состоит из точек (например цифровая фотография), а второе состоит из линий и фигур. JPEG, PNG и GIF являются растровыми. SVG — вектор. SVG — это более новый формат, который не так широко используется (пока), но рекомендуется для адаптивного веб-дизайна (RWD).
Есть «за и против» для каждого типа изображений, и у каждого веб-дизайнера есть свое мнение и любимые форматы. В целом:

  • JPEG чаще всего используется для веб-фотографий
  • GIF характерен для анимаций, а также простых графиков, значков и логотипов
  • PNG характерен для графиков более высокого качества, логотипов, значков и других иллюстраций и фотографий с графическими эффектами
  • SVG хорош для графов и логотипов, заголовков страниц – то, что разработано иллюстратором.

Альтернативы традиционным изображениям

Веб-страницы состоят из множества небольших изображений, таких как значки и кнопки. Если они сделаны с использованием отдельных изображений GIF / PNG / JPEG, все это добавляет размер странице, и для каждого из них требуется индивидуальный запрос браузера, что может замедлить время загрузки страницы.

Существует три метода, которые могут помочь сохранить размер страницы и запросы изображения:

  • CSS sprites – объединяют коллекцию меньшей графики в один файл CSS. Примечание: перегрузка спрайтов со слишком многими графиками или со слишком крупными — будет неоптимальна.
  • Icon fonts — это библиотека значков, отправленных как один файл.
  • Формы CSS– это формы, построенные с использованием CSS, а не как традиционное изображение.

Mike D’Agruma Lead Front-End Web Developer, E-volve Creative Group:

«Чтобы сохранить размер файла, я, как правило, не загружаю более крупные, более популярные библиотеки значков и использую Fontastic для создания собственных пользовательских шрифтов значков. Этот метод очень хорошо работает на разных уровнях: 1) Поскольку я использую только небольшое количество пользовательских значков, размер файла шрифта значительно меньше; 2) Иконки создаются с помощью SVG, что гарантирует, что они будут чрезвычайно четкими на устройствах; 3) Вы не можете превзойти этот вариант по гибкости, так как значки шрифтов очень легко настраиваются с помощью CSS.

Еще один отличный способ экономии времени, размера файла и запросов сервера — использовать CSS для создания фигур. Вы можете создавать большинство фигур и добавлять столько эффектов и переходов, сколько хотите с помощью CSS.
Возьмите мобильный сайт Summit County Metro Parks в качестве примера, в одном только разделе заголовка я смог использовать комбинацию символов CSS и значков шрифтов, чтобы создать то, что могло быть шестью разными изображениями. Активация меню для мобильных устройств показывает пример анимации в форме CSS (меню в стиле гамбургера, закрывается с помощью «X»), а использование дополнительного значка с правой стороны показывает открытое и закрытое состояния меню».

Методы веб-дизайна для улучшения времени загрузки

Что делать, когда вы уменьшили вес, удалили ненужные изображения и оптимизировали оставшуюся часть, но страница по-прежнему не загружается достаточно быстро?

Удостоверьтесь, что самый важный материал загружается первым, говорит Raluca Budiu:

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

Существует разница между предполагаемым временем загрузки и фактическим временем загрузки. Все, что имеет значение для пользователя, — это то, что контент, на который они смотрят или ищут, доступен. Они не хотят смотреть на пустой экран, в то время как браузер извлекает изображения, которые им не нужны.

Существует три распространенных метода для этого. Robert Gaines, разработчик веб-приложений в Канзасе, США, объясняет:

  1. Отсроченная или отложенная загрузка использует JavaScript для остановки загрузки изображений и других активов до тех пор, пока основное содержимое веб-страницы не закончит загрузку. Отложенная загрузка уменьшает время, затрачиваемое на первичный контент веб-страницы, но уменьшает необходимость сокращения изображений, которые в противном случае замедляли бы веб-страницу.
  2. Неспешная загрузка загружает активы, по мере их необходимости. Таким образом, содержимое сначала загружается над сгибом, а затем под сгибом, когда пользователь прокручивает. С галереями изображений, такими как поиск товаров на торговых сайтах, используются миниатюрные изображения, большие изображения загружаются только при нажатии соответствующего значка.
  3. Активная загрузка изображений сначала загружает картинки низкого качества во время визуализации веб-страницы, а затем заменяет их высококачественными изображениями после того, как загрузилось основное содержание. Активная загрузка картинок уравновешивает производительность с визуальной привлекательностью. В отличие от отложенной загрузки, она не заставляет пользователей ждать загрузки вторичных изображений после основного содержимого.

Такие инструменты, как Photoshop, позволяют сохранять изображения в виде прогрессивных JPEG или чередующихся PNG, которые будут загружаться описанным способом.

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

Широко известен (похоже) закрывающийся гугловский сервис 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 фотографии с исходными, получится неслабая экономия.

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

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

Было протестировано несколько самых известных программ для оптимизации изображений. Сразу оговорюсь: речь идёт об алгоритмах значительного уменьшения размера файла, «с потерями» («lossy»). Сжатие джипега без потерь особого интереса не представляет, в виду того, что JPEG - сам по себе формат для хранения изображений «с потерями», а lossless-сжатие любыми средствами даёт максимальный выигрыш в пределах 3-5%. Здесь же мы говорим о программах, способных уменьшить размер файла в несколько раз.

Кстати, оптимизация загруженных участниками файлов давно внедрена в Артклубе Gallerix, она осуществляется автоматически в два этапа: первый - сразу при загрузке (lossless, используется Jpegtran) и второй - спустя некоторое время программой JpegMini.

Если ваш домашний архив никогда не оптимизировался и занимает сейчас, например, 100 Гб - вполне реально уменьшить эту цифру в 2-2,5 раза (до 45-50 Гб) без вторжения в качество картинки и в 3-4 раза (до 20-25 Гб) с небольшим, не очень заметным снижением качества.

Немного о технической части вопроса. Если объяснять очень грубо, работу инструментов компрессии изображений можно сравнить с изобретением переменного битрейта для аудиофайлов. Более насыщенные различными звуками участки аудио кодируются с высоким битрейтом, тишина - с самым низким. В отличие от аудиофайлов с постоянным битрейтом, формат JPEG уже имеет встроенную оптимизацию, мощность которой определяется настройкой качества, устанавливаемой при сохранении файла из любой программы. Работа сервисов компрессии изображений так же основана на подходе переменного битрейта - выявлении фрагментов изображения, кодированием которых можно хитро пренебречь для экономии места на диске.

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

Исходные файлы

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

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

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

Последний файл взят с сайта Unsplash.com, автор Karl Fredrickson. Выступает в качестве примера фото, полученного профессиональной камерой с дорогой оптикой.

Инструменты

JpegMini

JpegMini, платная программа. Есть версии за 20 и за 149 USD, а также дорогая серверная версия. Десктопные версии работают одинаково, младшая имеет два ограничения: в скорости обработки и в максимальном разрешении файла (28Мп), старшая ограничена размером файла (60Мп). Работает на Windows и Mac.

TinyJPG

Есть платная версия в виде плугина для Adobe Photoshop (50 USD) и бесплатная онлайн-версия с ограничениями на размер файла и количество загрузок в сутки (которое, впрочем, очень легко обходится). Плугин работает также на Windows и Mac. Первые 500 файлов в месяц через API бесплатно, далее 0,009 USD за файл.

Compressor.io

Известный онлайн-сервис. Ограничен только максимальный размер файла, 10Мб.

Kraken.io

Популярный на Западе профессиональный сервис с высокими тарифами и жёсткими квотами. Бесплатная онлайн-версия ограничена максимальным размером файла в 1 Мб и вряд ли может восприниматься как инструмент. Это не более, чем демо-версия - обычная любительская камера не в состоянии выдать файл меньше 2-3 Мб. Тарифы на использование API начинаются с 5 USD в месяц за входящий объём 500 MB.

ConvertImage.net

Комплекс онлайн-инструментов для обработки изображений, среди которых есть и Jpeg-компрессор. Полностью бесплатен.

Jpeg-Optimizer.com

Онлайн-сервис. Полностью бесплатен и без ограничений. Есть ручная настройка уровня компрессии.

Optimizilla.com

Бесплатный веб-сервис. Этот же движок встречается и на других доменах. Многоязычный интерфейс. Ручная установка уровня компрессии (настройка появляется после загрузки изображения). Не более 20 файлов за раз.

DynamicDrive.com

Набор бесплатных онлайн-инструментов для обработки изображений. Оптимизация с ограничением файла 2,8 Мб. Выдаёт несколько готовых изображений с разными уровнями компрессии на выбор.

ShortPixel.com

Некий новый сервис с обилием разных тарифных планов, есть подписка с месячной оплатой и пакетные тарифы (10 000 файлов за 9,99 USD). Работает по API или через веб-интерфейс (до 20 файлов за раз). Ограничение размера файла в бесплатной онлайн-версии - до 10Мб.

ACDSee Ultimate

ACDSee Ultimate 9, профессиональная программа для организации и обработки изображений для Windows. Сохранение с включением «Optimize Huffman codes» и «Color Component sampling», качество 70%. Программа платная, цена начинается с 40 USD за самую скромную версию, но похожие настройки есть во многих бесплатных программах. Это пример чистого сохранения с небольшой lossless-оптимизацией.

«Чистый» JPEG

Сохранение файла с качеством около 70% (9 из 12) из Adobe Photoshop CS6, разновидность формата «базовая». Здесь чистый JPEG с использованием только возможностей формата, «нижняя точка отсчёта», доступная бесплатно из любой программы, умеющей сохранять в формате JPG.

Теперь немного о тех, кого забыли и почему. Вы это обязательно найдёте в Гугле, если попробуете найти оптимизаторы самостоятельно, поэтому не сказать о них нельзя.

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

JpegMini и Kraken оказались в самом низу таблицы, отсортированной по размеру итогового файла, но только эти две технологии жмут файл, полностью честно сохраняя картинку. В категории «10 баллов» JpegMini выглядит со всех сторон привлекательнее.

При совсем чуть-чуть менее приемлемой картинке, оказалось, что Compressor.io жмёт лучше маленькие файлы, а Optimizilla.com - большие, но это очень условное заключение в рамках данного теста.

Принимая во внимание соотношение размер/качество, то что находится в таблице ниже девяток, но имеет меньшие оценки при большем размере файла - практического интереса не представляет. А выше «девяток» - всего два сервиса.

Интересен оказался самый свежий сервис - ShortPixel . Артефакты очень заметны, но если сжать картинку до такого размера средствами самого формата JPG - картинка получается заметно хуже. ShortPixel ориентирован в большей степени на работу через API и относительно недорог, но очень деструктивен по отношению к изображению.

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

Интересная особенность TinyJPG в виде плугина: после обработки, файл может оказаться как в 8-10 раз меньше исходного по размеру, так и в полтора-два раза больше.

Тестовую картинку №2 лучше всего сжал ShortPixel , но на большинстве файлов с большим числом мелких деталей, победителем выходит веб-версия TinyJPG . Файл получается меньше, а исходное изображение уродуется не так сильно. Однако, TinyJPG допускает файл не более 5 MB, а ShortPixel , даже в бесплатной версии, принимает файлы до 10 MB.

Ещё один важный фактор замера (кроме итогового размера файла) - удобство использования на потоке. Например, если вы озадачились оптимизацией домашнего архива в 100 Гб в первый раз - обработать его полностью при помощи онлайн-сервисов будет очень трудоёмко и долго, из-за ограничений и необходимости порционной загрузки этого объёма на сервер и обратно. При том, что, за скромные 20 USD, с JpegMini для этого потребуется одно движение мыши (буквально: нужно только перетянуть корневую папку с изображениями в окно программы).

Кстати, плугин TinyJPG для фотошопа - выполнен не в виде фильтра, а в виде канала экспорта, т.е. для создания в PS сценария автоматизации он не годится. Поправка: с сайта производителя можно скачать скрипты для автоматизации, которые работают в любой версии Фотошопа, а в Photoshop CC экспорт через плугин встаёт как операция для пакетной обработки. Плугин не имеет никаких ограничений - проверено на файле с разрешением 130Мп (время обработки - около 7 минут на достаточно мощном компьютере).

Вообще, для массовой обработки есть только два варианта - это использование API и JpegMini . За обработку через API платить придётся за каждый обработанный файл.

Выводы

  • Все инструменты, позволяющие получить относительно приемлемый файл меньшего размера, чем даёт JpegMini - или визуально ухудшают в картинку и проигрывают ему в удобстве использования или имеют менее привлекательную ценовую политику - повременная или пофайловая аренда против единоразовой покупки у JpegMini .
  • Для случаев, когда качество картинки имеет первостепенное значение, если уменьшение размера файла за счёт визуальных ухудшений неприемлемо - JpegMini остаётся лучшим инструментом.
  • Для случаев, когда качеством исходных файлов можно немного пренебречь в угоду компрессии, есть смысл использовать обе версии TinyJPG , в зависимости от задачи.
  • Если выбирать только из бесплатных компрессоров, лучше всего выглядят Compressor.io и Optimizilla.com , которые почти не портят картинку, при том, что итоговый файл получается заметно меньше, чем у JpegMini .
  • Владельцам новостных сайтов с большим потоком иллюстраций, претензии к качеству которых не так остры, есть смысл обратить внимание на ShortPixel и TinyJPG . Их преимущества - демократичные тарифы, рекордное сжатие и работа через API. А если качество имеет значение (а деньги нет), то через API имеет смысл подключать Kraken или, в случае очень больших объёмов, серверную версию JpegMini .

обзор

Оптимизация картинок – важная часть продвижения сайта. Правильно оптимизированные изображения способствуют высшемуранжировнию ресурса в поисковой выдаче и ускоряют скорость загрузки контента. Что же такое оптимизация картинок и как она выполняется?

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

Перед тем, как начинать процесс «сжимания» картинок, оцениваем скорость загрузки web-страниц и разбираемся в том, какие показатели мешают улучшать результаты. Поможет в этом сервис PageSpeed Insights . Если страница наберет более 85 из 100 баллов – это хороший результат и именно к такой цифре нужно стремиться.

Например, сейчас результат такой:

А после оптимизации:

Такой результат стал возможен благодаря использованию рекомендаций Google:

Формат PNG

Как оптимизировать картинки, если для их сохранения использован формат PNG? Для этого можно воспользоваться рекомендациями Google:

Если планируется только базовая оптимизация изображений, можно использовать любую программу для редактирования картинок: GIMP , Photoshop и т.д. Но, какая из них лучше? Узнать это поможет небольшой эксперимент. Берем неоптимизированное изображение в формате PNG весом 293 КБ:

Создаем две папки: «GIMP» и «Photoshop» и помещаем в них одну и ту же картинку.

Как выполняется сжатие рисунка, без потери качества, при помощи редакторов GIMP и Photoshop?

Результат получается таким:


Итог: Photoshop выполнил оптимизацию изображения лучше, чем GIMP.

Но, это не значит, что можно пользоваться только этими вариантами. Есть другие, не менее эффективные утилиты для сжатия картинок в формате PNG. Например, и PNGOUT . Результат их работы следующий:

Несмотря на то, что OptiPNG на 1 КБ проиграла Photoshop, весит сама программа всего 96 КБ, а это большой плюс. А вот PNGOUT превзошла своих «конкурентов» по всем параметрам:

Работа с программами

В первую очередь, нужно скачать утилиту OptiPNG или PNGOUT (а может и обе) с официальных сайтов. Затем скопируйте файлы.exe в папку: C:\Windows.

Чтобы «упростить» задачу, достаточно просто скопировать эти файлы из папки Windowsи разместить их ярлыки на рабочем столе. Для удобства ярлык OptiPNG можно сразу назвать opting-o7 (параметр максимального сжатия при котором сохраняется качество). Остается просто перенести нужные картинки на ярлык и подождать, пока программа их оптимизирует.

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

Поэтому, есть еще один вариант работы с утилитами. Создаем тестовый документ, открываем и прописываем туда код (корректно работает только на ОС Windows):

Сохраняем файл в формате.reg и в кодировке ANSI, запускаем его, соглашаемся со всеми действиями и готово. Утилиты интегрированы в оболочку Windows.

Как же осуществляется оптимизация картинок? Процесс происходит так: правой кнопкой мыши нажимаем на папке, в которой находятся не оптимизированные изображения в формате PNG (файлы другого расширения утилита не изменяет) и выбираем программу, при помощи которой будем сжимать картинки. Можно делать это двумя утилитами по очереди.

Затем открывается командная строка, в которой демонстрируется процесс оптимизации:

Формат JPEG

Чтобы сжать изображение формата JPEG, нужны инструменты Jpegtran или Jpegoptim . Конечно, можно использовать редакторы GIMP и Photoshop. Однако Jpegtran или Jpegoptim эффективнее справляются с задачей оптимизации, поэтому скачиваем и устанавливаем обе программы.

Настройка утилиты Jpegtran

Активирование программы Jpegtran методом внедрения в оболочку Windows– не совсем подходящий вариант для утилиты. Она не будет корректно функционировать, так как код (jpegtran -copynone -optimize -outfile min.image.jpg image.jpg) предназначен для сжатия веса только одной картинки, а не всех файлов в папке.

Это значит, что нужно использовать другой способ активирования утилиты. Jpegtran не обязательно размещать в папкеС:\Windows, а вот копию ее можно здесь сохранить. Размещаем программу jpegtran.exe в любой папке и переименовываем (для удобства) в!jpegtran.

Затем при помощи Notepad++ создаем файл в кодировке UTF-8 (без BOM) с расширением.bat и названием!start. В него помещаем этот код:

Чтобы оптимизировать картинки, необходимо оба файла jpegtran.exe и!start.bat закинуть в одну папке и запустить процесс сжатия, используя файл!start.bat:

Настройка программы Jpegoptim

Утилита Jpegoptim без проблем внедряется в оболочку Windows. Для ее активации необходимо дописать код в конце файла PMGoptim.reg (он уже создан ранее для утилит для картинок формата PNG):

Процесс оптимизации картинок при помощи данной программы прост: нажимаем левой кнопкой мыши на папку с изображениями и выбираем «Run jpegoptim».

Результат работы Jpegtran и Jpegoptim:

Online-сервисы

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

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

По словам сотрудников Яндекса, “картинки являются очень важной частью нашего поиска. Они помогают пользователям увидеть прохождение Венеры по диску Солнца, узнать, как выглядит йоркширский терьер или новый седан tesla, состав группы свинцовый цеппелин и как завязать галстук”.

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

Просмотр изображений в сервисе Яндекс.Картинки

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

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

Наличие на сайте качественных изображений — одна из составляющих успеха большинства интернет-проектов. Пользователи предпочитают получать информацию в виде графических образов, а не текста. Она быстрее и лучше воспринимается, проще запоминается. Для повышения конверсии сайта и улучшения поведенческих факторов необходимо постоянное развитие графического контента. Нужно стараться максимально визуализировать все аспекты и нюансы имеющейся информации. Таким образом пользователи захотят просматривать больше страниц сайта, им будет проще определиться с выбором и совершить конверсионное действие.

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

Атрибуты изображений alt и title

Важнейшими атрибутами изображений, которые можно указать в соответствующем теге HTML-кода, являются атрибуты alt и title. Их значения — одни из главных источников информации об изображении для поисковых систем.

Атрибут alt — это альтернативный источник информации для пользователей, у которых показ изображений в браузере отключен. Если атрибут alt определен, то, когда показать картинку будет невозможно, на ее месте отобразится текст атрибута:

Изображение c заданным атрибутом alt

Без заданного атрибута alt изображение будет показано как пустое:

Изображение без заданного атрибута alt

Особенно важно описание картинок с помощью атрибута alt для сайтов, контент которых составляют преимущественно изображения.

Атрибут title предоставляет дополнительную информацию о картинке. Текст, заключенный в этом атрибуте, появляется при наведении курсора на картинку:

Изображение c заданным атрибутом title

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

Не встраивайте значимый текст в изображения. Иными словами, все важные надписи должны быть в текстовой форме.

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

Вносите подробный текст в тег alt .

Оптимальный вариант:

Предоставляйте достаточно контекста для изображений. Окружающий изображение текст должен соответствовать тому, что на нем изображено.

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

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

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

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

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

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

Не забудьте о текстах, описывающих картинку:

  • Подписи к картинкам (alt, title);
  • Прилегающий к картинке текст;
  • Имена файлов и скриптов, в том числе с учетом транслитерации и упрощенного подстрочного перевода;
  • Тексты ссылок на картинки с других страниц и с других сайтов;
  • Тексты и заголовки коротких документов, обрамляющих одиночную картинку.

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

Яндекс индексирует картинки только стандартных графических форматов (JPEG, GIF и PNG). Перед загрузкой изображения на сайт стоит убедиться, что оно сохранено в одном из этих форматов.

На ранжирование также влияет качество самого изображения.

В результатах поиска для каждой найденной картинки показывается ссылка на страницу, на которой текстовое описание картинки лучше соответствует словам запроса. Таким образом, текстовый контент страницы — важный фактор ранжирования в поиске по картинкам. Как и в случае с Google, он должен содержать максимум информации о том, что изображено на картинке, а она должна дополнять текст.

Действия, которые необходимо выполнить для оптимизации изображений

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

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

3. Атрибуты alt и title у изображений должны быть заполнены таким образом, чтобы максимально точно описывать его содержимое. В них необходимо использовать 1-2 ключевых слова, под которые оптимизирована страница. Лучше всего, если это будет основное ключевое слово, совпадающее с заголовком страницы и анкором ссылки на нее из основного меню сайта.

4. Под изображениями разместить подпись, которая будет также показываться снизу при нажатии на него. Подпись может быть идентичной атрибуту alt. Подпись должна стоять в том же абзаце “P”, ячейке таблицы “TD” или теге “DIV”, что и изображение.

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

6. В атрибутах указать высоту и ширину изображения.

7. Переименовать файлы изображений, написав их транслитом. В имени файла в 1-2 словах указать то, что содержится в изображении.

8. К изображениям можно дополнительно добавить атрибут LONGDESC. Подробнее о нем: http://htmlbook.ru/html/img/longdesc.

9. В свойствах jpg — файлов оригинальных изображений заполнить следующие поля:

— Название: совпадает с атрибутом alt изображения;

— Тема: название раздела, к которому относится товар;

— Оценка: 5 звезд;

— Ключевые слова: keywords со страницы раздела, к которому относится товар;

— Комментарии: описание товара из поля «О товаре» со страницы товара;

— Размеры: максимальный оригинальный размер;

— Ширина: максимальный оригинальный размер;

— Высота: максимальный оригинальный размер;

— Горизонтальное разрешение: максимальное оригинальное значение;

— Разрешение по вертикали: максимальное оригинальное значение;

— Глубина цвета: максимальное оригинальное значение;

— Владелец: название компании;

— Компьютер: название компании.

Заключение

Как видно, советов и рекомендаций по оптимизации изображений от самих поисковых систем вполне достаточно, чтобы иметь общее представление о том, что нужно делать, чтобы сайт смог нормально ранжироваться в поиске по картинкам. Многие из рекомендаций пересекаются между собой, некоторые — уникальны. Чтобы реализовать большинство из рекомендаций, достаточно единоразовых действий, благодаря которым будет достигнут стабильный положительный результат. Не стоит пренебрегать возможностью получить значительное количество посетителей на свой ресурс. Всегда следует размещать как можно больше графического контента, благодаря которому сайт сможет завоевать доверие постоянных и новых посетителей.