HTML＆CSSの初心者向け（第09部）：ウェブ用の画像（01）

グラフィックプログラムで画像を保存する際、さまざまなグラフィック形式が提供されます。しかし、ウェブサイトに画像を埋め込む場合、どれを選択すべきですか？



ウェブサイトに画像を表示したい場合、3つの形式から選択できます。

• GIF

• JPEG

• PNG

しかし、どの形式をどのような目的で選択すべきでしょうか？ 写真にはGIFまたはPNGを選択するべきですか？ まず、各形式の能力について簡単に概説します。

この簡単な概要で、各形式の異なる特性がすでに示されています。 これにより、特定の形式が特定の目的に適していることが少し驚くことではありません。 この点に関しては、次のセクションで説明します。 ここでは、最適な形式の選択方法が示されます。

写真

写真にはJPEGが最適です。 なぜなら、ここでは画像を非常に効果的に圧縮でき、品質を可変に選択できます。 品質と圧縮率のバランスを見つけることができます。

スクリーンショット/ダイアグラム

PNG形式が最適です。 PNGは技術図面や平面図などにも使われる興味深い形式です。 PNGは透明な領域を使用する画像にも使用できます。

フォント/ロゴ

ロゴにテキストがある場合や一般的にフォントを表示したい場合は、GIFまたはPNGを使用する必要があります。 性能が良いため、通常はPNGを選択します。 フォントの表示にはJPEGがまったく適していないため、一般的にPNGを選択します。 なぜなら、JPEGでは端が不鮮明に表示されるからです。

透過性

透明な領域を表示する場合、JPEGは事実上使用できません。 したがって、GIFとPNGのどちらを透過性に使用するかになります。 しかし、透過性が重要な場合、どちらの形式を選択すべきですか？ GIFは基本的に透過性を扱うことができますが、結果はほとんど不鮮明です。 GIF形式では、ピクセルは完全に見えるか完全に透明になるかのいずれかです。 PNGではこのような現象は発生しません。 この形式には追加のアルファチャンネルがあり、より洗練された透過効果が得られます。

画像の埋め込み

画像はimg要素を使用して埋め込むことができます。（画像は現在、非常に多くの場合にCSSを介して埋め込まれています。 CSSに関する詳細な情報はもちろん後続します。 ただし、示されているHTML手法は完全に標準に準拠しており、HTML5でも問題なく使用できます。）

<img src="logo.png" alt="PSD-Tutorials.de" />

imgはスタンドアロン要素です。 対応する属性を使用して画像を詳しく説明できます。 最も重要な属性は明らかにsrcです。 これにより、埋め込む画像を指定できます。 示された例では、img要素が定義されているHTMLファイルと同じディレクトリにグラフィックlogo.pngがあると仮定しています。

画像が実際に表示されるために、それらへのパスを正しく指定する必要があります。 HTMLでは、参照の方法にさまざまなオプションが用意されています。

• 絶対パス

• ベースアドレスに対する相対絶対パス

• ベースアドレスに対する相対パス

まず絶対パスについて説明します。 画像が自分のサーバーにない場合は、通常この方法を使用します。 例えば、PSD-Tutorials.deでおなじみの蝶々をウェブページに埋め込みたい場合、それを置いているサーバーから直接読み込むことができます。 まず、画像のパスを見つけます。 これは、画像をブラウザで右クリックしてイメージURLをコピーを選択することで簡単に行えます。

クリップボードに読み込まれる内容は、次のようになります：

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

これは画像の完全なアドレスです。 この情報だけで画像を埋め込むことができます。

<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />

also den vollst\u00E4ndigen Pfad zum Bild zu.

das man keine wirkliche Kontrolle \u00FCber den eingebundenen Inhalt hat. Wird die von euch referenzierte Grafik also vom Server gel\u00F6scht oder dort in ein anderes Verzeichnis verschoben, gibt es einen Anzeigefehler.





Daher sollte dieses absolute Referenzieren tats\u00E4chlich die Ausnahme sein.

relativ zur Basis-Adresse

immer dann an, wenn die Grafik auf dem gleichen Rechner/Server wie die HTML-Datei liegt und \u00FCber das aktuelle Protokoll erreichbar ist. Das klingt kompliziert, ist es aber nicht.

Ein Beispiel:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Dabei handelt es sich um die vollst\u00E4ndige Adresse. Der folgende Teil ist dabei die absolute Pfadangabe.

wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Diese absolute Pfadangabe bezieht sich relativ auf die Basis-Adresse http://4eck-media.de.

relativ zur Basis-Adresse

sicherlich am gebr\u00E4uchlichsten. Dabei wird immer der aktuelle Pfad als Bezugspunkt genommen, von dem aus letztendlich adressiert wird. Auch hierzu wieder einige Beispiele. Angenommen, es gibt die Datei index.htm, in die ihr ein Bild einbinden wollt. Zus\u00E4tzlich existiert auf derselben Ebene das Verzeichnis images, in dem besagtes Bild liegt.

index.htm
images
--logo.png

Der Aufruf im src-Attribut s\u00E4he in diesem Fall so aus:

Wie w\u00FCrde das Ganze aber aussehen, wenn sich das Bild in einem Verzeichnis befindet, das oberhalb der HTML-Datei liegt?

projekt
--images
-----logo.png
--archiv
-----index.htm

In diesem Fall liegt die index.htm ein Verzeichnis unterhalb des einzubindenden Bildes logo.png.

Die Syntax bedeutet hier also: Gehe eine Ebene nach oben, wechsle dort in das Verzeichnis images und zeige die logo.png an.

projekt
--images
----logo.png
----2013
------januar
--------index.htm

Hier sieht die Syntax so aus:

Das Bild logo.png liegt in diesem Fall zwei Ebenen oberhalb der index.htm im Verzeichnis images.

Der Vorteil der relativen Pfadangaben ist deren Flexibilit\u00E4t. Ihr k\u00F6nnt so beispielsweise das Projekt lokal entwickeln und dann auf einen "echten" Server kopieren. Die Pfade stimmen danach unver\u00E4ndert.