透過イメージは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に対して、数ドット分の高精細描画を行っています。これがスマホの方が綺麗に見える仕掛けです。

画像表示がスマホでボケると主張している記事を見かけます。ブラウザの論理ピクセルに対して、物理デバイスのドット数が倍数でないとボケるという主張です。しかしスマホではブラウザの論理ディスプレイと、物理ディスプレイデバイスの組み合わせは様々ですので、理想的な画像サイズが限定できる状況ではありません。
とにかく物理ディスプレイデバイスが高精細であることの長所を活かして、スマホブラウザの論理ピクセルより大きなイメージを貼り付ければ綺麗に見えます。それで、もしボケボケなのだとしたらレンダリング性能が悪い(実際は良いです)ブラウザという説になります。笑)
結論はパソコン用に貼り付けた画像のままで差し支えない筈です。あえて考えるならパケット料金を考えて、利用者の財布に優しい加減の画像サイズを考慮したほうが現実的です。