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

Статус
В этой теме нельзя размещать новые ответы.

d0ublezer0

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

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

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

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

Только как оно работает, хз. И работает-ли вообще.
 
Тоже недавно пришлось жать картинки. Юзал jpegtran, optipng

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

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

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

Третий фактор, а вы уверены что сжатие прошло по плану и картинки выглядят так же как и задумывалось? В идеале еще бы проверки делать (по bitmap, Для просмотра ссылки Войди или Зарегистрируйся, визуально)
 
Их много, несколько тысяч, выкачивать все, пережимать и заливать обратно - то ещё веселье.

Используй серверное кеширование картинок:

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
Для просмотра ссылки Войди или Зарегистрируйся

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

Для просмотра ссылки Войди или Зарегистрируйся

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

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

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

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

Таким образом все нужные картинки для вывода каталога генерируются предварительно.
 
Последнее редактирование:
Спасибо за советы!
Я пришел к выводу, что все таки быстрее на этом этапе слить все картинки, пережать их и залить обратно
Для решения задачи я выбрал RIOT Для просмотра ссылки Войди или Зарегистрируйся
Он меня и спас. Временно.

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

Для просмотра ссылки Войди или Зарегистрируйся
Возможно это подошло бы, если бы эти картинки проходили через офлайн-редактор.
А они, как правило, грузятся непосредственно с сайтов-доноров по прямым ссылкам сразу после парсинга.
То есть, в идеале их оптимизировать проходами какого-то скрипта по крону или разово, вручную.
 
Я пришел к выводу, что все таки быстрее на этом этапе слить все картинки, пережать их и залить обратно
Неистово плюсую: скачать, пережать и залить обратно проще, всегда так делаю.
Для этого использую старый добрый менеджер картинок из майкрософт офис 2003.
Да-да, он прекрасно и быстро справляется с пачками картинок, я использую настройку «сжимать для документов»:
mopm.png
Обычно на операцию из 1500-3000 картинок уходит полчаса: слить, отсортировать, большие сжать и залить обратно. Правда, большие картинки на сервере — ошибки пользователя, поэтому в общей массе их обычно не много.

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

Я сам пользовался FastStone Photo Resizer. И весьма успешно. Всё аккуратно, как ты сам настроишь, ужмёт, или расширит, и по объёму, и по размеру, и много там всего. Даже водяной знак вставит.
А так, вот даже перечень программок тут, с описанием: Для просмотра ссылки Войди или Зарегистрируйся
 
Треш :) Особенно про менеджер картинок из майкрософт офис.

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

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

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