今年もあれよあれよという間に8月に突入しました。
当事務所のある横浜市都筑区でも暑い日々が続いていますが、夏バテなどされていないでしょうか？暑いと休日も外出が億劫になり、最近は運動不足で「夏太り」してしまう人も多いのだとか。
新型コロナも「BA.5」とか「ケンタウロス」などの変異型でまた感染拡大しているので、外出する気持ちがますます削がれる…という方もおられるかもしれないですね。
そんな2022年の夏ですが、今回はホームページもダイエット（軽量化）が必要、というお話です。
集客ツールとして、ホームページの軽量化は重要です
Web制作で意外に大切なのが「サイトの表示速度」。
つまりホームページにアクセスして、表示されるまでのスピードです。
サイトの表示に時間がかかると、他のページに行ってしまう人もいるでしょうし、表示に時間のかかるホームページは検索した時に表示順位を下げられてしまう傾向がある、とも言われています。
つまりサイトデータの軽量化はSEO対策にもなるのですね。
ホームページの内容やWebデザインが良くても、サイトの速度の問題で上位表示されなくなるのはツラい。
商売として、集客ツールとしてホームページの運営をしている方にとってはサイトの軽量化はそれだけに重要です。サイトの重さと売上の金額は反比例する…とまでは言いませんが、サイトのPV（ページビュー）と売上・業績は比例する場合は多い、のではないでしょうか？
サイトの表示速度が遅くなる原因としては
・サーバーの性能が低い
・サイトの仕掛けや構造が複雑すぎる
・サイトのデータが無駄に重い
…といったことがあります。
（閲覧するパソコンが不調とか、通信障害が発生しているなどの場合は別ですが。。）
ホームページ用に契約しているサーバー（つまりサイトの入れ物）が古いプランや格安プランだと性能的に厳しくて、速度が落ちることがあります。
古いプランから新しいプランに乗り換えるだけでもかなり速くなる場合もありますし、サーバー会社もプラン切り替えを優遇（料金とか）している場合もあるので、ご契約中のサーバー会社のホームページなど確認してみることをお勧めします。
「サイトが重い」のは使っている画像が重いから？
サイトの仕掛けや構造の複雑さについては、特に長らくリニューアルしていない割に内容の増設を何度もしているものは重くなる傾向があります。そのようなサイトはスマホ対応もできていない場合が少なくないので、この機会にスマホ対応サイトに作り替えることをおすすめします。
詳しくは下記参照ください。
そして最後の「サイトのデータが無駄に重い」というのは使っている画像が重い場合がほとんど。
「重い」とは「データサイズが大きい」ということで、無駄に巨大な画像データを使っていたりするとサイトの表示はどうしても遅くなりがちです。
最近は光回線も当たり前になって、数MB程度の画像ならあっという間にダウンロードしてしまうのであまり気にならないかもしれませんが、屋外でスマホで見ていたり、しかも4G回線じゃなく3G回線接続になっていたりするとちょっと表示に時間がかかる…かもしれません。
今回は特に、このホームページに使用している画像のデータサイズ削減について深掘りしてみたいと思います。
画像のデータサイズ削減、つまり軽量化の方法の主な方法は下記の3点です。
まずは「【1】適正サイズにする」こと、
そして「【2】圧縮率を（適度に）上げる」ことが必要です。
さらに「【3】適正なフォーマットに変更する」ことができればなお良いです。
では順に見て行きましょう。
画像軽量化Tips【1】適正サイズにする
【1】については（先述のように）無駄に大きな画像を使っている場合、そのぶんデータ量が多くなってしまいますので、サイトの読み込みに時間がかかります。画像のサイズを実際の表示サイズに合わせた「適正なサイズ」にすることで、ホームページの軽量化ができることも多々あります。
最近のサイトデザイン、つまりWebデザインではページ上部に画面を埋め尽くすような大きなヘッダ画像を掲載する（いわゆる「ヒーローヘッダー」）など画像サイズの大型化の傾向があるのが悩ましいところです。
が、それでもせいぜい幅3,000ピクセルくらいを上限にしてその画像も適切に圧縮するなどして軽量化されるのが宜しいかと思います。（画像圧縮の詳細については後述）
スマホ対応（レスポンシブ）にされているのであれば、スマホでの表示（いわゆる「SP表示」）での画像は専用の小さい画像に切り替えるように設定するのも良いですね。
そして本文に載せる画像もなるべく実際に表示するサイズに合わせてリサイズ（サイズ変更）されるのがおすすめです。
意外に盲点なのが、本文の挿絵的に使う小さめの画像。
大きな画像もHTMLやCSS（スタイルシート）などで表示サイズを指定して、いちいちリサイズしなくても意図したサイズで表示できるようにしている場合があるのですが、それはあくまでも「見かけの大きさ」です。
ネットから読み込むデータは本来のデータサイズのままなので、画像の数が多いと大量のデータを読み込むことになり表示速度が下がるなどの悪影響が発生することがあります。
ブログサービスやWordPress（ワードプレス）サイトだとアップロードした画像からサイズ違いのものを自動で生成してくれたりするので良いのですが（設定次第ですが）、そうでない場合はネット上の画像サイズ変更サービスなどを利用して、画像を縮小されると良いかと思います。
画像軽量化Tips【2】圧縮率を（適度に）上げる
【2】の圧縮率ですが、一般的によく使われる画像の種類としては「JPEG（ジェーペグ）」で、これはご存知の方も多いかと思います。同じJPEG画像でも保存するときに圧縮率を変更できます。（画像加工アプリの種類によってはできないものもあります。）
圧縮の度合いは「画質」の数値で表され、「圧縮率」が低いと「画質」の数値は大きく、「圧縮率」が高ければ「画質」の数値は小さくなります。
（※「画質」は「品質」と呼ぶ場合もあります）
と、いうことで実例です。上の写真をJPEGの画質を変更して再保存してみました。
今年の春に近所の「東山田公園」（横浜市都筑区東山田２丁目）にて撮影したメジロ＆ソメイヨシノです。
下の画像は画質を変えて書き出したものから、部分的に切り出して並べたものです。
左上の「画質：80」のものはメジロの羽毛のディテールまで解像し、背景のボケた部分も滑らかですが、右下の「画質：10」のものは小鳥や桜の輪郭線がぼやけてきていますし、背景にはブロックノイズやモスキートノイズが浮いてきています。
「圧縮率を上げる」とは単純に言えばデータを間引いて、その分を周囲の画素情報から推測して埋めるような感じで、圧縮するほどデータサイズは軽量化できますが、やりすぎるとアラが目立ってきます。
データサイズと画質を見極めて、適切な圧縮率を選択することがオススメです。
画像軽量化Tips【3】適正なフォーマットに変更する
上の項目で画像フォーマットとして「JPEG」を挙げましたが、
他にもGIF（ジフまたはギフ）やPNG（ピング）もあります。
基本的にグラデーションなどを綺麗に見せたいときはJPEGで、イラストなど色数が少ないものはGIFを使うのが一般的ですが、PNGを使った方がデータサイズが小さくなることもあります。
また、最近は「WebP（ウェッピー）」という画像形式も一般化してきており、こちらも画像サイズ削減に適宜取り入れられるのがおすすめです。
データサイズを見ながら画像の適切な形式や圧縮率を探る作業はPhotoshop（フォトショップ）などのデザイン用アプリがあるといろいろ捗ります。