レスポンシブ画像を提供するにはどのツールを使用する必要がありますか？

最近、レスポンシブ画像を作成する多くの方法が登場しました-言い換えれば、いくつかの条件（たとえば、画面のサイズや読者によるインターネットへのアクセス速度）に応じて正しいイラストを置き換える技術的な手段が登場しました。 これらのツールはすべて、わずかに異なる方法で機能します。 それらを比較するために、Christopher Schmittと私は彼らの能力と要件のスプレッドシートを編集しました。



表は情報を示していますが、同化については、実際的な問題を通して考えてみましょう。



自分やプロジェクトに適した方法を選択するとき、これらの質問はヒントとして役立ちます。 これらの質問の多くはプロジェクトに関連する可能性があるため、どの状況でどのテクニックが優れているかを評価し、この理解を一般化する必要があります。

以前のコンテンツはいくつありますか？

実際、この質問は「更新できない古いコンテンツがありますか？」という意味です。 たとえば、 CSS-Tricksの Webサイトには10​​00ページ以上ありますが、私はそれらだけで作業しています。







うん...このサイトのすべての<img> 要素を返して修正するつもりはないので、それらをそのままにしておく方法が必要です。



私が知っている唯一のツールは、マークアップの変更を一切必要としないアダプティブイメージです。 これは、読者の画面の幅に合ったサイズのイラストをインテリジェントに選択する（必要に応じて作成する） PHPスクリプトを介して画像のリクエストをリダイレクトすることで機能します。



また、古いコンテンツがどれだけ気にするかを自問する必要があります。 サイトへの訪問者の大多数は、新しいコンテンツのみに関心があり、レイアウトは技術的な手段を使用するために必要な変更を加えることができます。 もしそうなら、それらについて調べるために読んでください。



小規模なサイトや新しいサイトがある場合、または以前のコンテンツに簡単に戻って更新できる場合は、特別なマークアップが必要なツールを選択することもできます。 もう一度読み直してください。

特別なマークアップは私に適していますか？

これは、前の質問のサブ質問です。 レスポンシブ画像を提供する多くの手段では、特別なHTMLコードを使用する必要があります。 たとえば、 HiSRCの場合、データ属性に高解像度画像のアドレスを 含める必要があります。

<img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この手法により、明確で有効な、意味的に正しいコードが作成されますが、これらの属性をサイトの各<img>要素に追加する必要が生じます。これは、古いコンテンツが大量にあるサイトでは不可能な場合があります。



特別なマークアップ（または特別なCSSスタイル）があなたに適していないという結論に達した場合、 アダプティブイメージのみが残ります。 結局、 Sencha.IOの場合でも、 src属性にプレフィックスを付ける必要があり、これには古いコンテンツの処理が必要になります。

セマンティックコードが必要ですか？

レスポンシブ画像を作成するためのテクニックには、厳密な意味ではセマンティックではないマークアップが含まれます。 結局のところ、画像のセマンティックな方法は1つしかありません。そのsrc属性は実際の画像を指している必要があり、 alt属性にはその画像を説明するテキストが含まれている必要があります。 ブラッド・フロストの総括：







つまり、画像のsrc属性が存在しないか、透明なGIFなどを参照することをテクニックが要求する場合、コードは意味を持ちません。



さて、なぜレスポンシブ画像を作成するいくつかの手段がこれに頼るのですか？ はい。イラストにsrc属性が馬の絵を指している場合、ブラウザーがイラストコードを読み取った直後にこの絵のダウンロードが開始されるためです。 これを防ぐ実用的な方法はありません。 このsrcをより適切なバージョンの画像に非常に高速に置き換えても、ブラウザーは1つではなく2つの画像をダウンロードします。結果は得られませんが、速度が低下します。 ただし、これは許容範囲内です（たとえば、デスクトップは通常、携帯電話よりも高速のインターネット接続速度を備えています）。 通常、このような手法が使用される場合、 srcには異なるサイズの最小の画像が示されます。



セマンティクスが重要な場合は、前述のAdaptive ImagesまたはHiSRCを見てください。これは、Christopher Schmittによって作成され、 srcセマンティック属性で使用できるjQueryプラグインです。



他の一部のツールは<noscript>要素を使用します。これは、 JavaScriptが無効またはアクセス不能になった場合に<img>セキュアコードを配置します。 このコードがセマンティックかどうかを判断するのはあなたにお任せします。

