2021/2/18 「HTML&CSS辞典」をオープンしました! 是非、ご覧になってください!

画像形式(PNG・GIF・JPEG・SVG)の種類と特徴、ページ表示速度を改善する方法、オススメの画像集を紹介!

ホームページやブログが文字だけになってしまうと味気のないものになってしまいます。

そんな時に、ホームページやブログのテイストに合うような画像を挿入することができたらユーザーに情報を分かりやすく伝達することができます。

この記事ではホームページやブログに役立つ素材集だけではなく、Webサイトでよく使用される画像形式(PNG・GIF・JPEG・SVG)の種類と特徴、ページ表示速度を改善する方法も紹介していきたいと思います。

1.画像形式(PNG・GIF・JPEG・SVG)の種類と特徴

画像形式には様々な種類が存在しています。

画像形式は目的・用途に合わせて適切な形式を選ぶことが重要です。

画像形式を適切に選ぶことでページ表示速度を改善したり、サーバーのデータ転送量を削減することができるというメリットがあります。

ここでは一般的に使用されているPNG・GIF・JPEG・SVGを紹介していきます。

PNG

PNGはGIFに代わってよく利用されるようになった画像形式です。

PNGには256色を扱える8ビット形式、すべての色を扱える24ビット形式、アルファチャネルが設定できる32ビット形式の3種類が存在しています。

※アルファチャネルとは画像の透明度を自由に設定できる機能のことです。

PNGは可逆圧縮画像形式なので低画質で保存しても元の画質に戻すことができるという特徴を持っています。

GIF

GIFは昔から利用されている画像形式です。

GIFは256色しか使用できないため、多くの色を使用しなくてすむ画像に利用されます。

このように使用できる色が制限されているため、容量を軽くすることができます。

他にも、GIFはロゴ、アイコンなどの余白部分を透過させる機能やアニメーション効果をつけるアニメーションGIFという機能もあります。

JPEG

JPEGは約1677万色と表現できる色が豊富となっていますが、圧縮という方法を使っているので綺麗な画像のまま容量を小さくすることができます。

上記のようなメリットがありますが、一度圧縮してしまうと画質を元に戻すことができないので注意が必要です。

SVG

SVGはベクター画像を扱うフォーマットとして利用されます。

SVGはビットマップ画像と異なり、画像を拡大縮小を行っても画質が落ちないという特徴があります。

最近、SVGに対応するブラウザが増えてきたことから今後普及することが見込まれます。




2.ページ表示速度を改善する方法

容量が大きい画像を多く使用しているページは表示速度が遅くなってしまうことが多いです。

ページ表示速度が遅くなるとユーザーが途中で離脱してしまう原因になるので工夫が必要となります。

そこでページ表示速度を改善する方法として画像を軽量化するという手段が挙げられます。

例えば、使用色を制限したり、不要なデータを削除したり、画像が劣化しない程度に圧縮したりするなどです。

「画像軽量化 ソフト」と検索エンジンで調べると色々と無料ソフトが出てくるのでこのようなもので画像の軽量化を行いましょう。

実際にページ速度を知りたい場合、Googleアナリティクスで調べることができるので試行錯誤しながら作業を進めていくことをオススメでします。




3.ホームページやブログに役立つ素材集

次にホームページやブログに役立つ素材集を紹介していきたいと思います。

PIXTA

 

PIXTAは写真・イラスト・動画素材などのデジタル素材を5100万点以上取り扱っている国内大手のストックフォトサービスです。

PIXTAで購入したデジタル素材は出版物、Web、テレビ番組、スマホアプリ、電子書籍など幅広く使用することができます。

ホームページやブログのテイストに合う写真を探す作業は結構手間がかかります。

PIXTAは数多くの素材を扱っているので、ホームページやブログのテイストに合う写真をこのサイトで見つけることができるかもしれません。

PIXTAの特徴は以下の通りになります。

  • 商用利用が大丈夫
  • 全素材ロイヤルティフリーなので1度きりの購入で何度も使用可能
  • 高品質な日本人素材が豊富
  • 1点から購入することができ、すぐにダウンロード可能
  • お得な定額制プラン
  • 決済方法が豊富(クレジットカード・PayPal・コンビニ・銀行振込・法人向け請求書払い)
  • 高品質で低価格

定額制プランは以下の通りになっています。

単品購入の料金表は以下の通りになっています。

いらすとや

 

いらすとやのフリー素材は世界中で使用されており、とても人気のある素材集の一つとなっています。

フリー素材は無償で使用することができますが、著作権は放棄していないので使用方法に制限があるので注意が必要です。

ポップな素材が多いので、ポップなテイストのホームページや個人ブログであれば、マッチする素材を見つけることができるかと思います。

いらすとやの特徴は以下の通りです。

  • 商用利用OK
  • ポップなテイストの素材を集めることができる




4.最後に

本記事では画像形式(PNG・GIF・JPEG・SVG)の種類と特徴、ページ表示速度を改善する方法、オススメの画像集を紹介しました。

様々な素材集を利用して最高のホームページやブログを作り上げましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です