BLOG最適化

初心者でも簡単!画像の圧縮・縮小なら「I LOVE IMG」

パソコンとリアルが混在した画像

 

こんにちは。
必死に張り切る ひしはり です。

 

ひしはり
ひしはり
初心者でもかんたんに画像の圧縮や
縮小ができる画像編集ツールってあるの?

その画像編集ツールは
無料で使えたりするの?

本記事では
このような疑問にお答えします。

 

本記事の内容

❶ 画像の圧縮・縮小なら「I LOVE IMG」

❷ ブログに画像をアップするときの鉄則

❸ 画像の「圧縮」と「縮小」は別もの

❹ 初心者でもかんたん!画像編集ツール「I LOVE IMG」の特徴

❺ 初心者でもかんたん!画像編集ツール「I LOVE IMG」の使い方

 

ブログに画像をアップするときに
画像を「圧縮」「縮小」しなければ
どんどんブログの表示速度が
重たくなって遅くなって行きます。

せっかく自分のブログに
読者が訪問してくれても
表示速度が遅ければ、
それだけでページから
離脱されてしまう可能性があります。

本記事を読めば、
画像編集ツールの
「I LOVE IMG」の使い方がわかり
ブログに画像をアップする際の
画像の「圧縮」「縮小」
初心者でもかんたんに
行うことができるようになって
ブログの表示速度が
遅くなることを防げますよ!

 

この記事を書いている人

この記事を書いている私はブログ歴4年目

現在は本業のサラリーマンの傍ら副業ブロガーとして活動しています。

Twitter(ひしはり人生再構築ブロガー)のフォロワーは1800人ほど。

画像の圧縮・縮小なら「I LOVE IMG」

I LOVE IMGの画像

 

今日ご紹介するのは
ブログ初心者でもかんたんに
画像の「圧縮」「縮小」ができる
画像編集ツールの「I LOVE IMG」です。

ブログ記事に画像をアップする前に
その画像自体の容量を
小さく圧縮できて、
サイズの縮小(変更)もできてしまう
無料で使える便利な画像編集ツールです。

画像をアップする際の鉄則

審判の画像

 

まず、ブログ記事に画像を
「アップ(アップロード)」する際の
鉄則ですが、フリー画像サイトなどから
ダウンロードした画像や
スマホやデジカメ、または
「スクリーンショット」
撮影した画像をそのまま
ブログ記事にアップすることはNGです!

【ブログに画像をアップする際の鉄則】

アップしたい画像をそのままブログ記事にアップすることはNG!

 

では、なぜ画像をそのまま
ブログ記事にアップすることが
NGなのでしょうか?

順を追って説明して行きますね。

スクリーンショットとは?

 

まず、前述の
「スクリーンショット」ですが、
スクリーンショットとは略して
「スクショ」ともいわれますが、
今見ているパソコンの画面だったり、
スマホの画面を撮影して
画像にできる機能のことです。

私はまったくの初心者で
ブログを始めましたので
ブログを始めたてのころは、
画像を記事にアップする方法すら
知りませんでした(笑)

ですので当然、画像の
「圧縮」「縮小」なんてことも
まったくわからないまま
フリー画像サイトなどから
ダウンロードして来た
画像やスクリーンショットを
バンバンそのままブログに
アップしていました(笑)

どんどん遅くなって行く表示速度や読み込み速度

スピードメーターの画像

 

するとどんどんどんどんと
ブログの表示速度や
読み込み速度が遅くなり
重た〜い感じに
なってしまったんですね(汗)

これは何か改善策を
考えなければということで、
表示速度や読み込み速度が
遅くなる原因を調べてみました。

するとブログ記事に
アップしている画像に
どうやらおもな原因があることが
わかりました。

しかし、他のブロガーさんたちの
ブログ記事を見てみても
同じように画像を
たくさん使われているのに
全然表示速度が遅くないんですね。

どういうことかとさらに調べてみると、
他のブロガーさんたちは、
画像をブログにアップする前に
その画像の「圧縮」や「縮小」を
されていたからなんですね。

同じようでまったく違う「圧縮」と「縮小」

赤と青のボクシンググローブの画像

 

画像の「圧縮」とは
「データ容量そのものを
小さくすること」をいい
圧縮することによって
ファイルを転送するスピードを速くし、
保存するのにも容量を節約することが
可能になります。

画像の「縮小」とは
ざっくりいうと
「画像の面積(サイズ)を
小さくすること」と解釈してもらえば
わかりやすいかと思います。

