Модуль Image COMPRESSOR & Watermark & WebP & Lazy Load etc. by Sitecreator [Поддержка]

[sitecreator]

1.11.3 BETA 3

Сделаны улучшения, касающиеся вывода webp.

[pimur]

Да блин, всю неделю падали с форума сообщения, сегодня столько вот навалило обновлений. Решил обновиться - 4 минуты назад новая версия =)

Рома спать когда =)))

[sitecreator]

Немного информации для тех, кто понимает и видит.

Видите насколько упало качество после оптимизации за счет других решений?

 

Прошу заметить, что модуль Компрессор не позволяет допустить такого резкого ухудшения качества картинки.

Повторюсь, что это работа стороннего решения.

 

 

 

 

Вот  (НИЖЕ) как это делает модуль Компрессор.

Сравните Качество на входе и выходе. А также размер.

 

 

Изображение на входе (71К):

 

 

На выходе JPEG (обычный) 21К:

В виде ссылки: http://watermark.sitecreator.pro/img_test/3/barb-1280-320x490.jpg

 

 

 

На выходе после Компрессора формат WebP (9К):

 

 

В виде ссылки: http://watermark.sitecreator.pro/img_test/3/barb-1280-320x490.webp

[sitecreator]

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

Дотошный заказчик сразу обратит на это внимание.

 

Работа с графикой - это сложная задача.  И понимающий заказчик думает не просто о конечном весе изображений, но и беспокоится о его качестве.

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

 

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

 

 

[sitecreator]

Разница при использовании разных способов оптимизации (сжатия).

Пример использования на конкретных цифрах вполне конкретного сайта.

 

До.  Изображения не сжимались.  вес 4.52 Мб

 

 

 

 

 

 

 

До сжатия:

4.52 Мб

После применения mozjpeg + optipng:

3.36 Мб

WebP формат:

1.88 Мб

 

Итого, суммарный вес уменьшился в 2.5 раза благодаря формату webp.

[Sergeyy84]

4 часа назад, sitecreator сказал:

уменьшился в 2.5 раза благодаря формату webp

Интересно, а как при этом поисковики, в частности Гугл, относится к фото webp размером 1.88 мб? Сайт в зелёной зоне? Google page speed ругается на это фото?

 

[pimur]

Интересно, а как при этом поисковики, в частности Гугл, относится к фото webp размером 1.88 мб? Сайт в зелёной зоне? Google page speed ругается на это фото?
 

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

Не имеет смысла отдавать пользователю на странице каталога в списках товаров картинки например размером 1000px

На странице товара такие картинки обычно размещают на всплывающие окна в виде ссылки, типа рассмотреть поближе.

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

Отправлено с моего ZB631KL через Tapatalk

[sitecreator]

54 минуты назад, pimur сказал:

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

 

верно.

точнее, на геометрический размер (ширина, высота).

Ведь нет смысла грузить баннер шириной 1900 пикс на смартфон, у которого ширина вьюпорта ("виртуальный экран") 360 или 480 пикс, например.

 

Что же касается конкретного сайта, для которого привел выше результат, то на изображения гугл не ругается, но поскольку HTML формируется за 3 сек (перегруженность запросами в БД), то в данном конкретном случае это решает все.  Если у вас будет все остальное идеально и вес всех изображений даже будет равен 0 (НУЛЮ), то при отклике в 3 сек зеленая зона (90+) пока этому сайту не светит.   Но общую оценку гугла все же подняли даже при таком тупом отклике.

 

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

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

 

Немного аналогии.

Есть автомобиль с лысой резиной и убитым движком.

Заказчик ставит новую шикарную резину и... остается недовольным!  Почему?   Говорит, что автомобиль плохо едет. А двигатель чинить не надо?

Вот также и с оптимизацией изображений.   Вес изображений уменьшили втрое, а автомобиль не едет гугл мало накинул баллов?

А двигатель JavaScript не судьба проверить и починить?

 

Чем я могу тут помочь заказчику?

Вот у него JavaScript крутится 6 секунд, да еще 4 секунды разбирается огроменный CSS чтобы окончательно сделать рендеринг HML.

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

Плохо?  Да он перестал ругаться на изображения, баллов сверху накинул, но продолжает ругаться на JavaScript !!!

 

Уважаемые заказчики, а почему вы не смотрите на все рекомендации гугла, а только на конечные баллы?  Я что, должен и за ваши тормозные JavaScript отвечать тоже?

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

Резина  - это важно и необходимо, но этого недостаточно.

