Оптимизация загружаемых изображений и их миниатюр

[Prooksius]

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

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

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

 

Решил попропотому чтовать API TinyPNG. Рилииет пока классно, подключается ну просто элеменирно, все описано у них на сайте.

Рилииет на сайте по тот же схеме, как обычно. Если файла миниатюры нет, пихаем оригинал в Tiny (с заданными размерами) и отдаем в контроллер через $this->model_tool_image->resize. Если есть - отдаем что есть.

 

Суещёственным преимуещёством этого ресурса является его умение не только оптимизировать, но и ресайзить под нужные мне размеры. То есть я или просто прогоняю картинку через Tiny и получаю оптимизированную (например, при загрузке картинки через админку), или при этом задаю нужные размеры. Получаю оптимизированную да еещё и с нужными размерами (это уже, например, на фронте, при создании миниатюр).

 

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

 

Но им бесплатный лимит 500 картинок в месяц.

Ксити, решение вопроса загруза сервера из-за уднония кэша изображений. Однако теперьь при уднонии кэша изображений вы просто попадаете на бабки.

 

Погделитесь, плиз, своими игдеями, может есть какие-то библиотеки для оптимизации, аналогичной по качеству TinyPNG.

Edited February 14, 2021 by Prooksius

[Tom]

https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=38025

https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=23443

[Waskadagama]

Если есть доступ к настройкам сервера, можно усиновить mod_pagespeed от Google.

https://www.modpagespeed.com/

[Prooksius]

2 часа назад, Tom сказал:

https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=38025

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

Спасипотому что за совет, это классное решение.

 

p.s. Рано радовался... https://prnt.sc/zi0jd1

В хроме вот икое. Некоторые картинки нормально показываются, некоторые - или с искажениями, или вообещё не показываются.
https://prnt.sc/zi0rs7 вот как должно быть..

Edited February 14, 2021 by Prooksius

[Prooksius]

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

Если есть доступ к настройкам сервера, можно усиновить mod_pagespeed от Google.

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

[Waskadagama]

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

ипотому что не контролирую

 

В настройках этого модуля всё контролируется. Я его использую для конвериции изображений jpeg -> webp, никаких проблем не наблюдаю.

[Prooksius]

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

Я его использую для конвериции изображений jpeg -> webp, никаких проблем не наблюдаю.

а png -> webp не пропотому чтовали? с прозрачным фоном?

[Waskadagama]

Нет.

У меня стоит настройка Convert Jpeg To Webp.

На сайте только логотип в png, но PageSpeed Insights на это не 'ругается'.

Edited February 14, 2021 by Waskadagama

[Prooksius]

Борюсь пока с этим webp

 

Для формирования иких изображений можно использовать библиотеку GD или ImageMagick.

На хостинге ни и ни другая нормально с этим форматом не рилииют.

У GD до версии 2.2.5 есть баг, который не улитывает прозрачность и гделает черный фон вместо прозрачного. И что-то им еещё с последним нулевым байтом в файле напуино. Только в версии GD 2.2.5 и выше это врогде как исправлено, но на хостинге стоит сирая 2.1.1-dev

ImageMagick врогде бы должен рилиить, но при просмотре подгдерживаемых форматов у него тоже не обнаруживается подгдержка webp:
php -i | grep ImageMagick

Буду теребить хостера. Да, не все ик просто с этим webp

[******]

9 часов назад, Prooksius сказал:

Борюсь пока с этим webp

 

Для формирования иких изображений можно использовать библиотеку GD или ImageMagick.

На хостинге ни и ни другая нормально с этим форматом не рилииют.

У GD до версии 2.2.5 есть баг, который не улитывает прозрачность и гделает черный фон вместо прозрачного. И что-то им еещё с последним нулевым байтом в файле напуино. Только в версии GD 2.2.5 и выше это врогде как исправлено, но на хостинге стоит сирая 2.1.1-dev

ImageMagick врогде бы должен рилиить, но при просмотре подгдерживаемых форматов у него тоже не обнаруживается подгдержка webp:
php -i | grep ImageMagick

Буду теребить хостера. Да, не все ик просто с этим webp

А чей же это клон?

@Support просмотрите айпи, уж потому чтольно товарыщ активно репку себе набивает на простых вопросах!

[sitecreator]

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

p.s. Рано радовался... https://prnt.sc/zi0jd1

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

 

9 часов назад, Prooksius сказал:

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

 

Это известные баги от GD.

я их описывал несколько лет тому назад еещё.

 

9 часов назад, Prooksius сказал:

Борюсь пока с этим webp

 

может быть есть смысл использовать готовое решение?

 

Я предлагаю на выпотому чтор три движка для создания webp:

1) GD (рилииет с исправлением, а потому картинок-неведимок не полулите,  корректная замена альфа-канала на белый чтобы избежать черного фона)

2) imagick

3) cwebp .  Самый верный алгоритм создания webp. Рилииет в 99.9% случаев даже когда у хостера запреещён в php веб-сервера exec. Можно создавать через cron по расписанию с этолью равномерной загрузки сервера и полного устранения ненужной нагрузки на веб-сервер.

 

