[Ищу] Пакетный оптимизатор картинок

Тема в разделе "PHP", создана пользователем d0ublezer0, 17 окт 2017.

Модераторы: latteo
  1. d0ublezer0

    d0ublezer0

    Регистр.:
    21 май 2009
    Сообщения:
    305
    Симпатии:
    168
    Привет!
    Google Page Speed матерными выражениями (38 poor) говорит, что картинки товаров в каталоге на сайте нужно оптимизировать.
    Их много, несколько тысяч, выкачивать все, пережимать и заливать обратно - то ещё веселье.
    Есть ли обработчик, который может взять все файлы в папке на сервере и пройтись по ним, Пережав по возможности без визуальных потерь?

    Сам поискал - не нашел готового решения. Или хотя бы заготовки..
     
  2. funnywheel

    funnywheel WordPress developer

    Регистр.:
    6 авг 2010
    Сообщения:
    255
    Симпатии:
    209
    Есть целая пачка.
    jpegoptim, jpegtran, optipng, gifsicle и еще дофигище как под свои форматы файлов так и конкурирующих аналогов.
    Просто надо выбрать связку под jpg + png + gif.

    Если нет возможности ставить на сервак пакеты - оптимизируй локально и на хост залей уже оптимизированные картинки.
    Если надо именно пхп - пиши на пхп волкер директорий, который будет отсылать на внешний сервак картинку, там обработчик ее передаст например в optipng, результат твой пхп обработчик скачает и перезапишет им неоптимизированный файл. Подход кощунственный, но по такому принципу работают cloud-оптимизаторы картинок для популярных cms.

    На вариант с php-оптимизатором лучше положить и поставить нормальные линуховые пакеты. Хотя их тоже как-бы есть, если в поиске их поискать.
    https://github.com/spatie/image-optimizer
    https://github.com/nwtn/php-respimg

    Только как оно работает, хз. И работает-ли вообще.
     
    latteo и d0ublezer0 нравится это.
  3. latteo

    latteo Эффективное использование PHP, MySQL

    Moderator
    Регистр.:
    28 фев 2008
    Сообщения:
    1.609
    Симпатии:
    1.538
    Тоже недавно пришлось жать картинки. Юзал jpegtran, optipng

    Моменты, которые стоит учесть:

    После сжатия гугля всё равно ругался, выдав другую статью - дополнительно прогнал:
    Код:
    find -name '*.png' -exec convert '{}' -strip '{}' \;
    Надо и его аналог на php пилить.

    Второй странный фактор, на стейджинге все оптимизированные картинки гугля распознал как годные, на лайве начал ругаться на возможность пережать и ни jpegtran, ни optipng, рекомендованнные самим же гуглом с этим квестом не справились, в итоге выкачал то, что предложил гугл (вот тебе и облачный сервис для сжатия ;) ).

    Третий фактор, а вы уверены что сжатие прошло по плану и картинки выглядят так же как и задумывалось? В идеале еще бы проверки делать (по bitmap, перцептивный хэш, визуально)
     
    d0ublezer0 нравится это.
  4. alex_me

    alex_me

    Регистр.:
    25 янв 2017
    Сообщения:
    167
    Симпатии:
    113
    Используй серверное кеширование картинок:

    1. Исходное изображение в идеальном качестве и размере загружается на сервер. Причем желательно в папку, недоступную в паблике.
    2. При выводе изображения в паблике нужно указать параметры:
    - ссылку на иходное изображение (или идентификатор в БД или просто путь к файлу);
    - размер, качество и режим ресайзинга (inset, outbound), в котором нужно это изображение
    - (опционально) имя сгенерированного файла или префикс/суффикс и имени.

    <img src="<?= $im->getUrl($path, $width, $height, $quality, $resizeMode)?>">

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

    $sFileHash = md5($filePath . $width . $height . $resizeMode . $quality . filemtime($filePath));

    В итоге, получается такой сниппет

    <img src="/images/_cache/im/f0/f0f718_myOriginalFileName.jpg">

    Где,
    _cache - общая папка для кеша,
    im - подпапка для конкретного модуля/компонента, который выполняет генерацию
    f0f718 - уникальный хеш изображения
    myOriginalFileName - может быть любым названием.
    Можно спрятать оригинальное название файла, или добавить параметры размера и качества: f0f718_800x600x40.jpg

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

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

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

    ----
    Как это реализовать

    1. Установить imagemagick
    Если требуется конвертировать pdf в изображения, то и ghostscript в довесок

    2. Для удобства работы с imagemagick установить imagine
    https://github.com/avalanche123/Imagine

    3. Сделать компонент, выполняющий кеширование.
    Можно взять за образец вот этот, написанный под yii2

    https://github.com/noam148/yii2-image-resize/blob/master/ImageResize.php

    Все вышесказанное реализуется парой функций в 150 строк ).

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

    P.S. Да, и можно еще сделать как в Magento 2 - предварительную генерацию картинок каталога.
    Т.е. в параметрах каталога задаются параметры всех вариантов картинок товара
    - размер и качество основного изображения товара,
    - размер и качество превьюшки в листинге товара,
    - размер и качество еще какой-то там превьюшки в другом месте
    и т.д.

    Далее нажимаем кнопку "сгенерировать кеш картинок". Скрипт тупо обходит все товары и для каждой картинки товара запускает маджентовский аналог
    $im->getUrl($path, $width, $height, $quality, $resizeMode)
    из примера выше.

    Таким образом все нужные картинки для вывода каталога генерируются предварительно.
     
    Последнее редактирование: 17 окт 2017
    d0ublezer0 нравится это.
  5. alex_me

    alex_me

    Регистр.:
    25 янв 2017
    Сообщения:
    167
    Симпатии:
    113
  6. d0ublezer0

    d0ublezer0

    Регистр.:
    21 май 2009
    Сообщения:
    305
    Симпатии:
    168
    Спасибо за советы!
    Я пришел к выводу, что все таки быстрее на этом этапе слить все картинки, пережать их и залить обратно
    Для решения задачи я выбрал RIOT http://luci.criosweb.ro/riot/
    Он меня и спас. Временно.

    Предложенные серверные решения все же требуют времени на внимание к себе и некой подготовки. Я-то наивно рассчитывал, что есть готовая волшебная кнопка "сделать красиво".
    Полагаю, самым простым вариантом будет jpegtran в цикле по файлам
    <-------------- добавлено через 674 сек. -------------->
    Возможно это подошло бы, если бы эти картинки проходили через офлайн-редактор.
    А они, как правило, грузятся непосредственно с сайтов-доноров по прямым ссылкам сразу после парсинга.
    То есть, в идеале их оптимизировать проходами какого-то скрипта по крону или разово, вручную.
     
  7. Den1xxx

    Den1xxx

    Moderator
    Регистр.:
    15 янв 2014
    Сообщения:
    279
    Симпатии:
    152
    Неистово плюсую: скачать, пережать и залить обратно проще, всегда так делаю.
    Для этого использую старый добрый менеджер картинок из майкрософт офис 2003.
    Да-да, он прекрасно и быстро справляется с пачками картинок, я использую настройку «сжимать для документов»:
    mopm.png
    Обычно на операцию из 1500-3000 картинок уходит полчаса: слить, отсортировать, большие сжать и залить обратно. Правда, большие картинки на сервере — ошибки пользователя, поэтому в общей массе их обычно не много.

    Их при закачке надо оптимизировать, тогда не будет нагрузки, т.к. качаются по одной.
     
  8. kolben

    kolben Создатель

    Регистр.:
    26 сен 2016
    Сообщения:
    15
    Симпатии:
    6
    Я сам пользовался FastStone Photo Resizer. И весьма успешно. Всё аккуратно, как ты сам настроишь, ужмёт, или расширит, и по объёму, и по размеру, и много там всего. Даже водяной знак вставит.
    А так, вот даже перечень программок тут, с описанием: http://www.ixbt.com/soft/images-batch-mode.shtml
     
  9. neodim

    neodim Писатель

    Регистр.:
    27 июл 2007
    Сообщения:
    5
    Симпатии:
    0
  10. babahalki

    babahalki

    Регистр.:
    6 май 2016
    Сообщения:
    246
    Симпатии:
    98
    Треш :) Особенно про менеджер картинок из майкрософт офис.

    Мои 5 копеек в копилку. Даже на виртуальном хостинге есть возможность использовать пакеты вроде optipng, просто установка посложнее чем просто apt-get install optipng
    или
    yum install optipng

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

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