HTML Diff
1 added 2 removed
Original 2026-01-01
Modified 2026-02-26
1 <p>Если ваша страница долго загружается, то одной из возможных причин может быть большой размер изображений. Существует много инструментов, которые позволяют уменьшать его автоматически. Здесь мы рассмотрим более деревяный подход - сделать это вручную.</p>
1 <p>Если ваша страница долго загружается, то одной из возможных причин может быть большой размер изображений. Существует много инструментов, которые позволяют уменьшать его автоматически. Здесь мы рассмотрим более деревяный подход - сделать это вручную.</p>
2 <p>Это подборка полезных ссылок, которая может помочь в решении этой задачи.</p>
2 <p>Это подборка полезных ссылок, которая может помочь в решении этой задачи.</p>
3 <h2>Содержание</h2>
3 <h2>Содержание</h2>
4 <ul><li><a>I. Squoosh</a></li>
4 <ul><li><a>I. Squoosh</a></li>
5 <li><a>II. TinyPNG</a></li>
5 <li><a>II. TinyPNG</a></li>
6 <li><a>III. Jpegoptim → OptiPNG</a></li>
6 <li><a>III. Jpegoptim → OptiPNG</a></li>
7 <li><a>IV. SVGO</a></li>
7 <li><a>IV. SVGO</a></li>
8 <li><a>V. SVGOMG</a></li>
8 <li><a>V. SVGOMG</a></li>
9 </ul><h2>I. Squoosh</h2>
9 </ul><h2>I. Squoosh</h2>
10 <p><a>I. Squoosh</a>. Идеально подходит, если у вас очень маленький сайт/лендинг. Вы просто загружаете одно изображение, а squoosh его сам пережимает. В нем есть много настроек, но стандартных должно хватить.</p>
10 <p><a>I. Squoosh</a>. Идеально подходит, если у вас очень маленький сайт/лендинг. Вы просто загружаете одно изображение, а squoosh его сам пережимает. В нем есть много настроек, но стандартных должно хватить.</p>
11 <ul><li>Можно посмотреть до и после</li>
11 <ul><li>Можно посмотреть до и после</li>
12 </ul><h2>II. TinyPNG</h2>
12 </ul><h2>II. TinyPNG</h2>
13 <p><a>II. TinyPNG</a>. У tinypng есть API, плагины для фотошопа и модули для разных CMS, но речь пойдет о сайте.</p>
13 <p><a>II. TinyPNG</a>. У tinypng есть API, плагины для фотошопа и модули для разных CMS, но речь пойдет о сайте.</p>
14 <p>В бесплатном тарифе есть возможность одновременно загружать не более 20 изображений. И если вам не нужно пережимать сотни картинок, то можете воспользоваться этим сервисом. Соотношение: Качество → Размер очень хорошее.</p>
14 <p>В бесплатном тарифе есть возможность одновременно загружать не более 20 изображений. И если вам не нужно пережимать сотни картинок, то можете воспользоваться этим сервисом. Соотношение: Качество → Размер очень хорошее.</p>
15 <ul><li>Файл тяжелее 5МБ загрузить не получится</li>
15 <ul><li>Файл тяжелее 5МБ загрузить не получится</li>
16 </ul><h2>III. Jpegoptim → OptiPNG</h2>
16 </ul><h2>III. Jpegoptim → OptiPNG</h2>
17 <p>Это уже консольные утилиты. Сжимают намного хуже, чем предыдущие варианты, но гарантированно без потери качества и на любое количество файлов.</p>
17 <p>Это уже консольные утилиты. Сжимают намного хуже, чем предыдущие варианты, но гарантированно без потери качества и на любое количество файлов.</p>
18 <p>Jpegoptim:</p>
18 <p>Jpegoptim:</p>
19 <p>Optipng:</p>
19 <p>Optipng:</p>
20 <p>Для всех файлов всех подпапок можно делать вот так:</p>
20 <p>Для всех файлов всех подпапок можно делать вот так:</p>
21 <p>Если у вас больше 1000 файлов - этот вариант вам подойдет. По крайней мере с него можно начать.</p>
21 <p>Если у вас больше 1000 файлов - этот вариант вам подойдет. По крайней мере с него можно начать.</p>
22 <h2>IV. SVGO</h2>
22 <h2>IV. SVGO</h2>
23 <p>Векторные изображения тоже нуждаются в оптимизации. И лучшего инструмента чем svgo я не знаю.</p>
23 <p>Векторные изображения тоже нуждаются в оптимизации. И лучшего инструмента чем svgo я не знаю.</p>
24 <p>svgo --disable='removeViewBox' --enable='removeDimensions' ./</p>
24 <p>svgo --disable='removeViewBox' --enable='removeDimensions' ./</p>
25 <h2>V. SVGOMG</h2>
25 <h2>V. SVGOMG</h2>
26 <p><a>V. SVGOMG</a>. Если консольная утилита вам не подходит - хорошим решением будет использовать данный ресурс.</p>
26 <p><a>V. SVGOMG</a>. Если консольная утилита вам не подходит - хорошим решением будет использовать данный ресурс.</p>
27 - <p>Пользователь151429</p>
27 +  
28 - <p>5 лет назад</p>