ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

Webページ高速化に必要な画像最適化ツールまとめ

Webページ高速化に必要な画像最適化ツールまとめ

「ブログを高速化するために画像を最適化する方法を知りたい」
「簡単に画像最適化をしたい」

悩み

画像最適化するためのツールを紹介します。

目次
  1. 圧縮
    1. Optimizilla
    2. TinyPNG
  2. リサイズ
    1. 画像リサイズツール
    2. 縮小専用
  3. トリミング
    1. 画像トリミングツール
  4. WordPress
    1. EWWW Image Optimizer
  5. imageMagick
  6. gulp
  7. まとめ

圧縮

Optimizilla

JPG画像、PNG画像を最大20枚まとめて圧縮できるWebツールです。

オンラインイメージ最適化ツール

OptimizillaはJPEGやPNGフォーマットのイメージを最小サイズに圧縮する、高性能のイメージ最適化ツールです。

TinyPNG

「TinyPNG」という名前ですが、PNG画像だけでなくJPG画像も圧縮できます。
無料だと最大サイズが5MBまでですが、有料版のPROにすると最大サイズが75MBまで大きくなります。

TinyPNG – Compress PNG images while preserving transparency

Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!

リサイズ

画像リサイズツール

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をつかうときは絶対いれておきたいプラグインです。

Home - EWWW Image Optimizer

Speed Up Your Website with Image Compression and Resizing Easy IOAccelerate your website the fast and easy way, with automatic compression, resizing and more.Sign Up Now Cloud CompressGet faster images […]

imageMagick

「imageMagick」はコマンドラインから画像の編集(圧縮、リサイズ、トリミングなど)ができます。
「graphicMagick」も同じようなソフトです。

以下の記事で「imageMagick」のインストール方法を紹介しています。

【Windows10】imageMagick7のインストール手順【画像編集】

imageMagick7のインストール手順について知りたいですか?この記事では、imageMagick7のインストール手順、確認方法について紹介しています。ぜひご覧ください。

gulp

タスクランナー「gulp」を使うと、プラグインを追加していくことでいろいろなことが効率化できます。

プラグイン「gulp-imagemin」などを使うと画像圧縮ができます。
「imageMagick」「graphicMagick」のインストールが前提ですが、プラグイン「gulp-image-resize」でリサイズやトリミングができるようになります。

画像の最適化は、今のところgulpを使う方法が一番ですが、JavaScriptの知識が必要だったり、コマンドラインを使わないといけないので導入のハードルも高いです。

gulpのインストールについては、以下のサイトがわかりやすいです。

絶対つまずかないGulp 4入門(2019年版) - インストールとSassを使うまでの手順

ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。

まとめ

画像最適化するためのツールを紹介しました。

Webページを高速化するために画像最適化が最も影響が大きい要素なので、適切な画像にしていくことは重要です。