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

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

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

Перед тем, как начинать процесс «сжимания» картинок, оцениваем скорость загрузки 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-сервисы при сжимании изображения ухудшают качество. Иногда всего на несколько пикселей, но искажения все же заметны. То есть размер изображений нас вполне может устраивать, а вот качество оставляет желать лучшего.

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

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

Что делает наш модуль?Основная функция, максимально оптимизировать изображения, при этом практически не потеряв в качестве. Для чего это нужно?Причин несколько:Экономия свободного место на хостинге, т.к. как правило именно изображения "съедают" большую его часть.Соответствие требованиям PageSpeed Insights - требованиям по оптизимизации сайта, для его максимального ранжирования в поисковой системе.Увеличение скорости загрузки страниц, за счет уменьшения загружаемого траффикаК тому же:В июле Google запустит алгоритм Speed Update и обновит mobile-first индекс. В рамках этих обновлений скорость загрузки сайта и его мобильность станет серьезным фактором ранжирования.Проверить, есть ли у вашего сайта проблемы с размером изображений можно:здесьи здесь.Наш модуль OptiImg позволяет уменьшить размер изображений на сайте до 99% без видимой потери качества.Автоматическое сжатие изображений избавит вас от долгого и нудного пересохранения в сторонних приложениях.Никаких квот и ограничений, купите лицензию и конвертируйте столько файлов, сколько потребуется, без пополнений баланса и всяческих доплат!Уважаемые клиенты, обращаем ваше внимание, что лицензионный ключ дает возможность пользоваться нашим сервисом без ограничений, по истечению срока действия лицензионного ключа доступ к сервису будет возможен, но вы не сможете получать обновления для нашего модуля. Так же, обратите внимание, что при покупке продления, клбч в настройках модуля менять не требуется.Модуль работает по принципу "установил и забыл". Любое загруженное в инфоблок изображение будет автоматически сжато!Все изображения оптимизируются в 1 клик, все изображения загруженные в инфоблоки, медиабиблиотеку или при обмене с 1С - будут сжаты автоматически.На данный момент поддерживаются форматы JPEG и PNG.HTTPS - протокол поддерживается.PHP7 - поддерживается.Демо - период позволяет обработать 1000 изображений.Каждый день с помощью нашего модуля для 1C - Bitrix, обрабатывается до 500 тысяч изображений!Проверить уровень сжатия можно на сайте модуля.Обратите внимание, что модуль практически полностью написан на D7, на версиях 1С - Битрикс младше 16 - может работать некорректно. Как начать пользоваться?Чтобы упростить вам жизнь, наша команда всегда готова установить модуль на Ваш сайт под управлением 1С - Битрикс и произвести оптимизацию самостоятельно, для этого, после покупки присылайте запрос на наш e-mail - [email protected] c темой "Установка" , в теле письма укажите код купона и доступы к сайту на котором требуется произвести работы.Уважаемые клиенты!Не забывайте делиться своим опытом использования наших продуктов, оставляйте отзывы, пишите в обсуждения и на наш электронный адрес - [email protected], мы всегда рады вам помочь и получить обратную связь!

От АльфаГрупп

Купить: 2 000 1 800 руб.

Скриншоты

Описание

Технические данные

Опубликовано: 17.10.2015 Обновлено: 28.03.2019 Версия: 1.3.6 Установлено: Более 1000 раз Подходящие редакции: «Первый сайт» , «Старт» , «Стандарт» , «Малый бизнес» , «Эксперт» , «Бизнес» , «Корпоративный портал» , «Энтерпрайз» Адаптивность: Нет Поддержка Композита: Нет

Описание

Что делает наш модуль?

Основная функция, максимально оптимизировать изображения, при этом практически не потеряв в качестве.

Для чего это нужно?

Причин несколько:

Экономия свободного место на хостинге, т.к. как правило именно изображения "съедают" большую его часть.
Соответствие требованиям PageSpeed Insights - требованиям по оптизимизации сайта, для его максимального ранжирования в поисковой системе.
Увеличение скорости загрузки страниц, за счет уменьшения загружаемого траффика

К тому же:

Проверить, есть ли у вашего сайта проблемы с размером изображений можно:

Наш модуль OptiImg позволяет уменьшить размер изображений на сайте до 99% без видимой потери качества.

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

