写真ブログや画像を多用するウェブサイトを運用しているとどうしても避けては通れない壁があります。
何でしょうか、はい。容量です。
ウェブサイトの画像の容量の問題を解決するために、既にimgurやその他の画像クラウドストレージサービスに画像を置いている方も居ると思います。
Google フォトも他と同じく画像用クラウドストレージサービスの1つなのですが、Google フォトにはURLを変更する事で自動でサイズ変更やサムネイル作成のような事が出来て、他のサービスよりも使い勝手が良いです。
そこで、今回はGoogle フォトを使ったブログやウェブサイトの容量問題を解決する方法をご紹介します。
環境
以下の環境を想定して解説しますが、他のブラウザでも同じように出来るはずです。
- Google Chrome
Google フォト
Google フォトとは、Googleが運営する画像に特化した無料のクラウドストレージサービスです。Androidユーザーには割とお馴染みの機能で、最近のAndroidは特に設定しなければ自動でGoogle フォトに写真がバックアップされます。
Google フォト 思い出をすべて無料で保存でき、ファイルは自動的に整理されます。
利用にはGoogleアカウントが必要で、Google Driveの容量を使って画像を保存します。
高画質モードで容量無制限
他の画像用クラウドストレージサービスと1つ異なる点が有って、Google フォトではなんと「高画質モード」では保存容量が無制限なのです。
これは、画像を保存する際にGoogle側の指定した形式に画像を変換する代わりに、保存容量をカウントしないというモードです。最近、「高画質モード」の設定が更に高画質化したため、今ではほとんどオリジナルの画像と見分けのつかない画質で無制限に保存出来るようになりました。
ちなみに、「元のサイズモード」では通常通りGoogle Driveの容量を消費します。
Google フォトで容量問題を解決しよう
Google フォトを開いたら、まず左上の{≡}メニューから設定を開きます。
設定の上の方にある写真と動画のアップロード サイズから高画質を選べば、次回からアップロードされる画像が高画質モード(=容量無制限)で保存されます。
後は、右上の{写真を追加}やドラッグアンドドロップで画像をアップロードして、アップロードした画像を{左クリック}して拡大します。
拡大したら、同じく右上にある{共有}ボタンから、共有用のリンクを取得します。
共有用のリンクが取得出来たら、その画像を所有するGoogleアカウントにログインしていないブラウザからリンクを開き、先ほどと同じように画像を{左クリック}して拡大したら、{右クリック}して画像アドレスをコピーしましょう。
コピーされた画像アドレスは以下のようになります。この画像アドレスをブログに挿入すると、画像を表示する事が可能です。
また、Google フォトにはURLを変更する事で簡単に画像のリサイズを行ってくれる機能があるため、以降で説明します。
https://lh3.googleusercontent.com/k9Zdgzk_LX8vB4XmGX8f_n_a3vtDPzUpmE6eZ2TvoTVoPeXJ0H0SBM5q7yiIedi5r51uPnUEvEX44VdxeI8anbxFEOA4IQ-T_SF1uNZkR4PCYrP8dZZum8zG0lfvI3k2JXuhl9qf2g=w958-h639-no
(その画像を所有するGoogleアカウントにログインしていないブラウザは、Google Chromeやその他のブラウザに搭載されているシークレットウィンドウで十分です。これを行わないと、コピーした画像アドレスが固定の物では無いため、ブログに貼っても後々見れなくなります。)
画像アドレスの編集
Google フォトでは画像アドレスの末尾のパラメータを編集する事で簡単にリサイズやサムネイル作成が行えます。
# =の末尾を編集すると様々な画像が生成出来る
https://lh3.googleusercontent.com/k...g=w958-h639-no
画像をリサイズする
画像をリサイズする方法は大きく分けて3つあります。
縦幅か横幅の大きい方を基準にリサイズ
末尾のパラメータを=sN(Nは整数)とする事で、縦幅と横幅の大きい方の幅をNピクセルとして画像を取得します。
サンプル画像は横幅の方が大きいので、=s200とすると横幅を200ピクセルとして縦幅が自動調整されます。
https://lh3.googleusercontent.com/k...g=s200
縦幅か横幅のどちらかを指定してリサイズ
末尾のパラメータを=wN(横幅, Nは整数)か=hN(縦幅, Nは整数)とすると、指定した方の長さをNピクセルとして画像を取得します。
サンプル画像は横幅の方が大きいので、=s200は大きい方の長さを指定するため、=w200と同じ結果になります。
https://lh3.googleusercontent.com/k...g=w200
https://lh3.googleusercontent.com/k...g=h200
縦幅と横幅を指定してリサイズ
末尾のパラメータを=wN-hMと指定する事で、縦横のどちらも指定された長さの上限を超えないように画像を取得します。
結果は=wNと=hMを単体で指定した時のどちらかとなりますが、縦幅と横幅はどちらも指定された長さを超えないような画像が取得されます。
# =w200とした時に縦幅hが50を超えるので、=h50の画像が取得される
https://lh3.googleusercontent.com/k...g=w200-h50
# =h50とした時に横幅wが50を超えるので、=w50の画像が取得される
https://lh3.googleusercontent.com/k...g=w50-h50
切り出し
先ほどの末尾のパラメータに-cを追加する事で、画像を正方形に切り出します。
# 300x300の画像が取得される
https://lh3.googleusercontent.com/k...g=s200-c
# 同じ結果が得られます
https://lh3.googleusercontent.com/k...g=w200-c
https://lh3.googleusercontent.com/k...g=h200-c
サイズを指定して切り出し
末尾のパラメータを=wN-hM-cと指定する事で、指定されたサイズの画像を切り出します。
# 200x50の画像が取得される
https://lh3.googleusercontent.com/k...g=w200-h50-c
サムネイル作成
末尾のパラメータを-cではなく-pとすると、画像中の注目領域が自動的に選択されて、その周辺が切り抜かれます。
# pを指定した場合
https://lh3.googleusercontent.com/k...g=s200-p
# cを指定した場合
https://lh3.googleusercontent.com/k...g=s200-c
フルサイズで表示
=s0、=w0、=h0のように、長さにゼロを指定すると保存されている最大の長さに自動的に調整されます。
不明なパラメータ
一応、-noというパラメータもあるようですが、効果が良く分かりません。画像が少し大きく表示される。
まとめ
以下が今回紹介したパラメータのまとめです。
| パラメータ | 効果 | 例 |
|---|---|---|
| =sN | 長辺をN画素としてリサイズ | =s200 |
| =wN | 横辺をN画素としてリサイズ | =w200 |
| =hN | 縦辺をN画素としてリサイズ | =h200 |
| =wN-hM | 縦辺と横辺がそれぞれN,M画素を超えないようリサイズ | =w200-h100 |
| =sN-c | 長辺をN画素としてもう片方を切り出し | =s200-c |
| =wN-hM-c | サイズを指定して切り出し | =w200-h100-c |
| =sN-p | 注目領域を中心に切り出し | =s200-p |
| =wN-hM-p | 注目領域を中心にサイズを指定して切り出し | =w200-h100-p |
Google フォトを使いこなして、容量制限とは無縁のウェブページ作成を。