今後Webサイトパフォーマンスを向上するために必要な様々な手段についての記事を投稿していきますが、初回のこの手段が1番効果が現れやすいかと思います（笑）

まず初めに、自分のサイトにどれほどの画像が使われているのかを見たことはありますでしょうか。

デザインに多様性が求められてきた今日では、写真を効果的に用いる機会が増えてまいりました。
見栄えのする、素敵なデザインを作成する上で、写真の活用は必要不可欠と言えるでしょう。
（あなたの事業の魅力を伝えるのにも！）

そのため、「画像の使用を極力避けること」が1番の対策とは私は思えません。

大事なのは「使用する画像の扱い方」です。

画像を使用するという選択をした上で、どのように扱っていけばよいのかを見ていきましょう！

※手順としては前後するものもありますが、対策しやすい、もしくは効果が期待できる順に述べていこうかと思います。

こちらは自身のサイトの画像差し替えや設定ができる知識をお持ちであれば、今すぐにでも実践していただきたい項目となります。

まず「画像の最適化」とは何を表すのかというと、言い換えれば「画像の圧縮により、サイズはそのままかつ画像の質を極力落とすことなく容量のみを削減する」ということです。

この「画像の最適化」を実行しているか否かで、サイト全体の容量が大きく左右されることとなります。

圧縮の方法としてはAdobe Photoshopを活用した方法もあると思いますが、1番手軽にできるのはWeb上に存在する「ツールによる画像圧縮」です。

手順としては

1. 「画像　最適化」と検索
2. 出てきたWebサイトに画像を読み込ませる
3. 圧縮化された画像を再ダウンロード

ほとんどは以上で終了となります。（めちゃくちゃ簡単ですね・・・！！）

こちら、今回はWeb上のツールにおける手順を紹介しましたが、WordPressをお使いの方であれば、WordPressのプラグインにも同様に画像の圧縮を行ってくれるものがあります。（今後有用なプラグインについてもまとめていきたいと思います・・・！）

やってみていただければと思うのですが、画像によってはなんと容量を80%も削減することができます。

これが解像度も下げられ、見るに堪えない画質になるのであれば絶対にやらない方がいいですが・・・
そんなことはなく、肉眼ではほぼ判別不可能な変化しかおきません。

後は最適化された画像に差し替えていけば、こちらのSTEPは終了です。

体感できるほどに変わってきますので、是非お試しください！
（今後、ただ画像を多用したサイト→最適化した画像を使用したサイトのスコアを測り、載せたいと思いますので、お楽しみに！）

こちらの項目はGoogleスピードテストにて、モバイルの点数がどうしても上がらない方に是非実践していただきたい項目となります。

「よく耳にするけど・・・Webサイトパフォーマンスって結局のところ何？」の記事でも触れましたが、各表示デバイスにより適切な画像を設定することはWebサイトパフォーマンスの向上において必要な処理かと思います。

詳しく見ていきましょう。

まず簡単にイメージできることとしては、スマホ表示の際に横幅1500pxの画像を使う必要があるのかどうかということです。
例えばiPhoneXの横幅は375pxしかありません。それならば横幅1500pxの画像というのは、明らかにオーバースペックなものであると考えられます。

スマホ用には大きなサイズの画像を使うよりも、大体横幅400pxぐらいの小さい容量の画像を用意することが望ましいです。

そのためにはPC表示時ではこの画像、SP表示時はこの画像をと、画像の用意・分岐の指定が必要となります。
分岐指定に関してはまた別の記事で紹介しますが、自社にコーダーを抱えている方やある程度の知識をお持ちの方は早速実践してみましょう！

ちなみに画像のサイズを編集するソフトは使いやすいもので良いかと思います。（プリインストールされている「フォト」やAdobe製品の「Photoshop」等）

補足として、サイズ調整を行ったあとは忘れずに最適化を行いましょう！

以上、2つの手段を紹介させていただきました！
しかしながら、こちらは「初級編」となります。

まだまだ手をかけて行えることはたくさんありますので、シリーズ化して投稿していきたいと思います！

次回の投稿をお楽しみに！

ではでは！