Никаких квот и ограничений, купите лицензию и конвертируйте столько файлов, сколько потребуется, без пополнений баланса и всяческих доплат!

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

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

Модуль работает по принципу "установил и забыл". Любое загруженное в инфоблок изображение будет автоматически сжато!

Все изображения оптимизируются в 1 клик, все изображения загруженные в инфоблоки, медиабиблиотеку или при обмене с 1С - будут сжаты автоматически.

На данный момент поддерживаются форматы JPEG и PNG.

HTTPS - протокол поддерживается.

PHP7 - поддерживается.

Демо - период позволяет обработать 1000 изображений.

Каждый день с помощью нашего модуля для 1C - Bitrix , обрабатывается до 500 тысяч изображений !

Проверить уровень сжатия можно на сайте модуля.

Обратите внимание, что модуль практически полностью написан на D7 , на версиях 1С - Битрикс младше 16 - может работать некорректно.

Как начать пользоваться?

Чтобы упростить вам жизнь, наша команда всегда готова установить модуль на Ваш сайт под управлением 1С - Битрикс и произвести оптимизацию самостоятельно, для этого, после покупки присылайте запрос на наш e-mail - [email protected] c темой "Установка" , в теле письма укажите код купона и доступы к сайту на котором требуется произвести работы.

Уважаемые клиенты!

Не забывайте делиться своим опытом использования наших продуктов, оставляйте отзывы, пишите в обсуждения и на наш электронный адрес - [email protected] , мы всегда рады вам помочь и получить обратную связь!

Отзывы (10)

Общая оценка: Всего отзывов: 10

Хорошее решение для оптимизации картинок

На момент 25,02,2019 решение полностью не рабочее, даже на их сайте http://www.optiimg.ru/ напрямую нельзя сжать изображение, оно зависает после загрузки.

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

Модуль отличный!!!

Как ниже писали, присоединяюсь, да это единственное решение, о котором я не пожалела! Модуль работает шустро, не зависает. Почистила сайт на 3 гб. Было 5 гб стало 2гб.
Супер модуль, молодцы!) Рекомендую)

Отличная техподдержка и крутой модуль

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

Здравствуйте

Техподдержка работает мгновенно, через 10 секунд уже ответили в онлайн чате и ответили на вопросы! Программа огонь, особенно когда много картинок! Всем рекомендую!

Отличная тех поддержка

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

Хорошее решение

Отличное решение! Ребята все сами установили и сжали изображения на 40 %. Спасибо!

Пока единственное решение о покупке которого мы не пожалели

Пока единственное решение о покупке которого мы не пожалели. Очистили 5 гб.

Очень полезный модуль и прекрасная техподдержка!

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

Отличный модуль, отличная поддержка.

Приобрели модуль, тут же подключилась поддержка и все настроила. Благодаря оптимизации фото, Google PageSpeed ставит сайту на большинстве страниц оценку более 80 баллов. Всем рекомендую данное решение.

Отличный модуль

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

Обсуждения (76)

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

Детальная картинка:
Access to undeclared static property: Alfa1c\Optiimg\OptiImg::$_1260989302 (0)
/home/bitrix/www/bitrix/modules/alfa1c.optiimg/include.php:1
#0: OptiImgEvents::CompressOnResize(array, array, NULL, string, string, boolean)
/home/bitrix/www/bitrix/modules/main/classes/general/module.php:490
#1: ExecuteModuleEventEx(array, array)
/home/bitrix/www/bitrix/modules/main/classes/general/file.php:1705
#2: CAllFile::ResizeImageGet(array, array, integer, boolean)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinputunclouder.php:40
#3: Bitrix\Main\UI\FileInputUnclouder::getSrcWithResize(array, array)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinput.php:477
#4: Bitrix\Main\UI\FileInput->getFile(string, string, boolean)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinput.php:283
#5: Bitrix\Main\UI\FileInput->show(array, boolean)
/home/bitrix/www/bitrix/modules/iblock/admin/iblock_element_edit.php:2539
#6: include(string)
/home/bitrix/www/bitrix/admin/cat_product_edit.php:3

Вылезает не всегда, но оооочень часто. При этом иногда на одном и том же товаре сначала глюк есть, на второй-третий раз глюка нет.

Сергей Заботин, судя по тому, что название функции обфусцировано - вы продолжаете использовать демо - версию, удалите модуль полностью и установите заново, если ошибка сохранится - напишите нам на [email protected] мы вам поможем.

