雑記TwitterFacebookHatenaPocketこんにちは、たわです。今回は画像圧縮のお話です。ブログを書いていると、サイトが重くならないように画像を圧縮する人も多いと思います。いちいち画像を一枚一枚圧縮していくのも面倒。それを効率化してみたのでそのことを書きます。Mac前提で書きますが悪しからず。実現したいワークフローやはり効率的に画像を圧縮してブログに乗せていくにはワークフローをイメージする必要があると思うので、そのあたりから整理していきます。ショートカット一発でまとめて圧縮たくさん画像を使うこともあるのでその回数分圧縮をするのはかなりの手間です。一発で勝手に圧縮されるのがベストです。圧縮した画像は一箇所にさらに、ブログに乗せたい画像はいろんなフォルダにあると思います。Photos、CanvaだらDLした場合)が多いです。いちいちその場所をファインダーで開くのは面倒なので、どこの画像でも特定のフォルダに書き出されると便利です。画像圧縮用のツールをインストールまずは画像圧縮に必要なものをいくつかインストールします。以下のサイトを参考にさせていただきました。Qrunch(クランチ)Homebrewを入れるこれはMacでのパッケージを管理するソフトウェアです。エンジニアであれば既に使っている人も多いと思いますが、そうでない方は入れていきましょう。Homebrew以下をターミナルにて実行するとインストールできるはずです。https://raw.githubusercontent.com/Homebrew/install/master/install)"圧縮ツールを入れるHomebrewを使って圧縮に使うツールをインストールします。以下をターミナルで実行します。次はAutomatorというMacでいろんな処理を自動化できるアプリケーションを使います。起動し新規作成MacでAutomatorを起動します。新規作成で「クイックアクション」を選択します。クイックアクションを選択Finder項目をコピーさせるこのクイックアクションはファイルを選択してそのファイルに対して何らかの処理をするというものです。そのファイルたちをコピーするよう指示を出します。左の指示一覧から「Finder項目をコピー」を右側にドラッグすれば追加できます。ドラッグ・アンド・ドロップで追加コピー先は自分の好みの場所にできるので、僕は/ピクチャ/圧縮済み画像というフォルダに入れるようにしました。イメージタイプを変更させるコピーに続けてさらに別の処理を加えていくことができます。Automatorは便利です。次は、jpgに一律変換する処理を入れました。画像にはjpgやpngなどあるかと思いますが、僕は写真が多いのでそうしました。jpgへの変換処理を追加イラストを多く使う人はpngのほうが適している場合もあるかと思うのでそこは自分の用途と要相談です。圧縮した画像だということをわかりやすくするためにファイル名に変更を加えます。今回はファイル名の末尾に_compressedと追加するように指示します。次に画像のサイズ調整をします。僕は長いほうが1024pxになるように設定しました。サイズを調整ブログに乗せる画像はこれくらいあれば十分だと思いますが、個々人の好みに合わせましょう。シェルスクリプトを実行ここでさらに圧縮する処理を加えていきます。ここで最初にインストールした圧縮ツールを呼び出していきます。画像のようにシェルスクリプトを実行の項目を追加し、テキストボックスに以下のスクリプトを追加しましょう。donepngだったらpng圧縮用のツールjpgだったらjpg圧縮用のツールを呼び出しているだけです。あとここで注意なのですが、項目の右側の「入力の引き渡し方法」を【stdinへ】→【引数として】へ変更しましょう。これを忘れると正しく動きません。確認してくださいあと、シェルが/bin/bashになっていることも確認しましょう。/bin/zshなどではエラーになります。bashを使いましょう名前をつけて保存する後は作成したAutomatorのファイルを保存します。保存する名前がそのままアクション名になるのでわかり易い名前にすることをおすすめします。処理名をつけるこうすることで、画像を右クリックするともうこの処理が実行できるようになっています。動作確認してみましょうショートカットで実行できるようにする右クリックで実行するのもいいですが、ショートカットで実行できるようが楽なのでその設定をします。シンプルで、システム環境設定のキーボードのところからショートカットを設定するだけです。Automatorを作成していると既に項目は作成されているはずなので、好きなキーを割り当てましょう。実際にできあがった処理はこんな感じです。実際に圧縮もされています。1.5MBあった画像も100KB程度なので十分圧縮されているはずです。このブログの一番上にある画像なので確かめてみてください。容量もちゃんと減っている複数枚まとめて実行してもちゃんと同時に圧縮されます。適当に画像を選んでショートカットを押すだけでフォルダに圧縮済みの画像が貯まるのでブログ書くのもとてもスムーズになりました。参考になれば嬉しいです。関連記事2020-01-03marp-cliを使ってスライドをmarkdownから作成してウェブ上に公開するまで。プレゼン作成を...こんにちは、たわです。ECRへDockerイメージを自動プッシュするこんにちは、たわです。今、Kubernetesを...2019-12-11情報管理ツール【Notion】のメリットと自分の使い方(活用事例)を書きます。こんにちは、たわです。見どころを現役建築士が解説しますこんにちは、建築士のあすかです。»スポンサードリンクプロフィールたわです。東京から福岡移住したWeb開発の人が発信していくブログです!Twitter(たわ)note(たわ)Instagram(あすか)YouTube(あすか)関連記事2020-01-30NestJSでのモジュール分割。相互依存がつらいので細かく分けた話。Web開発2020-01-24NestJSでmiddlewareとguardとdecoratorを活用してcurrentUserを実装した話。流行2020-02-07【2020年】エンジニアフレンドリーシティ福岡フェスティバルに行って来た話。内輪感減ると良さそう。(2)月別アーカイブ検索スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。