問題タブ [picture-element]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - 画像要素の長所と短所は何ですか?
picture
HTML5要素の長所と短所は何ですか?
特に、ブラウザがすべての画像をダウンロードするかどうか? それとも、ブラウザはメディアクエリに一致する画像のみをダウンロードしますか?
html - Picture 要素: すべての scrset 属性にフル パスを設定する必要がありますか?
レスポンシブ画像、ユースケース、新しい HTML5picture
要素については、この記事で詳しく説明しています。
更新:より具体的には、レスポンシブ画像、さまざまなデバイス用にサイズ変更された画像を意味します。画像の重量が少ないため、サイトの読み込みが速くなります。最大72% の軽量化。
示されている例は単なるファイル名 (パスなし) ですが、実際には次のようにより詳細になります。
毎回フルパスを設定するのは不自然に思えます。
私はこれを好みます:
ところで、可読性とプログラミング ロジックについては、ファイル名ではなくパス内の応答性の高いものを好みます。あなたはこれを行うことができます
特定の幅のサポートを中止する場合は、ディレクトリを削除してください。
しかし、主な問題は、1 つの画像に対して非常に多くのコードが必要なことです。
したがって、それを制限するには(JSソリューションなしで):
pathsrc属性やスコープ付き基本要素などを設定できますか?
html - HTML5 srcset、サイズ、アート ディレクション
私が知る限り、属性srcset
とsizes
属性は、デバイスのサイズと解像度に合わせて適切にスケーリングされた画像を適用することに重点を置いています。
これらの属性を使用して、画面サイズに基づいて別の画像を選択する機能はないようです。
これは状況の正しい理解ですか?picture
これは、要素がこのタスクで広くサポートされるまで待たなければならないということですか?