Какие у модуля имеются возможности, если изображения хранятся в "облаках"? Например, если это Selectel?
Насколько я понимаю, модуль сжимает и при загрузке, и при ресайзе, но не сжимает, если изображения уже находятся в "облаках"?
Что планируете в этом направлении?

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

С облаком битрикса работать будет, т.к. битрикс файлы в облаке актуализирует время от времени.

Добрый день
На какой период действует лицензионный ключ? (обновления)

Иван Прилепин, Обновления доступны в течении 1 года, доступ к серверу не ограничен по времени.

1.2.8 версия.

Роман Петров, Пишите нам на email, разберемся.

Купил оптимизатор год назад, тогда воспользовался очень мало, сейчас хотел снова использовать, но у меня вышла ошибка авторизации?! мне что заново его покупать?
Что мне его каждый год покупать ради 100 фотографий?

Роман Петров, Купить продление вы можете, если хотите обновить модуль, если версия модуля старшей 1.2.2, то обновление сделать придется, т.к. в этой версии был большой рефакторинг в ней же сменился сервер к которому наш модуль обращается. Если ваша текущая версия новее, то пишите нам на электронный адрес, [email protected] - разберемся, почему возникает ошибка.

Что нового

1.3.6 (28.03.2019)	Исправлены мелкие ошибки в событиях
1.3.5 (15.03.2019)	Добавлен вариант более безопасной замены файла Переписан класс для работы с событиями
1.3.4 (20.01.2019)	Добавлена анимация в прогрессбар Удаленые deprecated методы
1.3.3 (12.06.2018)	Тест GPSI пернесен на страницу анализа
1.3.2 (06.06.2018)	Мелкие исправления
1.3.1 (05.06.2018)	Добавлена возможность проверить страницу в GPSI Опция сжатия через imageJpeg помечена как устаревшая, возможность включить удалена
1.3.0 (24.04.2018)	Исправлены ошибки с кириллическими папками. Небольшие улучшения интерфейса
1.2.9 (22.02.2018)	Добавлена корректная обработка ситуации, когда библиотека cURL не установлена на сервере.
1.2.8 (24.01.2017)	Исправлена ошибка с правами доступа к модулю
1.2.7 (14.12.2017)	Исправлена ошибка, при которой происходило переполнение временными файлами.
1.2.6 (04.12.2017)	Улучшена стабильность
1.2.5 (15.11.2017)	Изменен способ получения сжатого файла
1.2.4 (30.10.2017)	Исправлена ошибка событий сжатия
1.2.3 (25.10.2017)	Исправлены ошибки в языковых файлах
1.2.2 (24.10.2017)	Изменения в структуре модуля Рефакторинг под D7
1.2.1 (22.10.2017)	Добавлена возможность задать порт Добавлен фильтр по ошибкам и возможность очистить лог обработки
1.2.0 (20.10.2017)	Переписаны методы Улучшена производительность Добавлена многопоточность
1.1.9 (17.10.2017)	Улучшена стабильность производительность Исправлены ошибки
1.1.8 (03.10.2017)	Исправлена ошибка сохранения позиции Исправлена ошибка отсылки статистики
1.1.7 (01.10.2017)	Большой рефакторинг модуля Модуль переписан под D7 Изменена структура класса Улучшена стабильность Улучшена производительность Удален устаревший режим файлового менеджера Добавлен корректный показ ошибок Исправлены мелкие ошибки
1.1.6 (22.04.2017)	Небольшой рефакторинг кода под D7 Исправлена ошибка, при которой сжатие на лету могло не срабатывать, при определенных условиях. Добавлена возможность исключать директории
1.1.5 (13.04.2017)	Исправлены баги Появилась возможность включить/отключить сжатие на лету в настройках модуля. ВНИМАНИЕ: если вы используете события сжатия в init.php, перед установкой данного обновления их необходимо удалить!.
1.1.4 (21.03.2017)	Исключена необходимость использовать allow_fopen
1.1.3 (19.02.2017)	Добавлена возможность вести лог Добавлена возможность проанализировать сайт перед запуском оптимизации.
1.1.2 (14.02.2017)	Исправлена ошибка, привожившая к подмене изображений при установленной галке в инфоблоке, создавать изображение из детального даже если создано.
1.1.1 (30.01.2017)	Добавлена возможность указать конкретную папку в упрощенном режиме Исправлена ошибка при которой не отправлялась статистика на сервер
1.1.0 (30.01.2017)	Исправлена ошибка, при которой отправка файлов не прекращалась при отсутствующем ключе. Исправлена ошибка, при которой не сжимались файлы находящиеся в папке включающей пустые непустые подпапки. Добавлена возможность продолжать процесс, с последнего обработанного файла. Улучшена производительность. Статистика теперь отправляется при загрузке страницы модуля.
1.0.9 (20.01.2017)	Исправлена критическая ошибка в режиме файлового менеджера. Исправлена ошибка засорения папки upload при неудачной обработке Добавлена возможность не вести статистику
1.0.8 (15.12.2016)	Добавлена поддержка события OnAfterResizeImage для сжатия изображений, измененных с помощью метода ResizeImageGet.
1.0.7 (14.12.2016)	Исправлена ошибка с шаблоном постраничной навигации
1.0.6 (19.10.2016)	Исправлена работа с расширениями верхнего регистра. Добавлена возможность пропускать битые файлы в упрощенном режиме.
1.0.5 (25.04.2016)	Новый интерфейс
1.0.4 (16.02.2016)	Исправлены проблемы с отображением ошибок
1.0.3 (14.02.2016)	Переработан интерфейс Добавлена возможность сжатия через функцию imagejpeg Исправлены баги Улучшены некоторые функции, добавлены новые
1.0.2 (02.02.2016)	Добавлена постраничная навигация для разделов

