フリーランス チャレンジ!!

フリーランス チャレンジ!!

週休4日制に俺はなる!

画像のサイズを気をつけないとブログの表示速度がトンデモナイことになるぞ!!

f:id:ksakae1216:20170112210614j:plain

みなさん、コウタロウです!!

 

今日はタイトルについて。

 

 

昨日の記事がトンデモナイことに!!

昨日、下記記事を書きました

【Google公式ツール】そのサイトがモバイルフレンドリーかとページ表示速度をチェックできる「Mobile Website Speed Testing Tool」 - フリーランス チャレンジ!!

 

ふと、今日思った「けっこう画像使ったな

 

よし、試しに「Mobile Website Speed Testing Tool」で昨日の記事をチェックしてみよう!!

 

チェックすると?!

f:id:ksakae1216:20170112210614j:plain

 ん!!

モバイル向けの表示速度が1点?!

 

大変だ!!

記事の内容以前に、誰にも読んでもらえない!!

 

原因を考える 

まあ、画層サイズは間違いないだろうなということで記事を表示して、画像を1枚ずつ「右クリック」->「名前を付けて画像を保存」でPCに全ての画像を保存

 

次にそれぞれの画像サイズを確認

660KB
2.5MB
2.1MB
660KB
2.5MB
155KB
224KB

※”KB”はキロバイトで"MB"はメガバイトです

 

上記画像サイズのトータルは8MB以上!!

 

これは確かにサイズが大きすぎる

 

画像サイズを減らす

元々の画像は拡張子が"png"です

 

画像の拡張子を"jpg"にしてサイズを小さくすると画像の縦横幅が変わらずに、画像サイズを小さくすることが出来ます

 

但し注意点として、後で元の画像サイズに戻すことができない事ができないので大事な画像はバックアップを取っておきましょう

 

さて、Macには画像を表示編集することができるプレビューというアプリがあります

このプレビューを使って"png"を"jpg"にしてみます

 

まず、画像ファイル(拡張子"png")を選択し、Cmd+下矢印で画像をプレビューで開きます

f:id:ksakae1216:20170112220931j:plain

 

次にメニューから「ファイル」->「書き出す」を選択すると

f:id:ksakae1216:20170112221035j:plain

はい、このような画面になるので

フォーマットは「JPEG」を選択

品質はつまみを適当に動かし、ファイルサイズが50KB近辺にします

※画像によっては51KBとか48KBとかで50KBピッタリにできなようです

 

最後に「保存」ボタン押下で無事、50KBで拡張子が"jpg"の画像ファイルが完成です

プレビューを使うと、元の画像ファイル(拡張子"png")は削除されずにそのまま残っています

 

画像サイズを減らした結果

この手順で全ての画像ファイルを50KBくらいにした結果・・・

 

f:id:ksakae1216:20170112221008j:plain

モバイル向けの表示速度が45点まで上がりました!!

 

まあ、けしていい数字ではないと思いますが、最初が1点だったのでよしとしましょう

 

最後に

如何でしたか?

最近のネットワークは高速になったとはいえ、画像サイズだけで数メガバイトあるのは記事を読んでもらう人にとってやさしくないですね

 

明日以降の記事は画像サイズに気をつけて書いていきます!!