2

私はブログを作成することを計画しており、モバイルデバイスの読み込み時間にあまり影響を与えずに可能な限り最高の品質で画像を提供する方法を考えています。

私のコンテンツ列は約です。768の表示ポイント幅で、網膜Macbookを使用してスクリーンショットを投稿しているので、画像の幅は少なくとも1500ピクセルになります。他のRetina/HIDPIユーザーは、自分に最適なバージョンを確認する必要があります。

この場合の推奨されるベストプラクティスはありますか？私はコンテンツ画像についてのみ話している（<img />）; CSSの背景はありません。アップロードされた採用画像に基づいて画像を提供する真のWordPressソリューションは素晴らしいでしょう。

私は過去にアダプティブイメージを使用しましたが、HIDPIと通常のクライアントを区別しません。他のソリューションは網膜に役立ちますが、異なる画面サイズには役立ちません。

4

2 に答える 2

2

いいえ、これを行うための良い方法はありません。これはWordPressのせいではなく、一般的なWebの状態のせいです。Web上のHiDPIは現在、基本的に大きなハックであり、Webはまだ適切に適応していません。

基本的に、ブラウザが表示する適切な画像を決定するために使用できる方法で、HTMLで複数の解像度の画像を指定する良い方法はありません。CSSは機能しますが、画像を背景として使用している場合に限ります。IMGを扱っている場合は、Javascriptを使用して作業を行う必要があります。これには、方法論に応じてさまざまな欠点があります。

将来、ブラウザが複数の解像度の画像を指定する方法を採用し始めたとき、これはそれほど問題にはなりません。

編集：これはもう少し説明に値します。

これを行うためにJSを使用する際の基本的な問題は、画像置換の手法に依存していることです。JSコードは、そのロジックを介して、ページ上のIMGを検出し、それらを他のファイルの高解像度バージョンに置き換えます。これを行うためにどの方法が使用されても、2つの大きな欠点があります。

  • 最初に、最初の画像が低解像度で読み込まれ、画像が置き換えられたときに再び高解像度で読み込まれます。これは、余分な帯域幅の使用を意味し、ほとんどのHiDPIデバイスが現在モバイルデバイスであることを考えると、これらのデバイスでその種の帯域幅を浪費することはあまり意味がありません。

  • 次に、画像は通常、最初に低解像度で表示され、次に高解像度の画像に置き換えられます。これは、置換が発生したときにフォーカスが「ポップ」する前に、HiDPI画面にぼやけた画像を表示するのに1〜2秒かかることを意味します。これは本当にくだらない効果です。

そもそも適切な画像を簡単に提供できる方法は他にもありますが、欠点もあります。

  • User-Agentによるサーバー側のブラウザ検出は、そもそも物事を行うためのかなりくだらない方法であり、実際には非常に多くの異なるエージェントが存在するため、それらのリストを維持することは事実上不可能であるため、避けるのが最善です。ただし、その苦痛を乗り越えたい場合は、この方法が機能します。

  • または、ブラウザのJavascriptでブラウザのデバイスピクセル比を検出し、それをCookieに設定してサーバーに戻すこともできます。サーバーはこのCookieを使用して、適切な解像度の画像を提供できます。これは機能しますが、多くのモバイルユーザーエージェントがCookieを適切に設定して返すことができないため、信頼性が低く、その場合でも、高解像度の画像はページへの2回目のアクセスでのみ表示されます。第一印象は低解像度で、一般的には良くありません。

あなたが見ることができるように：それはただずっとハックしているだけです。ブラウザが特定のIMGに対して複数のバージョンとそのパラメータが存在することを通知され、それ自体を選択できるようになるまでは、これらがそれを行う唯一の方法です。ただし、提案されたHTML5の「srcset」やPICTUREタグなどが実装されている場合は、より適切な選択肢があります。

于 2012-09-12T15:02:26.093 に答える
1

これについてしばらく考えた後、私はこの問題（の一部）に（部分的に）アプローチする2つの方法を提供する必要があります。それでも：@Ottoからの回答を注意深く読んでください。それは理由のために多くの詳細を持っています。

Javascriptの検出

添付ファイルの「デフォルトの画像を追加する方法」についての回答を書きました。フィルタコールバックを変更して、通常の画像やサムネイルの代わりに、常に単純なpng / gif（背景色のみ）を追加できます。これは、ユーザーエージェント/ブラウザが最初のロード時にキャッシュし、画像への呼び出しを相互に挿入するだけの非常に小さな画像（おそらく1kB未満-救助のためにsmushIt）を提供するのに役立ちます。

次に、単純に表示ピクセル密度を…

var dpr = 1;
if ( window.devicePixelRatio !== undefined )
    dpr = window.devicePixelRatio;

if ( dpr > 1 ) {
    // High pixel density pixel displays
}

…DOMが完全にロードされたら画像を交換します。

CSSルーティング

さまざまなピクセル密度のディスプレイにスタイルシートを追加するのはそれほど難しくありません。

// For default/low density pixel displays only: 
wp_enqueue_style(
     'low_density_styles'
    ,trailingslashit( get_stylesheet_directory_uri() ).'low_density.css'
    ,array()
    ,filemtime( locate_template( 'low_density.css' ) )
    ,'screen'
);

// For high density pixel displays only: 
$media  = 'only screen and (min--moz-device-pixel-ratio: 2), ';
$media .= 'only screen and (-o-min-device-pixel-ratio: 2/1), ';
$media .= 'only screen and (-webkit-min-device-pixel-ratio: 2), ';
$media .= 'only screen and (min-device-pixel-ratio: 2)';
wp_enqueue_style(
     'high_density_styles'
    ,trailingslashit( get_stylesheet_directory_uri() ).'high_density.css'
    ,array()
    ,filemtime( locate_template( 'high_density.css' ) )
    ,$media
);

これで、デフォルトの画像（ヘッダー、ロゴなど）に対して、高密度/低密度の画像を簡単に切り替えることができます。これは、投稿タイプの添付ファイルでは機能しません（ここでも、@ Ottoの回答を参照してください）。

于 2012-09-12T17:47:53.387 に答える