platform icon indicating copy to clipboard operation
platform copied to clipboard

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

Open igsekor opened this issue 2 years ago • 7 comments

Существует проблема генерации картинок в рамках деплоя с 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

igsekor avatar Dec 20 '23 16:12 igsekor

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

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

solarrust avatar Dec 21 '23 09:12 solarrust

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

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

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

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

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

igsekor avatar Dec 22 '23 14:12 igsekor

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

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

solarrust avatar Dec 23 '23 00:12 solarrust

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

github-actions[bot] avatar Dec 24 '23 22:12 github-actions[bot]

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

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

igsekor avatar Dec 25 '23 21:12 igsekor

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

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

solarrust avatar Dec 26 '23 07:12 solarrust

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

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

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

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

igsekor avatar Dec 26 '23 15:12 igsekor