coluli

ダウンロードに失敗したら、Dropbox上でアクセス権を申請してみてください。

Flickr embedテスト

Flickr写真のembedのテストを行いました。PCでの表示がどのように異なるか検証しています。

前提:このサイトのコンテンツ幅は912pxです(PC表示の場合)。Macのレチナなら2倍の幅1824pxとなります。

検証

はてなblog「Flickr貼り付け」

_DSF0804-強化-NR

  • レチナディスプレイのMac上のChrome、「検証」で確認すると、幅2048pxの画像が(縮小されて)使用されていました。
  • Windows 11で[システム]→[ディスプレイ]→[拡大縮小とレイアウト]→[拡大/縮小]を150%で確認すると、幅1600pxの画像が(縮小されて)使用されていました。

Flickrが生成するembedタグ:2048px幅

_DSF0804-強化-NR

  • レチナディスプレイのMac上のChrome、「検証」で確認すると、幅2048pxの画像が(縮小されて)使用されていました。
  • Windows 11で[システム]→[ディスプレイ]→[拡大縮小とレイアウト]→[拡大/縮小]を150%で確認すると、幅1600pxの画像が(縮小されて)使用されていました。

Flickrが生成するembedタグ:1600px幅

_DSF0804-強化-NR

  • レチナディスプレイのMac上のChrome、「検証」で確認すると、幅2048pxの画像が(縮小されて)使用されていました。
  • Windows 11で[システム]→[ディスプレイ]→[拡大縮小とレイアウト]→[拡大/縮小]を150%で確認すると、幅1600pxの画像が(縮小されて)使用されていました。

Flickrが生成するembedタグ:640px幅

_DSF0804-強化-NR

  • レチナディスプレイのMac上のChrome、「検証」で確認すると、幅1600pxの画像が(縮小されて)使用されていました。
  • Windows 11で[システム]→[ディスプレイ]→[拡大縮小とレイアウト]→[拡大/縮小]を150%で確認すると、(なぜか大きな *1幅1600pxの画像が(縮小されて)使用されていました。

はてなblogの標準機能「写真を投稿」

  • 大きな画像もアップロード時に幅1200px *2 に変換されるので、どの環境でも幅1200pxの画像が(縮小されて)使用されます。コンテンツ幅が600pxまでなら、レチナディスプレイでも綺麗に表示されます。

結論

  • embedされたFlickr画像は、ディスプレイ環境に応じて適切な画像サイズで表示されるようです。切りよくレチナにできない場合でも、さらに大きめの画像を縮小表示するので安心して使用できます。

  • コンテンツ幅いっぱいに写真を割り付ける場合、表示品質は同じなので素直にはてなの「Flickr貼り付け」を使うのが手軽です。

  • 高精細なモニタで写真をより綺麗に見せたい場合、はてなの「写真を投稿」ではやや力不足です。


*1:これだけ挙動が予想と異なります。画像サイズの切り替えタイミングがあるのかもしれません。

*2:正確には「幅」でなく「長辺」ですね。