スポンサーリンク

Googleドライブの画像をimgタグで表示する方法、表示速度、見え方

2021年4月1日

Yahoo!ボックスに関する記述(20210402追記)

Yahoo!ボックスは、202009年頃に画像共有にかんする機能が終了したため、以後Yahoo!ボックスに関する記述は読み飛ばしてください。画像もリンク切れとなっております。

Googleドライブの画像をimgタグで表示する方法

Googleドライブから共有可能なリンクを取得すると次の様なリンクが取得できます。https://drive.google.com/open?id=【それぞれ個別のファイルID】となります。

共有可能なリンク(取得したそのまま)

取得したそのままのURLをリンクすると下記のような感じになります。クリックするとGoogleビューワーアプリ上に画像が表示されます。どうぜん、このURLをimgタグに設定しても画像は表示されません。

https://drive.google.com/open?id=1Ixk4B7QGhuvm-f_6cp1ajj9cPBnkyP0e

imgタグに設定可能なリンク

下記URLの前半部分の黒文字部分が共通URL部分で後半の赤文字部分がID部分となります。ID部分を【それぞれ個別のファイルID】に書換、imgタグに設定すれば画像が表示されます。

http://drive.google.com/uc?export=view&id=1Ixk4B7QGhuvm-f_6cp1ajj9cPBnkyP0e

このままだと、WordPressでは画像ファイルと認識されない?

WordPressの標準機能か又は、テーマの機能なのかちょっとわからないのですがこのままだと画像されるのですが、画像をクリックすると拡大表示される機能が働かない状態になってしまいました。これを回避するためにダミーファイル名を付加することで実現できます。#ダミーファイル名を付加すればいいわけです。#&でも代用できますが、Yahooボックスでは、&では表示されないので#を自分は使用しています。あと、気にしなくても大丈夫だと思いますが拡張子は表示する画像に合わせたほうがいいと思います。ファイル名はすきなものでOKです。

http://drive.google.com/uc?export=view&id=1Ixk4B7QGhuvm-f_6cp1ajj9cPBnkyP0e#dummy.png

Yahoo!ボックスでも同様な問題に直面

Yahoo!ボックスの場合、画像URL短縮画像URLデフォルトで用意されています。このURLimgタグに指定すれば画像は表示されます。しかし、WordPressで発生した同じ現象が発生します。なので同じ対応をして下さい。#ダミーファイル名を付加してください。

同じ画像を各サーバー上に置いたときの表示速度と見え方(PNGフォーマット)

このサーバー上からリンクしている画像

サーバー上PNG画像

Yahoo!ボックス上から共有リンクしいている画像

ヤフー上PNG画像

Googleドライブから共有リンクしている画像

Google上PNG画像

表示速度の結果は?

前もって言っておきますが、表示する環境によって表示速度違う場合があることに配慮して下さい。これから書くことは自分の環境での結果というか感想です。自分の見た感じですが、このブログサーバー上Yahooボックス上画像に関しては表示速度に変わりないように見えます。圧倒的に違うのがGoogleドライブ上の表示速度です。Googleドライブ上の画像だけがワンテンポ遅れてくる感じで表示されます。表示するブラウザは、ChromeEdgeで試してみました。あと、1度だけではなく複数回更新をかけても結果は変わりませんでした。Googleドライブだけがなぜ表示速度が遅いのか正確なことは解りませんが、画像のキャッシュが効いていないとかサーバーが遅いとか(たぶんこれはないと思う)とかサーバー上で何かしら処理が一旦はいるとかだと思います。このサーバー・Yahooボックス・Googleドライブ上のサンプル3画像が画面に表示されている位置更新をかけると解ると思います。表示速度に違いがないように見えた方は、コメント下さい。よろしくお願いします。

見え方の結果は?

何を言っているんだと思う方もいるかと思いますが、Yahooボックス上の画像が劣化して見えます。スマホサイズの画面では、確認しずらいかもしれないです。PCでは、はっきり違いが判るはずです。実際劣化していて、画像サイズ劣化しています。元ファイルのサイズは、Width/Height=776px/136px、Yahooボックス上からリンクして表示された画像サイズは、Width/Height=480px/84pxとなっています。当然再エンコードしたと思うので画像じたいも少し劣化しているでしょう。たぶん、共有リンクしたとき万が一なんかあったときに元ファイルは保護したいからではないでしょうか。別ファイルを作成するのはいいと思うけど、劣化コピーじゃなくそのままコピーしてくれればいいにと思った今日この頃。この回避方法を知っている方がいれば教えてください。よろしくお願いします。

追記)Yahooボックスの画像劣化について気になったので調べてみましたが、imgタグで劣化なし画像を表示させる方法はないみたいですね。なんか、サムネイルで使用するみたいなことも書いてあったサイトもあったのでなるほどと思いました。でも、それだったらYahooボックスのURLを取得するラベルを【画像のURL】じゃなくて【縮小画像のURL】とか書いてほしいな。はい、愚痴です。

さらに追記)下記投稿記事リンクでYahooボックスからimgリンクで画像を表示しています。元画像が大体Width/Height=2000px/1500pxくらいで、実際表示された縮小画像が480px/400pxくらいになったのでこの辺りが最大サイズかと思われます。もうちょっと大きいサイズになればいいんですけどね。

さらにさらに追加)最大サイズは、Width/Height=480px/480pxみたいです。

画像フォーマットは、JPG,GIFでも試してみましたが、PNGと同様の結果でした。あと、YahooボックスではBMPフォーマットは画像のURLが取得できないみたいですね。もちろん、アプリからの表示はできます。というか、今BMPフォーマットはリンク画像として使えるんですかね。一様メジャーフォーマットなので試してみましが。