サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
買ってよかったもの
contentloaded.com
解説 Retina ディスプレイには、デバイス・ピクセル比(DPR) の分だけ高解像度の画像を提供しないとボケてしまいますが、ファイルサイズが気になるところです。特にモバイル端末に対しては、出来る限り小さくしておきたいところです。 このページは、2012年07月27日の記事 Retina 革命 で指摘された「画質とファイルサイズ」のトレードオフ問題を検証する目的で作成しました。ディスプレイが Retina でない人にも画質の違いが確認できるよう、"虫眼鏡" を組み込んでいます。 例えば上の画像なら、画質が 90 の 320x240 画像より、画質が 20〜30 の 640x480 画像の方が 50%〜75% 程のサイズにも関わらず、シャープで解像感が高いことが分かります。 即ち jpeg 画像なら、縦横2倍の「低画質×高解像度画像」の方がファイルサイズが小さく、かつ(非 Retina ディ
async/defer に関する WHATWG 勧告 HTML5 における async、defer 属性の概要 async、defer 属性は論理型の属性(あれば true、なければ false)で、スクリプトがどのように実行されるべきかを表します。また src 属性がない場合は指定することができません。 これら属性の使い方には3つの選択肢があります。async 属性がある場合は、スクリプトが得られれば直ちに非同期に実行されます。async 属性がなく defer 属性だけの場合は、ページの解析が終了した時点で実行されます。どちらの属性もない場合、ユーザーエージェントがページの解析を進める前にスクリプトをフェッチし、直ちに実行されます。 これらの属性に関する正確な処理方法の詳細は、多くは歴史的な理由により、数ある HTML の観点からも、あまり明白ではありません。それゆえ実装要件は、仕様の
A smaller filesize AND a better quality on both screen types! This is impossible.
Art Direction 端末サイズに応じてフォーカスしたい領域を切り出し拡大する "Art Direction" を試します。 View this
CSS background A tipical method using CSS background-image and media query is shown in this section. View this Picturefill In this page, the polyfill script "picturefill 2.0" for <picture> element will be examined. View this
Content Loaded A playground of loading resources into a web page
Content Loaded A playground of loading resources into a web page async/defer and DOM construction In this page, you can see visually the behavior of DOM construction according to the presence or absence of the async / defer attribute of the script. View details » Script position and page speed In this page, you can visually verify the relationship between the site speed and the timing of DOM ready
このページを最初にブックマークしてみませんか?
『ContentLoaded.com - A playground of loading resources into a web page』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く