確かな情報です!レスポンシブ Web ページに画像や動画を配置して処理する方法

@陈子木: レスポンシブ Web デザインは、柔軟で可変的なグリッド システムを使用して、アクセスするデバイスの画面サイズの仕様に応じて Web ページの表示モードを調整できる、人気の Web 開発コンセプトです。 2015 年までにモバイル ユーザーの数は現在の 8 億人から 19 億人に増加すると予測されており、これは現在デスクトップ ブラウザー向けに設計されている Web ページでは、モバイル フォンやタブレットでのユーザー エクスペリエンスが非常に劣悪になることを意味します。

ただし、実際のアプリケーション条件が変化すると、レスポンシブ Web デザインでは依然として一連の複雑な問題が起こります。この記事の残りの部分では、レスポンシブ Web ページで画像やビデオなどのマルチメディア要素を配置して処理する方法について詳しく説明します。最終的な目標は、これらの要素をさまざまなハンドヘルド デバイスでシームレスに読み込んで実行し、ユーザー エクスペリエンスを向上させる信頼性の高い Web サイトの作成を支援することです。

レスポンシブ Web デザインにおける画像処理

まず、レスポンシブな画像の扱い方について説明します。レスポンシブ Web デザインでは、画像処理の問題は、従来の Web ページのナビゲーション バーのデザインとほぼ同じです。新しいモバイル デバイスが普及するにつれて、ピクセル密度の高い画面では Web ページの欠陥が非常に目立つようになります。したがって、画像処理の中心的な課題は、Web サイトのあらゆる側面 (特に画像) が可能な限り柔軟であり、高解像度の画面ですべてのピクセルがぼやけないようにすることです。

画像表示の問題

まず、Web がデバイスに応答する場合に画像を公開するための特定の標準はありません。選択できるオプションは数多くあります。しかし、この時点で疑問が生じます。3G モードの Retina スクリーンを搭載したモバイル デバイスでは、画像をどのように処理すればよいのでしょうか?ネットワーク速度が悪い場合、画像サイズを自動的に最適化（縮小）する必要がありますか？これはいわゆる「アートデザイン」の問題です。ウェブサイトが提供する画像をさまざまな画面デバイスに表示できるだけでは十分ではありません。画面の小さいデバイスでは、画像の詳細がまったく見えない場合があります。そのため、「正常に表示できること」を基準に、この小さな画面に合わせてカットし、ユーザーが詳細をはっきりと確認できるようにする必要があります。

開発者は、さまざまなサイズや比率の画像をすべて事前に Web サイトのページにアップロードし、大きすぎる画像や小さすぎる画像を非表示にする CSS とメディア クエリ関数を設定して、ブラウザーがピクセルに正確に一致する画像をダウンロードできるようにすることを提案する人もいます。しかし、そうではありません。ブラウザは CSS クラスを読み込む前にすべての関連画像をダウンロードするため、Web ページが肥大化し、読み込みに時間がかかります。

画像の問題に対する可能な解決策

先に進む前に、明確にしておきたいのは、すべての画面で画像を完璧に表示できるソリューションは存在しないということです。ただし、より実現可能な解決策を模索し続け、可能な限り精度を向上させることができます。レスポンシブ Web ページの画像問題に対して見つかった解決策は次のとおりです。

ブートストラップ

レスポンシブな Web サイトを設計し始めたものの、どのように進めればよいか分からない場合は、BootStrap CSS フレームワークを試してみてください。 Bootstrap を使用すると、目標を簡単に達成できます。さらに重要なのは、Bootstrap によって提供されるスタイルと基本的な HTML 要素に拡張されたクラスにより、レスポンシブな画像の実装が容易になることです。

焦点

Focal Point は、画像を「植え付け」、フォーカスを制御するのに役立つフレームです。この手法では CSS のみが使用され、開発者は対応するタグに対象画像を含むクラスを追加するだけで済みます。

CSS スプライト

