「ブログを高速化するために画像を最適化する方法を知りたい」
「簡単に画像最適化をしたい」
画像最適化するためのツールを紹介します｡
- 目次
圧縮
Optimizilla
JPG画像､PNG画像を最大20枚まとめて圧縮できるWebツールです｡
OptimizillaはJPEG、GIFやPNGフォーマットのイメージを最小サイズに圧縮する、高性能のイメージ最適化ツールです。
TinyPNG
「TinyPNG」という名前ですが､PNG画像だけでなくJPG画像も圧縮できます｡
無料だと最大サイズが5MBまでですが､有料版のPROにすると最大サイズが75MBまで大きくなります｡
TinyPNG – Compress AVIF, WebP, PNG and JPEG images
Free online image optimizer for faster websites! Reduce the file size of your AVIF, WEBP, JPEG and PNG images while preserving the image quality.
リサイズ
画像リサイズツール
JPG画像とPNG画像をリサイズできるWebツールです｡
一括でリサイズする場合は､同じサイトの以下のページになります｡｡
縮小専用
「縮小専用」は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ページを高速化するために画像最適化が最も影響が大きい要素なので､適切な画像にしていくことは重要です｡
