マルチメディアチュートリアル - ウェブ上でイメージの使用

本文では、画像とテキストを使用する条件や、画像のダウンロードを加速する方法、適切な画像形式の選択について詳しく説明します。

画像の使用時期

多くの画像にとって、一つの画像は千の言葉よりも強力です。ただし、長々と話す人に注目されることはありません。まず、最も重要なのは、ドキュメントのグラフィックを視覚化ツールとして、無理な装飾としてではなく使用することです。それらはテキストの内容をサポートし、読者をドキュメント内でナビゲートするのに役立ちます。画像を使用することで、ドキュメントの内容がより明確になり、コメントや例を追加することもできます。写真、グラフ、曲線図、地図、イラストなどの写真や図は、自然で適切な選択肢です。例えば、製品の写真はオンラインカタログやショプガイドにとって非常に重要な構成部分です。リンク機能を持つアイコンや印刷記号、アニメーション付きの画像なども、内容や外部リソースへのガイドとして非常に効果的な視覚的ガイドとなります。もし特定の画像がこれらのいずれかの作用を果たさない場合、それは一側に置いておくべきです！

ドキュメントに画像を追加する際に、ネットワークを通じて特にモデムを通じてこのドキュメントを転送する際の検索における時間遅延も重要な考慮要素です。一般的な普通のドキュメントは最大で10-15キロバイトまで容纳できますが、画像は数百キロバイトに達することが簡単です。また、ドキュメントの全体のダウンロード時間は、すべての部分の合計の总和だけでなく、ネットワークの負荷による遅延も考慮する必要があります。

接続速度（つまり帯域幅）に基づいて、bandwidth、通常用 bps または b/s で表示され、ネットワークのバリデーション状況や接続速度を遅らせる可能性があることを示します。100 KBの画像を含む独立のドキュメントをダウンロードする場合、多くの人々が睡眠中の真夜中一二時に、57.6 Kbpsのモデムで約15秒かけてダウンロードすることができます。また、中昼に9600 bpsのモデムで10分以上かけてダウンロードすることもあります。この画像を手に入れましたか？

もちろん、画像や他のマルチメディアの使用は、インターネットサービスプロバイダーがWebコンテンツをより速く、より良く、より堅牢に提供するための方法を追求させることになります。56 Kbpsのモデム接続は、馬と馬車のように歴史の舞台を去り、ケーブルモデムやADSLなどの新しい技術に取って代わられます。実際には、ほとんどの接続が1Mbpsを超える速度になるでしょう。

価格が下がるにつれて、ネットワークの使用が増加し、ブロッキングの問題が発生します。もし超負荷で動作しているサーバーにアクセスしようとしている場合、あなたのネットワーク接続速度がどれだけ速くても、正常にアクセスすることはできません。

テキストの使用時期

テキストは時代遅れではありません。一部のユーザーにとって、テキストは彼らのドキュメントでアクセスできる唯一の部分です。大多数の場合、ドキュメントは誰でもアクセスできるようにすべきであり、画像を閲覧できないユーザーや、ネットワーク接続のパフォーマンスを向上させるためにブラウザの自動画像ダウンロード機能をオフにしているユーザーも含まれます。画像をドキュメントに追加する必要性が非常に強い場合でも、純テキストドキュメントが実際にはより意味のある場合もあります。

他の形式からウェブページのドキュメントに変換されたものは、ほとんどが埋め込まれた画像を含んでいません。参考文献や他のいくつかの正式な内容は、通常、完全に利用可能な純テキスト形式です。

アクセス速度が非常に重要な場合、純テキストドキュメントを作成する必要があります。ユーザーがあなたのドキュメントを急いで取得する可能性があると知っていれば、ドキュメント内で画像を使用を避け、これらのユーザーのニーズに応えるべきです。非常に極端な場合、ユーザーがあなたの作品の2つのコピーの間で選択する機会を提供するホームページ（ガイドページ）を提供するかもしれません：画像が含まれているものと、画像が含まれていないものです（人気のブラウザには、ダウンロード待機中の画像に空きスペースを提供する特別な画像アイコンがありますが、これらの占位符がドキュメントのレイアウトを乱すだけでなく、読むことができないものになることもあります）。

