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

[Prooksius]

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

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

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

 

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

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

 

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

 

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

 

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

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

 

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

Змінено 14 лютого 2021 користувачем 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 вот как должно быть..

Змінено 14 лютого 2021 користувачем 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 на это не 'ругается'.

Змінено 14 лютого 2021 користувачем Waskadagama

[Prooksius]

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

 

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

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

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

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

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

[Yoda]

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 минут назад, Yoda сказал:

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

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

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

[Prooksius]

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

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

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

 

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

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

[Yoda]

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

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

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

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

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

[Prooksius]

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

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

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

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

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

[Prooksius]

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

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

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

[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 сказал:

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

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