web-standards.ru icon indicating copy to clipboard operation
web-standards.ru copied to clipboard

Published 20 hours ago • verified publisher icon web-standards-ru

Автоматизация оптимизации изображений в статьях

Open vitalybaev opened this issue 4 years ago • 9 comments

Например, статья: Чему меня научил год изучения и преподавания доступности https://web-standards.ru/articles/what-accessibility-taught-me/ Загружает 3.04 мегабайта ресурсов. Основная проблема - изображения в PNG, самое тяжелое из которых весит 771 кб. Нужно смотреть в сторону jpg, а лучше конвертировать еще и в webp

Предложенное решение

  • Храним оригиналы изображений в максимальном качестве
  • При сборке генерируем разные размеры изображений + разные форматы (jpg, webp) + оптимизация
  • В статьях помещается тег picture со всеми вариантами srcset

vitalybaev avatar Apr 29 '20 09:04 vitalybaev

Я бы посмотрел в сторону автоматизации. Картинки хочется хранить в исходном или близком к тому качестве. А потом уже прогонять их через оптимизаторы при сборке, вставлять всякие <picture> с кучей классных параметров.

pepelsbey avatar Apr 29 '20 10:04 pepelsbey

Ну да, этот вариант идеальный, обновлю постановку задачи

vitalybaev avatar Apr 29 '20 10:04 vitalybaev

@MeFoDy ты любитель всяких гуслей, возьмёшь полайвкодить?

pepelsbey avatar Apr 29 '20 10:04 pepelsbey

Берусь сделать на выходных. Заодно <picture> таки втащу под ретину и прочие радости жизни с чёткими экранами.

MeFoDy avatar Apr 29 '20 19:04 MeFoDy

Если кто-то будет делать, то есть плагин https://github.com/11ty/eleventy-img

pepelsbey avatar Jun 27 '20 23:06 pepelsbey

Возьмусь как доделаю тултипчики ;)

akellbl4 avatar Oct 18 '20 19:10 akellbl4

@akellbl4 @MeFoDy @immitsu у нас есть #146 вдруг кто-то из вас давно уже хочет заняться чем-то подобным или просто хотите добить PR?

higimo avatar Jan 14 '21 17:01 higimo

@higimo я ждал пока мои остальные PR примут, чтобы не плодить энтропию :)

akellbl4 avatar Jan 14 '21 17:01 akellbl4

Пересоздал 146 - PR#205

immitsu avatar Feb 14 '21 05:02 immitsu

Собираюсь взять эту задачу. Буду делать либо с нуля, либо на основе этого подвисшего Pull Request с помощью плагина Eleventy Image.

Нужно прояснить несколько моментов.

  • Какие выходные форматы использовать? webp, avif и оригинальный формат (png и jpeg)? Какие настройки сжатия использовать? Оставить по умолчанию?
  • Нужно ли оптимизировать оригинальный SVG?
  • Есть ли случаи, когда нужно игнорировать оптимизацию изображений, например, автор в какой-нибудь статье сравнивает изображения и нужны именно оригиналы? Если нужно, то как распознать такие изображения?
  • Eleventy Image может обрабатывать удалённые изображения. Нужно ли это делать?
  • Нужно ли оптимизировать cover-изображения?

monochromer avatar Oct 05 '23 17:10 monochromer

@monochromer поздно пришёл, но уточню задачу :)

  • Форматы: AVIF, WebP, оригинальные, сжатие по умолчанию
  • SVG: не оптимизировать
  • Игнор: пока допустим, что не нужно
  • Удалённые: не нужно
  • Обложки: пока нет

pepelsbey avatar Oct 07 '23 12:10 pepelsbey

@pepelsbey AVIF даёт, конечно, меньший размер, но сборка становится значительно медленнее (у меня занимает около 7 минут):

[11ty] Copied 695 files / Wrote 536 files in 440.68 seconds (822.2ms each, v2.0.1)
[11ty] Watching…
[11ty] Server at http://localhost:8080/
[11ty] File changed: eleventy.config.js
[11ty] Wrote 536 files in 6.78 seconds (12.6ms each, v2.0.1)

monochromer avatar Oct 07 '23 13:10 monochromer

@monochromer если это будет только в продакшен-сборке происходить, а при локальном дев-сервере нет — то норм. Ну и можно потом приделать кэши для GitHub Actions.

pepelsbey avatar Oct 07 '23 13:10 pepelsbey

ок, добавляю тогда, чтобы преобразование изображений было только для прода

monochromer avatar Oct 07 '23 13:10 monochromer

Спасибо всем, кто принёс задачу, обсуждал и конечно @monochromer, который её дожал :) Теперь, например, статья «OKLCH в CSS: по­че­му мы ушли от RGB и HSL» после прочтения съедает всего 700 КБ, а не 2 МБ.

pepelsbey avatar Oct 11 '23 08:10 pepelsbey