レスポンシブウェブデザインに注目画像を使用する最良の方法は何ですか?


8

私は素晴らしいアイデアを持っています。WordPressはすでに一部の作業を担当しているので、この作業を行うための適切な方法を見つける必要があります。

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

各ページまたは投稿について、フルサイズで画像が約950x250で約60KBの投稿サムネイルを使用して、注目画像を追加できます。iPhone / AndroidでWebサイトをロードする場合、60KB以下の画像をロードしたくないので、代わりに小さなサムネイルをロードします。

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

Filament Groupのレスポンシブな画像スクリプトを試してみようと思ったのですが、試してみましたが正しく機能しませんでした。これを実現する方法の1つは、ユーザーエージェントの検出によるものですが、ユーザーエージェントが偽装される可能性があるため、この方法も使用しません。

これは、その場画像のサイズを変更する別の方法ですが、これはWordPressがすでに行っていることを複製しているようです。

WordPressがデフォルトであるメディアギャラリーの画像でこれを行う方法があり、サイズ変更されたすべてのサムネイルがすでに作成されている場合は、それが望ましいでしょう。

回答:


9

ステップ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)を繰り返すことができます。複数のカスタム画像サイズを追加し、サポートする各画面サイズについて条件付きでテストするだけです。


これは私が探していたものでした、ありがとう!ステップ2がわかり次第、テスト結果を報告します。
micah 2011

1

最善の方法は、流動グリッドを使用して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:

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

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

次の関数を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; 
}

0

これを実現する方法の1つは、ユーザーエージェントの検出によるものですが、ユーザーエージェントが偽装される可能性があるため、この方法も使用しません。

これは悪い方法ではなく、実際には業界標準です。優れたWURFLは非常に高い精度評価を持っています。私が使用してテストしたものは常に確かな結果を返し、独立したテスト(私がやっていることよりも)はそれらを持っているようです98%+範囲。不完全なボットがユーザーエージェントをスプーフィングしているかどうかを気にする人は、いずれにせよ、そこにいないのです。

ステップ2の場合、どちらの方法も、実際にはどちらが速いか、PHPで裏付けられたWURFLまたはCSSメディアクエリのいずれかになると思います。


面白い。私はWURFLについて聞いたことがありませんので、少し読む必要があります。指摘してくれてありがとう。私はユーザーエージェントのなりすましについて予約していますが、正当なトラフィックの大部分がなりすましではないことはおそらく正しいでしょう。より多くの研究の時間!
micah 2011

私はこのリンクを純粋にコメントのために渡します。ユーザーエージェントのスニッフィングに対する多くの議論があり、それらは多くの良い点をもたらします。infrequently.org/2011/01/cutting-the-interrogation-short
ミカ

興味深いが、これらの人たちはエンタープライズレベルのアプリケーションのuaテストの費用($$$)について話している。WordPressブログではなく、サーバーログを見て、非ユーザーエージェントの1%が100万人または1人を意味するのかあなたは毎月新しいアプリケーション機能を展開しますか?一方、私は実際に機能検出が未来であることに実際に同意します。まあ、それは誰もがiphoneまたはandriodを持っていない限りです...
Wyck

最終的に、機能検出は未来であることに同意します。このスタックオーバーフローの問題を使用すると、素晴らしい解決策になると思います。私はModernizrを使用しており、彼の方法をチップのソリューションと組み合わせる方法を理解する必要がありますが、私はまだjQueryがあまり得意ではありません。どう思いますか?
micah 2011

ほとんどのWebサイトでは、メディアクエリ、特にJavaScriptライブラリによるバックアップを使用して問題が発生することはないと思います。私が目にする問題は、多くのインターフェイス画像を使用しているサイトで、のような何か足りないものを使用することで、モバイル向けの画像を提供していますdiplay:none;。このため、効果的なレスポンシブレイアウトは最小限のデザインになりがちです。
Wyck、2011

0

まず、「最高」を定義する必要があります。私の定義は次のとおりです。任意のデバイスまたは画面でデザイナーの意図した効果で画像をレンダリングします。元のシステムと人的資源(つまり、帯域幅、CPU、デザイナー/プログラマー時間)の絶対最小量を消費するのと同じ品質で画像をレンダリングします

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

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

長所:実装する必要がほとんどなく、クロスブラウザー互換であり、古いブラウザーでサポートされています。

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

  1. メディアクエリを使用してクライアントのプロパティを読み取り、デザイン内の異なるブレークポイントに合わせて調整されたいくつかのイメージの1つをフェッチします。(HTML Responsive Images Extensionとsrcset属性タグの提案により、このアプローチがHTML仕様に組み込まれています)。

長所:モバイルデバイスでのダウンロードが高速です。網膜型ディスプレイに対応。高品質の方法を使用して画像を処理することが望ましいため、画像品質が向上しました。芸術的な演出が可能になります。

短所:誰かが同じ画像の複数のバージョンの処理、トリミング、管理に時間を費やす必要があります。より多くのコーディング:画像のすべてのバージョンを何らかの方法で綴り、すべての望ましいレイアウトのメディアクエリを作成する必要があります。提供するすべての画像について上記を繰り返します。CSS3メディアクエリまたは新しいタグをサポートするブラウザーでのみ機能します。

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

長所:デザイナーは、画像の処理や複数のバージョンの管理に時間を費やす必要はありません。最適なサイズの画像が毎回送信されます。網膜タイプのディスプレイを処理し、芸術的な方向に動的に調整できます(ただし、多少の労力が必要です–どこに焦点を合わせるかを知る必要があります)。特別なマークアップや追加のマークアップは必要ありません(以下の警告)。クロスブラウザー互換性があり、古いブラウザーで動作します。

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.