デバイスに関係なく、ウェブサイトからすべてに最適な画像体験を提供します
私は他の仕事に深く関わっていましたが、サイトの共同所有者は、ウェブサイトがすべての人々にとって100％適切ではないことを知らせてくれました。彼は私と比べて技術的に傾いているわけではありませんが、これが起こるのです。
サイトを作成したときに、人々が見たい写真を通常のサイズで表示するデスクトップバージョン（特に高解像度画面、特にデスクトップコンピューター用）を作成しました。苦情はありませんでした。
次に、サイトにモバイルバージョンを追加しました。写真は、ユーザーの画面に合わせてサイズを縮小し、横スクロールする必要はありません。これは、Googleのモバイルユーザビリティ標準にも準拠しています。
私が受け取った不満は、画質が悪いということでした。古い世代の携帯電話を使用しているゲストがモバイルサイトを使用して写真を友人に伝えたので、これが真実であることがわかりました。新しい携帯電話を持っている友人は同じものをお粗末な画像形式で見ました。
現在はデスクトップサイトにあり、画像は元のサイズです。モバイルサイトでは、サーバーは画像を読み込み前に半分のサイズに縮小します。
また、モバイルサイトのユーザーは、ダウンロードボタンを使用して元の画像（ボタンの意図）を受信することがよくあると言われましたが、不便だと感じました。
だから、今私はうんざりしていると私はいくつかのオプションがあり、すべてマイナスの結果をもたらします。
オプション1
両方のサイトで画像ファイルを同じにします。これを行うと、より多くのサーバー帯域幅を使用し、クライアントはより多くの帯域幅を使用し、すべてのコストが増加します。
オプション2
低解像度のモバイルデバイスを使用していないユーザーをデスクトップサイトに強制します。これを行うと、ユーザーが通常とは異なるWebブラウザーを使用している場合、検出が意図したとおりに機能しないことがあります。
オプション
ページを読み込む前に、デバイスがデスクトップ画面の解像度を処理できる場合、デスクトップサイトを使用するようにユーザーに要求します。これを行うと、ユーザーが写真にアクセスするためにクリック/タップする必要があります。
オプション4
モバイルサイトの画像の横に、デスクトップサイトからの高品質画像へのURLをテキストとして書き込みます。このオプションの唯一の問題は、人々が見たいのが写真だけだと読むのが好きではないということです。
オプション5
モバイルサイトのデスクトップサイトから高品質の画像へのアクティブなリンクを提供します。ここでの問題は、アンカータグを使用してリンクを作成すると、Googleはサイトのモバイルフレンドリー性が低下すると見なし、ボタンを使用してリンク（フォームポスト）を作成すると、小さなデバイスでページがく見えるためです。リンクをわかりやすくする必要があり、ボタンはCSSでうまく機能しません。
すべてのユーザーに最適なサイズに画像をロードするためにメディアクエリを試しましたが、5か月に1回、画像が完全ではないという不満があります。 JavaScriptも試しました。
コーディングの方法は知っていますが、コーディングのアイデアやプラグインを探しているわけではありません。私が探しているのは、私の状況に対する最善のアプローチです。私が何をすることを提案しますか、なぜですか？
さまざまなデバイスで画像を適切に表示するには、レスポンシブ画像が必要です。これは、異なるタイプのデバイスに対して複数の「サイト」を持つよりも望ましい方法です。大きな帯域幅の変更は必要ありません。重要なのは、レスポンシブ画像を使用して、CSSとブラウザーが連携してデバイスの種類/解像度と使用可能な帯域幅を検出し、それに応じたサイズの画像を配信することです。グリッドを使用した流動的なWebデザインは、物事をまとめるのに役立ちます。
1つの画像サイズと品質のみを使用することはありません。実際、モバイルブラウザは、ダウンロード、処理、表示するものが多くなるため、動作が難しくなります。レスポンシブ画像を使用すると、さまざまなデバイスで品質を維持できます。
すべての画像を「高品質」にする必要はありません。人間の目では、解像度のほとんどの調整を区別できません。たとえば、幅600ピクセルの高解像度画像を取得し、それを品質の80％に縮小（アスペクト比を維持）すると、標準デバイスで人間の目に変化は生じませんが、そのファイルはその14％になりますオリジナルサイズ。したがって、画像の解像度をサイズと品質のバランスまで下げることを検討してください。画像は顧客にとって見栄えがよく、顧客とWebサイトの読み込みが速くなり、帯域幅が節約されます。
<scrset>タグの<size>および<img>属性を使用して、ページに画像の異なる解像度を表示させることができます。また、画像を動的に操作し、JavaScriptなどの一般的な言語でそのサイズを自動化する方法があります。 レスポンシブ画像 で使用されるタグの詳細を説明する記事があります。
ブートストラップclass="image-responsive"、それは機能しますか？
https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp