「ブログを高速化するために画像を最適化する方法を知りたい」
「簡単に画像最適化をしたい」
画像最適化するためのツールを紹介します｡
- 目次
圧縮
Optimizilla
JPG画像､PNG画像を最大20枚まとめて圧縮できるWebツールです｡
OptimizillaはJPEG、GIFやPNGフォーマットのイメージを最小サイズに圧縮する、高性能のイメージ最適化ツールです。
TinyPNG
「TinyPNG」という名前ですが､PNG画像だけでなくJPG画像も圧縮できます｡
無料だと最大サイズが5MBまでですが､有料版のPROにすると最大サイズが75MBまで大きくなります｡
TinyPNG – Compress WebP, PNG and JPEG images intelligently
Free online image compressor for faster websites! Reduce the file size of your WEBP, JPEG, and PNG images with TinyPNG’s smart lossy compression engine.
リサイズ
画像リサイズツール
JPG画像とPNG画像をリサイズできるWebツールです｡
ブラウザ上で利用出来る無料の画像リサイズツールです。画像を確認しながらサイズ変更が可能です。JPG,PNG形式の画像として保存出来ます。透過情報も維持できます。
一括でリサイズする場合は､同じサイトの以下のページになります｡｡
画像一括リサイズツール 。無料で使えるブラウザーツールを公開中。
縮小専用
「縮小専用」はWebツールではなく､インストールするソフトです｡
一括リサイズでもドラッグ&ドロップでできて便利です｡
ただ､保存形式がすべてJPGになってしまうことだけが残念です｡
【縮小専用。】 まとめて画像縮小するWindowsフリーソフトウェア
写真や画像を一括縮小するWindows用フリーソフトウェア。
トリミング
画像トリミングツール
「画像トリミングツール」も「画像リサイズツール」と同じサイトにあるWebツールです｡
ブラウザ上で利用出来る無料の画像トリミングツールです。透明画像も維持したまま切り抜き可能です。
WordPress
WordPressの場合は､デフォルト機能でリサイズ､トリミングができます｡
細かい設定をするにはカスタマイズの知識が必要になってきますが､以下の4種類のサイズが自動で作成されます｡
- フルサイズ(元画像)
- 大(上限1024px x 上限1024px)
- 中(上限300px x 上限300px)
- サムネイル(150x150のトリミング)
EWWW Image Optimizer
このプラグインを使用することで､WordPressデフォルト機能にない圧縮を補完できます｡
他にもwebp形式の画像を作成できたり､大きすぎる画像をアップロードしないように制限をつくれたり､WordPressをつかうときは絶対いれておきたいプラグインです｡
imageMagick
「imageMagick」はコマンドラインから画像の編集(圧縮､リサイズ､トリミングなど)ができます｡
「graphicMagick」も同じようなソフトです｡
以下の記事で「imageMagick」のインストール方法を紹介しています｡
【Windows10】imageMagick7のインストール手順【画像編集】
imageMagick7のインストール手順について知りたいですか？この記事では、imageMagick7のインストール手順、確認方法について紹介しています。ぜひご覧ください。
gulp
タスクランナー「gulp」を使うと､プラグインを追加していくことでいろいろなことが効率化できます｡
プラグイン「gulp-imagemin」などを使うと画像圧縮ができます｡
「imageMagick」「graphicMagick」のインストールが前提ですが､プラグイン「gulp-image-resize」でリサイズやトリミングができるようになります｡
画像の最適化は､今のところgulpを使う方法が一番ですが､JavaScriptの知識が必要だったり､コマンドラインを使わないといけないので導入のハードルも高いです｡
gulpのインストールについては､以下のサイトがわかりやすいです｡
絶対つまずかないGulp 5入門 - インストールとSassを使うまでの手順 - ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。導入は簡単で、本記事の手順では5分程度でセットアップできます。
まとめ
画像最適化するためのツールを紹介しました｡
Webページを高速化するために画像最適化が最も影響が大きい要素なので､適切な画像にしていくことは重要です｡
