ブログ運営

画像のサイズ縮小・圧縮でブログ高速化!iloveIMGで簡単に出来るやり方を解説

画像最適化記事(アイキャッチ)
この記事はこんな人向け
  • ブログの画像が重いので軽くしたい
  • 簡単に画像を軽くできる方法を知りたい
  • ブログの画像に適切なサイズは?

ブログやサイトに画像を載せる際、「無加工だと重いからプラグインを利用しよう!」というあなた。

画像最適化をプラグイン任せにしていないでしょうか?

結論から言うとそれだけでは足りなくて、ブログにアップロードする前に縮小・圧縮しておくのがベストです。

根拠については、下記の記事を参照してみてください。

ブログ画像最適化記事のアイキャッチ画像
ブログの画像は、アップロードする前に縮小・圧縮するべき理由ブログやサイトに載せる画像、最適化をプラグイン任せにしていませんか?実はアップロードする前にひと手間かけて、縮小・圧縮しておいた方が良い理由があります。この記事では、詳しい理由について解説しています。...

「アップロードする前にいちいち縮小なんてやってられないよ!」という声が聞こえますが、ちょっと待ってください。

アップロード前の加工は、iloveIMGという無料サイト1つでOK。手順はとても簡単なので、3~4分だけ説明の時間をください。

つる
つる
この記事の通り画像を編集すれば、PageSpeedInsight等の改善指標にも貢献してくれるはずです!

私の環境は「Xサーバー」「ワードプレステーマ JIN」です。
「JIN」ユーザの人は、2019年3月時点のバージョンだとPageSpeedInsightsのモバイルスコアは期待できないと思います。
ただし今回の記事内容を実践すれば、「改善できる項目」の評価は上がります。

2019/03/29 追記
「JIN 2.020」のアップデートにより、モバイルスコアがかなり上がるようになりました!当サイトの場合は「56」⇒「83」まで上昇!
詳細はJIN公式サイトWordPressテーマ「JIN」のアップデート情報を参照してください。

iloveIMGなら画像の縮小や圧縮が超簡単!特徴と使い方を解説

サイト「ILOVEIMG」のトップ画像
iloveIMGの特徴と使い方について解説します。

また、画像のファイル形式やサイズなど、オススメの設定についても解説内で触れていきます。

1.iloveIMGとは?

iloveIMGは画像編集が簡単にできるサイトです。特徴としては、

  • 画像の圧縮
  • 画像のサイズ変更
  • 画像の切り抜き
  • JPGと他の形式の変換

が全てオンライン上で完結できます。慣れれば1枚の加工に1分かかりません。

また、全ての機能は完全無料で利用できます

一応アカウント登録したり有料版にすればできることは増えますが、必要ありません。

2.画像の圧縮

iloveIMG(圧縮画面説明)
その名の通り、画像を圧縮できます。

画像圧縮は、簡単にいうとデータ量を小さくすること。圧縮することで、ファイルを転送する時も速くなるし、ファイル保管時の容量を節約できます。

3.画像のサイズ変更

iloveIMG(サイズ変更画面説明)
画像のサイズを、ピクセル単位、もしくは比率単位(25%・50%・75%)で変更することができます。

ピクセルの場合は、元の縦横比を維持しつつ、好きなサイズに指定可能です。

オススメの設定は、ピクセルで幅700指定です。ブログ記事として載せる画像は幅700あれば問題ありません。

4.画像の切り抜き

iloveIMG(切り抜き画面説明)
好きなサイズに画像を切り抜くことができます。

5.JPGに変換

iloveIMG(jpg変換画面説明)
PNGやGIFなど、他の形式からJPGへのファイル変換ができます。

ブログに載せる画像は、jpg形式がオススメです。pngよりサイズが軽くなるため。
ファイル形式の違いについては、下記の外部サイト記事が参考になります。
どうやって使い分けるべきなのか。JPG・PNG・GIFの違いをまとめてみました。(外部サイトを別タブで開きます)

6.15枚までなら一括処理も可能

「圧縮」「サイズ変更」「jpg変換」は、15枚までならまとめて一度に処理できます(無料のアカウント登録をすれば上限が30まで増えます)。

もちろん16枚以上やりたい場合でも、15枚ずつに分ければ可能です。

※「画像の切り抜き」は1枚ずつしかできません。

スポンサーリンク

iloveIMGで画像の最適化をやってみよう

それでは実際に、1枚の写真を編集してみましょう。
基本的には「サイズ変更」→「圧縮」すればOKなので、今回はその流れで説明します。

切り抜きやJPG変換は、必要に応じてやってみてください。

