あなたは、Webがより視覚的になってきているとあなたのビジネスウェブサイトで素晴らしい画像が重要であると聞いたことがあります。
しかし、それらの画像はあなたのウェブサイトの訪問者の惨劇かもしれません。画像は平均的なWebページに含まれる1.7MBのうち1MBを占めます。
高速インターネット接続を使用しているデスクトップコンピュータを使用している場合、これはあまり問題にならない可能性があります。ただし、モバイルビジターからのトラフィックが増加しているのを見たり、見たい場合は、これらの画像が問題になる可能性があります。画像が多いWebページはダウンロードに時間がかかることがあります。訪問者はイライラしてあなたのサイトを離れます。
$config[code] not foundあなたはすべてのモバイルの問題を解決すると考えて、レスポンシブWebデザインを実装したかもしれません。そしてレスポンシブWebデザインがいくつかの問題を解決するのは事実です。それは自動的にあなたのサイトの要素をより小さく、より狭いモバイルスクリーンに表示されるように配置して表示します。
しかしレスポンシブWebデザインは、すべてに対する答えではありません。必ずしも画像のダウンロードに関する問題が解決されるわけではありません。レスポンシブデザインであっても、何度もそれらの重量画像はとにかくダウンロードされます。 WebパフォーマンススペシャリストのYoav WeissがOperaのWebサイトで簡潔に指摘しています。
「レスポンシブWebデザインRWDは、新しいブラウザ機能とCSS技術を組み合わせて、それらを表示するデバイスに適応し、どこでも理想的に見えるWebサイトを作成しました。これにより、開発者は信頼性の低いデバイス検出について心配する必要がなくなり、ビューポートの観点からWebサイトを検討することができました。
しかし、RWDサイトは各デバイスで見た目が異なりますが、その下では、ほとんどのデバイスで同じリソースをダウンロードし続けていました。」
新しい
HTMLコードについて何も知らないのであれば、技術的ではない定義は、特別な言語です。あなたのウェブサイトのコードの裏側で使われるとき、この言語はブラウザがどのようにテキストとイメージを表示するべきであるかについての指示を与えます。 新しいPicture要素はHTMLマークアップ言語の一種です。それはこのように書かれています（Responsive Images Community Groupによる）： Picture要素はレスポンシブです 画像、 反応しない 設計. 非技術系のビジネスマンにとって、その違いは小さいように思われるかもしれません。しかし、あなたのサイトのモバイル機器のパフォーマンスに関しては、それは重要かもしれません。 ArsTechnicaのレポートによると、新しいマークアップ要素は、フルサイズのモニターに表示されることになっていた画像（モバイル機器にはうまく変換できない画像）によって引き起こされる問題を解決します。の
「ブラウザがPicture要素に遭遇すると、まずWeb開発者が指定する可能性のある規則をすべて評価します。 ***次に、さまざまなルールを評価した後、ブラウザは独自の基準に基づいて最良の画像を選びます。ブラウザの条件に設定が含まれる可能性があるため、これはもう1つの優れた機能です。たとえば、将来のブラウザでは、ページ上のPicture要素の内容に関係なく、高解像度の画像が3Gを超えて読み込まれないようにするオプションが提供される可能性があります。どのイメージが最良の選択であるかがわかると、ブラウザは実際にそのイメージを古き良きimg要素でロードして表示します。 …何が起こるかというと、Pictureはimgタグをラップしています。ブラウザが古すぎて何を作ればいいのかわからない場合 すべての開発者が最初に新しいPicture要素を受け入れたわけではありません。 Ars Technicaのストーリーは、Web開発コミュニティのリーダーたちがどこに行くべきかという点にたどり着くまでに経ったプロセスを概説しています。 $config[code] not found しかし、新しい画像のHTML要素が採用されることで、問題は解決したように見えます。 の
ビジネスマンとして知っておくべき重要なことは、 画像にPicture HTML要素を実装することは、Web開発者と相談することです。技術的なことを考えている人や日曜大工の人は、ここでPicture要素の使い方を学ぶことができます。 Scott Gilbertsonによる素晴らしい記事です。 実装して自由に感じる
画像：シャッターストック。 RICG Picture HTML要素とは何ですか？
についてのキーポイント