Установка

Установка стандартная из Marketplace.

Доступ к модулю осуществляется через раздел

Сервис -> Оптимизатор изображений либо по ссылке:
/bitrix/admin/optiimg_admin.php

Настройки модуля:
/bitrix/admin/settings.php?lang=ru&mid=alfa1c.optiimg&mid_menu=1

Обратите внимание, что для работы модуля необходимо в поле "Ключ" ввести ключ полученный на почту после покупки.

Решение использует библиотеку cURL, как правило она включена по умолчанию, если нет, обратитесь за помощью к вашему хостеру, либо системному администратору.

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

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

Поддержка

Как пользоваться нашим модулем правильно:

Устанавливаете модуль из маркетплейс.
Переходите по адресу /bitrix/admin/settings.php?lang=ru&mid=alfa1c.optiimg&mid_menu=1
Задаете качество сжатия, устанавливаете галочки Сжимать изображения при загрузке и Сжимать изображения при ресайзе, если ваш сайт работает по https протоколу то в поле порт вписываете 443 либо оставляете пустым.
Переходите в файловый менеджер и удаляете папку /upload/resize_cache/
Переходите в интерфейс работы с модулем /bitrix/admin/optiimg_admin.php
Нажимаете кнопку Оптимизировать

Распределение показателей ранжирования, не связанных с ключевыми словами, по шкале от 0 до 9, где 0 — фактор не влияет на ранжирование страницы, а 9 — фактор оказывает сильное влияние:

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

Почему от размера изображений зависят расходы на хостинг

Большие изображения влияют и на пропускную способность хостинга. Поэтому, если у вас большой трафик, то тяжелые изображения повлекут лишние расходы. Одно дело, когда 50 человек в день загружают фото в 1 Мб, но что, если их станет 5000?

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

Основные форматы изображений

На веб-ресурсах используется не так много форматов изображений. Рассмотрим 5 основных:

.jpg;
.png;
.gif;
.svg;
.bmp.

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

Сделав это, вы легко определите формат:

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

На Mac пройдите следующий путь: Finder > Preferences > Advanced — а затем поставьте галочку рядом с фразой «Show all filename extensions» (Показывать все расширения файлов):

На Windows 10 откройте Пуск, затем — Проводник > Вид > Параметры > Просмотр, снимите флажок с пункта «Скрывать расширения известных типов файлов» и выберите радиокнопку «Показывать скрытые файлы, папки и диски». После нажмите «ОК»:

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

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

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

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

.JPG

Полное наименование: Joint Photographic Experts Group (по названию организации-разработчика).

Год релиза: 1992.

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

Кстати, вы можете изменить окончание имени файла с.JPEG на.JPG и ничего катастрофического не произойдет.