Кто-то ожидает хорошей скорости на убитом двигателе, хоть и с отличной резиной? 

 

 

Как нам тут разогнаться с убитым двигателем тормозым JavaScript ?

 

[sitecreator]

Подготовлена новая версия модуля Компрессор

1.12.0

 

В ней есть принципиальные новшества.

Возможностью создания WEBP и его вывода могут воспользоваться пользователи хостингов, у которых:

 

1) нет функции exec (proc_open) php.  Т.е. она заблокирована и нет возможности запускать cwebp

2) нет GD с поддержкой WEBP

3) нет imagic с поддержкой WEBP

 

Вот нет всего разом из вышеперечисленного.  Т.е. нет ни одного доступного способа для генерирования WEBP.

Это не является ограничением.

 

Вот для таких пользователей хостинг-услуг я предлагаю 4-й возможный способ генерирования WEBP:

 

4)  создание WEBP через использование возможности запуска в папке cgi-bin соответствующей программы, написанной мною на языке Си. Разумеется, что программа скомпилирована в бинарный файл. У себя в модуле Компрессор я назвал такой режим http_cwebp.

 

 

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

 

 

 

 

 

 

 

Обычно любой из выделенных пунктов как раз и означает запуск cgi-приложений в папке cgi-bin.

 

 

 

А вот это означает, что такой поддержки нет:

 

 

 

 

В общем если у вас сейчас нет возможности использовать сжатие изображений из-за ограничений возможностей хостером, но есть возможность запуска cgi-скриптов ("скриптов"), то новая версия модуля вам может помочь.

 

Ищу желающих предоставить мне возможность сделать тест нового метода на вашей хост-площадке. На своих серверах уже все протестировано.

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

 

Пишите в личку если есть желание.

 

[sitecreator]

Если у кого-то нет и 4-го способа (cgi-скрипты запрещены),   то будет еще 5-й способ. Самый универсальный - через cron.

Т.е. охват хост-площадок приближается к 99.9%

[sitecreator]

 

 

Показываю часть проблем, которые не решаются просто сжатием или использованием формата WEBP.

Нужно обращать внимание также на проблемы, которые напрямую связаны с версткой.

 

Гугл снова меняет свои алгоритмы оценки. Впрочем, он это делает постоянно.  Изменения незначительные.

Но некоторые рекомендации гугла я не смог объяснить.

 

Он ругается на неверно указанные размеры картинки из CSS (фоновое изображение). Картинка крохотная.

Но я не смог понять, где же именно гугл увидел " Invalid image sizing information ".  Возможно, что он не смог получить эту информацию из самой картинки.

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

 

 

 

[cherkas]

http://prntscr.com/nmy5k2

 

демо не работает

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

 

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

[sitecreator]

1 час назад, cherkas сказал:

демо не работает

 

работает.

просто непонятно с какой целью вы пытались что-то смотреть за пределами настройки модуля Компрессор.

Там вы ничего и не увидите.

 

У вас есть прямая ссылка для входа в админку модуля Компрессор.

 

Демо 2 (админка): http://watermark.sitecreator.pro/admin/index.php?route=extension/module/watermark_by_sitecreator

пользователь: DEMO

пароль: DEMO

 

1 час назад, cherkas сказал:

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

 

как угодно можете сделать.

 

1 час назад, cherkas сказал:

нужно абсолютно не прозрачный,

 

без проблем.

делайте непрозрачный.

или прозрачный с любой степенью прозрачности.

 

Подготавливайте водяной знак в JPEG. и накладывайте. будет непрозрачно как вам нужно.

ставите параметр в 100 в модуле, и будет непрозрачный.

 

 

[cherkas]

1 час назад, sitecreator сказал:

просто непонятно с какой целью вы пытались что-то смотреть за пределами настройки модуля Компрессор.

Там вы ничего и не увидите.

на страницу вошло само,никуда по админке не переходил

[sitecreator]

33 минуты назад, cherkas сказал:

на страницу вошло само

 

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

не надо пытаться зайти по адресу

/admin/

 

Заходите в точности по ссылке.

И если делаете скринштот, то делайте его полным вместе с адресной строкой. Вот так:

 

 

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

Все работает.

 

И еще раз правильный адрес для входа в демку админки модуля:

 

Демо 2 (админка): http://watermark.sitecreator.pro/admin/index.php?route=extension/module/watermark_by_sitecreator

пользователь: DEMO

пароль: DEMO

 

Вы просто зашли сюда:

 

[Sergeyy84]

