Автоматическая оптимизация изображений с помощью Hazel и ImageOptim

Автоматическая оптимизация изображений с помощью Hazel и ImageOptim

От автора: я постоянно пытаюсь упростить себе рабочий процесс. Мне приходится иметь дело с изображениями в постах в блоге, на сайтах, над которыми я работаю, в социальных сетях… изображения везде. Почти всегда изображения, с которыми я работаю, выкладываются в интернет. Что мы знаем об изображениях в интернете, так это то, что они должны быть оптимизированы.

Лично для меня это означает, что нужно перетащить все изображения на сайт ImageOptim перед использованием их в сети. Монотонные повторяющиеся задачи – идеальная сфера для автоматизации. Так давайте же автоматизируем этот процесс.

Рабочий стол – моя промежуточная рабочая площадка

Я так работаю. Все, чем я активно пользуюсь, лежит на рабочем столе. Я делаю все, что мне нужно, и двигаю это дальше. У меня все довольно аккуратно. Изображения относятся к тем основным вещам, с которыми я работаю на рабочем столе. Это может быть скриншот, который необходимо уменьшить, оптимизировать и загрузить на какой-либо ресурс, после чего удалить с компьютера.

Для меня рабочий стол – удобное место для работы со всеми этими вещами.

Делаем так, чтобы все изображения на рабочем столе автоматически оптимизировались

А что если бы нам не нужно было оптимизировать изображения, потому что они уже автоматически оптимизировались на десктопе? Вот это нам и нужно.

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее

Один из способов – поставить таск раннер Grunt/Gulp/Webpack или любой другой, где можно создать задачу watch, которая будет следить за всеми изображениями. Если появилось новое изображение, запускается задача по оптимизации. Многие из нас, возможно, уже делают так в веб-проектах. Отличий будет немного.

Кроме… после каждой перезагрузки нам нужно будет запускать команду gulp watch (или другую в зависимости от таск раннера) из командной строки. Могу поспорить, есть какой-то способ не делать этого. Например, поместить команду в «~/.bash_profile» или что-то другое. Я толком не вдавался в это, так что…

Знакомство с Hazel

По совету множества людей я открыл для себя Hazel. По сути, это команда watch для macOS с интерфейсом, где можно указать все необходимые параметры. Например, можно просматривать папку загрузок, и если тип файла Movie, его можно автоматически перемещать в папку Movie. Круто.

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

Автоматическая оптимизация изображений с помощью Hazel и ImageOptim

Все очень просто

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

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

Узнайте как ускорить загрузку сайта .

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree