Get a network qualification

資格取得でネットワークエンジニアへの道が開けます。
資格取得に役立つ勉強法を自身の体験を交えて紹介します。
現在、過去数百に及ぶ記事を只管修正中(ちょwww)。

資格を手に入れてネットワークエンジニアになろう

スポンサーリンク


28
2016  23:28:24

元ネットワークエンジニアのブログ画像の圧縮が必要な理由について考えてみた

JTrimで画像圧縮ブログ画像圧縮

今回は、ブログやサイト運営を行う上で、留意すべきことについて触れたいと存じます。

皆さんの中にはブログ運営等をされている方もおられると思いますが、ブログ記事を書く際に画像を用いる機会が殊の外多いのではないかと思います。

その目的としては、ブログ記事を補足するため、ブログ記事を際立たせる必要がある場合、他者の関心を惹くために使用する等、様々な用途で用いられていることと存じます。

むしろ、文字情報だけでは、記事の魅力が伝わらないことも多く、昨今では、視覚効果を用いるためにブログ画像を用いるケースが増えてきています。

勿論、画像を多用することで、ブログやサイトを華やかに彩ることができるのですが、その反面、画像を用いることでブラウザに負荷を掛けていることも忘れてはなりません。

なぜなら、画像に含まれている情報は多く、それだけ多くの容量を必要とするからです。
軽い画像なら閲覧する際にもそれほど負担にはなりませんが、情報量の多い画像だと、それだけブラウザの読み込みに時間が掛かり、ユーザによっては画像が開くまで待たされることもあるかもしれません。

特にスマホ等での閲覧時には画像の容量には充分に気を配る必要があります^^;。
なぜなら、回線速度の関係で画像がブラウザに負荷を掛け、ページが開けなくなる可能性があるからです。

当然の事ながら開かないページは即座に閉じられてしまうことでしょう><。
ユーザに優しいページ作りを行うことが大切なのです。

このようなことにならないためにも、画像は極力軽いものを用いるべきです。
そのため、最近のブログやサイトではこの点に留意して、画像を圧縮することが多くなってきています。

以降、そのようなブログ画像の軽減を図るために有用なツール及びその使用方法を簡単に紹介したいと存じます。

具体的には元画像を圧縮することで画像容量の軽減を図る方法となります。

以下、画像編集機能のあるフリーソフトの「JTrim」を用いて作業を行っていきます。

JTrim(レタッチソフト)のダウンロード


1.グーグルで「JTrim」と入力し、検索結果から「JTrim -窓の杜ライブラリ」をクリックします
又は以下のURLをクリックします

JTrim -窓の杜ライブラリ

JTrimダウンロード1


2.窓の杜のJTrimのダウンロードページが開きます
赤枠で囲まれている部分をクリックします

JTrimダウンロード2

3.ダウンロードページに遷移して、自動的にダウンロードが始まります
もし、開始しない場合はページ内の説明に従ってください

JTrimダウンロード3

以上がダウンロード手順となります。
正常に作業が完了すれば、JTrimのプログラムがダウンロードされます。

以降、JTrimのインストール作業となります。

JTrim(レタッチソフト)のインストール


1.ダウンロードしたJTrimのプログラムファイルをクリックします
環境によっては、ユーザアカウント制御(UAC)が出る場合がありますが、基本許可して頂ければ問題ありません

JTrimインストール1

2.セットアップウィザードが立ち上がるので、「次へ」をクリックします

JTrimインストール1

3.インストールフォルダの選択画面になりますが、通常はそのままで問題ありません
デフォルトでは「Program Files」になっているはずです

インストール先を変えたい場合は、異なるフォルダを指定します
問題なければ「次へ」をクリックします

JTrimインストール3

4.プログラムグループの選択画面になりますが、通常はそのままで問題ありません
変更したい場合は、ショートカットを作成するフォルダを選択します
問題なければ「次へ」をクリックします

JTrimインストール4

5.追加タスクの選択画面になります

①「デスクトップにアイコンを作成する」にチェックを入れます

②「次へ」をクリックします

JTrimインストール5

6.インストールの準備画面になるので、問題なければ「インストール」をクリックします。

JTrimインストール6

7.インストール終了後、「セットアップの終了」画面に遷移するので、「終了」をクリックします。

JTrimインストール7

以上がインストール作業となります。

以降、インストールしたJTrimを使用して、画像の圧縮作業を行います。

JTrimの起動及び画像圧縮方法


