この記事では、Googleフォトの写真を使ってサーバーの容量を削減する方法、HTMLで画像を表示する方法をご紹介します。
Googleフォトの共有アルバムを作成
Googleフォトにログインし、アルバム ＞ アルバムを作成をクリックします。
「タイトルを追加」にお好きなアルバム名を入力してください。
右上の（その他アイコン） ＞ オプションをクリックします。
リンクの共有を「オン」にします。
リンクの共有以外を「オフ」にします。
アルバム名の下に「共有中」と表示されます。
「写真を追加」をクリックまたはこの画面に写真をドラッグして画像を追加してください。
画像のアドレスを取得
作成した共有アルバムからサイトに表示させる写真をクリックして画像を開きます。写真を右クリックして「画像のアドレスをコピー」を選択します。
アルバム内の写真が一覧された画面ではなく、必ず写真をクリックして開いてから画像のアドレスをコピーしてください。
HTMLで画像を表示する方法
HTMLで画像を表示するにはimg要素を使います。下記のとおり、右クリックして「貼り付け」を選択し、Googleフォトの共有アルバムからコピーした画像のURLをsrc属性に貼り付けます。
<img src="https://lh3.googleusercontent.com/v...Hk=w1280-h720-no" alt="画像の説明">
src属性では表示する画像ファイルを指定します。必須属性です。alt属性では画像の代替テキストを指定します。音声ソフトの読み上げや画像が表示されない場合など、画像の代わりに指定したテキストが表示されます。必須属性ではありませんが、アクセシビリティ向上のために指定することが強く推奨されています。
URLから挿入した画像はメディアライブラリに保存されません。Googleフォトの共有アルバムから写真を削除したり、アルバムの共有を「オフ」したり、またはアルバムの共有を「オフ」にしてから再度「オン」にしても画像のアドレスが変更されるため、画像は表示されなくなります。
画像のURLパラメータについて
URLパラメータとは、URL末尾に付け加える変数を指します。Googleフォトから取得する画像のアドレスは「パラメータ付きURL」で、URLパラメータを指定することでさまざまな効果を付加できます。https://lh3.googleusercontent.com/v...Hk=w1280-h720-no
URL末尾の「=w1280-h720-no」がパラメータです。以下では、このパラメータを変更します。なお、パラメータをすべて削除しても画像は表示されます。
縦横比を維持して画像を拡大・縮小する
指定する数値（ピクセル）は最大値です。自動で可変しますが、指定したサイズを上回ることはありません。【横幅を指定】
https://lh3.googleusercontent.com/v...Hk=w640
【高さを指定】
https://lh3.googleusercontent.com/v...Hk=h480
【横幅と高さを指定】
https://lh3.googleusercontent.com/v...Hk=w640-h300
【横幅と高さのどちらか大きい辺を指定】
https://lh3.googleusercontent.com/v...Hk=s640
縦横比を維持して画像をトリミングする・その1
画像の中央を基準にトリミングします。【正方形にする】
https://lh3.googleusercontent.com/v...Hk=w640-c
https://lh3.googleusercontent.com/v...Hk=h480-c
https://lh3.googleusercontent.com/v...Hk=s640-c
【横幅と高さを指定】
https://lh3.googleusercontent.com/v...Hk=w640-h300-c
縦横比を維持して画像をトリミングする・その2
画像の「最も興味深い部分」を自動でトリミングします。画像の中央が表示されるとは限りません。【正方形にする】
https://lh3.googleusercontent.com/v...Hk=w640-p
https://lh3.googleusercontent.com/v...Hk=h480-p
https://lh3.googleusercontent.com/v...Hk=s640-p
【横幅と高さを指定】
https://lh3.googleusercontent.com/v...Hk=w640-h300-p
元のサイズで画像を表示する
=s0、=w0、=h0、=w0-h0のように数値を0にすると画像を元のサイズで表示します。https://lh3.googleusercontent.com/v...Hk=s0
画像をダウンロードする
ブラウザにパラメータ付きURLを入力またはリンクをクリックすると、画像ファイルをダウンロードできます。【元のサイズを指定】
https://lh3.googleusercontent.com/v...Hk=d
【サイズを指定】
https://lh3.googleusercontent.com/v...Hk=w640-d
https://lh3.googleusercontent.com/v...Hk=w640-c-d
など