2016-10-13 1 views
2

同じ画像、私は「最高のpratice」で何を考えていた2つのサイズ

HTMLページでは、私は、インラインテキストにメニューの大小のある1つのアイコンがあります。視覚的には同じ画像ですが、2つの異なる画像として読み込まれます。私はそれぞれをbase64のソースとして使っていますが、この質問は外部のimgにも当てはまります。

だから、それが良いのです:サーバー、ほぼ2倍のダウンロードサイズ(またはインラインBASE64の大きさ)に2つの要求で

  1. ロード2枚の異なる画像、
  2. ロードだけ大きな画像、およびクライアント側のサイズ変更それは小さいサイズになります
+0

あなたはSVGを見て、一度だけあなたのアイコンを読み込んでもいいです(スケーラブルなグラフィストベクトルのためのsvg;)) –

+1

あなたの質問は非常に意見に基づいています。私の助言は、最終結果が視覚的に同じに見えるので、最小の開発時間を必要とする方法を使用することです。早期の最適化とそのすべて – tcooc

+0

答えは文脈だけでなく文脈にも依存しますが、Sockiが答えているように、文脈に到達したり改善したりするために編集に慣れているさまざまなサーバーの詳細や環境にも依存します。たとえば、デスクトップブラウザの場合は、大きな画像をロードして縮小することもできますが、モバイル閲覧の場合は、大きなものを表示する場合は大きな画像のみを読み込む必要があります。 – Martin

答えて

0

この種のサーバーは、キャッシング能力、読み込み時間、および予想されるクライアント(モバイル重いまたはデスクトップ重い)になります。

私は網膜デバイスでよりよく見えるように、より小さなサイズでも大きな画像を読み込むことを好みます。これはここ数年の私の練習でした。しかし、あなたが研究することをお勧めするものはimg srcsetです。

これは次のもので、pretty good (non-IE) supportです。

0

これにはいくつかの方法があります。のは、イメージがなどのページにロードされていることを言ってみましょう:

<img src="image.png"> 

これは、すでにバックエンドへの呼び出しを行っている、とあなたはそれが再び電話をかけることなく、他の場所で、テキストのブロック内に表示されるにしたかったですサーバ。ページの別の場所に2回目の小さなバージョンの画像をロードする便利な方法はありません。このため、ほとんどの場所では、さまざまな次元の複数の画像が保存されます。

特に大きい画像の場合は、読み込み時に低解像度の画像を使用するか、SVGで読み込むことができます。

関連する問題