【ブログ用画像】Google Photosから直リンクを発行しよう

Google Photosから、永続的な直リンクを取得し、ブログで使う方法

2023年01月15日

前提

Google Photos を使ったことがあること
ブログを書いていること
なんとしてでも直リンクが欲しいという野心があること

リンク取得

リンク取得方法は様々ありますが、他の方法で確実に永続性を担保できるかというと、そうではありません。
対象ページから「画像アドレスをコピー」をしても、ある時いきなりリンク切れしていたり…

当ブログではEmbed Google Photosというサイトから、直リンクを生成する方法を採用しています。

作業フロー

アルバムを生成する
画像を追加する
共有リンクを取得する
共有リンクをEmbed Google Photosに貼り付け、Generate Embed Codeを押す
Direct Image LinkとHTML Embed Codeが生成されます。

Direct Image Linkを使う場合

内容
https://lh3.googleusercontent.com/86Ckc9mufUYDZHN4hFxpJMqtZTz5MFMFQFtXm4wyAnWhJOFseoRxF_cGj6Sw8GWOZQmzmtDUC4OJ-ps8sIEpEZqQ6bnXti1vdINsOS1PNRL5KbNJIf3FBRS7C6bGJNnCyUV9wq8A=w600

一般的な指定方法です。そのまま画像を表示するのに使えます。

HTML Embed Codeを使う場合

リンク付きaタグを使っていて、画像をクリックすると大画面で表示されます。

内容

<a href="https://lh3.googleusercontent.com/2RAtcxDG29RlFXJJwgNg1XEDbct4Kie4JPMpVopxT6oqEnbC57TwW3_CDPefz7oELFRp_yfbbBfwCMGmgYvNPDSxg5TeoDyaWBNpVvtEDT6QwIcuJndg8t3CC2zlZzYJPOzEX1qC=w2400?source=screenshot.guru"> 
    <img src="https://lh3.googleusercontent.com/2RAtcxDG29RlFXJJwgNg1XEDbct4Kie4JPMpVopxT6oqEnbC57TwW3_CDPefz7oELFRp_yfbbBfwCMGmgYvNPDSxg5TeoDyaWBNpVvtEDT6QwIcuJndg8t3CC2zlZzYJPOzEX1qC=w600-h315-p-k" /> 
</a>

※ クリックして確認

メリット

無料の範囲内で使える枠が大きい
指定した画像のサイズで表示できる
データが消失のリスクが少ない

Googleが管理する画像ストレージということもあり、データ損失によるリスクはかなり低いと思います。
加えて、15GBという容量を多いと捉えるか、少ないと捉えるか、用途により異なりますが
個人で使う分には十分かと思います。

指定した画像のサイズで表示できる
個人的には、ここが一番のメリットと感じてます。

例えばGoogle Driveからの直リンクを使うと、元の画像がとんでも無く大きい場合、表示速度に大きく関係してきます。
しかし、末尾にある=w~~をいじると

デメリット

Google側の裁量により、リンクが使えなくなる可能性がある
意図しない規約違反によりアカウントを凍結されると、全ての画像が表示不可になり得る
保存容量が限られている（15GBまで）
画像がたくさんあると手間が大きい

リンク切れやアカウント凍結などに備えて、有料ストレージへの逃げ道を作っておいた方がいいですね。
ブログに載せたい画像がたくさんあると、共有リンク取得 -> 直リンクに変換というのが手間です。

リサイズやトリミング

先ほど指定した画像のサイズで表示できると説明しましたが、トリミングにも対応しています。

リサイズ

末尾に=w~~や=h~~と付与することで最大幅を指定でき、=w~~-h~~と連結することも可能です。

# 最大600pxの横幅を指定
https://lh3.googleusercontent.com/2RAtcx...=w600

# 最大300pxの縦幅を指定
https://lh3.googleusercontent.com/2RAtcx...=h300

# 最大600pxの横幅、最大300pxの縦幅を指定
https://lh3.googleusercontent.com/2RAtcx...=w600-h300

トリミング

=w~~や=h~~、=w~~-h~~のさらに後に-cを付与することで、正方形のサイズにトリミングすることも可能です。

# 最大横幅600pxの正方形
https://lh3.googleusercontent.com/2RAtcx...=w600-c

# 最大縦幅300pxの正方形
https://lh3.googleusercontent.com/2RAtcx...=h300-c

元サイズで表示

=-s0をつけると元の画像サイズで表示されます。

https://lh3.googleusercontent.com/2RAtcx...=-s0