無料ツールを使った画像最適化手順(リサイズ&圧縮)

「売れる」ウェブサイトを手に入れるため、最初に知っておくべきこと
成果の出ている「売れる」ウェブサイトが持つ、5つの要素をご存じですか?ウェブサイトを作るなら、まず初めにこれを確認して下さい。
Table of Contents

ウェブサイトの高速表示を狙う上で、画像最適化は欠かせません。

では、具体的に「どんなツールを使って・どんな作業をすれば良いのか?」という話になると思います。そこでこのコンテンツでは、具体的な作業である画像のリサイズ/圧縮について解説します。

【注記】画像最適化の必要性については、以下のコンテンツで解説しています。

LIGHTNING SPEEDTEST #4(2018/12/13):DIY WordPress Site

画像情報/使用ツール

今回の目標は、WordPressテーマ「Lightning」用のアイキャッチ/投稿画像の作成とします。
目標サイズは「横幅(width)750px以下」です。

何故、750px以下なのか?…その理由は、Lightningの最大表示幅が750pxだからです(デフォルトの場合)。最大表示幅以内の画像を使えば、ブラウザが画像の表示サイズを最適化する時間が減り、結果として速度がアップするから、となります。

次に、今回使う画像について説明しておきます。使う画像はこちら。

無料ツールを使った画像最適化手順(リサイズ&圧縮) DIY WordPress Site

なお、作業前の状態は以下の通りです。

ファイルサイズ 4.58MB
大きさ 5,472px×3,648px

リサイズ/圧縮には以下のツールを使います。

※このテーブルは、横にスクロールします。

no. 工程 ツール名 利用環境 URL
1 リサイズ JTrim ローカル https://freesoft-100.com/review/jtrim.php
2 圧縮 Tiny PNG ブラウザ https://tinypng.com/

※リサイズ/圧縮ともツールはいっぱいあるので、お好きなものを選んで頂いて構いません。 また、JTrimはWindows10には対応していないとアナウンスされています。本稿執筆時点ではWindows10でも動作しましたが、今後動作しなくなる可能性があることには留意下さい。

手順①:画像のリサイズ

JTrimを起動します。

「開く」アイコンをクリック(「ファイル」メニューから「開く」を選択でも可)し、リサイズしたい画像を選択します。

無料ツールを使った画像最適化手順(リサイズ&圧縮) DIY WordPress Site

…サイズが大き過ぎて、何の画像だかよく分かりませんね(笑)
(縮小すれば確認出来ますが)

「イメージ」メニューから「リサイズ」を選択します。
すると、このようなダイアログボックスが表示されます。

無料ツールを使った画像最適化手順(リサイズ&圧縮) DIY WordPress Site

「サイズを指定する」と「比率で指定する」のいずれかを選択します。

「サイズを指定する」場合は最大表示幅の数字を入力すればOKです。
「比率で指定する」場合には、最大表示幅以下になるよう調整して下さい。

どちらを選んでもOKです。やりやすい方を選択して下さい。

※【注記】「縦横の比率を保持する」にチェックを入れると「縦」の値は「横」の値に連動して変わります。縦横の比率を保持せずにリサイズを行うと画像が変形してしまうので、基本的にはチェックを入れておくことをお勧めします。

「比率で指定する場合、いちいち計算しないと欲しいサイズにならないのか?」

と思うかもしれませんが、そんな心配は不要です。

「横」に数値を入力すると「サイズを指定する」部分の数値がリサイズ後のサイズに変わります。
いちいち計算しなくても簡単に作業が出来るので、ご安心下さい。

無料ツールを使った画像最適化手順(リサイズ&圧縮) DIY WordPress Site

今回は「比率で指定する」でリサイズしてみます。
750px以下になったのを確認したら、「OK」ボタンをクリックします。

これで画像がリサイズされました。
いちいち縮小しなくても、何の画像かすぐ分かる程度の大きさになりました。

無料ツールを使った画像最適化手順(リサイズ&圧縮) DIY WordPress Site

「ファイル」メニューから「名前を付けて保存」を選択し、画像を保存すればリサイズは完了です。

※【重要】 当たり前の話ですが、「上書き保存」すると元データが消滅します。 やり直しがきかなくなりますので、加工した画像は別名で保存するのがベストです。

リサイズ後の結果

リサイズ後に、画像はどう変わったでしょうか?確認してみましょう。

※このテーブルは、横にスクロールします。

項目 リサイズ前 リサイズ後
ファイルサイズ 4.58MB 75.5KB
大きさ 5,472px×3,648px 711px×474px

大幅にサイズダウンしましたが、更にスリム化出来ます。
次の工程は、画像の圧縮です。

手順②:画像の圧縮

