ブログ最適化

初心者でも簡単!画像の圧縮・縮小なら「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」なんですね。

このサイズが横と縦の比率が
「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」という便利な無料ツールを
ご紹介しました。

サイトやブログの表示速度や読み込み速度を
遅くさせてしまう最大原因の画像の取り扱いですが、
正しい画像の編集を行えばそういった事を防ぐ事が
出来る訳ですから積極的に取り組みましょう。

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

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

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

関連記事