Однако если вы просто загрузите фото с телефона или камеры и попытаетесь вставить на сайт без оптимизации, вас ждет неприятный сюрприз. Несжатое.JPG-изображение с телефона или цифровой камеры весит очень много. Под «много» понимается вес от 1 до 10 МБ (иногда и больше).

Ниже — пример.JPG:

Это снимок картины Винсента ван Гога «Ирисы». Хороший пример того, когда.JPG — оптимальный выбор. Картина полна красок, пустое пространство отсутствует вовсе, нет прямых линий. Сохранить это великолепие в небольшом по весу файле поможет только.JPG.

если сомневаетесь, какой формат использовать, берите.JPG;
это лучший формат для хранения фотографий;
объем такого файла уменьшается без потери качества.

.PNG

Полное наименование: Portable Network Graphics (портативная сетевая графика).

Год релиза: 1996.

Формат.PNG одновременно именуют проклятием и благословением. Для веб-дизайнеров он представляет прекрасную альтернативу.GIF.

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

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

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

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

.GIF

Полное наименование: Graphics Interchange Format (формат для обмена изображениями).

Год релиза: 1987.

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

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

Слева — пример декоративной границы окна из крошечного размера квадратиков формата.GIF. Каждый квадратик весит всего 54 байта

Проблема с форматом в том, что такие изображения плохо масштабируются. С ними происходит то, что называется пикселизацией. С появлением.PNG сегодня уже нет смысла сохранять изображения в.GIF. Но что насчет анимированных изображений?

Нам всем по душе так называемые GIF-анимации. Однако, как правило, весят они много — порядка 2 Мб и выше. Блогеры склонны использовать анимированные картинки в постах, жертвуя ради этого временем загрузки. Но если дело того стоит, то почему нет!

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

.SVG

Полное наименование: Scalable Vector Graphics (масштабируемая векторная графика).

Год релиза: 2001.

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

Однако есть существенный недостаток — фотографии не могут быть векторными. Но любое другое векторное изображение может быть сохранено в этом формате (если оно было создано в программе Adobe Illustrator или Corel Draw, то его можно экспортировать в.SVG).

Формат хорош для простых схем, диаграмм и графиков. Логотипы и иконки также нередко сохраняются в.SVG. Как правило, они должны быть простыми и/или иметь абстрактный дизайн.

Логотип NASA сохранен в.SVG-формате и весит всего 14 Кб. Хотя, как вы можете заметить, само по себе изображение большое и довольно четкое. В этом вся прелесть векторной графики. Пикселизации не возникнет, независимо от того, как сильно вы измените размер изображения.

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

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

.BMP

Полное наименование: Windows Bitmap, Bitmap Picture.

Год релиза: 1985.

BMP — формат хранения растровых изображений, разработанный компанией Microsoft. Это древнейший из всех файловый форматов интернета.

Если вы когда-либо пользовались программой Microsoft Paint, то создавали файлы с расширением.BMP. Большинство современных браузеров без проблем отображают файлы этого формата, но используются они редко. Эти файлы тяжелы и подвержены пикселизации при масштабировании.

Вывод: этот формат использовать не следует.

Уменьшение веса изображений без потери качества

Здесь помогут следующие инструменты.

Adobe Photoshop — отраслевой стандарт при редактировании изображений. Это платная программа, которая обойдется в $19.99 ежемесячно. Если не желаете платить, то можете найти в сети Adobe CS6, последнюю версию программы, которая не требует абонентской платы.

Одна из полезнейших для оптимизации изображений функций Photoshop — сохранение изображения в один из веб-форматов («Save for Web»). Позволяет быстро конвертировать вес изображения и его качество для различных типов файлов.

Сначала откройте в программе изображение, которое планируете оптимизировать:

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

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

Ширина поля для контента — 800 пикселей

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

Можете изменить размер до 800 пикселей в ширину — но иногда, напротив, стоит масштабировать его до 1000 пикселей. На экранах Retina, установленных в Mac, довольно легко распознать изображения низкого качества. А потому у большинства дизайнеров есть обязательное правило: ширина изображения должна как минимум в два раза превышать ширину поля с контентом. Это делается для того, чтобы изображения выглядели кристально чистыми даже на экранах от Apple.

Единственная проблема — вес такого изображения будет гигантским, что, несомненно, повысит время загрузки и снизит конверсию.