コードの有効性は必要ですか？

ここでの有効性とは、コードがW3Cマークアップ検証サービステストに合格する能力のことです。 この検証ツールは、問題のあるコードを見つけるのに役立ち、マークアップをより良く作成するのに役立ちます。 ただし、テストに合格しないという理由だけでコードが悪化することはありません。無効なコードがすべてのブラウザーで正常に機能する場合、その有効性はあなたや他の誰かに関係するものではありません。



ただし、有効性が必要な場合（たとえば、顧客が確実にそれを要求し、仕事に対する支払いを拒否すると脅迫する場合）、レスポンシブイメージを提供する何らかの手段を使用することはできません。 たとえば、 picturefillは<picture>要素を使用します。この要素は、時間が経つにつれて標準化される可能性がありますが、現在は標準化されていないため、コードは無効です。 さらに、標準では<img>要素にsrc属性が必要です。そのため、前述の二重リクエスト画像の問題を回避する目的でこの属性を拒否すると、コードが無効になります。



コードの妥当性が必要な場合は、 Adaptive Images 、 HiSRC 、またはResponsive Enhanceをお勧めします。 これらのツールはすべて、 src属性を含むシンプルで有効な<img>構文を使用します。

画像を微調整する必要がありますか？

レスポンシブな画像を提供するいくつかの手段は、読者に同じ大きな画像の比較的小さなバージョンを提供します。 これにより人生は楽になりますが（混乱は少なくなります）、結果は受け入れられないかもしれません。 より良いアプローチの良い例を次に示します。





これら3つの写真の左側は携帯電話用で、最初はsrcで示されています。 少し大きめのミディアムは、タブレットで使用できます。 右側には、最大のイラストがあります。 （ ソースはこちらです 。）



これらの画像は、写真の意味と印象を維持するためにトリミングを使用したデザイナーの手作りの結果です。 代わりに、適切な写真を撮り、それを単純に比例縮小する場合、写真に描かれている人は非常に小さくなり、イラストの印象が失われる可能性があります。



プロジェクトで画像を細かく制御するという考え方が重要な場合は、どの状況でどのsrcが使用されているかを正確に示すことができるツールが必要になります。 Picturefillは理想的です。写真のアドレスと使用状況を十分な精度で指定できます。

 <picture alt="description"> <source src="small.jpg"> <source src="medium.jpg" media="(min-width: 400px)"> <source src="large.jpg" media="(min-width: 800px)"> </picture>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次はJavaScriptです。

JavaScriptが必要ですか？

JavaScriptを使用してレスポンシブイメージを作成するためのツールのほとんどは、トリックを実行します。 それらのいくつかはごくわずかですが（クッキーを置くためだけ）、それでもJavaScriptを使用しています。 いくつかのツールでは、リーダーでJavaScriptが無効になっている場合に備えて、 <noscript>要素内に<img>を配置する必要があります。 この方法が気に入らないが、JavaScriptがなくても写真が機能することを確認する必要がある場合は、 Sencha.IOを使用することをお勧めします。 このサービスは、「User-Agent」ヘッダーを使用してデバイスを識別することに基づいており、対応する縮小画像を送信します。 したがって、あなたはあなたが持っている画像の最大の（合理的な制限内の）バージョンを参照し、Senchaはそれを縮小し、必要であれば読者に小さなバージョンを提供します（明らかな理由で、拡大を処理しません）。

javascriptライブラリへの依存関係はどうですか？

HiSRC とrwdImagesの両方がjQueryで動作します。 プロジェクトで別のライブラリを使用している場合、これらのツールが機能しない場合があります。 （ただし、それらを移植してからソースコードを開くことができます！）そして、ライブラリを使用しない場合は、おそらく時間です。しかし、それについては説明しません。

サーバースクリプトが必要ですか？

私たちが議論したツールのいくつかは、javascriptだけに依存していません。 アダプティブイメージは、主に.htaccessとPHPに依存しています。 .htaccessはApacheサーバーを想定しています。 そしてもちろん、私たちは皆PHP （khe-ghm）を知っていて愛していますが、多くのWebサイトはRubyやPythonなどのテクノロジーを使用しています。