読み込み時間が主な懸念事項である場合 (そうあるべきです)、特に Retina 画面を搭載したデバイスをターゲットにする必要がある場合は、CSS スプライトを使用することをお勧めします。ウェブページを高解像度の画面（Apple の Retina 画面など）に適応させる場合、通常はより大きな画像リソースを追加し、CSS のメディア クエリを使用してサイズを識別して適応させます。ただし、これによりファイルの数とサイズが大幅に増加し、コード内の CSS セレクターの数が増え、参照するファイルも増えます。

この状況は、CSS スプライトを使用すれば改善できます。セレクターが参照できるように、Web ページに必要なすべての画像を大きな画像に含めることができます。たった 1 回の HTTP リクエストで、複数の画像リソースをローカルで取得できます。タグで参照される写真素材は CSS スプライトで処理するのに適していませんが、ヘッダーやフッターで使用するアイコン素材やボタンスタイルなどは CSS スプライトを使用すると使いやすくなります。

アダプティブブログ

アダプティブ イメージ ソリューションは、デバイスの画面サイズを検出し、画面サイズの要件を満たす画像リソースを HTML に埋め込むことができます。このソリューションは、典型的なサーバー側ソリューションです。検出のためにローカルで Javascript を実行する必要がありますが、主に Apache2 Web サーバー、PHP 5.x、および GD ライブラリに依存します。

アダプティブ イメージ ソリューションの最も優れた点は、マークアップを変更する必要がないことです。マーカーベースのソリューションが最良だと考える人もいますが、これは真実ではありません。 WordPress のようなコンテンツ管理システムの場合、適応型画像ソリューションと組み合わせるとさらに便利になります。

ウェブサイトを適応型にしたい場合は、サーバー側で .htaccess ファイルを変更または追加する必要があります。さらに、Web サーバーのルート ディレクトリに PHP ファイルを追加し、Web サイトのページに JavaScript コードを追加する必要があります。これらすべてを実行すると、PHP スクリプトは画像に対するリクエストを取得し、目的のブレークポイントに合わせてサイズを変更し、Web ページに出力します。

WordPressウェブサイトでレスポンシブな画像を出力するプラグイン

プラグインを通じて WordPress サイトにレスポンシブ画像を実装するための他のソリューションもあります。次のプラグインはタグと同じように動作します:

-PB レスポンシブイメージ

-WP レスポンシブイメージ

-シンプルなレスポンシブ画像

-ピクチャーフィルWP

さらに、インターネット上でユーザーが選択できるレスポンシブな WordPress テーマが多数あります。

画像処理の究極のソリューション?

もう一度言いますが、画像処理のこれらの可能な解決策にはすべて限界があることを覚えておいてください。たとえば、アダプティブ イメージ ソリューションでは Apache と PHP の組み合わせが必要なので、コンテンツ管理には適していますが、Web サイトのプラットフォームやホスト サーバーに完全に適合することはほとんどありません。さらに、アダプティブ イメージは、.htaccess ファイルを通じてイメージ サイズを取得するためにサーバーに依存しているため、取得したイメージが自分のサーバー上にない場合、.htaccess 内のスクリプトは無力になります。また、このスクリプトは帯域幅を検出できません。3G バージョンの iPad Air でこのような Web サイトにアクセスすると、読み込み速度がひどく低下する可能性があります。最も重要なのは、上記の「アート デザイン」の問題を解決するのではなく、元の画像のサイズを調整するだけであるということです。したがって、これらすべてについて、最適な解決策を見つけるために実験する必要があります。

レスポンシブ Web デザインにおけるビデオ処理

ビデオがウェブサイトにとって非常に重要なマーケティングツールであることは間違いありません。そのため、柔軟で応答性の高いビデオに対する需要が高まっています。

画像と同様に、Web ページに柔軟に適合させるのも頭の痛い作業です。これはビデオ プレーヤーのサイズに関することではなく、再生ボタンなどの基本的な Web 要素であっても、さまざまなデバイスに合わせて調整および最適化する必要があります。解決策をいくつか紹介します。

WordPress でビデオを最適化する