В нашем случае, ширина изображения равна 8 000 пикселей.

Для того, чтобы изменить его размер, на Mac потребуется кликнуть по вкладке «Изображение», а затем выбрать пункт «Размер изображения»:

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

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

Опробовав все форматы, остановите выбор на том, при котором объем файла был наименьшим, а качество — таким же высоким. В примере таким форматом оказался.JPG. Именно в нем было решено сохранить изображение:

Обратите внимание, что вес файла в формате.PNG равен 731 KB!

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

Тем, у кого нет Photoshop, подойдет бесплатный онлайн-сервис TinyPNG. Конечно, идеальной оптимизации не получится, но снизить вес файла можно и здесь. Главный недостаток — ресурс не позволяет менять размер изображения:

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

Теперь — просто загрузите новый файл на компьютер.

Если его вес достаточно велик (больше 350 Кб), сперва уменьшите размер изображения, а затем обращайтесь к TinyPNG. Если загружаете фотографии с iPhone, можете отправить их по почте, предварительно указав размер, отличный от оригинального. Как правило, большой и средний размеры наиболее предпочтительны.

GIMP

GIMP — невероятный инструмент. Это бесплатная десктопная альтернатива вездесущему Photoshop. При этом GIMP умеет все, на что способно детище Adobe. Так что если вы ограничены в средствах, обратите на эту программу внимание. Она доступна для Windows, Mac OS и Linux.

Какой объем файла предпочтительнее?

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

Если картинки потеряли четкость, стали зернистыми или тусклыми, заново оптимизируйте их, чтобы качество файлов повысилось. Если используете Photoshop и сохраняете изображения в.JPG, попробуйте сдвинуть ползунок качества изображения до 80% и более. Если сохраняете изображение в.PNG, попробуйте вместо.PNG-8 использовать.PNG-24.

Определим идеальные показатели объема файлов для основных типов ресурсов.

Интернет-магазины

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

Как правило, вес изображений товаров сводится к 75 Кб и меньше. Если картинки на сайте масштабируются, вам потребуются большие размеры. Тогда вес может вырасти до 150 Кб.

Блоги

Как правило, вес изображений для блогов не превышает 100 Кб. Но ваша задача — добиться минимального объема при сохранении качества. Откажитесь от GIF-анимации, если это нецелесообразно.

SaaS-порталы

На этих ресурсах есть три главных вида изображений: на главной странице (hero shot), иконки и скриншоты. Самая важная страница сервиса — главная, так что и все работы по оптимизации стоит начать отсюда.

Главное изображение

Обычно это огромные изображения на весь экран. Но ваш целевой объем — 250 Кб или меньше. Это будет непросто. Но крайне результативно. Многие не придают весу особого внимания, но оптимизация только его одного уже повысит показатели ресурса.

Иконки

На многих сайтах иконки наглядно демонстрируют функции или особенности продукта. Формат таких изображений, как правило, .PNG, а вес не превышает 15 Кб.

Скриншоты

Если скриншоты такие же широкие, как и главное изображение, постарайтесь уменьшить их вес до 250 Кб, если нет — 100 Кб и меньше. Лучший формат для скриншотов — .JPG.

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

Бесплатные онлайн-сервисы

TinyPNG. Главная ценность ресурса — в его простоте. Достаточно перенести изображение на главный экран, как его вес снижается;
Pixlr. Интерфейс сервиса похож на Photoshop. Он также показывает вес файла при том или ином качестве картинки;
Picmonkey. Необходимые функции доступны, а интерфейс интуитивно понятен.

Бесплатные десктопные инструменты

GIMP;
Paint.net. Лучшая версия Microsoft Paint. Одна из полезных функций — неограниченная история. Можете отменить столько действий, сколько нужно;
Seashore. Приложение с открытым исходным кодом для Mac. Известно своими багами, но все еще может быть полезным.

Несколько финальных советов по оптимизации для поисковиков. Имена файлов должны быть описательными. К примеру, не нужно давать изображению в интернет-магазине название вроде 324q345q345.png. Отразите в имени файла товар, изображенный на картинке. Также убедитесь, что каждое изображение имеет соответствующий тег Alt в коде изображения:

Эта информация позволит картинке участвовать в поиске по изображениям Google или Яндекс.

Секреты оптимизации заголовков и изображений от ведущих контент-ресурсов

