Автоматическая оптимизация изображений
Предлагаю вашему вниманию решение для оптимизации изображений при загрузке на сайт.
Раньше использовал данный способ просто как плагин, решил отдать в массы в виде компонента.
Что делает данный компонент?
Оптимизация изображения для сайта — это уменьшение объема изображения без видимой потери качества.
При загрузке файла через файловый менеджер или тв-поле в ресурсе файла изображения (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.
Комментарии: 63
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
Основа понятна, у все софтины одна, режутся каналы… А вот на столько ужать png без визуальной потери качества…
Изображение загруженное без этого компонента: Изображение загруженное с компонентом: Upd. Если это фотографии товара minishop2 – оптимизация не происходит, а если эти же фото загрузить через диспетчер файлов, то они будут оптимизированы.
Спасибо.
Очень интересное решение с имитацией. Цена на tinypng кусается. От части Вы не правы (по поводу своего сервера).
У меня шаред beget. Я через docker поставил и pngnq и jpegopti. Все прекрасно работает. Хотел позже статью про оптимизацию написать, уже даже начал, но все времени не найду дописать…
2 This file [tinycompressor-1.0.0-beta1.zip] does not appear to be a transport package.
Обновиться просто. Откройте Установщик в админке, найдите пакет tinycompressor, нажмите удалить, принудительное удаление, загрузите новый пакет и установите.
К сожаление, не успел написать логику на обновление.
UPD: отправил на почту транспортный пакет.
Загружаю картинку в Минишоп галерею, потом скачиваю то, что является оригиналом. сравниваю размер закачанной с той, что скачала с сайта. Размеры одинаковые. ЧЯДНТ?
Через modx аплоадер уменьшает немного вес, вроде бы под минишоп поправили Вы?
Нет смысла создавать новый event. В том способе используется другой event — 'OnFileManagerFileCreate'. Просто при написании плагина, я проверял компоненты fastuploadtv и gallery, даже не предполагал, что будет использоваться функция 'createObject' из класса 'modFileMediaSource' в каких-то компонентах.
Tinycompressor — это компонент для обычных пользователей. Он помогает не только оптимизировать изображение, но и сохранить место на диске.
Уже обсуждалось ранее, что при наличии своего сервера — можно сделать всё, что угодно, если ты разбираешься в этом. Но очень не много разработчиков обладают навыками администрирования unix-систем.
типа вносишь в конфиг сервера
и все на выходе оптимизируется?
Уверен, так для многих будет удобнее и обновлять и использовать в будущем!
P.S. Сам компонент улётный — спасибо большое!
Спрашиваю не просто так. Дело в том, что TinyPNG сменили url для загрузки по ручному режиму вчера (совпадение).
Обновил готовый пакет здесь.
— Обновлен URL загрузки при имитации
— Добавлена интеграция в phpThumb
— Добавлен отлов исключений и скидывания их в лог ошибок.
И это кстати неплохой фикс. Использовать ключ для больших файлов (свыше 5MB) — отправлено в задачи.
Алексей, подскажите пожалуйста, что с планом по выпуску компонента? :)
Добавлена новая основная функция — сжатие pdf-файлов.
TinyPNG изображения от него воспринимает более менее, не 100% но подавляющее большинство.
Хочется уже увидеть компонент.
оффтоп: Есть ли у кого нибудь код и нормальный рабочий вариант связки плагинов для gulp?
Одно и тоже изображение:
Панда = 709.7 KB
optipic.io = 2,86 МБ
Вот этот файл, например, даёт такие результаты:
TinyJPG: 57.5 KB (-9%)
OptiPic: 14,89 КБ (-76%)
Я, как и Вы, использовал способ через внешний сервис, к сожалению, такой подход оставляет некоторый негатив (у меня), т.к. хотелось бы достичь эффекта хорошей оптимизации за счет компонентов самого сервера, но без использования правильной настройки сервера — это никак не организовать.
Ставил тот модуль, может не так настраивал, он все равно ругался на свои же изображения. Ставил на апач конечно.
А так конечно не стоит нагружать сервак, сжать один раз изображения и забыть. Интересно есть ли возможность этим модулем сжимать изображения так сказать в «ручную»? т.е. использовать его API
Наконец-то компонент обновлен до версии 2.0.1-beta.
Более подробная информация о новой версии
Спасибо Вам за терпение.