web-dev-qa-db-ja.com

レスポンシブWebデザインにおすすめの画像を使用するための最良の方法は何ですか？

私は素晴らしいアイデアを持っています、そしてWordPressはすでにいくつかの仕事を引き受けているので、私はただこの仕事をするための良い方法を見つける必要があります。

デスクトップPCであろうとモバイルガジェットであろうと、すべてのデバイスに対応する必要があるプロジェクトに取り組んでいます。したがって、私は画像にも応答性があることを望んでいます。つまり、モバイルデバイスは50KB以上の画像をロードするべきではありません。

各ページまたは投稿ごとに、投稿サムネイルを使用しておすすめの画像を追加できます。フルサイズでは、画像は最大約950 x 250（約60 KB）です。ウェブサイトをiPhone/Androidにロードする場合、60KB以下の画像をロードしたくはありませんが、代わりに小さなサムネイルをロードしたいと思います。

レスポンシブイメージのデフォルトの方法は、イメージの幅を親コンテナの100％にすることです。したがって、親コンテナもサイズ変更されると、自動的にサイズ変更されます。大きな画像には最適な方法ではありません。

Filament Groupのレスポンシブイメージスクリプトを試してみることを考えました しかし、試してみましたが、うまくいきませんでした。これを達成することができる1つの方法はユーザエージェント検出によるものですが、ユーザエージェントが偽装される可能性があるので、私はどちらかというとこの方法もしたくありません。

画像をその場でリサイズするための別の方法があります しかし、これはWordPressがすでに行っていることと重複しているようです。

WordPressがデフォルトで、サイズ変更されたすべてのサムネイルがすでに作成されているというMedia Galleryの画像でこれを実行する方法がある場合は、それが望ましいでしょう。

phpimagespost-thumbnailsmobile
8
micah

ステップ1：

2つのカスタム画像サイズを定義します。例えば：

<?php
add_image_size( 'normal-thumbnail', 400, 300, false ); // Default image size
add_image_size( 'mobile-device-thumbnail', 200, 150, false ); // Mobile-device image size
?>

ステップ2：

クライアントを決定するためにあなたの選んだ手段を実行してください。いくつかの方法があり、どの方法を使用するかはこの質問の範囲外です。しかし、自分に合った方法があると仮定すると、$mobile_device = true;のように、結果を何らかの変数に出力します。

ステップ3：

テンプレートファイルで、クライアントに基づいて条件付きで画像を出力します。

<?php
if ( true = $mobile_device ) { // client is mobile; be responsive
    the_post_thumbnail( 'mobile-device-thumbnail' );
} else {
    the_post_thumbnail( 'normal-thumbnail' );
}
?>

注意：複数のフォームファクタ（画面サイズ）に対してif/elseを繰り返す（またはswitchを行う）ことができます。複数のカスタム画像サイズを追加して、サポートしたい各画面サイズを条件付きでテストするだけです。

9
Chip Bennett

最善の方法は、WordPressテーマを作成するために流動的なグリッドを使用し、比例スケーリングのための関数を通して注目の画像の幅と高さの値を削除することです。 WordPress画像をレスポンシブにするためのチュートリアル ：

方法1：CSS

CSSファイルに次のコードを追加します。これにより、画面サイズに合わせて画像を拡大縮小できます。

img { max-width: 100%; }
img { -ms-interpolation-mode: bicubic; }

WordPressの<img>タグから自動的に高さと幅を削除する

ウィンドウをドラッグして、画像の拡大縮小を実際に確認します。あなたはあなたのWordPressブログの中の画像が奇妙に拡大縮小していることに気づくでしょう。 WordPress画像の水平方向の拡大縮小は正常ですが垂直方向の拡大縮小はすべて間違っています。

画像をWordPressで比例してサイズ変更できるようにするには、WordPressが< img >タグに追加する幅と高さの自動値を削除する必要があります。

例として、これを変更する必要があります。

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” 
    width=”100″ height=”100″ />

これに：

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” />

投稿または静的ページ/テンプレートページにある画像の場合は、上記のCSSをstyle.cssファイルに追加してから、WordPressエディタの‘width’タグから‘height’および< img >プロパティを削除するだけです。それでおしまい！

ただし、投稿のサムネイルなど、WordPressによって動的に表示される画像の場合は、幅と高さを関数を使用して動的に削除する必要があります。

以下の関数をあなたのfunctions.phpファイルに追加してください。

function remove_wp_width_height( $string ) {
    return preg_replace( ‘/\/i’, ”,$string );
}

それであなたがあなたのtemplate.phpページのそれらの投稿のサムネイル画像を要求するとき、以下を置き換えてください：