Заключение

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

От автора: каждый разработчик знает, что в вопросе веб-производительности и пользовательского опыта важно каждое изображение. Изображения – это низко висящие плоды оптимизации производительности. Сжатие без визуальной потери качества может принести пользу организациям путем снижения веса страниц без ущерба для работы пользователя, что повышает производительность и привлекает все больше аудитории. Существует множество техник, для определения того, какое изображение необходимо загрузить, но эти «правильные изображения» еще необходимо создать. Целью веб-разработчиков и сервисов по повышению производительности должно быть обеспечение всех пользователей на всех типах устройств и во всех браузерах оптимальными изображениями. (Другой целью должна быть доступность, но это тема для отдельной статьи!).

Определение нужных изображений

Существует несколько front-end методов для обслуживания правильных изображений, среди которых можно выделить медиа запросы для фоновых изображений и теги и с атрибутом srcset для изображений переднего плана.

С помощью @media запросов можно задать, какое фоновое изображение использовать под определенное разрешение экрана и плотность экрана. Например, на старый лэптоп можно посылать изображение lowers.jpg, а на iPad Pro – hires.jpeg:

header { background-image: url(img/hires_header.jpg); } @media only screen and (min-device-pixel-ratio: 2) and (min-width: 1024px) { header { background-image: url(img/hires_header.jpg); } }

