npm-scriptsで画像圧縮を自動化する
概要 npm-scriptsを用いて、画像の追加・変更を監視し 自動で圧縮してくれるモジュールを作成する方法を紹介します！ 完成品はこちらです。 使用方法はREADME.mdに記載してありますので、お急ぎの方は上記を使用してみてください。 Github強化中なので、☆, フォローいただけると喜びます nodeとlinuxコマンドに対する基礎的な知識はあるものとして解説を進めていきます。 環境構築 今回使用するnode_module達は下記の通りです。 module description imagemin 画像圧縮してくれる imagemin-keep-folder ディレクトリ構造を維持したまま圧縮してくれる imagemin-gifsicle gif の圧縮をしてくれる imagemin-mozjpeg jpeg の圧縮をしてくれる imagemin-pngquant png の圧縮を
画像の最適化をCLIだけで行うgrunt-imageを作った
画像の最適化をCLIだけで行うgrunt-imageを作った Webにおける画像については以前記事にしたが、 そのフローをより良くするべく最近gruntのモジュールを作ったのでその話を。 前置き 私の業務は弊社サービスのパフォーマンス改善を業務。何がボトルネックになっているかは各プロジェクトでまちまちだが、共通しているのが 「とにかく画像が多い」 というところ。どのサービスもペイロードサイズの80%程を画像が占めている。 画像の最適化を忘れるだけで（例えば）100KBとか平気で増えるので、これではCSSやJavaScriptのファイルサイズを減らしても本末転倒である（もちろんCSSもJavaScriptも結合と圧縮は非常に重要だけど！）。 各種最適化ツール ではどうやって画像を最適化するのか、という話になるが、GUIだと以下の3つが有名で優秀。 ImageAlpha: フリーソフト。24b
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
