13

アルバムの写真を表示するとき、Facebook on webは画面サイズを巧みに検出し、適切なサムネイル写真を選択してから、img要素の適切な幅と高さを選択することに気付きました。

私はChrome開発ツールを使用して、Facebookの画像の自然な表示幅と高さを確認しました。

これは、20.41"x12.8"モニターで1600x1200の解像度で表示された写真の例です。

画像のsrcが_o.jpgの接尾辞であり、自然なサイズが1529x2048であるのに対し、現在の画像要素のサイズは432x578であることに注意してください。

これは、1440x900の解像度で表示されている14インチのMacBookAirの同じ画像です。

これは、はっきりとは見えない接尾辞_nを使用していますが、現在の画像要素の寸法が538 x 720であるのに対し、自然な寸法は717x960であることがわかります。

私が見つけた理由は、同じ戦略を学ぶことですが、標準のpngまたはjpeg形式のアートワークを表示するためにそれを使用することです。

cssを使用して実装される戦略の量はどれくらいですか？javascriptでいくらですか？

私の質問は次のとおりです。

  1. Facebookはこの検出をどのように行いますか？
  2. Facebookは元の写真ごとにいくつのサムネイルを作成しますか？
  3. Facebookは、画面サイズに応じてimg要素の適切な幅と高さをどのように決定しますか？

Facebookは最大2048×2048の解像度を許可していると思います。

それ以外は、詳しく知ることができません。

この質問は、より多くの聴衆を獲得するためにQuoraでもクロスポストされています。

更新： 私はバックエンドとフロントエンドとしてcakephpを使用しています私はjqueryとhtml5の規則に依存しています

4

4 に答える 4

8

ウィンドウを拡大して「劇場」のサイズを変更すると、画像のサイズが変更されます。このことから、「劇場」が特定のサイズに設定され、画像が最大幅または最大高さになるように設定されているため、外側の要素（劇場）のサイズに合わせて拡大または縮小すると想定できます。 。この部分はCSSで行われます。

画面サイズの検出は、DOMDimensions（ http://pastebin.com/Biz9ntMj）とDimensionTracking（http://pastebin.com/Ys72APyL）関数と関係があると思います。また、クリックは「primer」（https://gist.github.com/376039）スクリプトによってインターセプトされ、AsyncRequest（必要な場合）を介してアクションをルーティングし、JOSN応答に応じて反応します。私の画面サイズは、リンクと最終画像（_n.jpg）の両方に対して1つのサイズしか表示しませんが、javascriptによって処理されているかのように、それ以外の場合（javascriptがオフまたは何か）それは、1つのサイズが720 x 960のすべてに適合するという彼らの最良の推測に戻り、次に上記のようにcssを使用してサイジングを強制します。

編集

CSSについて...
CSSを使用すると、画像を含むブロック要素に高さ（画面サイズに固有または相対的なもの）を設定し、その画像をmax-height/width定義された高さ/幅ではなくそのように設定できます。そうすれば、画像はアスペクト比を維持しながら、コンテナ内で許可されたサイズまで拡大および縮小します。この例はここで見ることができます：http：//jsfiddle.net/tV6gG

javascriptで...
ページ上で何かがクリックされると（そしてjavascriptが実行されると）、それは上記の「primer」スクリプトを介してキャッチされます（完全なバージョンはここで見ることができます-http://pastebin.com/BwhKJ14d）- （これに関する詳細については、http：//www.facebook.com/video/video.php？v = 596368660334＆ref = mfを参照してください）。次に、このスクリプトはクリックイベントの属性をチェックしrel（28行目を参照）、その属性に基づいて「ブートロード」する対象を決定します（52行目を参照）。ここから、すべての画像の種類を処理する関数（http://pastebin.com/eGgtz4dT ）の獣をロードします。

このスクリプトには、画像サイズと関係があるように見える関数がいくつかあります。1つはgetCurrentImageServerSizeDimensionsです（218行目を参照）。ステージのサイジングについては他にもありますが、それも重要ではないと思います。私の知る限り、このスクリプトは大量のデータをコンパイルし、通常のhrefとは異なるサーバーへの呼び出しを行います。

ソースからエスケープされていないhref：

http://www.facebook.com/photo.phpfbid=10152228292295554&
set=t.516587895&type=3&src=http://sphotos-g.ak.fbcdn.net/hphotos-ak-
snc7/374008_10152228292295554_643067794_n.jpg&size=720,960&theater

ページレットに送信されたエスケープされていない実際のリクエスト（ページレットの詳細については、BigPipeに関する上記のビデオを参照してください）メーカー：

http://www.facebook.com/ajax/pagelet/generic.php/PhotoViewerInitPagelet?
ajaxpipe=1&ajaxpipe_token=AXhGMa1SEXnChIug&no_script_path=1&data=
{"fbid":"10152228292295554","set":"t.516587895","type":"3",
"size":"720,960","theater":null,"firstLoad":true,"ssid":1354797924833}
&__user=6462456246&__a=1&__adt=2

