WEBサイトで扱えるそれぞれの画像の形式

WEBサイトを構成するHTMLの中に画像は頻繁に使用されています。
主に、ロゴ、写真、アイコン、バナーなど。

画像ファイルにはいくつかの形式があって、それぞれに特徴があります。
用途によって使い分けて、極力ファイルサイズを抑制する必要があります。

png(ピング)

1,677万色を扱うことのできる圧縮形式。

  • 用途:透過、文字や図が含まれる画像に適している
  • メリット :透過が可能で、低画質で保存しても元の画質に戻せる
  • デメリット:jpgと比べファイルサイズが大きい。

※透過 = 上記の三角マークでいうと白い箇所が透けている

jpg(ジェイペグ)

1,677万色を扱うことのできる圧縮形式。
また、画質のコントロールができ、画質を下げることによって画像サイズを下げることができる。
画像サイズを下げることによってWebサイトの読み込みスピードが早くなるメリットがあるが、画質を下げ過ぎると下の猫画像のように荒くなってしまうので、バランスを見て調整しよう。

画質100% 396.3KB
↑ 画質100% 396.3KB

画質1% 19.7KB
↑ 画質1% 19.7KB

  • 用途:写真や繊細な色表現の細かい色調を持った画像
  • メリット :(場合に依るが)ファイルサイズを小さくできる
  • デメリット:透過しない、上書きの度に劣化していく

GIF(ジフ)

256色しか扱えない形式

  • 用途:単色のアイコンやベタ塗りの画像
  • メリット:比較的ファイルサイズが軽い、GIFアニメが可能、透過する
  • デメリット:256色しか扱えない

※ 最近はあまり使用しませんが、昔のWebサイトには使用されていることが多いので覚えておきましょう。

SVG(エスブイジー)

テキスト形式のベクター画像フォーマット(=ベクターデータ)の一種。
Retinaディスプレイなどで拡大してもボヤケず、スマホやタブレットのようなタッチデバイスとも相性が良い形式。

新しい形式かと思いきや、2001年9月に誕生していましたがIEで表示ができなかった為に、普及してこなかった歴史があります。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="App_Store" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5640259,13.8623047
    c-0.4133301,0.9155273-0.6115723,1.3251343-1.1437988,2.1346436c-0.7424927,1.1303711-1.7894897,2.5380249-3.086853,2.5500488
    c-1.1524048,0.0109253-1.4483032-0.749939-3.0129395-0.741333c-1.5640259,0.008606-1.8909302,0.755127-3.0438843,0.7442017
    c-1.296814-0.0120239-2.2891235-1.2833252-3.0321655-2.4136963c-2.0770874-3.1607666-2.2941895-6.8709106-1.0131836-8.8428955
    c0.9106445-1.4013062,2.3466187-2.2217407,3.6970215-2.2217407c1.375,0,2.239502,0.7539673,3.3761597,0.7539673
    c1.1028442,0,1.7749023-0.755127,3.3641357-0.755127c1.201416,0,2.4744263,0.6542969,3.3816528,1.7846069
    C14.0778809,8.4837646,14.5608521,12.7279663,17.5640259,13.8623047z M12.4625244,3.8076782
    c0.5775146-0.741333,1.0163574-1.7880859,0.8571167-2.857666c-0.9436035,0.0653076-2.0470581,0.6651611-2.6912842,1.4477539
    C10.0437012,3.107605,9.56073,4.1605835,9.7486572,5.1849365C10.7787476,5.2164917,11.8443604,4.6011963,12.4625244,3.8076782z"/>
</svg>

  • 用途:ロゴやアイコンなど
  • メリット:CSS3を使ったアニメーションやインタラクション作成に最適、ファイルサイズが小さい、拡大してもボヤケない
  • デメリット:写真や細かい色調を持った画像には不向き

まとめ

  • 写真は、jpg
  • 細かい色調をもった画像は、png
  • 単色で単純な形のアイコンなどは、SVG

(と言っても、svgは仕組みが複雑なので、最初はjpgとpngを利用して授業をします)