В 18.04.2019 в 08:33, sitecreator сказал:

В ближайшее время будет доступна версия модуля 1.11.

 

Что принципиально нового?

 

1) Режим работы по расписанию с заданием допустимой нагрузки (картинок в минуту),  что обеспечит работу без лишней нагрузки у любого хостера.

Это уже реализовано,   тесты успешно пройдены на разных хост-площадках.

Подскажите, пожалуйста, когда планируется это внедрить в модуль?

[sitecreator]

8 часов назад, Sergeyy84 сказал:

когда планируется это внедрить в модуль?

 

сразу после реализации генерирования webp за счет cgi-bin скрипта.

т.е. скоро.

Но на практике особой пользы от работы по расписанию для создания webp не очень много если даже товаров несколько тысяч, т.к. webp создается очень быстро и так. А в модуле есть режим "щадящий на лету" для создания webp,  в этом случае он не создается одновременно с jpeg чтобы не делать лишнюю нагрузку,   а начинает создаваться лишь когда jpeg, png уже готов.

 

В общем, нынешний режим работы webp почти не грузит систему. И не требует очистки кеша изображений. Системный (кешеровщика) нужно очищать.

[Sergeyy84]

А создание jpeg/png по расписанию не планируется?

[sitecreator]

13 часов назад, Sergeyy84 сказал:

А создание jpeg/png по расписанию не планируется?

 

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

 

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

и это на лету.   Т.е. нагрузка на ресурсы значительно снижена уже.

[sitecreator]

Показываю как можно делать тест различных движков (графических библиотек) по созданию WEBP.

Прошу обратить внимание как ведет себя движок GD в случае файла с альфа-каналом.   Появляется черный фон.

Это баг некоторых версий GD.  Отсутствие этого бага находил только в самых свежих версиях GD.

Но, как водится, у хостеров очень часто далеко не самые свежие библиотеки GD используются,  даже в случае php 7.0+.

На более низких версиях php этот баг есть везде.

 

 

В модуле Компрессор предусмотрен способ обхода этого бага. Но, к сожалению, в GD  это не единственный баг по работе с WEBP.

 

Обратите внимание на баг с альфа-каналом.

 

Это не баг модуля, это баг GD.

 

 

 

[sitecreator]

Зависимость веса файла WEBP от выбранного режима cwebp. При одинаковом качестве Q=80.

И никаких проблем с альфа-каналом.

Такое может предложить только модуль Компрессор.

 

 

[sitecreator]

Вот с этой версией GD не наблюдалось проблем с альфа-каналом для WEBP.

Хостер Бегет.

 

 

 

[sitecreator]

Какой софт WEBP нужно ставить?

 

 

 

 

Просьба обращать внимание на возможность выбора для установки нужного софта для создания WEBP.

Если у вас древнее ядро Linux (Centos 6.9 и т.п.) - 2.6, то и софт ставьте соответствующий этому древнему ядру.

 

И нет ничего страшного если вы поставили один софт, а он у вас не заработал (не прошел тест).   Просто удалите кнопкой "удалить" и поставьте другой.  Там выбор всего из 2-х вариантов. Пробуйте оба если не знаете какой именно вам нужен. Какой заработает - вот на том и остановитесь.

На новых Linux (Centos 7 и тп. )всегда предпочтительно ставить современный софт (для Linux 3.10+), но и старый тоже будет работать.

 

 

Цитата

version `GLIBC_2.14' not found

 

Если вы видите при тесте cwebp такое сообщение, то вы попытались установить на старый Linux софт, который подходит только для новых Linux.

Смотрите текст выше.  Просто установите правильный софт. 

 

Для старой версии Linux софт тоже должен быть под старую версию Linux.

[sitecreator]

Как настроить положение водяного знака?

Не знаю по какой причине не все могут посмотреть как это работает в демке модуля Компрессор (админка),   а потому задают вопросы.

Отвечаю на вопросы наглядно в виде видеоролика.

 

 

 

 

 

 

 

Задание нужной прозрачности водяного знака:

 

 

 

[sitecreator]

Вот так работает WEBP Lazy Load модуля Компрессор.

Гугл одобряет!

 

Автоматически работает практически для любых изображений, находящихся на странице.

Работает исключительно плавно и без рывков (и разъезжаний) верстки даже если изображения еще не загружены.

Все это благодаря уникальному подходу.

 

Не создает лишнюю нагрузку.

 

Есть возможность ручной коррекции JS.

Доступно в версии модуля 1.12.*