WordPress は多くのレスポンシブ テーマを提供していますが、一般的に、これらの埋め込みビデオは画面サイズに応じて自動的に調整されません。このため、Web ページが引き伸ばされたように見えたり、非対称に見えたりすることがあります。 FitVids プラグインはこの問題を完璧に解決します。これは、ビデオを画面サイズに合わせて調整できる jQuery プラグインです。プラグインを有効にすると、WordPress はビデオ コンテンツを公開するときに CSS セレクターに「.post」クラスを自動的に追加します。変更を保存し、さまざまなサイズのデバイスで Web ページのレイアウトを確認し、ビデオの再生エクスペリエンスを体験して、どのように機能するかを確認してください。

さらに、オプションの WordPress プラグインもいくつかあります。

- 流動的なビデオ埋め込み

-ビデオオーバーレイヤー

-MarcTV ビデオ埋め込み

-レスポンシブビデオ

他のウェブサイトからビデオを手動で埋め込む

YouTube やその他の同様のビデオ ホスティング サイトでは、通常、幅と高さがピクセル単位で固定されており、コードに埋め込まれています。通常の Web サイトの場合、これで問題はありませんが、レスポンシブ Web ページの場合、このようなビデオは適していません。これらのビデオ ウェブサイト コードは iframe とオブジェクト タグを使用しますが、これらは HTML5 ビデオ要素では処理できません。簡単に言えば、HTML5 タグは Youtube や Vimeo からの埋め込み動画を処理できません。

ここで再び CSS が役に立ちます。具体的には、コンテナ要素が縮小された場合でも、ビデオの本来の比率を維持できます。このテクノロジーにより、YouTube、Vimeo、SlideShare などのストリーミング サイトのビデオを Web ページに埋め込み、自然に表示できるようになります。あなたがしなければならないのは

ビデオを抽出し、サイズ比に応じて Div にパッケージ化するプロセスは単純ではないことに注意してください。また、このテクノロジは、複数のビデオを含む Web サイトにはあまり適していません。ただし、Web サイトがすでにレスポンシブ ページとして設計されている場合は、このテクノロジは Web サイトで完全に機能します。

場合

さまざまなブラウザや画面に合わせて画像や動画を最適化するレスポンシブ Web サイトの実際の例をいくつか紹介します。

ケース 1: BootStrap+jQuery

これは、Bootstrap v2.2.2 と jQuery を使用して構築されたミニマリストのブログ/ポートフォリオ ウェブサイトです。前者により、Web サイトで多数のフォーム、モーダル、プロンプト、ボタン、カルーセル、レスポンシブ出力を使用できるようになります。jQuery を追加すると、Web サイトのフロー レイアウト機能がさらに向上します。 jQuery を使用すると、Web サイトをさまざまな方法で表示できます (デスクトップ ブラウザーでは 3 列、タブレットでは 1 列、モバイル画面では 1 列など)。

ケース2: FitVids

これは、FitVids を使用して WordPress フレームワークにビデオを埋め込む例です。このプラグインを使用する利点は、インストールが簡単で、ビデオを画面にぴったりと合わせることができることです。

ケース3: 焦点

この例では、焦点を使用して背景画像を調整し、人物の写真を強調表示します。したがって、この場合、Web デザイナーは、さまざまなサイズの画像を提供する代わりに、Web サイトの視覚的な重心を変更し、焦点を最大のオブジェクトに移動しました。

ケース4: 適応画像

最後のケースでは、適応型画像ソリューションを使用します。開発者は、.htaccess ファイル、PHP ファイル、および単純な 1 行の Javascript コードを使用します。最初の 2 つのファイルはサーバーのルート ディレクトリに配置できますが、この 1 行の Javascript コードはインデックス ファイルのファイル ヘッダーに挿入する必要があります。これらの事例を理解するには、その Web サイトにアクセスする必要があります。

この有益な記事によって、レスポンシブ Web デザインに対する理解が深まったことを願っています。

元の URL: graphicmania http://www.graphicmania.net/how-to-deal-with-images-and-videos-in-a-responsive-website/

Ushe.com翻訳: @陈子木

この記事は元々 uisdc.com によって翻訳されたものです。転載の際は uisdc.com の出典を明記してください。編集者の皆様、ありがとうございました。

原題: 実用的なもの!レスポンシブ Web ページに画像や動画を配置して処理する方法

キーワード: レスポンシブ Web ページ、Web サイト デザイン、Web デザイン