Retina時代のスマホサイトのタイトルロゴはSVG
「Retina時代のスマホサイトのタイトルロゴはSVGがいい」と何処かに書いていたので作ってみた。
元画像はマイリリースのスマホ版トップのロゴ画像で元は480×109で作成して、iPhoneだと縦(320px)にも横(480px)にも使える様にしてる。
元々FireWorksで作成していたのでJPEG・PNGはRetinaテスト用に倍の解像度に変更しするだけで済んだが、SVGはFireWorksが未対応だったのでイラレに書き出し作り直した上でエディタでフィルタを追加したりと微調整した。
よくやる2倍サイズのJPEG画像（23.70KB）
モヤモヤが出るので今回の様なロゴ画像には向かないJPEGだけどRetinaだとそんなに問題無さそう、グラデの掛かった画像の圧縮率は魅力的
よくやる2倍サイズのPNG画像（39.88KB）
RetinaだとJPEGと画質は分らないし容量も大きい、グラデーションが無ければ色数を落として圧縮率を上げる事も出来るかも
SVG画像（8.85KB）
予想以上に低容量、SVGは表示が重いらしいがこのサイズだと差は分らない。
safariだとfilterが上手く動かないのかドロップシャドーが効かないみたいで昔のイラレみたいに手作業で追加する必要があり、容量も若干増える事になってしまう。