ホームページが重い?見直すべき画像の保存方法と軽量化の方法! | ホームページ制作ブログ | 大阪の集客・SEOに強いホームページ制作【S&Eパートナーズ】     

ホームページ制作ブログ

2019/03/03ホームページ制作

ホームページが重い?見直すべき画像の保存方法と軽量化の方法!


ホームページが世の中に浸透しはじめてから早20年近く…
昔に比べてホームページの数は爆発的に増え、また表現方法も多種多様になりました。
最初はほとんどテキストベースだったコンテンツも、画像や動画などが沢山散りばめられた「リッチコンテンツ」が増えてきました。

しかし、何も考えずに沢山の画像を使ってしまうとページを読み込むまで時間がかかる、いわゆる「重いホームページ」になってしまいます。

今回はホームページに使う画像に一工夫することで軽量化する方法を紹介いたします。

重いサイトでなぜいけない?


画像を沢山使ったページはユーザーの目を引き、滞在率を上げる事に効果的です。
しかし、ページの読み込み時間が伸びてしまうと逆にユーザーの離脱に繋がってしまいます。
またスマホで閲覧しているユーザーは使える通信容量に制限がある場合が多く重いサイトは敬遠されがちです。
GoogleやYahooなどの検索エンジンもページ表示速度を1つの評価基準としておりSEOの観点からも高速化が求められています。

使うべき画像フォーマットを見極めましょう


画像ファイルと一言で言っても色々なフォーマットがあります。
その中でもホームページで用いられるのは主に
JPG」「GIF」「PNG
の3種類です。
それぞれの特徴と使うべきケースをご紹介します。

JPG画像

スマホやデジカメなどでよく使用されている画像フォーマットです。
フルカラー1677万色まで表現することが出来るので、自然風景や人物などの写真を綺麗に表示させたい場合に使用出来ます。圧縮率が高く比較的小さいサイズで作成することが可能です。
ただし透過が表現できず、切り抜きや透明度を設定して利用することはできません。

GIF画像

3つの中で最も軽くなりやすい画像フォーマットですが、一枚の画像中で256色までしか使用できず、写真やグラデーションの表現には向いていません。簡単な図やロゴなどに適した形式です
また「GIFアニメ」と呼ばれるアニメーション画像を表現することも可能です。

PNG画像

正確には「PNG-8」形式と「PNG-24」形式がありますが、今回説明するのは「PNG-24」形式です。
JPGと同じでフルカラー1677万色で使用出来ます。また透過が使用出来るので、切り抜いて重ねて使用する場合に採用すべき形式です。色鮮やかな風景など写真の場合JPGよりサイズが大きくなる傾向がありますが、逆に人工物や建物などの色が少ない被写体の場合PNGのほうが軽くなる場合があります。

簡単にまとめると…

風景や人物などの色の多い写真…JPG

ロゴや図形などのシンプルな図形やアニメーション…GIF

人工物や建物などの色が少ない写真…PNG

ということになります。
もちろん全てがこれに当てはまるとは言えませんが、意識して適切なフォーマットを選ぶことで、キレイな写真を少ない容量で表示させることが可能です。

適切な大きさにしましょう!


スマホやデジカメで撮った写真や配布されいるものは「高画質」なものが多いです。
高画質なほどキレイでキメ細かい画像ということになりますが、ブラウザで見る場合高画質にしても違いが分からないことがほとんどです。
以下サイトで画像の大きさを変更することが可能です。ページのデザインとピッタリ同じ大きさにリサイズし直しましょう。

オンラインイメージエディタ
https://www.peko-step.com/tool/resize.html

またスマホ版のサイトやレスポンシブデザインを採用している場合、
スマホ用の画像を別途用意すればより軽量化が望めます。

必要ない情報をシェイプアップしましょう!


実は画像データにはページで表示するため以外の「メタデータ」というものが含まれます。
「この写真をいつ、どこで撮ったのか?」「過去にどのタイミングで編集されたか」といった記録が残されていますが、ページで表示するためにはそれらのデータは不要です。
これらのデータを削除することで画像容量を減らすことが出来ます。
また適切な圧縮処理を施すことで、画質を保ったまま軽量化することも可能です。
以下のサイトを利用することで簡単に圧縮、メタデータの削除を行えます。

オンラインイメージ最適化ツール Optimizilla
https://imagecompressor.com/ja/

オシャレと軽いは両立できる

ユーザはページを行き来しているなかで、一秒のラグがあるだけで違和感を感じるようになります。
良いホームページとはオシャレでかつ軽く使いやすいものと言えます。
デザインと共に、軽量化の工夫の工夫をすることでそれらを両立することを目指しましょう。

S&Eパートナーズではホームページの読み込みを高速化させる施策から、日々の運用サポートまで総合的に承っております。
ご不明な点等ございましたらお気軽にお問い合わせくださいませ。

ご相談、お問合せはこちら


関連記事一覧