Все статьи | Дневник студента

Ручная оптимизация изображений

Ручная оптимизация изображений главное изображение

Если ваша страница долго загружается, то одной из возможных причин может быть большой размер изображений. Существует много инструментов, которые позволяют уменьшать его автоматически. Здесь мы рассмотрим более деревяный подход - сделать это вручную.

Это подборка полезных ссылок, которая может помочь в решении этой задачи.

I. Squoosh

Идеально подходит, если у вас очень маленький сайт/лендинг. Вы просто загружаете одно изображение, а squoosh его сам пережимает. В нем есть много настроек, но стандартных должно хватить.

  • Можно посмотреть до и после

II. TinyPNG

У tinypng есть API, плагины для фотошопа и модули для разных CMS, но речь пойдет о сайте.

В бесплатном тарифе есть возможность одновременно загружать не более 20 изображений. И если вам не нужно пережимать сотни картинок, то можете воспользоваться этим сервисом. Соотношение: Качество → Размер очень хорошее.

  • Файл тяжелее 5МБ загрузить не получится

III. Jpegoptim → OptiPNG

Это уже консольные утилиты. Сжимают намного хуже, чем предыдущие варианты, но гарантированно без потери качества и на любое количество файлов.

Jpegoptim:

jpegoptim *.jp*g

Optipng:

optipng *.png

Для всех файлов всех подпапок можно делать вот так:

find -type f -name "*.jpg" -exec jpegoptim --strip-all {} \; ; find -type f -name "*.png" -exec optipng {} \;

Если у вас больше 1000 файлов — этот вариант вам подойдет. По крайней мере с него можно начать.

IV. SVGO

Векторные изображения тоже нуждаются в оптимизации. И лучшего инструмента чем svgo я не знаю.

svgo --disable='removeViewBox' --enable='removeDimensions' ./

V. SVGOMG

Если консольная утилита вам не подходит - хорошим решением будет использовать данный ресурс.

Аватар пользователя Vadim Filimonov
Vadim Filimonov 05 апреля 2021
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
1 июня 10 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
1 июня 10 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
1 июня 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
1 июня 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
1 июня 16 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
1 июня 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Создает веб-приложения со скоростью света
1 июня 5 месяцев