レスポンシブイメージ （フィラメントグループからの最初のリリース）も.htaccessを使用します。 サーバーとしてNginxのようなものがある場合は、この技術ツールを放棄するか、同様のNginx構成構文に.htaccessコードを移植する必要があります。

リーダーでインターネットの速度を確認する必要がありますか？

ブラウザウィンドウの幅を調べて、それを使用してリーダーに配信する画像を決定するのが適切であり、それがレスポンシブ画像のアイデアの根底にあるものです。 しかし、実際には、これはそのような決定の理由の半分にすぎません。 残りの半分はインターネット接続の速度です。 読者がかなり高速のインターネット接続を使用している場合、大きなイラストを彼に転送するのは正常です。 読者のインターネット接続が非常に遅い場合、（画面の幅に関係なく）小さな画像を受信する必要があります。 メディアがインターネットの速度について質問することは、ブラウザ自体には実装されていません。



現在の2つの画像応答性ツールは、 Foresight.js とHiSRC （ Foresight.js と同じ手法を使用します）が意思決定を行う際にインターネットの速度をテストします。 これは、ダウンロード時間を測定してテストファイルをダウンロードすることで機能します（しきい値は構成で構成されます）。 テスト自体はページのロードを多少遅くしますが、理論的には、速度に応じてダウンロードされる画像のサイズを節約する価値があります。

他のサービスに頼ることはできますか？

Sencha.IOは完全に外部のレスポンシブ画像サービスです。 私の知る限り、彼女は完璧に働いており、仕事に大きな支障はありませんでしたが、もちろんリスクは常にあります。



もちろん、次のように考えることができます。「クール、Sencha.IOのテクニックは優れていますが、サーバーに依存する必要があるのは厄介です-私のサーバーで同様のものを実行したいです。」 本当に必要な場合は、パブリックWURFLデータベースがあり、ローカルで作業するためのサーバーサイドレスポンシブイメージツールがあります 。



デバイス認識を処理するDevice Atlas Cloudなどのサービスもあります。 また、彼らは自分自身への依存を生み出します。 間違いなく、彼らの目標はオンラインを維持し、迅速に仕事をすることですが、あなたのビジネスにどのように、誰に依存したいかについて慎重に考えてください。

アクセシビリティ機能を備えた特別なCMSはありますか？

プロジェクトがWordPressに基づいているとします。 ただし、WordPressには画像ダウンローダーが組み込まれています。 イラストをサイトにアップロードすると、いくつかの小さなバージョンの画像が作成される場合があります。 それはクールで強力であり、あなたはそれを利用する（必要とする）ことができます。 Keir Whitakerは、記事「 WordPressの自動応答画像 」でこの機能の使用について説明しています。



もちろん、この手法はWordPressだけに適しているわけではありません。 同じツールがすべてのCMSに存在する（またはネジで固定できる）と確信しています。

未来を待つことはできますか？

「新しいiPad」（つまり、3番目の、将来への注意）の公開は、これらの技術ツールの多くの出現とその議論につながりました。 新しいiPadの高いピクセル密度は、ベクター画像や大きな写真の表示には優れていますが、サイズに合わせて拡大する必要があるためにぼやけて見える小さなアイコンには特に適していません。 ただし、高解像度のアイコンを配布すると、ファイルサイズが大きくなり、サイトの速度が低下します。 したがって、読者が必要とする状況でのみ配信する必要があります。



Web標準はこの問題を認識しています。 グループ全体が議論に専念しています。 時間が経つにつれて、彼らはこの問題を解決することができます-そして、私たちは提供された資金を使い始めることができます（これらの資金は現在のものよりもはるかに優れていると判明したと仮定します）。



Nicolas Gallagherが提案するように、おそらくCSS content プロパティを使用して画像のsrcを切り替え始めるでしょう。 おそらく、 <picture>要素を標準化します。 HTMLにはsrclist属性が、CSSにはsrcプロパティがあります。 おそらくプレフィックスがあります 。

こちらもご覧ください

• Jason Grigsbyは、レスポンシブイメージに関する3つのパートで、壮大な一連のブログ投稿を公開しました 。最初のパートはそこにあります。
  
  
• クリストファー・シュミットは、レスポンシブ画像に関するプレゼンテーションのスライドを投稿しました。
  
  
• マット・マーキスは、「 レスポンシブ画像：それらがほぼどのように機能し 、リストに必要なものは別として」を公開しました