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

[sitecreator]

35 минут назад, SunnRi сказал:

Обьясните пожалуйста.

 

ну так это нормально.

Модуль Компрессор выбирает возможные доступные варианты для формирования webp.

Из 3-х возможных у вас точно доступен один. И успешно пройден реальный тест.

 

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

В вашем случае - это софт от гугла, который установили вы через модуль Компрессор.

А других вариантов ваш хостер вам и не предложил.

Это просто информация о возможностях хостера.

Наличие всех возможностей разом - это вовсе необязательно.

 

 

[sitecreator]

 

Сравнение эффективности сжатых форматов.

качество 80, сравнивается с файлом, сгенерированным imagick  без сжатия.

 

jpeg        23.8 k

mozjpeg 18.87 k

webp      10.1 k

 

Файл, созданный за счет стандартной библиотеки  GD (в движке по-умолчанию) изначально имеет еще больший размер (при избыточном качестве 90). А именно 38к.

 

 

Т.е webp делает из файла, размером 38к файл размером в 9 к.  т.е. уменьшает его в 4 раза.

 

Ниже продемонстрировал результат на скриншоте.

 

 

 

 

 

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

[sitecreator]

В общем, все преимущества за webp.

особенно они заметны в случае замены PNG на WEBP.

Но и для jpeg они весьма заметны.

 

Довольно странно иногда читать когда появляется некое мнение от специалиста (?), совершенно не разбирающегося в графике, но утверждающего, что "того же самого можно добиться за счет jpegoptim". Видимо, что такой специалист сам никогда не использовал jpegoptim, но где-то прочитал, что это хорошо.

 

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

 

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

 

Все эти методы, не имеющие ничего общего с сжатием позволяет получить некоторый выигрыш а размере 1%...5%.  Но сравнивать такую оптимизацию с полноценным сжатием JPEG (тот же mozjpeg) или сжатым форматом WEBP - это совершенно некорректно.

 

Разумеется, что Компрессор использует все возможности для уменьшения веса, в том числе и удаление метаданных, и прогрессивный формат.  Но как дополнение к сжатию и/или WEBP.  

 

Сравнивать же эффективность jpegoptim (1%...5%) и WEBP (30%...70%)  как-то несерьезно.  И, тем более, заявлять, что "можно получить тоже самое".

Ну и сам webp тоже умеет выкидывать метаданные.

 

На больших файлах выигрыш от оптимизации за счет удаления метаданных будет существенно меньше 1%, т.е. никакой.

 

11 часов назад, markimax сказал:

Осталось "дело" за Сафари (apple - вы же новаторы, ну как так можно...)

 

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

Майкрософт и FireFox поступили вполне разумно, включив webp формат от конкурирующей фирмы в свои браузеры.

У apple же нередко очень странный подход к продвинутым решениям от конкурентов - она просто запрещает чужие передовые технологии на своих устройствах. При этом сама нормальной альтернативы не предлагает.

[sitecreator]

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

Решена самая главная задача - это формирование на любом хостинге самих изображений webp.

 

Сейчас добавлен еще 4-й метод для формирования изображений webp, который может быть полезен тем 2% хостингов, где не работают первые 3 метода.  А эти 3 метода охватывают 98% хост-площадок.

 

выводится в браузер другими средствами.

 

если используете VDS или хостинг, допускающий перенос управлением картинками с nginx на апачи, то это делается в конфиге.

 

если nginx отдает картинки, то в его конфиге,

если апачи отдает картинки, то в конфиге .htacceess

 

эти решения уже описывались.

Для хостинга https://www.ukraine.com.ua/

я давал инструкцию как это делать.  Прямо в картинках.

 

Для всех остальных будет универсальное решение для вывода webp практически для любого шаблона. Немного терпения.

[dexion]

@sitecreator  подскажите, пожалуйста, используется ли progressive в mozjpeg в вашем модуле? Или это идет в виде отдельной настройки? Что то не нашел ни в теме, ни в описании модуля ничего об этой опции.