Tiny PNGを起動します。

Tiny PNG(ブラウザ版)

※「Tiny JPG」というツールもありますが、名前が違うだけで機能自体は同じです。

圧縮したいファイルを選択⇒ドラッグします。
Tiny PNGの「Drop your .png or .jpg files here!」(ここに.png or .jpg ファイルをドロップ!)と書いてある場所に圧縮したいファイルをドロップします。

圧縮が完了すると、どれだけ圧縮出来たかを示すデータが表示され、ダウンロードボタンが表示されます。

Tiny PNGによる画像圧縮

圧縮した画像が1枚だけなら、圧縮ステータス右側の「download」リンクをクリックすればOK。複数画像を圧縮した場合は、「Download all」ボタンをクリックして下さい。

すると、パソコンの「ダウンロード」フォルダに圧縮後の画像が保存されます。

ちなみに、Tiny PNGのプラグインも存在します。
都度圧縮するのが面倒なら、プラグインを使うという手段もあります。プラグインはこちら。

TinyPNG – JPEG, PNG & WebP image compression:WordPress.org

使用方法は以下サイトが詳しく解説しているので、参照してみて下さい。

きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG & PNG imagesの設定と使い方:Requ.log

圧縮後の結果

圧縮後に、画像はどう変わったでしょうか?確認してみましょう。

※このテーブルは、横にスクロールします。

項目 圧縮前 圧縮後
ファイルサイズ 77.4KB 66.7KB
大きさ 711px×474px 711px×474px(変動なし)

この表では、Tiny PNG画面上の数値を使っていますので、ディスク上のサイズと若干異なります。
ちなみに、ディスク上のサイズで比較すると圧縮前:75.5KB 圧縮後:65.1KBでした。

これで画像の圧縮は完了です。最後の工程に移りましょう。

手順③:WordPressへアップロード

圧縮済みの画像を、いつも通りWordPressにアップロードすればOK。
これで作業は完了です。お疲れ様でした。

最後に

Tiny PNGは強力なツールで、画像によっては元の半分以下のサイズまで圧縮します。

しかし、いくら強力とは言えもとの画像サイズが大きければ読み込みに時間が掛かり、表示速度は遅くなってしまいます(ちなみに、1ファイル当たり5MBを超える画像はアップロード出来ません)。

ですので、リサイズした上で圧縮するという2つの工程が必要になるのです。

…正直、面倒です。私も出来ることならやりたくはありません。ただ、サイトの表示速度が遅くて見込み客や顧客が離脱するのはもっと嫌です。リサイズと圧縮に掛かる時間は、必要経費だと自分に言い聞かせて作業しています。

サイトの表示速度が速ければ、見込み客や顧客も快適にサイトを閲覧出来ます。
1人でも多くの見込み客や顧客にサイトを閲覧して貰う為に、全ての画像を最適化していきましょう。

Recommends
あなたのメッセージやアイディアを形にする会員制スタジオ「Output STUDIO」がオープン。 ウェブページや動画など、ターゲットに届ける最終工程をしっかり形に仕上げ、顧客や見込み客に届けることが出来ます。 集客やセールスのスピード感が高まるので、数多くの施策を打てるようになります。また、都度外注するより圧倒的に安いので、コストの有効配分にもつながります。 「Output STUDIO」は会員限定での提供となります。詳細は公式サイトでご確認下さい。
Recent posts
これは見出しです
Lorem ipsum dolor sit amet consectetur adipiscing elit dolor

Table of Contents

集客やセールスの「資産とスキル」が手に入る制作室
集客やセールスのスピードと精度を上げ、無駄なコストを抑えたいとお考えなら、STRATEGY SUPPLIERが運営する「Output STUDIO」に参加して下さい。 低コストでウェブサイトという「資産」と、構築・運用「スキル」を手に入れることが出来ます。 「Output STUDIO」は、高品質なサポートを提供するため会員制とさせて頂いており、参加人数を制限しています。 募集状況など、詳細は下のボタンをクリックしてご確認下さい。
松浦 臣吾
松浦 臣吾
マーケティングプロデューサー/コピーライター。STRATEGY SUPPLIER在籍。神奈川県在住。継続性にフォーカスしたマーケティング戦略の立案と実践を得意とする。成長し続けるビジネスの設計図「Business Design Method」を公開し、ビジネスオーナーへの精力的なサポートを行っている。
関連コンテンツ
Wordfence WAFトラブル対応履歴(202112)

Wordfence WAF設定で発生したトラブル事例と、その対処方法を紹介します。WAFのエラーが出っぱなしでお困りのWordfenceユーザーの方には、このコンテンツが問題解決につながるかもしれません。

Read More »