Существует ли ПО для ресайза изображений со страницы сайта до размера рендеринга?

Question

[karpo518]

Раньше в сервисе Google PageSpeed Insight существовала возможность скачать оптимизированные изображения. Оптимизировалось не только эффективность сжатия изображения. Сервис уменьшал разрешение изображений до размеров рендеринга, заданных в CSS. Существуют ли сейчас рабочие альтернативы такому инструменту? Чтобы можно было отдать url страницы, а на выходе получить архив с изображениями "эффективного" разрешения.

Answer 1

[Артем Спиридонов]

Не знаю, но сделать несложно. JS на клиенте и imagemagick на сервере.

JS меняет размеры окна по заданному списку, если нужна адаптивность. Измеряет размер каждой доступной картинки и отправляет их на сервер.

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

Итого - 5 строк на JS и 5-10 строк на php-imagick, к примеру.

Comments

[karpo518]

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

[Артем Спиридонов]

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

Повторюсь, суммарный размер кода решения - строк 15.

[karpo518]

Артем Спиридонов, с самим ресайзом всё понятно. Я пока не понимаю, как получить реальные размеры изображения, чтобы правильно масштабировать их. Вот получили вы url страницы в php-скрипте или консольном sh-скрипте. Как дальше получить правильные размеры всех изображений? Если это так просто, как вы говорите, прошу предоставить пример кода

[Артем Спиридонов]

karpo518, отрендерить их в браузере или эмуляторе браузера (прогнав в цикле размеры окна, если требуется получение комплекта изображений для адаптивной верстки - от мобилок до ретины) - получить размеры с помощью JS (хоть jQuery) и передать их обработчику, который в свою очередь произведет преобразования и оптимизацию изображений с помощью imagemagick.

Пример прогона в цикле c jQuery:

$('img').each(function() {
    let width = $(this).width(); 
    let height = $(this).height();
    let image = $(this).attr('src');
    /// передать на сервер...
});

Другие применения jQuery есть в документации jQuery. Тоже самое с imagemagick.

Это очень простое клиент-серверное приложение.

Без сервера - чуть сложнее. Можно делать преобразования на канвасе, нужно проработать механизм сохранения, версионирования и т.д.

[karpo518]

Артем Спиридонов, ваши ответы довольно странные. Я спрашивал готовое решение, а вы написали, что это можно легко сделать самому. Я попросил уточнить как. Рассчитывал, что вы предоставите стек технологий + стратегию + пример. В результате получил от вас пример использования библиотеки jQuery. Как вы думаете, это можно считать ответом?

Сейчас уже понял сам, что задача не так уж и проста. Я написал простенький скрипт для node.js с использованием пакета puppeteer. Он позволил получить эффективные размеры изображений для тегов img, используя эмулятор браузера

Только вот изображения на сайте не ограничиваются тегами img. Бывают также всплывающие изображения в тегах a. Чтобы их учесть потребуется прокликать на сайте все ссылки на изображения. Кроме того, изображения могут быть завернуты в background любых тегов. Эти изображения будет масштабировать небезопасно, потому что группа свойств background может использовать не всё изображение а только его определённую часть. Это вообще может быть спрайт.

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

[Артем Спиридонов]

karpo518, возможно, я ошибаюсь, но считаю предложенное решение подходящим.

[karpo518]

Артем Спиридонов, извините, я погорячился. Несовершенство этого мира вывело меня из себя) Альтернатив всё равно пока нет. Буду делать компромиссное решение на основе puppeteer

[Артем Спиридонов]

karpo518, вы ошибаетесь насчет разницы между img и img в a. С фоном тоже легко решается.

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

Если есть образовательные цели - основы программирования, jQuery и imagemagick полностью решают задачу.

[karpo518]

Артем Спиридонов, про тег "a" я имел ввиду следующее. На многих сайтах изображения увеличиваются по клику. В некоторых случаях в тегах img (превью) и a(полное изображение) находится ссылка на одно и то же изображение. Мы не знаем размер всплывающего окна с изображением, которое появится по клику, поэтому каждое изображение, которое находится в теге img нужно проверить. А не встречается ли оно в какой-нибудь ссылке? Ведь в этом случае резать его нельзя. Иными словами, не потребуется ли оно где-то в большем размере.

Для тегов div c background-image могут быть заданы например такие стили: background-position: bottom right; background-size: 140% 100%. Как будете резать такое изображение? Это я лишь один нестандартный вариант привёл. А их достаточно много.

[Артем Спиридонов]

"Прокликать" эвентами все компоненты страницы. Это есть в понятии адаптивного окружения.

Какие стили заданы - не важно, так как интересуют только результаты рендера в адаптивном окружении. Получить это несложно. Если ratio нарушен - значит нужно преобразование с нарушением. Это может показаться сложным, если нет привычки работать с математикой.

Прошу прощения, дальше будет философия. Возможно, я пишу это не для вас.

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

[Артем Спиридонов]

karpo518,

background-position: bottom right; background-size: 140% 100%

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

Если задача заключается в "подгоне" разрешения и оптимизации изображений - значит именно этим и должна заниматься программа. Unix Way в действии.