それらにはほとんど同じ情報が含まれていますが、リクエストがキャッチされていることを明確に確認できるため、（必要に応じて）修正された情報（画像サイズ）を送信できます。

以前のスクリプトに関して...
DOMDimensionsスクリプトは、関数のタイトル（、、、、および）によって非常によく説明されている関数getElementDimensionsのコレクションです。これらの個々の関数が実際に何をするかについての詳細は、それらを調べて、取得できない基本的なjavascript関数を確認することをお勧めします。それほど複雑には見えません。 DimensionTrackingスクリプトは、ページで生成されたデータを呼び出して保存しているようです。 ウィンドウのサイズ変更（18行目を参照）またはウィンドウフォーカス（18行目を参照）で、100ミリ秒ごとにディメンションを再評価するように思われる場合（17行目を参照）。 getViewportDimensionsgetViewportWithoutScrollbarDimensionsgetDocumentDimensionsmeasureElementBox
getViewportDimensions()/ajax/dimension_context.php



全体として、上記のCSSメソッドを使用して、大規模な画像を正しいステージサイズに合わせるだけで、重要なこと（実際の異なる画像を見つけることを除く）を実行できると思います。

于 2012-12-06T03:38:20.813 に答える
3

多くのウェブサイトがこの種のことをしています。Facebook が正確にどのようにそれを達成しているかに注目しすぎるのではなく、同じことをどのように達成できるかに注目することは避けたいと思います。

同様のことを実現する 1 つの方法は、ユーザー エージェントの画面サイズを検出することです。これは、javascriptで Screen オブジェクトをチェックすることで簡単に実行できます。その後、JavaScript コードがページ上の画像リンクを更新して、CMS またはフレームワークによって既に生成されている適切なサイズの画像を指すようにすることができます。

画像を表示するサイズを決定するという点では、これは単純な数学的計算です。多くの場合、テンプレートには画像を表示する境界ボックスのサイズがあるため、幅と高さがこのボックス内に収まるように画像を縮小するだけで済みます。

しかし、この議論はより大きなポイントを提起します。つまり、Web サイトを開発している場合、おそらく CMS か、少なくとも何らかの開発フレームワークを使用しているということです。使用しているプラ​​ットフォームにプラグインやモジュールなどがあり、画像のキャッシュとサイズ変更機能が既に組み込まれている可能性が非常に高いです。人々があなたの状況により適切に対処できるように、あなたが使用しているプラ​​ットフォームを説明する必要があります。

于 2012-12-12T00:09:29.617 に答える
1

CSSは、@ Mediaセレクターを使用して、一般的な幅/高さを決定できます。この方法では、正確な幅/高さを決定することはできません。これにより、表示する可能性のある要素の大まかなアイデアが得られます。この時点から、相対値を使用してimg要素のサイズを変更できます。正確な画面サイズを決定するには、Javascriptを使用する必要があります。JQueryでは、ドキュメントの幅と高さにアクセスできます。

Facebookは、メディアセレクターの最大サイズに従ってサムネイルを作成する場合があります。size img要素のサイズが変更されると、ブラウザは自動的に背後の画像のサイズを変更します。Facebookのタイムラインの画像を見ると、「_n.jpg」という接尾辞が付いていることに気付くでしょう。これを「_a.jpg」に変更すると、この画像の小さいバージョンが表示されます。

于 2012-09-11T09:29:26.640 に答える
0

質問番号 1 への回答:

Facebook の画像のサイズ変更は比較的遅いです。この理由は (これは私の推測です)、javascript/jquery のサイズ変更を使用しているためです。このスクリプトはオンラインでたくさんあります。

これは悪いことです (画像が大きい場合、これは遅くなります)。これに対する解決策は、Google 開発者の Closure ツールを使用することです。私はこれを理解するために多くの時間を費やしました (必要なことを正確に行う必要のあるいくつかのプロジェクトで)。閉鎖ツール (または apache mod_pagespeed ) は、画像から不要なピクセルを削除して、画像を小さくします (kb/mb 単位)。昨年の Google IO のセッションで、これについて話していました。

これはそのセッションへのリンクです。

質問番号 2 への回答:

サムネイルは 2 つしか作成していないと思います。

質問番号 3 への回答:

回答番号1で、そのためにjavascript/jqueryコードを使用していると書きました。たぶん、これはそのためのいくつかのロジックです:

on window resize { 
  make div proportional resize (percent) -> 
  this div find image
  image width  height is div width height - offset
}

このサイズ変更を行う最善の方法は、何百万ものサムネイルを作成するのではなく、元の画像を最適化し、そこからピクセルを削除し、jquery/javascript プラグインを使用してサイズ変更を行うことだと確信しています。

于 2012-12-08T17:30:43.547 に答える