1.デスクトップに作成された「JTrim」のショートカットアイコンをクリックします

JTrim起動1

2.JTrimが起動します

JTrim起動2

3.JTrimを最大化します

JTrim起動3

4.メニューから「ファイル」→「開く」をクリックします

JTrim操作1

5.対象の画像を選択して「開く」をクリックします

JTrim操作2

6.JTrimに画像が読み込まれ表示されます

JTrim操作3

7.開いた画像を圧縮するため、「保存オプション」をクリックします

JTrim画像圧縮作業1

8.保存オプションが開きます

JTrim画像圧縮作業2

9.以下の通り、保存オプションを設定します

①画像の保存品質を設定します、この数値を低く設定するほど圧縮率が高くなります
尚、圧縮率を高くすると画質が落ちます
また、JPEG画像を用いる場合は、非可逆圧縮が行われるため、一度圧縮すると元に戻せなくなります

よって、画像を保存する前に品質を確認するように願います
特に文字等を使用している画像の場合、文字がぼやける場合等があります

②「Exifデータを保持する」のチェックを外します
尚、「Exifデータ」とは画像に登録されている個人情報のことで、それらの情報を除去して画像の保存を行います

③問題なければ、「OK」をクリックします

JTrim画像圧縮作業3

10.圧縮を行ったファイルを保存したい場合、メニューより「ファイル」→「名前を付けて保存」又は「上書き保存」をクリックします

尚、画像の保存前に先の保存オプション画面にて、「プレビュー」ボタンをクリックすることで設定している画像の品質を確認することできます

圧縮前のファイルを残したい場合は、「名前を付けて保存」で別名保存します
「上書き保存」を行うと現在開いているファイルがそのまま保存されます

JTrim画像圧縮作業4

11.「名前を付けて保存」をクリックした場合、保存を行う場所が表示されますので、任意のファイル名、保存場所を指定し、「保存」をクリックします

JTrim画像圧縮作業5

12.ファイル保存後、メニューより「ファイル」→「アプリケーションの終了」で、JTrimを終了することができます

JTrim画像圧縮作業6

以上の設定を行うと次回から自動的に設定した品質で画像が保存されるようになります。
今回は例として品質を50に設定してみました。

JTrimで画像圧縮を行う前後の画像を比較する


画像圧縮前のファイル】

画像サイズ約93KB
チューリップ画像圧縮前

画像圧縮後のファイル】-保存品質を50に設定

画像サイズ約span class="futo">31KB
チューリップ画像圧縮後

ご覧頂くとお分かりになると思いますが、見た目は殆ど遜色ありません。
どちらも色彩豊かで鮮やかな画像となっています。
しかし、画像サイズは圧縮前と圧縮後で約60KB削減されています。

これだけ削減できれば、スマホ等で閲覧した際の表示速度が変わってくると思います。

また、この状態でサイズ変更等を行えば更に容量を削減することが可能になります。
圧縮機能をうまく使えばかなりの容量を削減することができるわけです。

ブログ画像を圧縮することの意義


今回の作業を通じて、画像の容量削減を図る必要性をご理解頂けたのではないかと思います。

尚、画像容量が多ければ多いほど、圧縮を行った際に削減できる容量は大きくなります。

画像データが大きければそれだけブラウザがページを読み込む際に時間を要することになりますから、極力サイズを抑えた方が良いわけです。

もっとも、圧縮しすぎると画像がぼやけてしまったりするけどね^^;。
人の目から見て遜色ない辺りに抑えておくとベストだと言えます。

画像ソフトの圧縮機能を用いることで、ブログ画像の容量削減を行うことができ、ユーザにもブラウザにも優しいページ作成を行うことができるわけです。

ちなみに、最近のブログツール等では画像圧縮機能を備えたものがあり、そちらを用いて圧縮を行っても良いと思います。
要は、必要以上に大きいサイズにさえならなければいいわけです。

ブログ運営において、記事の内容の充実は勿論大事ですが、それと同時に軽いページ作りも進めていって頂ければと思います。
是非、ストレスフリーなページを目指して頑張っていきましょう♪

WEBデザイン講座をお探しならこちらがおすすめ♪

↓ ↓ ↓

WEBデザイン講座をお探しならこちら

ブログ関連書籍はこちらになります

↓ ↓ ↓

ブログ関連書籍はこちら

関連記事

スポンサーリンク


 お役立ち情報

0 Comments

Leave a comment