あなたのドキュメントがウェブ上の多くのインデックスサービスによって簡単に検索されるようにするには、テキストが最適な形式です - 画像のみをサポートし、装飾や不必要なグラフィックはサポートしません。しかし、これらの検索エンジンは通常、画像の存在を無視します。ページの主要な内容が画像で提供されている場合、オンラインWebカタログにあなたのドキュメントに関する情報は少なくなるでしょう。

画像のダウンロード速度を速める

ドキュメントに含める内容を選ぶことに注意を払うだけでなく、画像による負荷と遅延の問題を改善するための多くの方法があります：

シンプルさを保つ

フルスクリーンの24ビットカラーグラフィックは、標準のフォーマット（例えばGIFやJPEGなど）のデジタル圧縮によりサイズが減少しても、大部分のネットワーク帯域幅を占めます。したがって、さまざまな画像管理ツールを使用して画像のサイズを最適化し、色の数を最小限のピクセル数に減らすことが最善です。描画をシンプルにし、風景写真は使用せず、画像に大きな空白背景や不必要なフレーム、他のスペースを占める要素を避けましょう。また、ドロップエフェクト（近い色を混ぜ合わせて第三種の色を得る技術）も避け、これは画像の圧縮性を大幅に低下させます。代わりに、大面积の一致する色を使用し、GIFやJPEG形式で簡単に圧縮することができます。

画像の再利用

これはアイコンやGIFアニメーションに特に適用されます。多くのブラウザは、ローカルストレージに導入されたドキュメントの要素をキャッシュし、データを取得する際により速く、ネットワーク接続を使用する量も少なくなります。小さなGIFアニメーションファイルの場合、アニメーションで変更された部分のみを更新するように、各連続する画像を準備し、全体の画像をリフレッシュするのではなく（これにより、アニメーションの表示も加速されます）。

大規模なドキュメントを分割

これは画像を含む一般的な原則です。多くの小さなドキュメントの一部は、超リンク（もちろん、それを使用しています！）と効果的な目次で組織されています。全体の大きなドキュメントと比較して、これによりユーザーはもっと受け入れやすいと感じることができます。一般的に、ユーザーは数ページ間で往復することを好み、大きなドキュメントのダウンロードを待つことを避けます（これはテレビチャンネルのブラウジング症候群と似ています）。良い経験則として、各ドキュメントを50KB程度に保つことができます。これにより、最も遅い接続を使用する読者でもイライラしないでしょう。

必要に応じて大規模なグラフィックを分離

非常に大きな画像には、画像のサムネイルなどのリンクを特別に提供し、読者が画像全体をダウンロードするかどうか、いつダウンロードするかを決定できるようにします。また、このような画像はインライン画像のようにドキュメント内の他の要素と混在していないため、簡単に識別し、ローカルストレージに保存して将来の研究に使用することができます。

画像のサイズを指定

最後に、パフォーマンスを向上させるもう一つの方法は、画像の矩形境界の高さと幅をラベルに含めることです。これらのサイズを指定することで、他の追加のステップを省略でき、機能的なブラウザは画像のドキュメント内のサイズをダウンロード、検証、計算する追加のステップを必要としません。しかし、この方法には欠点があります。ユーザーが画像の自動ダウンロード機能をオフにしても、ブラウザは指定されたサイズで画像に割り当てられたスペースを表示します。これにより、読者に通常は空のフレームが残りますが、この問題に対する解決策はまだありませんが、ネットワークパフォーマンスを向上させるためにこれらのサイズ属性を使用することをお勧めします。

JPEG か GIF？

画像のソースまたはあなたのツールソフトウェアが特定の形式を好む場合、JPEGまたはGIFのいずれか一方を使用する必要があるかもしれません。現在、これらの形式はブラウザによって広くサポートされていますので、ユーザーがこれらを表示できない問題は存在しません。

しかし、私たちは、これらの形式の機能を最大限に活用するために、特定のツールを使用して作成または変換することをお勧めします。例えば、GIFの透明性をアイコンや小さな装飾シンボルに適用することができます。また、JPEGを使用して、色が豊富な大きな画像を圧縮し、ダウンロード速度を高速化することができます。

<img> タグ

<img> タグは、ドキュメントの現在のフローの中で画像を参照または挿入することができます。このタグに関する詳細についてもっと知りたい場合は、以下を参照してください：