Автоматическая оптимизация изображений
Предлагаю вашему вниманию решение для оптимизации изображений при загрузке на сайт.
Раньше использовал данный способ просто как плагин, решил отдать в массы в виде компонента.
Что делает данный компонент?
Оптимизация изображения для сайта — это уменьшение объема изображения без видимой потери качества.
При загрузке файла через файловый менеджер или тв-поле в ресурсе файла изображения (jpg/png), он автоматически его оптимизирует.
Что использует?
В основе компонента используется api-компонент к сервису TinyPNG, но с небольшими доработками.
Бесплатный план api позволяет загружать 500 изображений в месяц, а дальше оплата за каждое изображение (1000 изображений в месяц — 4,5$, 2000 — 13,5$). Без ограничений загрузки в месяц, можно это делать вручную через их сайт, но с ограничениями: размер файла не должен превышать 5MB и не более 20 за раз.
Их API я доработал под второй вариант — имитация ручной загрузки через их сайт.
Также Вы можете использовать и обычный вариант с бесплатным/платным api — для этого вам в системных настройках необходимо указать Ваш ключ api в параметре «tinycompressor_api_key». Чтобы вернуться к имитации работы через браузер, указать в этом параметре «crazy».
Насколько эффективно?
Во время тестирования использовал тот и другой способ. По результатам: 10мб превратились 700кб.
Планируется ли доработка до ума?
Компонент пока находится в beta-версии и сыроват.
При наличии времени, чего всегда не хватает, планируется его доработка до следующих возможностей:
Пакет на modstore.ru
Проект на GitHub.com
UPD_1: готовый пакет обновлен для работы с minishop2
UPD_2: Обновлена версия пакета, проведена интеграция в phpThumb
UPD_3: Обновлена ссылка загрузки для режима имитации
UPD_4: Пакет добавлен на modstore.pro
UPD_5: Компонент временно отключен до выполнения доработок
UPD_6 (10/12/2017): Компонент обновлен до версии 2.0.2-beta.
Раньше использовал данный способ просто как плагин, решил отдать в массы в виде компонента.
Что делает данный компонент?
Оптимизация изображения для сайта — это уменьшение объема изображения без видимой потери качества.
При загрузке файла через файловый менеджер или тв-поле в ресурсе файла изображения (jpg/png), он автоматически его оптимизирует.
Что использует?
В основе компонента используется api-компонент к сервису TinyPNG, но с небольшими доработками.
Бесплатный план api позволяет загружать 500 изображений в месяц, а дальше оплата за каждое изображение (1000 изображений в месяц — 4,5$, 2000 — 13,5$). Без ограничений загрузки в месяц, можно это делать вручную через их сайт, но с ограничениями: размер файла не должен превышать 5MB и не более 20 за раз.
Их API я доработал под второй вариант — имитация ручной загрузки через их сайт.
Также Вы можете использовать и обычный вариант с бесплатным/платным api — для этого вам в системных настройках необходимо указать Ваш ключ api в параметре «tinycompressor_api_key». Чтобы вернуться к имитации работы через браузер, указать в этом параметре «crazy».
Насколько эффективно?
Во время тестирования использовал тот и другой способ. По результатам: 10мб превратились 700кб.
Планируется ли доработка до ума?
Компонент пока находится в beta-версии и сыроват.
При наличии времени, чего всегда не хватает, планируется его доработка до следующих возможностей:
- Ресайзинг изображения по умолчанию/заданным параметрам
- Отключение/Включение оптимизации по выбору
- Оптимизация уже загруженных изображений через файловый менеджер
- Сохранения на Amazon S3
Пакет на modstore.ru
Проект на GitHub.com
UPD_1: готовый пакет обновлен для работы с minishop2
UPD_2: Обновлена версия пакета, проведена интеграция в phpThumb
UPD_3: Обновлена ссылка загрузки для режима имитации
UPD_4: Пакет добавлен на modstore.pro
UPD_5: Компонент временно отключен до выполнения доработок
UPD_6 (10/12/2017): Компонент обновлен до версии 2.0.2-beta.
21 августа 2017, 17:14
Комментарии: 63
Всё было бы отлично, если бы Вы использовали свой сервер, который можете настроить под себя — тогда и использование многих компонентов не требовалось. К тому же сжатие pngquant в php делается через shell_exec. Да и пихать в неё неизвестный файл (загружаемый пользователем) через shell — это как «кинуть булыжник в стекло» в плане безопасности, где стекло это защита сервера. Всё равно, спасибо за Ваш комментарий, я для себя поставил заметку, что можно использовать дополнительные классы для компрессии изображения на выбор пользователя в зависимости от настроек сервера.
Ключевая фраза «почти». Знаете, я перепробывал около 6 компрессоров png формата, но ни один не достиг результатов tinypng. Сдается мне там или 2 софта поочередно обрабатывают одну картинку, или что-то свое.
Основа понятна, у все софтины одна, режутся каналы… А вот на столько ужать png без визуальной потери качества…
Основа понятна, у все софтины одна, режутся каналы… А вот на столько ужать png без визуальной потери качества…
Чет установил, и ничего…
Изображение загруженное без этого компонента:
Изображение загруженное без этого компонента:
Размеры 1620 × 1080, 359 063 Б (360 КБ на диске)Размеры 1620 × 1080, 503 611 Б (504 КБ на диске)
увы, подцепиться там негде, тоже смотрел. У родной галереи ms2 нет эвентов, ставил эвент на сохранение ресурса.
Очень интересное решение с имитацией. Цена на tinypng кусается. От части Вы не правы (по поводу своего сервера).
У меня шаред beget. Я через docker поставил и pngnq и jpegopti. Все прекрасно работает. Хотел позже статью про оптимизацию написать, уже даже начал, но все времени не найду дописать…
Очень интересное решение с имитацией. Цена на tinypng кусается. От части Вы не правы (по поводу своего сервера).
У меня шаред beget. Я через docker поставил и pngnq и jpegopti. Все прекрасно работает. Хотел позже статью про оптимизацию написать, уже даже начал, но все времени не найду дописать…
yadi.sk/d/21zsiED_3MDcdi — тут транспортный пакет.
Обновиться просто. Откройте Установщик в админке, найдите пакет tinycompressor, нажмите удалить, принудительное удаление, загрузите новый пакет и установите.
К сожаление, не успел написать логику на обновление.
UPD: отправил на почту транспортный пакет.
Обновиться просто. Откройте Установщик в админке, найдите пакет tinycompressor, нажмите удалить, принудительное удаление, загрузите новый пакет и установите.
К сожаление, не успел написать логику на обновление.
UPD: отправил на почту транспортный пакет.
Скачала с Гита посл.версию, установила на сайт.
Загружаю картинку в Минишоп галерею, потом скачиваю то, что является оригиналом. сравниваю размер закачанной с той, что скачала с сайта. Размеры одинаковые. ЧЯДНТ?
Через modx аплоадер уменьшает немного вес, вроде бы под минишоп поправили Вы?
Загружаю картинку в Минишоп галерею, потом скачиваю то, что является оригиналом. сравниваю размер закачанной с той, что скачала с сайта. Размеры одинаковые. ЧЯДНТ?
Через modx аплоадер уменьшает немного вес, вроде бы под минишоп поправили Вы?
Он использует другой способ загрузки файлов из xPDO. Я уже написал ему.
Нет смысла создавать новый event. В том способе используется другой event — 'OnFileManagerFileCreate'. Просто при написании плагина, я проверял компоненты fastuploadtv и gallery, даже не предполагал, что будет использоваться функция 'createObject' из класса 'modFileMediaSource' в каких-то компонентах.
Нет смысла создавать новый event. В том способе используется другой event — 'OnFileManagerFileCreate'. Просто при написании плагина, я проверял компоненты fastuploadtv и gallery, даже не предполагал, что будет использоваться функция 'createObject' из класса 'modFileMediaSource' в каких-то компонентах.
Я не про то, что будет плохо работать или не будет работать, а про то, что нужно учитывать и возможности других пользователей. Да, можно настроить сервер для оптимизации через shell и это будет безопасно. Но не все пользователи понимают, как правильно настроить сервер. Компонент рассчитан на использование в массах. В дальнейшем сделаю использование разных компрессоров, не только tinypng. Например, как при работе с кэшем — можно использовать APC/MemCache или написать свой — тут будет по аналогии, просто указать класс для работы с компонентом.
А не проще добавить модуль pagespeed? Там кроме оптимизации изображений, столько всякого оптимизаторского есть, что просто праздник какой-то.
PageSpeed это компонент для веб-сервера. При наличии прямых рук и полного управления сервером — его можно прикрутить к чему угодно. Для NGINX вообще необходима сборка из исходников. К тому же PageSpeed оптимизирует на выходе, а не на входе — это значит, что страница будет оптимизирована во время генерации, но изображения на сервере будут иметь тот же размер и вид.
Tinycompressor — это компонент для обычных пользователей. Он помогает не только оптимизировать изображение, но и сохранить место на диске.
Уже обсуждалось ранее, что при наличии своего сервера — можно сделать всё, что угодно, если ты разбираешься в этом. Но очень не много разработчиков обладают навыками администрирования unix-систем.
Tinycompressor — это компонент для обычных пользователей. Он помогает не только оптимизировать изображение, но и сохранить место на диске.
Уже обсуждалось ранее, что при наличии своего сервера — можно сделать всё, что угодно, если ты разбираешься в этом. Но очень не много разработчиков обладают навыками администрирования unix-систем.
Это ты команда сборки и установки nginx с модулем pagespeed. После того, как установится, да, будет оптимизироваться согласно твоим установкам. Там много вкусного. Правда, с кешированием я до конца не разобрался. Вот, например: szam5.com/
Почему на загрузите пакет в Modstore?
Уверен, так для многих будет удобнее и обновлять и использовать в будущем!
P.S. Сам компонент улётный — спасибо большое!
Уверен, так для многих будет удобнее и обновлять и использовать в будущем!
P.S. Сам компонент улётный — спасибо большое!
Он у Вас работает? Вы использовали собранный компонент или собирали из исходников?
Спрашиваю не просто так. Дело в том, что TinyPNG сменили url для загрузки по ручному режиму вчера (совпадение).
Обновил готовый пакет здесь.
— Обновлен URL загрузки при имитации
— Добавлена интеграция в phpThumb
— Добавлен отлов исключений и скидывания их в лог ошибок.
Спрашиваю не просто так. Дело в том, что TinyPNG сменили url для загрузки по ручному режиму вчера (совпадение).
Обновил готовый пакет здесь.
— Обновлен URL загрузки при имитации
— Добавлена интеграция в phpThumb
— Добавлен отлов исключений и скидывания их в лог ошибок.
UPD_3: TinyPNG обновили ссылку для загрузки файлов. Видно вчера забыл её учесть и поправил компонент у себя на сервере. Удалите компонент у себя и установите новую версию (она называется также 1.0.1-beta, время создание 23.08.2017 11:36) или дождитесь выхода компонента на modstore.
Перепробовал разные плагины для галп — все равно ругается пейджспид. Честно говоря он всех уже достал. Советует плагины для галпа которые нихера в итоге не сжимают как ему надо.
TinyPNG изображения от него воспринимает более менее, не 100% но подавляющее большинство.
Хочется уже увидеть компонент.
оффтоп: Есть ли у кого нибудь код и нормальный рабочий вариант связки плагинов для gulp?
TinyPNG изображения от него воспринимает более менее, не 100% но подавляющее большинство.
Хочется уже увидеть компонент.
оффтоп: Есть ли у кого нибудь код и нормальный рабочий вариант связки плагинов для gulp?
Я тут разработал компонент по интеграции optipic.io и MODX. После одобрения модератором сделаю анонс. Следите за новостями. Вроде, гугл хорошо воспринимает оптимизированные таким компонентом картинки.
Видимо, OptiPic лучше сжимает небольшие изображения.
Вот этот файл, например, даёт такие результаты:
TinyJPG: 57.5 KB (-9%)
OptiPic: 14,89 КБ (-76%)
Вот этот файл, например, даёт такие результаты:
TinyJPG: 57.5 KB (-9%)
OptiPic: 14,89 КБ (-76%)
Не совсем так. Тоже прошелся по Вашей картинке и тем и другим, только у TinyPNG — сжатие -31%. OpticPic — сжал меньше за счет потери качества — визуально почти не отличается из-за низкого разрешения. Тут всё индивидуально, в некоторых случаях будет лучше opticpic, в других TinyPNG :)
Бывает :) Я же сделал наоборот все загружаемые файлы отправляются на сжатия (для экономии места), но во время тестирования на большом проекте — возникли сложности, потому что разные компоненты используют разные схемы загрузки — пришлось подстраиваться. Сейчас компонент работает стабильно, добавлена возможность отключения сжатия всех загружаемых файлов (т.к. иногда этого не требуется), при этом оставив отправку на сжатие всех изображений созданных через библиотеку phpThumb. Но, к сожалению, из-за плотного расписания — нет времени сделать нормальную сборку.
Я, как и Вы, использовал способ через внешний сервис, к сожалению, такой подход оставляет некоторый негатив (у меня), т.к. хотелось бы достичь эффекта хорошей оптимизации за счет компонентов самого сервера, но без использования правильной настройки сервера — это никак не организовать.
Я, как и Вы, использовал способ через внешний сервис, к сожалению, такой подход оставляет некоторый негатив (у меня), т.к. хотелось бы достичь эффекта хорошей оптимизации за счет компонентов самого сервера, но без использования правильной настройки сервера — это никак не организовать.
Если Вас достал pagespeed и есть возможность самому настроить свой сервер, то я бы рекомендовал без «танцев с бубном» собрать nginx с модулем pagespeed. Тогда все отдаваемые изображение будут сжиматься и контент будет автоматически оптимизироваться. Но учтите, что это влечет нагрузки на сервер и VDS начнет подтормаживать при ограниченных ресурсах.
Спасибо за совет
Ставил тот модуль, может не так настраивал, он все равно ругался на свои же изображения. Ставил на апач конечно.
А так конечно не стоит нагружать сервак, сжать один раз изображения и забыть. Интересно есть ли возможность этим модулем сжимать изображения так сказать в «ручную»? т.е. использовать его API
Ставил тот модуль, может не так настраивал, он все равно ругался на свои же изображения. Ставил на апач конечно.
А так конечно не стоит нагружать сервак, сжать один раз изображения и забыть. Интересно есть ли возможность этим модулем сжимать изображения так сказать в «ручную»? т.е. использовать его API
Уважаемые члены сообщества!
Наконец-то компонент обновлен до версии 2.0.1-beta.
Более подробная информация о новой версии
Спасибо Вам за терпение.
Наконец-то компонент обновлен до версии 2.0.1-beta.
Более подробная информация о новой версии
Спасибо Вам за терпение.
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
Здесь упомянуты:
| Компонент | Текущая версия | Закачки |
| miniShop2 | 4.4.0-pl от 06.08.2024 | 26 122 |
| ms2Gallery | 2.0.12-pl от 25.09.2020 | 4 582 |
| tinyCompressor | 2.0.2-beta от 10.12.2017 | 1 640 |
| FastUploadTV | 1.0.1-pl от 15.09.2018 | 3 191 |
| PageSpeed | 2.1.8-pl от 29.01.2022 | 244 |
| phpThumbOn | 1.3.5-beta2 от 12.02.2019 | 11 619 |
20 декабря 2024, 19:42
Подскажите а как написать путь к файлу пресетов если папка core вынесена за пределы public_html и переименована?
выдает ошибку что путь к пресетам за...
20 декабря 2024, 13:32
Я-то понял :)
Исправил, может так понятнее будет.
20 декабря 2024, 07:11
вы были правы, благодарю
20 декабря 2024, 00:21
Превьюшки нашел.
Они в этом массиве [_embedded][items][номер файла][sizes]
Остался вопрос с кешированием
19 декабря 2024, 21:35
Попробуйте поменять
'tplFilter.row.msoc|color' => '@FILE chunks/tpl.mfilter2.filter.checkbox.color.tpl'на
'tplFilter.row.msoc|color~value~color' ...
19 декабря 2024, 21:22
Никак, но вот тут есть лайфхак
19 декабря 2024, 18:58
Я сильно поздно, но если вдруг нужно, пишите, помогу