Переводит генерацию картинок на сервер

[igsekor]

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

Сервер можно проверить по запросам картинок, которые пока специально настроены на смещённые размеры ширины. Например, можно посмотреть картинки к статье о Docker'е.

Картинки, которые уже сгенерированы на предыдущей итерации (то, как работало до этого пиара):

1. https://doka.guide/tools/docker/images/1.webp
2. https://doka.guide/tools/docker/images/1-300w.webp
3. https://doka.guide/tools/docker/images/1-600w.webp
4. https://doka.guide/tools/docker/images/1-1200w.webp
5. https://doka.guide/tools/docker/images/1.png
6. https://doka.guide/tools/docker/images/1-300w.png
7. https://doka.guide/tools/docker/images/1-600w.png
8. https://doka.guide/tools/docker/images/1-1200w.png

Картинки, которые генерируются на лету (в рамках этого пиара):

1. https://doka.guide/tools/docker/images/1.avif (на будущее, пока нет поддержки этого формата)
2. https://doka.guide/tools/docker/images/1.webp
3. https://doka.guide/tools/docker/images/1-350w.webp
4. https://doka.guide/tools/docker/images/1-650w.webp
5. https://doka.guide/tools/docker/images/1-1250w.webp
6. https://doka.guide/tools/docker/images/1-2250w.webp
7. https://doka.guide/tools/docker/images/1.png
8. https://doka.guide/tools/docker/images/1-350w.png
9. https://doka.guide/tools/docker/images/1-650w.png
10. https://doka.guide/tools/docker/images/1-1250w.png
11. https://doka.guide/tools/docker/images/1-2250w.png

[solarrust]

Будем ли генерить х2 картинки для ретины? На сколько это будет сложно?

Оптимизируются ли картинки при такой трансформации? Чисто интересно как =) Каким инструментом, оптимизируется исходник или каждая сгенерированная картинки?

[igsekor]

Будем ли генерить х2 картинки для ретины? На сколько это будет сложно?

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

Оптимизируются ли картинки при такой трансформации? Чисто интересно как =) Каким инструментом, оптимизируется исходник или каждая сгенерированная картинки?

Работает так:

1. Картинка (оригинал в максимальном рарешении) в формате PNG попадает на сервер.
2. Автоматически создаётся аналог картинки в форматах .webp и .avif (это на ближайшее будущее).
3. На стороне Nginx работают два процесса — сервер для преобразования и кеширования, сервер для прокси.
4. Прокси сервер отсылает на внутренний сервер запрос, в результате выполнения которого получает картинку в нужном разрешении.
5. Второй сервер с помощью модуля image_filter меняет размеры и кеширует преобразованную картинку (генерация первой картинки — 50-100мс, отдача кеша ~2-5 мс).

[solarrust]

Спасибо большое что подробно расписал процесс! Это очень интересно.

Но мне важно понять про оптимизацию картинки типа как tinyjpg. Просто я сейчас прогоняю одну из финальных картинок через этот сервис и получаю уменьшение веса на 60%. Было бы круто сэкономить трафик там, где это просто и легко.

[github-actions]

Превью контента из 0842b1a опубликовано.

[igsekor]

Но мне важно понять про оптимизацию картинки типа как tinyjpg. Просто я сейчас прогоняю одну из финальных картинок через этот сервис и получаю уменьшение веса на 60%. Было бы круто сэкономить трафик там, где это просто и легко.

Я правильно понял вопрос: «Насколько хороши ужиматели на сервере по сравнению с модулем для 11ty до этого?»

[solarrust]

Я правильно понял вопрос: «Насколько хороши ужиматели на сервере по сравнению с модулем для 11ty до этого?»

Да, делается ли вообще «ужимка» и на сколько она эффективна =)

[igsekor]

Я правильно понял вопрос: «Насколько хороши ужиматели на сервере по сравнению с модулем для 11ty до этого?»

Да, делается ли вообще «ужимка» и на сколько она эффективна =)

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

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