これからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化 | 何者にもなれないWebデベロッパーのメモ - whiskers
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（11）：ブラウザ間でスクロールやクリック操作を同期できるBrowserSyncでBrowserSyncを試しました。今回から画像最適化に関するプラグインを色々と試してみたいと思います。今回は画像を軽量化するためにgulp-imageminプラグインを試してみます。 gulp-imageminプラグインとは gulp-imageminはGIF,JPEG,PNG,SVGをロスレスで軽量化できるプラグインです。Gruntを使っていた方はgrunt-contrib-imageminが思い浮かぶと思いますがほぼ同等の機能を持ったプラグインです。 gulp-imageminにバンドルされているエンコード・デコードライブラリ gulp-imageminには以下のエンコード・デコード
gulpで画像のロスレス圧縮を自動化する
パフォーマンス改善に不可欠な画像最適化 Googleが提供している「PageSpeed Insights」を使うと、サイトのパフォーマンスを分析できます。「PageSpeed Insights」に分析したいサイトのURLを入れると、以下のようなメッセージが出る場合があります。 Googleのサイトでは、画像を最適化する方法として画像圧縮ツールの使用が推奨されており、具体的に以下のロスレス圧縮のツールが紹介されています。 JPEGの場合 jpegtran、jpegoptim PNGの場合 OptiPNG、PNGOUT これらのツールをそのまま使ってもいいのですが、作業を効率化するためにgulpを使って画像のロスレス圧縮をおこないます。 gulpを使った画像圧縮の自動化 1. npmでパッケージをインストールする npmで、imagemin-jpegtranとimagemin-optipngを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