画像の面積(サイズ)を
小さくすることによって
ファイルの容量を
軽くするということですね。

圧縮も縮小もファイルの容量を
軽くするという点においては同じですが、
その意味合いはまったく異なります。

【圧縮】

「圧縮」とは
画像の大きさ(サイズ)はそのままで、画像ファイル自体の
物理的な容量を小さくすることをいいます。

 

【縮小】

「縮小」とは
画像そのものの物理的な
大きさ(サイズ)を小さくすることをいいます。

 

「圧縮」「縮小」については
以下の記事にわかりやすく
まとめていますので
合わせてぜひ、参考にどうぞ!

 

画像編集の画像
画像の「圧縮」と「縮小」の違いをわかりやすく徹底解説!ブログ運営に必須である画像の「圧縮」と「縮小」についてそれぞれの違いを知りたいですか?本記事ではそんな似ているようで別ものの画像の「圧縮」と「縮小」についてご紹介しています。「圧縮」と「縮小」の違いを知りたい方はぜひ、記事をご覧ください!...

 

私はWordPressで
ブログを運営していますが、
「画像最適化プラグイン」
インストールして有効化しておけば
それでいいと思っていましたからね。

でもそれだけでは
まだまだ足りなくて
ダメだったんですね。

WordPressの画像最適化プラグインだけでは足りない!

 

ブログの表示速度や
読み込み速度が遅いと
せっかくブログに
訪問してもらえた読者の
直帰率や離脱率のアップに
つながってしまいます。

そういった意味でブログ記事に
画像をそのままアップすることは
ブログの表示速度や読み込み速度の
遅さに直結しますので、
「NG」なんですね。

初心者でもかんたんに使える「I LOVE IMG」

使い方のイラスト画像

そこで登場するのが
画像をアップする前に
その画像自体の容量を
小さく圧縮できて、
サイズの縮小(変更)もできてしまう
無料で使える画像編集ツールの
「I LOVE IMG」なんですね。

無料で使える画像編集ツールは
他にもたくさんありますが、
私は「I LOVE IMG」
気に入って使っています。

ちなみに他の人気どころの
無料画像編集ツールは
以下のあたりの
ラインナップになっています。

 

 

 

 

なぜ私が「I LOVE IMG」
使っているかといいますと
画像の圧縮と縮小が
かんたんでわかりやすくできる
からなんですね。

アップする画像は推奨サイズに合わそう!

コンバースの画像

 

私はWordPress有料テーマの
「JIN」を使って
ブログを運営していますが、
そのJINで推奨されている画像のサイズが
「横760px:縦428px」なんですね。

「px」「ピクセル」と読み
デジタル画像の最小単位のことです。

このサイズの横と縦の比率が
「16:9」にあたるので
JINでは一番いい感じに
画像がはまるからとのことなんです。

以下の記事にくわしく書かれています。

 

 

一般的には
ブログにアップする画像の幅は
700pxあればじゅうぶんです。

ブログ記事にアップする画像の幅は700pxあればじゅうぶん。

 

今では無料フリー画像サイトから
ダウンロードした画像であったり、
スクリーンショットで撮影した画像を
先ほどの推奨サイズに縮小して
さらに圧縮もしてから
ブログにアップしています。

おかげでだいぶんと
表示速度や読み込み速度が
改善されて来ました。

それでは誰でもかんたんに
画像の「圧縮」「縮小」ができる
「I LOVE IMG」の具体的な使い方を
ご紹介して行きます。

使いやすさ抜群!「I LOVE IMG」の特徴

パソコンを操作する女性の画像

 

まず、かんたんに
「I LOVE IMG」の特徴を
紹介しておきますね。

「I LOVE IMG」
初心者の方でも
かんたんに画像を編集できる
無料ツールです。

 

ひしはり
ひしはり
無料で使えるってありがたいですよね!

 

おもな特徴としては

 

  • 画像の圧縮
  • 画像のサイズ変更
  • 画像の切り抜き
  • 様々な画像をJPG変換可能

 

などがあげられます。

ここにあげた以外の機能も
すべて無料で利用できますが、
アカウント登録したり、
有料版に登録すれば
さらに機能の制限を
アップさせることもできます。

①  画像の圧縮

 

画像を圧縮することができます。

②  画像のサイズ変更

 

画像のサイズをピクセル単位、
または比率単位で
変更することができます。

