Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

igsekor
Copy link
Member

@igsekor igsekor commented Dec 20, 2023

Существует проблема генерации картинок в рамках деплоя с 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 igsekor added улучшение Доработка существующего кухня Работа и устройство репозитория движок Задачи по движку labels Dec 20, 2023
@igsekor igsekor self-assigned this Dec 20, 2023
@solarrust
Copy link
Member

solarrust commented Dec 21, 2023

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

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

@igsekor
Copy link
Member Author

igsekor commented Dec 22, 2023

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

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

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

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

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

@solarrust
Copy link
Member

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

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

Copy link

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

@igsekor
Copy link
Member Author

igsekor commented Dec 25, 2023

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

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

@solarrust
Copy link
Member

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

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

@igsekor
Copy link
Member Author

igsekor commented Dec 26, 2023

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

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

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
движок Задачи по движку кухня Работа и устройство репозитория улучшение Доработка существующего
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants