私は、基本的にスマートフォン、タブレット、デスクトップの複数の画面用に 3 つのデザインを持つ画像の多い Web サイトに取り組んでいます。
このサイトの主な機能は、背景/全画面画像です。これらの背景画像の推奨サイズに関する推奨事項はありますか?
サイズ変更と最適化のための最も賢明なパスと思われるため、それらはすべてプログレッシブ jpeg になります。
さまざまな画像サイズの処理は別のテストになりますが、この設計ではポライト ローダーが可能になるため、基本的にはクライアント側で処理するのが賢明と思われます。
480x320の iPhone 3G、1136x640 の Retina iPhone 5、2048x1536の Retina iPad、2880x1800のRetina mac book proなどの非 Retina フォン用にフォーマットすることをお勧めします。次に、メディア クエリをセットアップして、Retina 以外の iPad、標準のデスクトップ (デフォルトの画像)、および MBP Retina (2560x1600) の近くにディスプレイがある Google Nexus 10 に最適なサイズを選択します。
背景画像には、メディア クエリを使用する必要があります。全画面表示の画像については、Responsive Images Community Group によって提案された画像要素を模倣できるようにする JavaScript モジュールを実装しました。または、「srcset」ルートを使用することもできます。