the_post_thumbnail();

これとともに：

echo remove_wp_width_height( get_the_post_thumbnail( get_the_ID(), ’large’ ) );

それでおしまい。レスポンシブWordPressの画像が実際に表示されるようにブラウザをドラッグしてサイズを変更してください。

方法2：

上記は一部のテーマでは機能しません。

あなたがそれがうまくいかなかったという少数のうちの1人であるならば、あなたはまだあなたのイメージ問題が下記の機能を用いて解決されることを得ることができます。

以下の関数をあなたのfunctions.phpファイルに追加してください。

これはthe_post_thumbnail()で検索された画像からインラインの幅と高さの属性を取り除き、それらの属性がエディタに追加された新しい画像に追加されるのを防ぎます。

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );  
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 ); 
function remove_thumbnail_dimensions( $html ) {     
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );     
    return $html; 
}
1
Thanushka

これを達成することができる1つの方法はユーザエージェント検出によるものですが、ユーザエージェントが偽装される可能性があるので、私はどちらかというとこの方法もしたくありません。

これは悪い方法ではなく、実際には業界標準であり、良いWURFLは非常に高い精度評価を持ち、私が使ってテストしたものは常に堅実な結果を返し、（私がやっている以上に）独立したテストは98％以上の範囲だれかのラメボットがユーザーエージェントを偽装しているのであれば、とにかく正当な理由でそこにいるわけではありません。

ステップ2では、どちらかの方法が実際にはより速くなると思います、PHPがサポートされているWURFLまたはCSSメディアクエリです。

0
Wyck

最初にあなたは「最高」を定義しなければなりません。私の定義は次のようになります。デザイナーの意図した効果でデバイスや画面にイメージをレンダリングします。オリジナルと同等の品質でイメージをレンダリングしますシステムと人的資源の絶対最小量を消費します。

これまでに見たアプローチは次のとおりです。

  1. 画像をフルサイズでロードし、ブラウザにレイアウトに合わせて縮小します。イメージの最大幅を100％として定義し、それをそのコンテナーの幅で縮小します。

長所：実装するのにほとんど努力を必要とせず、クロスブラウザー互換性があり、古いブラウザーでサポートされています。

短所：多くの場合、必要以上のデータをダウンロードしてから、クライアントにCPUサイクルを費やしてデータを縮小します（低速）。ブラウザのスケーリングアルゴリズムによっては、非常に低品質の画像になる可能性があります。芸術的な方向性はないため、網膜タイプのディスプレイに画像を適応させることはできません。

  1. メディアクエリを使用してクライアントのプロパティを読み取り、デザイン内のさまざまなブレークポイントに合わせて調整された複数の画像の1つを取得します。 （提案されているHTML Responsive Images Extensionとsrcset属性タグは、このアプローチをHTML仕様に組み込むことに取り組んでいます）。

長所：モバイルデバイスでのダウンロードが高速です。網膜タイプのディスプレイを扱うことができます。うまくいけばいくつかの高品質の方法を使用して処理された画像以来の画質の向上。芸術的な方向性が可能になります。

短所：誰かが同じ画像の複数のバージョンを処理し、切り取りそして管理するのに時間を費やさなければならない。より多くのコーディング：あなたは今、何らかの方法でイメージのそれぞれのバージョンとすべてのバージョンを詳しく説明し、すべての必要なレイアウトのためにメディアクエリを作成しなければなりません。あなたが提供するそれぞれのそしてすべての画像について上記を繰り返します。 CSS 3 Media Queriesまたは新しいタグをサポートしているブラウザでのみ動作します。

  1. バックエンドを作るオンザフライで単一のソース画像を使用して任意の画面やレイアウトに合わせて画像を最適化します。私の意見では、これはレスポンシブ画像をHTTPのようなコンテンツネゴシエーションタスクとして扱うことと同じです。

長所：Designerは、イメージの処理や複数のバージョンの管理に時間を費やす必要はありません。最適なサイズの画像が毎回送信されます。網膜タイプのディスプレイを扱うことができ、芸術的な方向を動的に調整することができます（ただし、ある程度の努力を払う必要がありますが、どこに焦点を合わせるべきかを知っておく必要があります）。特別なマークアップや特別なマークアップは必要ありません（下記の警告）。クロスブラウザ互換で、古いブラウザでも動作します。

短所：クライアントのブラウザと画面のプロパティに関する情報を取得して送信する必要があります。画像を処理する必要があるため（通常、後の要求のためにキャッシュされるため）、画像のロードは他の方法よりも遅くなることがあります。

0
learnweb