パフォーマンスを最大限に引き出す、ブラウザ対応のおすすめファイル形式
最終更新日:
現在のウェブブラウザは、以前とは違い、多数のファイル形式に対応しています。略称があまりにも多く、ブラウザが対応するすべてのファイルを挙げることさえできません。ただし、ブラウザで使うファイル形式はサイトに影響するため、重要です。容量が大きすぎて、サイトの読み込み速度に影響するファイルもあります。一方、軽量で見栄えのよいファイルもあり、品質を抑えることでパフォーマンスが向上します。
ファイル形式が重要なのはなぜ？
パフォーマンス、見た目、拡大・縮小への対応が理由です。動作の遅いサイトにはしたくないので、読み込み時間を短縮できる形式を使う必要があります。見た目については、ほかの形式より細部まで表現でき、品質の高い形式があります。また、うまく拡大・縮小できない形式も避けたいところです。小さな画面でも大きな画面でもきれいに表示できる画像が必要です。
それでは、ウェブ用ファイル形式の基本を見ていきましょう。ウェブでよく使われるファイル形式をご紹介します。
1. 文書ファイル
証明書や、閲覧・ダウンロード用のコンテンツを提供するウェブサイトでは、PDF形式を使うのがおすすめです。DOCXを使うサイトもありますが、こうしたファイルは、開く際に使うオペレーティングシステムやプログラムによって書式に問題が生じます。PDFなら、意図したとおりの文書ファイルをダウンロードしてもらえ、編集されることもありません。また、ダウンロード時に文書の全ページを1つのファイルにまとめておけます。内容を変更できないため、特に契約書への署名が必要な場合に便利です。
2. 音声ファイル
MP3
サイトの訪問者と共有したいプレゼンテーションや音声クリップはありますか？MP3は、ほとんどのウェブユーザーにとって最も利用しやすい音声形式です。ほとんどのパソコン、ノートパソコン、タブレット、スマートフォンでMP3ファイルを再生できます。容量も小さいためダウンロードしやすく、サイトのパフォーマンスにも影響しません。
3. 動画ファイル
動画は通常、容量がやや大きく、サイトのパフォーマンスに影響することがあります。動画の容量がとても小さい場合は、MP4形式を使いましょう。ただし、YouTubeにアップロードして、自分のサイトではなく外部サービスで配信するほうがおすすめです。こうすれば、ウェブサイトのストレージを消費せず、パフォーマンスにも影響しません。さらに、どのデバイスやブラウザからもYouTubeにアクセスできるため、訪問者は引き続き動画を見ることができます。
4. 画像ファイル形式
ウェブには視覚的なコンテンツがあふれており、目にするグラフィックはすべて画像ファイルです。サイトにきれいな画像を掲載するには、用途に合ったファイル形式を使う必要があります。ウェブの画像が見栄えしなかったり、メールの画像が表示されなかったり、印刷の仕上がりが悪かったりするのは避けたいものです。ウェブサイトの運営者やデザイナーは、使用するのに最適な画像ファイル形式を知っておく必要があります。
JPG/JPEG
アート作品やオンラインの写真を扱う場合、JPGは柔軟に使えます。ラスター形式のファイルで、圧縮されるため、ダウンロード用の画像に最適です。高解像度と高い圧縮率に対応しているので、ページをすばやく読み込めます。また、オンラインで画像のプレビューを送る必要がある場合も、JPEGはメールでも送れるほど容量が小さくなります。
ただし、ウェブで背景を透明にしたい場合、JPGの背景は不透明です。PNGやGIFのほうが適しています。また、レイヤーには対応していないため、レイヤー付きの編集可能な画像が必要な場合は、PSDファイルを使いましょう。
GIF
今の時代、GIFはピーナッツバターに例えるなら、いちばんおいしい種類です。ついもっと欲しくなります。ウェブのアニメーションにぴったりで、GIFの圧縮技術により、ファイルサイズを大幅に削減できます。さらに、透過にも対応しているため、どんな背景にも画像を配置できます。
ただし、写真のような品質の画像が必要な場合は、GIFで使える色が256色に限られることを覚えておきましょう。求める深みを表現できないことがあります。こうした場合にはJPGが役立ちます。
PNG
サイトに高品質な透過画像が必要なら、PNGが適しています。色深度はGIFより高いものの、JPGには及びません。最大の利点はファイルサイズです。特に色、図形、テキストがシンプルな画像なら、PNGは非常に小さなサイズに圧縮できます。
ただし、印刷用にダウンロードする画像にはPNGを使わないでください。PNGは画面での表示に最適化されており、特にアート作品では、JPGのほうが印刷品質に優れています。
AIとSVG
ウェブサイトにロゴ、アイコン、ブランドのマスコットを追加したい場合は、AI/ SVGが最適です。編集に適しており、画像をどのようなサイズに拡大・縮小しても高品質を保てます。AIは印刷物にも向いているため、名刺、ポスター、メッセージカード、チラシに最適です。
5. 複数のファイルをまとめる
ZIP
WordPressサイトから訪問者にダウンロードしてもらいたいファイルが複数ある場合は、ZIP形式がおすすめです。ファイルを1つずつアップロードしてサイトのストレージを使うのではなく、このアーカイブ形式で圧縮しましょう。すべてのファイルが高い圧縮率で1つのファイルにまとまり、使用する容量を抑えられます。
この記事が、パフォーマンス、見た目、拡大・縮小への対応を最適にするために、サイトにどのファイルをアップロードすべきかを知る助けになれば幸いです。