[sitecreator]

6 часов назад, dexion сказал:

@sitecreator  подскажите, пожалуйста, используется ли progressive в mozjpeg в вашем модуле?

 

разумеется.

это не нужно настраивать.

это работает автоматически.

 

И вы много чего не найдете. Но это не значит, что этого нет.

Например, для webp есть порядка 20 настроек.

Представляете если бы я их все вывел в настройки модуля?

 

Но нет смысла выводить все настройки. Это будет шоком для пользователя.

Тот же прогрессивный режим нет никакого смысла отключать.

Там где он мешает, то он отключается автоматически.   Пользователь все равно не сможет понять когда включать, а когда - нет.

Не стоит грузить пользователя ненужной информацией.

[sitecreator]

Обновление до

1.10.6_BETA_6

 

Обновление касается в основном фикса для работы с площадками вроде я-маркета (и подобных).

Плюс мелкие доработки.  В том числе для большей совместимости с разными хост-площадками.

 

Настоятельно рекомендуется устанавливать (и обновлять поверх) с использованием ocmod-установщика.

Только отключите режим передачи по фтп в ocmod.

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

От этой дурной идеи передавать в движок по фтп полностью отказались в опенкарт 3.0.

А для 2-ки выпустили сразу фикс (файл приложен или найдете его по ссылке):

 

QuickFix OC2.2.0.0

 

https://www.opencart.com/index.php?route=marketplace%2Fextension%2Finfo&extension_id=18892

 

 

QuickFix OC2.2.0.0.zip

[Genareb]

Подскажите, эти модулем можно побороть эту рекомендацию Google Page Speed: "Настройте подходящий размер изображений"?

[sitecreator]

2 минуты назад, Genareb сказал:

Настройте подходящий размер изображений

 

это делается версткой в основном. Или верной загрузкой правильного размера изображения.

на главной странице проблема в основном из-за баннеров.

У меня будет отдельное решение в виде модуля для борьбы с этим.

 

К сжатию это не имеет отношения.

Т.к. в порядке приоритетов решаются задачи:

 

1) геометрический размер изображения (приводится в соответствие)

2) сжатие изображений

 

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

 

Проблему описывал здесь (смотрите внизу):

 

Цитата

А что это гугл пишет "изменение размера .... уменьшит"?

 

[pimur]

Подскажите, эти модулем можно побороть эту рекомендацию Google Page Speed: "Настройте подходящий размер изображений"?

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


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

[sitecreator]

Как быстро включить вывод WEBP в браузер без правки кода движка.

Если переключить обработку графики на апачи вместо nginx, то можно настроить вывод через конфиг в .htaccess.

 

Это как один из способов на общем хостинге. Если хостер это предусмотрел.

Сам код для вставки в .htaccess   есть в инструкции к модулю Компрессор.

 

Я показывал раньше скриншоты для хостера https://www.ukraine.com.ua/

Сейчас ниже вариант для webhost1.ru.

 

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

Но лучше добавлять нужные настройки в конфиг Nginx, это доступно для всех владельцев VDS.

 

Также будет универсальное решение от меня для любого хостинга для вывода WEBP  в браузер.  И для любого шаблона опенкарт.

Вам не нужно будет обладать знаниями по настройке сервера в таком случае.   Компрессор все сделает сам.

В данный момент тестирую.

 

[sitecreator]

Показываю на конкретном примере как уменьшается вес изображений для одной страницы после перехода на webp.

Причем у хостера нет exec, да он нам и не нужен.

Нам достаточно тех возможностей, которые есть на этом общем хостинге.

 

webhost1.ru

 

Данный хостер позволяет легко включить в .htacceess перенаправление с jpeg и png на webp.  Смотрите скриншот в предыдущем посте (выше).

 

Было 463 К суммарно (вес изображений),

а стало 237 К

Итого: на 49%, т.е. суммарный вес уменьшился вдвое.

 

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