③  画像の切り抜き

 

画像をお好みのサイズに
切り抜くことができます。

④  JPGに変換

 

「PNG」「GIF」「TIF」「PSD」
「SVG」「WEBP」「RAW」といった
他の形式から「JPG」
変換することができます。

ブログにアップする画像は、
JPG形式が推奨されています。

「画像の圧縮」「画像のサイズ変更」
「画像をJPGに変換」
15枚までは、まとめて
一度に処理することが可能です。

ただ、画像の切り抜きに関しては、
1枚づつしかできません。

画像の「サイズ変更」と「圧縮」の手順

 

それでは実際に画像の
「サイズ変更」「圧縮」
やってみましょう。

今回はこちらの画像を
使いたいと思います。

 

絶景の画像

 

画像情報の画像

 

フリー画像サイトから
そのままダウンロードして
この記事にアップしました。

容量が「347KB」あって
画像のサイズが
「1280×661」ピクセル(px)あります。

画像のサイズ変更

 

まずは「I LOVE IMG」のトップ画面で
「画像のサイズ変更」をクリックします。

 

I LOVE IMGの画像

 

「画像を選択」をクリックして
アップロードする画像を選びます。

 

I LOVE IMGの画像

 

画像を選んだら右側のタブで
「ピクセルで」を選択します。

幅の(px)を「760」に設定します。

高さの(px)は自動で選択されます。

「画像のサイズ変更」をクリックします。

 

I LOVE IMGの画像

 

I LOVE IMGの画像

 

数秒でサイズ変更が完了しますので
そのまま続けて圧縮も行いましょう。

画像の圧縮

I LOVE IMGの画像

 

上段のメニューからも
圧縮画面へ移動できますが、
その場合は圧縮したい画像を
選び直す必要があります。

そこで下記の
緑色のボタンをクリックすると、
先ほどサイズ変更した
画像を指定したまま、
続けて圧縮画面へ
移動することができます。

 

I LOVE IMGの画像

 

圧縮は右下の
「画像の圧縮」をクリックすると
ほんの数秒で完了します。

 

I LOVE IMGの画像

 

I LOVE IMGの画像

 

画像の「縮小」によって
ファイルの容量が
「347KB」から「97.46KB」まで
縮小されました。

さらに画像の「圧縮」によって
ファイルの容量が
「97.46KB」「62.29KB」まで
圧縮できました。

 

 

最後に「縮小・圧縮前」の画像と
「縮小・圧縮後」の画像を
見くらべてみましょう。

「縮小・圧縮前の画像」

 

絶景の画像

 

「縮小・圧縮後の画像」

 

 

いかがですか?

画像のサイズが
「1280×661」ピクセル(px)から
「759×392」ピクセル(px)まで
縮小され、画像ファイルの容量が
「347KB」から約「62KB」まで
圧縮されたにも関わらず、
画像の見た目の違いは
ほとんどわかりませんよね。

ですが、このいっけん地味な作業が
何十枚、何百枚、何千枚と
画像が増えて来ると
じわじわと効いて来るわけなんですね。

以上が「画像のサイズ変更」
「画像の圧縮」の作業の流れになります。

 

ひしはり
ひしはり
いかがだったでしょうか?

 

「な〜んだ、
こんなかんたんに出来るのか」
思われたのではないでしょうか?

初心者のうちは
知らないことは何ごとも
たいそうに思ってしまいがちですが、
いざ、知ってしまえば
たいしたことはないんですよね(笑)

まとめ

 

今日はブログに画像をアップする際に
画像の「圧縮」「縮小」
初心者でもかんたんに行うことができる
「I LOVE IMG」という便利な
無料画像編集ツールをご紹介しました。

サイトやブログの
「表示速度」「読み込み速度」
遅くさせてしまう最大原因が
画像の取り扱いです。

ですが、
正しい画像の取り扱いを行えば、
そういったことを防ぐことが
できるわけですから
ぜひとも積極的に取り組みましょう。

画像や動画が使われていない
サイトやブログは
さみしく写ってしまうため、
多くの方が画像や動画を
自分のサイトやブログに
アップしています。

今回ご紹介した方法で
画像をアップロードして行けば、
特に問題はないはずですので
この機会にしっかりと
やり方をおぼえてしまいましょう。

圧縮やサイズ変更を意のままに行い
ブログをますますオシャレに
わかりやすくしたいと
必死に張り切る ひしはり でした。
今日はここまで。

関連記事