透過イメージはSVGかPNG-24

 
Web Page
Booskanium's Tips.

画像はちょっと見で綺麗にみえないとせっかくのコンテンツが台無しです。

ロゴはベクター(SVG)画像

3つ並んだ透過イメージの表示を比べてください。上側がベクタ形式のSVGで、真ん中がラスタ形式のGIF、下側がαチャンネルが扱えるPNG-32です。
実際の画像サイズより小さく、背景は暗い色という厳しい条件での表示です。かつ安い老眼鏡で見ると輪郭に無い色が見える組み合わせです。
SVGはベクタ形式ですので輪郭の境界が綺麗に表示されます。サイズ変更しても綺麗に表示されます。
ラスタ形式のGIFは輪郭が白汚れします。その理由は輪郭の境界が背景色白に馴染むようにしているからです。
ラスタ形式のPNG-32の透過イメージはαチャンネルで、輪郭の境界を徐々に透明度を上げて馴染むようになっていますので背景と程よく馴染んでいます。PNG-32形式が扱えるソフトなら透過イメージのαチャンネルで程よく対処してくれるはずです。 ということでGIF形式はもう時代遅れなのかもしれません。SVGにするかPNG-32にするかは、画像の拡大・縮小が必用ならSVG、単純なイラストでなければPNG-32という使い分けです。
イメージをクリックするとその画像が原寸大でも確認できます。再度クリックすると閉じます。

スマホとパソコンの画像

パソコン向けの画像をスマホで表示するとボケるという解説を目にしますが、ホントかどうかは目で確かめて判断しましょう。
ここの落書き人は虫眼鏡で確認しましたがボケ間を感じませんでした。逆に高精細だなと実感しました。
物理デスプレイデバイスとブラウザの論理ピクセル
 ・パソコン 1:1
 ・スマホ  n:1
そしてブラウザのレンダリングエンジンは物理ディスプレイデバイスに高精細に描画しています。つまりブラウザの論理ピクセル1に対して、数ドット分の高精細描画を行っています。これがスマホの方が綺麗に見える仕掛けです。

なおパソコンでも高DPIディスプレイで同様な事ができます。

ブラウザに限って言うと、この物理解像度 n:1 論理解像度の関係で、綺麗に表示できるかなレンダリングエンジンのでき次第です。今どきのスマホなら問題ありません。
AppleのRetinaだけに注目した主張がありますが、高DPIディスプレイはRetinaの限った技術ではあありませんので、今どきのスマホは高DPIディスプレイですので綺麗に表示されるという程度で宜しいかと思います。

SVGはHTMLとの親和性が高い

・cssやJavaScriptで色などを操作できるので、HTMLとの親和性が高い。

例えば

<svg version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 515 515">
	<g>
		<polygon class="arrow0" points="163.916,0 92.084,71.822 276.258,255.996 92.084,440.178 163.916,512 419.916,255.996"></polygon>
	</g>
</svg>

<style>
.arrow0 { /*左右移動の矢印*/
	fill: blue;
}
</style>
てな事が出来ます。