エヌロン簡単なことだけどメモしよう
目次
googleフォトの画像をワードプレスに挿入する時 容量を小さくする方法
ワードプレスのメディアに登録してある画像の挿入では使えない。
普段googleフォトの画像をワードプレスに貼り付けてるので、貼り付け後に画像サイズを調整することができる。
貼り付けたままでは容量が大きくてページが重いので、サイズを小さくしてもいい画像には使える。
通常の貼り付け
■HTML
<img class="size-full" src="https://lh3.googleusercontent.com/fXCviFEeW8yByIo5l-sfAnmfaxXILkl0HT_c0MlaRPZUQ_lgGtMDssMdTsB45W_GUojznMkKu--b73fzWDK9wj2WAPqyZzu4PTTracOJO8ccGn3q6HBCTANynWwNIOs6zemZpAFNjwI=w1481-h833-no" alt="そのままの貼り付け画像" width="1481" height="833" /> そのままの貼り付け画像
- w1481-h833
- width=”1481″ height=”833″
画像のサイズは433KB。
ドラッグで縮小のみの画像
画像をクリックで選択して4隅のどこかをマウスでドラックすると、表示サイズを拡大縮小する事ができる。
みんなやってると思う。その画像がこれ
■HTML
<img class="" src="https://lh3.googleusercontent.com/fXCviFEeW8yByIo5l-sfAnmfaxXILkl0HT_c0MlaRPZUQ_lgGtMDssMdTsB45W_GUojznMkKu--b73fzWDK9wj2WAPqyZzu4PTTracOJO8ccGn3q6HBCTANynWwNIOs6zemZpAFNjwI=w1481-h833-no" alt="ドラッグで縮小した画像" width="160" height="90" /> ドラッグで縮小した画像
- w1481-h833
- width=”160″ height=”90″
w1481-h833 の部分は変わっておらず、元画像と同じ。
表示サイズの width=”160″ height=”90″ だけが変わっている。
これは見た目を小さくしているだけで、画像の容量は変わらない。
ページを軽くすることはできない。
画像のサイズは同じ433KB。
ドラッグで好きなサイズに調整後、HTMLをちょっと変更
<img class="" src="https://lh3.googleusercontent.com/fXCviFEeW8yByIo5l-sfAnmfaxXILkl0HT_c0MlaRPZUQ_lgGtMDssMdTsB45W_GUojznMkKu--b73fzWDK9wj2WAPqyZzu4PTTracOJO8ccGn3q6HBCTANynWwNIOs6zemZpAFNjwI=w160-h90-no" alt="そのままの貼り付け画像" width="160" height="90" /> そのままの貼り付け画像
■違う点
- w160-h90
- width=”160″ height=”90″
「w1481-h833」 の部分を手入力で「160」と「90」に変更した。
こうすると呼び出す画像サイズがこのサイズになるため、容量が縮小される。
ページを表示後に画像をダウンロードして容量を確認してみると分かる。
容量を小さくして表示サイズはそのまま
逆にサイズを縮小して、表示は大きくすることも可能。
■HTML
<img class="" src="https://lh3.googleusercontent.com/fXCviFEeW8yByIo5l-sfAnmfaxXILkl0HT_c0MlaRPZUQ_lgGtMDssMdTsB45W_GUojznMkKu--b73fzWDK9wj2WAPqyZzu4PTTracOJO8ccGn3q6HBCTANynWwNIOs6zemZpAFNjwI=w160-h90-no" alt="サイズ縮小拡大表示" width="351" height="197" /> サイズ縮小拡大表示
やる過ぎると画質がかなり荒くなる。
うまく活用してページを軽くしたい。
普段こんなツールも活用してる。「TinyPNG」
画質はほとんど変わらずに容量だけを圧縮してくれる超便利WEBツール。
使い方は簡単で、画像をドラッグしてダウンロードするだけ。