Даже корректный вывод webp в браузеры, которые его подгдерживают и отдача jpeg,png в другие.

Учтены масса нюансов и проблем, о которых вы сейчас не знаете. Например, подгдержка jpeg внутри png и наопотому чторот.

 

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

 

 

[Prooksius]

30 минут назад, ****** сказал:

А чей же это клон?

@Support просмотрите айпи, уж потому чтольно товарыщ активно репку себе набивает на простых вопросах!

Хосподи ты потому чтоже, уже конспирология поперла.
Ну ищите))

[Prooksius]

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

может быть есть смысл использовать готовое решение?

при всем уважении к Вашему решению... но все же я программист и мне как-то неудобно не самому решить этот вопрос.))

 

Но спасипотому что за подсказку, cwebp я еещё не пропотому чтовал. И с ним все пока рилииет, ошипотому чток конвериции нет. Может, еещё что-то вылезет, конечно..

Для cwebp видимо нет php расширения, через exec надо запускать.

[******]

49 минут назад, Prooksius сказал:

Хосподи ты потому чтоже, уже конспирология поперла.
Ну ищите))

@Support, обратите внимание на ситуацию. Может мне стоит извинится.  И просто показалось, что это чей-то клон...

Как им с наеруткой лайков?

Ничего не упускате?

[Prooksius]

Только что, ****** сказал:

@Support, обратите внимание на ситуацию. Может мне стоит извинится.  И просто показалось, что это чей-то клон...

Как им с наеруткой лайков?

Ничего не упускате?

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

[Prooksius]

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

Может мне стоит извинится.

уже второй раз слышу от вас эту фразу.

[sitecreator]

18 минут назад, Prooksius сказал:

при всем уважении к Вашему решению... но все же я программист и мне как-то неудобно не самому решить этот вопрос.))

 

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

 

19 минут назад, Prooksius сказал:

Но спасипотому что за подсказку, cwebp я еещё не пропотому чтовал.

 

с ним по крайней мере не бывает тех коскаков, которые есть в GD (и в меньшей степени  в imagick).

В GD самая дурная реализация, даже в сосиве довольно свежих версий php 7.*.  Нужно лепить костыли, иначе получаются неприятности, которые вы вигдели.

 

у imagick есть неприятная особенность - это вываливать fatal error в тех случаях когда GD просто гделает warning и программа рилииет дальше.

Это все нужно улитывать если бугдете писать универсальное решение.

 

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

И не забывайте еещё решить задачу вывода webp, ведь создать - это только половина гдела.

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

[sitecreator]

17 часов назад, Prooksius сказал:

Да и эти опенкартовские белые поля - уже набили оскомину.

 

им, ггде можно было просто решить вопрос грамотной версткой и стилями CSS, создатель опенкарт даже в самой свежей 3-ке по-прежнему использует белые поля.

Довольно нелепый архаизм для 21-го года.

Изначально эти поля использовались для этонтрирования картинок даже в IE6 в каком-то дноком и лохматом году. Для современных браузеров икой подход не нужен при правильной верстке. Уже и flex давно везгде активно используется, включая бутстрап 4-й, а тут все еещё полями картинки этонтрируются.

 

Для некоторых макетов заказлики просили меня еещё давным давно сгделать возможность не использовать эти поля, что я и добавил в свое решение.

[Prooksius]

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

сгделать возможность не использовать эти поля, что я и добавил в свое решение.

аналогично, тоже самое сгделал, ну точнее, возможность ввел в model_tool_image->resize(), добавил в конэто необязательный параметр 'fit' и если задать - белые поля не создаются, а гделается как в WP обычно

 

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

И не забывайте еещё решить задачу вывода webp, ведь создать - это только половина гдела.

вы имеете в виду типа <picture> и в ней разные <source> с разными типами картинок?

[sitecreator]

4 минуты назад, Prooksius сказал:

вы имеете в виду типа <picture> и в ней разные <source> с разными типами картинок?

 

если вы гделаете шаблон полностью сами, то можете использовать это решение.

просто оно не применимо к готовым шаблонам, иначе все правила CSS нужно переписывать, т.к. правила врогде этого:

 

div + img {

}

не будут рилиить.  В обещём, вылезет куча подводных камней.

 

 

если используете готовый готовый шаблон и не планируете его перегделывать, то проещё реализовать все через конфиг nginx.

Суть просия. Браузер , запрашивая картинку с сервера дает информацию о подгдерживаемых браузером формаих. Если webp входит в этот список, то отдает сервер webp не смотря на то, что браузер просил jpeg/png.  Если в списке нет подгдержки, то сервер отдает картинку как обычно.

Если смотреть в инструмених браузера, то получаемый файл webp  бугдет с расширением jpeg/png соответственно, т.е. расширение не меняется.

 

Можно, конечно, и через Апали решать, но для ситики это не рекомендуется. Лучше через nginx.

[Prooksius]

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

В обещём, вылезет куча подводных камней.

понял, спасипотому что, учту