На странице, на которой много изображений получите существенный выигрыш.

Для PNG уменьшение в несколько раз. В 5 раз, например.   Вы это можете увидеть на скриншотах.

 

Именно так нужно смотреть эффективность. Т.е. сравнивать вес загружаемых изображений ДО и ПОСЛЕ оптимизации.

Это как раз и говорит о том, что модуль Компрессор работает.

 

 

 

 

 

 

 

 

[rassigor]

это все понятно, интересует технология, которая позволит отдавать WEBPP браузеру который ее поддерживает и Джпег браузеру, который ее не поддерживает? это все уже есть? это все работает? 

[sitecreator]

31 минуту назад, rassigor сказал:

которая позволит отдавать WEBPP браузеру который ее поддерживает и Джпег браузеру, который ее не поддерживает? это все уже есть? это все работает? 

 

разумеется. Все работает.  тут волноваться нет никакого смысла.

вы эту страницу можете увидеть в любом браузере.

 

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

если сравнивать вес WEBP и вес картинок без оптимизации.

 

Но и по сравнению с уже сжатым mozjpeg файлом тоже есть небольшое преимущество. А перед сжатым png - большое.

 

[rassigor]

48 минут назад, sitecreator сказал:

 

разумеется. Все работает.  тут волноваться нет никакого смысла.

вы эту страницу можете увидеть в любом браузере.

 

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

если сравнивать вес WEBP и вес картинок без оптимизации.

 

Но и по сравнению с уже сжатым mozjpeg файлом тоже есть небольшое преимущество. А перед сжатым png - большое.

 

Ок, это нужно отдельно настраивать на серваке отдачу ? 

У меня стоит NGNIX и PHP FPM, нужно конфигурировать? или модуль все сам отдавать будет? Мне просто обновить все и включить WEBPP или что то еще нужно? 

[sitecreator]

51 минуту назад, rassigor сказал:

Ок, это нужно отдельно настраивать на серваке отдачу ? 

 

да, нужно настроить.

ничто не мешает это сделать.

Для апачи настройка идет вместе с инструкцией к модулю.

Для nginx выложу немного позже. Там вставить в конфиг нужно несколько строк.

 

Для всех остальных будет возможность в модуле просто нажать одну кнопку, и вывод в браузер будет обеспечен.  Причем независимо от того есть ли доступ к конфигам nginx или апачи, точнее, он не нужен. Немного позже. А сейчас есть mozjpeg (который немного уступает webp, но все же хорошо сжимает) + ручная правка конфига, для тех, кто разбирается.

 

 

[sitecreator]

Настройка конфига для nginx.  Для вывода WEBP.

 

Если неуверенно себя чувствуете в этом деле, то лучше ничего не делайте! Вы делаете все на свой страх и риск. Можете завалить сервер. лучше ко мне обратитесь за услугой (это не входит в стоимость базовой установки и настройки модуля), и результат будет и ваше спокойствие ничем не нарушится.

 

Настройки постарайтесь делать с пониманием, а также вы должны учитывать нюансы, которые могут иметь место.

 

Всегда перед изменениями делайте копии файлов. Это особенно касается файлов конфигурации.  В случае проблем делайте откат, т.е. возвращайтесь к рабочей конфигурации, файл которой вы сохранили.

 

Все владельцы VDS имеют доступ к данному конфигу.

Работоспособный код. Но помните о возможных нюансах!

 

Размещается сразу после  строки в конфиге. 

 