header {

@ media only screen and (min - device - pixel - ratio : 2 ) and (min - width : 1024px ) {

header {

background - image : url (img / hires_header . jpg ) ;

А что с изображениями переднего плана?

Техника клоунской машины 2013 года работала на том, что SVG в медиа запросах использовал в качестве размеров окна ширину и высоту контейнера, а не браузера. К счастью, текущая поддержка в браузерах тега picture и атрибута srcset позволяет забыть про этот трюк и picturefill полифил.

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

Работа с picture, source и атрибутом srcset похожа на медиа запросы. Вы указываете, какое изображение переднего плана необходимо использовать под определенный размер окна и плотность экрана:

< picture >

< source srcset = "small_lowres.jpg, small_highres.jpg 2x" media = "(max-width: 768px)" >

< source srcset = "default.jpg, default_highres.jpg 2x" >

< source srcset = "large_lowres.jpg, large_highres.jpg 2x" media = "(min-width: 1024px)" >

< img src = "default.jpg" alt = "image descriptor" >

< / picture >

Обратите внимание: всегда вставляйте стандартный тег img в picture, в том числе и атрибут alt с описанием изображения.

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

< img src = "default.jpg"

srcset = "large.jpg 1024w,

Medium.jpg 768w,

Default.jpg 420w"

sizes = "(min-width: 1024px) 1024px,

(min-width: 768px) 90vw,

100vw"

alt = "image descriptor" / >

При помощи атрибута type можно загружать изображения разных форматов:

< picture >

< source srcset = "photo.jxr" type = "image/vnd.ms-photo" >

< source srcset = "photo.jp2" type = "image/jp2" >

< source srcset = "photo.webp" type = "image/webp" >

< img srcset = "photo.jpg" alt = "My beautiful face" >

< / picture >

Если код сверху для вас что-то новенькое, то JPEG-XR и старыйMIME-тип image/vnd.ms-photo используются для Windows Media Photo, проприетарного формата изображений Microsoft. Поддерживается в IE8+ и Microsoft Edge. JPEG 2000 – это jp2, будет отображаться в браузерах Safari при использовании разметки выше. WebP – формат изображений со сжатием без потери качества, работает в Opera и Chrome. Firefox выберет формат по умолчанию, PNG-A, SVG, GIF или JPEG.

В Firefox и IE8 необходимо прописывать JPEG или PNG фолбек. Firefox и Safari экспериментируют с поддержкой изображений формата WebP, однако по данным сайта CanIUse.com нет никаких намеков на ближайшую поддержку.

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

Почти безграничная настройка

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

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

Если DOM записывается в браузер исключительно через клиентский JS, как бывает в большинстве React приложений, браузеру можно послать запрос на одно правильное изображение, однако пока код парсится, пользователь может наблюдать частично загруженный неинтерактивный экран (скриншот). В более общем сценарии, когда на сайте есть серверная часть, переписывать запрос на изображение в JS – неоптимальный вариант: браузер сначала загрузит оригинал при парсинге DOM, затем загрузит второе, уже оптимизированное изображение после обновления DOM.

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

К сожалению, спецификация Client Hints, добавляющая информацию о соотношении пикселей на устройстве и ширине окна в поля заголовков HTTP запросов, реализована только в Blink браузерах (Chrome и Opera). Если знать браузер пользователя, разрешение и размер окна, обновление всех запросов на изображения можно автоматизировать, тем самым используя технику прогрессивного улучшения для серверных запросов. При помощи Client Hints можно подтвердить поддержку формата webP (Chrome и Opera поддерживают и клиентские подсказки и webP), разрешения и размера окна. На сайте Instart Logic есть скрипт Nanovisor, делающий то же самое для Client Hints. С его помощью можно посылать оптимизированные изображения в оптимизированных форматах, даже когда Client Hints не поддерживаются.

Техники по определению браузера не так умны, поэтому можно брать строку браузера из HTTP заголовков и таблицу поиска и с их помощью определять возвращаемый медиа тип на основе этих заголовков. Можно переписывать расширения изображения, а можно на каждый вызов изображения возвращать «правильный» тип изображения для всех браузеров, но с «неправильным» расширением. Например, если запрошено изображение foo.jpg, верните лучший медиа тип для браузера, но вызывайте foo.jpg, медиа тип не важен. На сайте Instart Logic мы возвращаем формат webP для бразуеров Chrome и Opera, JPEG-XR для Edge и т.д…. мы не переписываем путь к изображению. Мы просто используем расширение оригинала в имени файла, у нас это jpg. Мы пользуемся тем, что браузеры отрисовывают изображения тех медиа типов, которые они распознают, и не смотрят на расширения (или их отсутствие) в имени файла. В таком случае можно не менять разметку и DOM в JS, а также загружать всего одно изображение на один запрос.

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

Автоматизация процесса по созданию файлов

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

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

Оптимизация изображений может занять много времени на нестатических сайтах, где изображений могут быть тысячи, десятки тысяч и даже миллионы, все разных размеров, разрешений и медиа типов. В программе ImageMagick можно конвертировать изображения в PNG, JPEG, JPEG-2000, GIF, WebP и почти любой формат через командную строку:

В масштабе всего интернета для определения наилучшего качества для всех изображений нужна целая армия людей. Большинство конвертеров и сервисов снижают размер файла за счет снижения качества изображений по одному и тому же коэффициенту или уровню сжатия. К примеру, когда на моих сайтах было мало изображений, я мог вручную сжимать их. Качество менялось от низкого 35% до высокого 88%. Для галерей и других проектов с множеством изображений я использовал Adobe Fireworks для автоматизации сжатия и экспорта, сохраняя все в JPEG с качеством 78%. Как и я, большая часть инструментов по автоматизации сжатия используют одни и те же настройки качества, обычно это около 80%. Я выбрал 78% чисто случайно (немного основываясь на опыте). Волшебного значения качества, которое подойдет под все изображения, нет. Не существует магического уровня сжатия, который сжимает без потерь качества все изображения.

«Правильная» степень сжатия зависит от контента и того, как будет использоваться изображение. Уровень качества экспорта обычно зависит от деталей на изображении. В зависимости от контента подбирается разный уровень для каждого изображения. Зачастую чем больше деталей в изображении, тем ниже качество: пейзаж требует высокого качества под 90, а изображение с множеством деталей будет хорошо смотреться и на уровне ниже 50.

Автоматизировать настройку качества под каждое изображение все-таки можно. Сайт Instart Logic использует computer vision, машинное обучение и конвертер для оптимизации изображений с учетом содержимого, автоматизации процесса создания изображений, оптимизированных под разрешение устройства, браузер и сеть, а также для вычисления оптимального коэффициента сжатия без ущерба для работы пользователя. SmartVision – это алгоритмический подход, использующий машинное обучение для автоматизации адаптивных настроек под каждое изображение, сжимая изображение на максимум без потери качества (исключение составляют только первые несколько изображений, на которых происходит калибровка алгоритма машинного обучения). Продвинутые алгоритмы компьютерного зрения «заглядывают» в контент изображения и максимизируют уровень сжатия без ущерба для работы пользователя на уровне интеллекта. Парвиз Ахаммад объяснил свои алгоритмы для SmartVision намного лучше меня еще в 2014.

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