カテゴリー別アーカイブ: HTML

amazonアフィリエイト画像とsrcsetは相性バッチリ

ウェブサイトをパソコンで閲覧する人もいればスマホやタブレットで見る人もいますよね。そこで問題になるのが画像のサイズです。画像の大きさはサイト表示スピードに関係するので、大きな画面で見る人も小さな画面で見る人にも同じ画像を使うというのは都合が悪いのです。

もちろん多様化するデバイスにHTMLやブラウザは対応しつつあります。例えば画像<img>にはsrcset属性とsizes属性というのが追加されつつあります。(残念ながら現在のところchromeとoperaのみのサポートですが)

これは画像のサイズと表示されうるサイズを指定して、ブラウザにデバイス毎の適切な画像を選択してもらうという発想です。Google Developerssrcset と sizes(の翻訳)がわかりやすく役に立ちそうなので、興味が湧いた人は是非覗いて見てくださいね。

続きを読む amazonアフィリエイト画像とsrcsetは相性バッチリ

picture要素でwebpフォーマットを手軽に使おう

JPGE 2000という画像フォーマットをご存知でしょうか。jpegの代替を目指してこの世に生まれました。safariが対応しています。

JPEG XRという画像フォーマットをご存知でしょうか。これもjpegの代替を目指してこの世に生まれました。IE9+で対応しています。

WebPという画像フォーマットをご存知でしょうか。これも勿論jpegの代替を目指してこの世に生まれました。Google ChromeやOperaが対応しています。

そして2015年、現在の勝者はJPEGです。理由は簡単。全てのブラウザがサポートしているのがJPEGだからです。大人の事情溢れるなんとも不毛な話です。歴史を振り返ると、この後もすぐに統一的な規格が現れるとは思えませんね。

だけど、2015年はWebP飛躍の年になるのではないかと考えています。

続きを読む picture要素でwebpフォーマットを手軽に使おう

HTML5のLINK rel=prefetchで先読みしよう

モダンなブラウザは将来必要になるであろうDNS解決やコンテンツのダウンロードを先読み(prefetch)する機能があります。実際に必要になる前に先読みのヒントをブラウザに渡すことによって、DNSルックアップやファイルのダウンロードにかかるユーザの待ち時間を減らし、快適に閲覧してもらえるわけです。

続きを読む HTML5のLINK rel=prefetchで先読みしよう