location / {

После первой такой строки в блоке server.  У вас может быть еще множество подобных строк (вложенных location / {).   Вам нужен именно первый (корневой, НЕвложенный) location / {.

 

 

 

Собственно часть конфига, отвечающая за вывод webp:
 

location ~* (^.+)\.(png|jpg|jpeg|PNG|JPG|JPEG)$ {
                 expires 30d;
                 if ( $http_accept ~* webp ) {
                    set $webp "A";
                }
                if ( $request_filename ~ (.+)\.(png|jpg|jpeg|PNG|JPG|JPEG)$ ) {
                    set $file_without_ext $1;
                }
                if ( -f $file_without_ext.webp ) {
                    set $webp "${webp}E";
                }
            
                if ( $webp = AE ) {
                    add_header Vary Accept;
                    rewrite (.+)\.(png|jpg|jpeg|PNG|JPG|JPEG)$ $1.webp break;
                }
          

        }

 

 

Если у вас работает HTTPS, то вносите правки в соответствующий блок server, в тот, где

Цитата

listen 88.888.88.888:443 ssl;

 

Если внесете в блок, который отвечает за http (порт прослушивания 80), то вы не увидите результата.  Можете вносить в оба блока (для 80 и 443 портов).

 

 

В ISPmanager это выглядит так:

 

 

 

======================================

Сперва заходите сюда:

 

 

 

 

Ищите блок server с названием вашего домена.

Не надо пихать абы куда!  Если не понимаете куда вставить код, то откажитесь! Не нужно экспериментировать!

 

 

 

 

================================

У вас, скорее всего, работает nginx+ апачи в связке.

Или nginx работает самостоятельно (без апачи).

В данном случае это непринципиально.

 

Указанный выше конфиг написан немного с избытком кода.  Но это не имеет принципиального значения.

Позже напишу немного поэлегантнее.

Главное - этот конфиг nginx  полностью выполняет свое назначение.

 

 

Получаете результат:

 

 

 

 

 

 

Пример неправильного конфига под спойлером.   Блок не в том месте вставили.
 

Спойлер

 

 

 

 

не забывайте при необходимости перезагружать nginx:

 

systemctl restart nginx

 

или

 

systemctl reload nginx

 

[dexion]

5 минут назад, sitecreator сказал:

if ( $http_accept ~* webp ) { set $webp "A"; }

https://www.nginx.com/resources/wiki/start/topics/depth/ifisevil/ а это не проблема?

[sitecreator]

16 минут назад, dexion сказал:

а это не проблема?

 

в чем именно?

т.е. какая ситуация должна возникнуть чтобы это стало проблемой?

[sitecreator]

http://watermark.sitecreator.pro

 

тут на демо-сайте можете посмотреть как выводится webp.

И убедиться, что в любом браузере картинки отображаются.   Даже в самом древнем.

[Kindzaza]

Я думаю, он про использование директивы if

[sitecreator]

44 минуты назад, Kindzaza сказал:

про использование директивы if

 

да, if не рекомендуется использовать без крайней надобности.

ввиду того, что поведение if в конфиге не всегда прозрачно и предсказуемо в отличие от того же if  в языках программирования.

но есть случаи когда вполне оправдано применение if.

 

[sitecreator]

5 часов назад, sitecreator сказал:

Размещается сразу после  строки в конфиге

 

location / {

 

 

Друзья, не надо без понимания сути запихивать в первый попавшийся location!!!

И не надо абы в какой блок server запихивать код.

 

Лучше ко мне обратитесь, но не поломайте свои сервера.

Тут без понимания никак нельзя!

 

[sitecreator]

Кстати, если вы используете для вывода webp конфиг nginx,  то никаких проблем с индексацией изображений не возникает.

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

 

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

В результат индексации гугла попали уже изображения с водяным знаком.   Т.е. именно новые изображения, на которых уже водяной знак (в отличие от старых) и плюс используется формат WEBP.

 

За последние несколько месяцев (полгода или около того)  ни разу не было даже намека на какие-либо проблемы с индексацией изображений из-за WEBP.

Это мой опыт и опыт моих заказчиков.

Думаю, что многие и сами давно поняли, что нет ни одного основания бояться применять WEBP.

[dexion]

10 часов назад, sitecreator сказал:

в чем именно?

 т.е. какая ситуация должна возникнуть чтобы это стало проблемой?

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