ホームページを早く表示する為の効率的な画像圧縮

こんにちは、才木です。
今回は画像をよく使うホームページを運営している方には必見の画像圧縮について書いていこうと思います!

画像の圧縮

画像の圧縮とは簡単に言うと画像の余分な部分を取り除くことです。

余分な部分を取り除く方法

・画質を下げる
・画像に付随するExif情報をできる限り消す
・画像の縦横サイズが表示領域より大きい場合サイズを合わせる

余分な部分を取り除くことでホームページの読み込み時に表示するページのサイズが小さくなり早くホームページを表示させることが可能となります。

圧縮の効果

実際に圧縮をしてみてどれくらいの効果があるのかみてみましょう。

検証の為に写真素材を無料配布しているぱくたそからダウンロードさせていただきました。

流行りのAI生成画像。みなさま濃霧の中いかがお過ごしでしょうか

こちらのダウンロード画像、ブログに載せる前は13.3MB。
ここのサイトに載せることで138KB。

だいたい画像サイズが100分の1ほどになっており元画像そのまま表示するより断然サイズが軽くなっています。
圧縮の内訳は縦横サイズの縮小、画質の調整、jpgからwebpへの変換となっております。

効率的な画像圧縮

数枚の画像をホームページ更新ごとに圧縮するようであれば、オンライン上で使える無料画像圧縮サイトを使用すれば新たにツールを導入する必要がなくお手軽に簡単に圧縮可能です!

おすすめの画像圧縮サイトTinyPNG

MacではAutomatorを使って、Windowsではレジストリをいじることでさらに効率的に画像圧縮が可能です。選択後ショートカットキー一発で圧縮可能

はやい…

大量の画像を使うようなホームページを運営している方でホームページの表示が遅い等でお悩みの方は、画像のサイズを確かめてみてぜひお試しください!