@CitoyenMarat скинул ссылку, которой грех не поделиться. В огромной технической статье рассказывается, как устроены разные форматы изображений, способы их сжатия и оптимизации: https://images.guide
Там про JPEG, PNG, WebP, GIF, MozJPEG и ещё кучу всего малоизвестного. Про то, как готовить картинки для веба и как они обрабатываются браузерами. Приводятся полезные инструменты и техники. Я, как большой любитель оптимизации, хочу рассказать о своём флоу и трёх инструментах.
ImageOptim
https://imageoptim.com
Известное многим приложение и API для оптимизации картинок без потери качества. У меня выбраны там все возможные способы, а скорость выставлена на «безумную». Я могу потерпеть долгую процедуру, лишь бы результат был безупречным. Скармливаю ImageOptim обычно PNG, JPEG и GIF, пропуская через несколько циклов (зачастую повторные оптимизации тоже удаются), — любую растровую графику, которая будет использоваться внутри приложений или на сайтах.
SVGOMG
https://jakearchibald.github.io/svgomg
Веб-интерфейс для утилиты SVGO, через который готовлю к использованию вектор. Грубо говоря, из файла вырезаются лишние метаданные, а также уменьшается точность координат (округляются знаки после запятой). Можно смело включать там все параметры, кроме “Sort attrs”. Его советую переключать и смотреть, экономит он или, наоборот, прибавляет вес файлу. Также будьте осторожны с ползунком про степень оптимизации: призумьте превью и двигайте ползунок влево, а когда увидите визуальные искажения кривых, верните на 1 шаг правее — это нужный вам уровень. Почему-то недавно там сломалась опция “Remove xmlns”, теперь она делает картинку белой на превью. Но из SVG-файла можно безболезненно убрать эту штуку руками, на изображение она никак не влияет. SVGOMG не доводит SVG до идеала, после оптимизации я открываю файл в текстовом редакторе и вручную сокращаю #ff0000 → #f00, убираю переносы строк, теги g, defs и прочее лишнее типа fill-rule="evenodd" (формат SVG легко читается).
ShrinkIt
https://download.panic.com/shrinkit
В статье не упоминается утилита, с помощью которой можно оптимизировать PDF, ведь его мы тоже используем как самостоятельный формат и даже в Xcode как графику для iOS-приложений. Это простое окошко, куда перетаскиваешь файл, и он перезаписывается уже оптимизированным.
Может показаться, что все эти кропотливые процедуры ради экономии жалких килобайтов — одержимость, и что они не нужны. Но это не так, ведь это забота о ваших пользователях:
1. Вы экономите людям трафик,
2. Приложения скачиваются быстрее,
3. Сайты рендерется мгновенно.
Там про JPEG, PNG, WebP, GIF, MozJPEG и ещё кучу всего малоизвестного. Про то, как готовить картинки для веба и как они обрабатываются браузерами. Приводятся полезные инструменты и техники. Я, как большой любитель оптимизации, хочу рассказать о своём флоу и трёх инструментах.
ImageOptim
https://imageoptim.com
Известное многим приложение и API для оптимизации картинок без потери качества. У меня выбраны там все возможные способы, а скорость выставлена на «безумную». Я могу потерпеть долгую процедуру, лишь бы результат был безупречным. Скармливаю ImageOptim обычно PNG, JPEG и GIF, пропуская через несколько циклов (зачастую повторные оптимизации тоже удаются), — любую растровую графику, которая будет использоваться внутри приложений или на сайтах.
SVGOMG
https://jakearchibald.github.io/svgomg
Веб-интерфейс для утилиты SVGO, через который готовлю к использованию вектор. Грубо говоря, из файла вырезаются лишние метаданные, а также уменьшается точность координат (округляются знаки после запятой). Можно смело включать там все параметры, кроме “Sort attrs”. Его советую переключать и смотреть, экономит он или, наоборот, прибавляет вес файлу. Также будьте осторожны с ползунком про степень оптимизации: призумьте превью и двигайте ползунок влево, а когда увидите визуальные искажения кривых, верните на 1 шаг правее — это нужный вам уровень. Почему-то недавно там сломалась опция “Remove xmlns”, теперь она делает картинку белой на превью. Но из SVG-файла можно безболезненно убрать эту штуку руками, на изображение она никак не влияет. SVGOMG не доводит SVG до идеала, после оптимизации я открываю файл в текстовом редакторе и вручную сокращаю #ff0000 → #f00, убираю переносы строк, теги g, defs и прочее лишнее типа fill-rule="evenodd" (формат SVG легко читается).
ShrinkIt
https://download.panic.com/shrinkit
В статье не упоминается утилита, с помощью которой можно оптимизировать PDF, ведь его мы тоже используем как самостоятельный формат и даже в Xcode как графику для iOS-приложений. Это простое окошко, куда перетаскиваешь файл, и он перезаписывается уже оптимизированным.
Может показаться, что все эти кропотливые процедуры ради экономии жалких килобайтов — одержимость, и что они не нужны. Но это не так, ведь это забота о ваших пользователях:
1. Вы экономите людям трафик,
2. Приложения скачиваются быстрее,
3. Сайты рендерется мгновенно.