なお、今回使う写真はこちらです。
マニュアル用のサンプル画像
大きさが「4608×3456」、サイズが「2,170KB」あります。

つる
つる
スマホ写真は重すぎやで・・・

STEP1 画像のサイズ変更

iloveIMGマニュアル画像1
まずはiloveIMGのトップ画面のメニューで「画像のサイズ変更」を選択します。

iloveIMGマニュアル画像2
「画像を選択」ボタンを押して、アップロードする画像を選びます。PCのデスクトップはもちろん、GoogleドライブやDropboxから選ぶことも可能です。

iloveIMGマニュアル画像3
写真を選んだら、次の手順を実施します。

  1. 右側のタブで「ピクセルで」を選択
  2. 幅(px)を「700」に設定。高さは自動で変わるのでそのままでOK
  3. 「画像のサイズ変更」ボタンを押す

サイズの変更は数秒で完了します。
iloveIMGマニュアル画像4
サイズの変更が完了したら、そのまま圧縮画面へ行きましょう。

上の画像の通りに緑のボタンを押せば、今サイズ変更した画像を持って圧縮画面へ行くことができます。

STEP2 画像の圧縮

iloveIMGマニュアル画像5
圧縮はとても簡単。右下の「画像の圧縮」ボタンを押すだけ。

iloveIMGマニュアル画像6
これで「サイズ変更」→「圧縮」が完了です!お疲れさまでした!

iloveIMGマニュアル画像7
2,170KBあったファイルが、18KBになりました!

つる
つる
ここまでファイルサイズを落としても、画質の劣化はほぼありません!

比較画像は、ブログの画像は、アップロードする前に縮小・圧縮するべき理由の記事に置いてあります。

余談になりますが、画像をブログに投稿した後は、alt属性(代替テキスト)を必ず設定しましょう。

Googleに対して「これはこういう画像だよ」と教えるために大変重要な項目です。SEOを意識する人は特に。

ワードプレスの人はプラグインも活用しよう

ここまでの作業で、画像を自分のブログやサイトにアップロードしても問題ないサイズになりました。

ただ、ワードプレスを使ってブログをしている場合は、画像最適化プラグインも入れておくと良いでしょう。

更に(少しだけ)圧縮してくれますし、プラグインの機能で不要なメタデータを消すことができます。

画像最適化のプラグインは「Compress JPEG & PNG images」がオススメ

最適化のプラグインは色々ありますが、無料で使える代表的なものは下記。

どれも優秀ですが、Compress JPEG & PNG imagesがオススメです。

一番圧縮率が優秀で、「無料利用は月500枚まで」という制限以外はデメリットがありません。

もちろんそれぞれ特色が違うので、自分のブログやサイトに合うのはどれなのか、いろいろ試してみてください。

※プラグインの機能で「メタデータ」を消しておきましょう

1つだけ注意点を。メタデータ必ず消す設定にしておきましょう

画像のメタデータとは、作成日時やGPS情報など、画像に関するデータ。

特に気を付けたいのがGPS情報。セキュリティ上、GPS情報を残したままWebに画像をあげるのは危険です。

IT知識のある悪い人なら、メタデータから位置を特定するのはけっこう簡単にできますので。

「Compress JPEG & PNG images」の場合は、ワードプレスの設定画面から、Original imageのカテゴリで設定できます。
iloveIMGマニュアル画像8

スポンサーリンク

PageSpeedInsightsの評価はどうなる?

「アップロード前に縮小・圧縮→最適化プラグイン」を実施している私のブログを、GoogleのPageSpeedInsightsで測定した時のモバイル評価がこちらです。
iloveIMGマニュアル画像10

画像サイズに関わる項目(3「適切なサイズの画像」)が0.45秒となっております。これはほとんど無視して問題ない値。

他の項目でも、1秒以上でなければあまり気にし過ぎる必要はありません。

つる
つる
30以上のブログやサイトをPageSpeedInsightsで測定してみましたが、どうもスコアと「改善できる項目」の数値がかみ合ってない気がします・・・僕はスコアよりも「改善できる項目」の各数値を重要視しています。体感では十分速いので。

最後に:画像の最適化で、サクサク表示できるブログへ!

今回は、画像の最適化について解説しました。

「画像最適化のポイント
  • 画像はアップロードする前に縮小・圧縮を
  • ワードプレスユーザはプラグインも併用する
  • メタデータは必ず削除!

アップロードする前にひと手間加えるのは少し面倒かもしれませんが、確実にあなたのブログを軽くすることが出来るので、是非実践いただきたいと思います。

--以上!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です