オープニング：WordPressに大きな画像をそのまま入れてはいけない理由
皆さん、こんにちは。Webフリーランスエンジニア、Toshi Seitoです。
ひとりビジネスのためのWeb戦略研究室は、個人事業主やフリーランスに役立つ
Web周りの話から集客に関する話まで、実体験をもとに
皆さんと一緒に考え学んでいく番組です。
今回は、WordPressに大きな画像をそのまま入れないようにしよう
というテーマについて話していこうと思います。
先日なんですが、サイトリニュアルの作業を行っていて
久しぶりにちょっと良くない例として気づいたものがあったので
今回は共有しようと思っています。
皆さんでもできるような対策も今回はお話ししたいと思っていますので
最後まで聞いていただけたら嬉しいです。
ということで、今回はWordPressの話題になります。
1.2GBの衝撃！数年ぶりのサイトリニューアルで起きた異変
先日なんですけども、すでにこの配信時点では
もう終わっている案件だと思うんですけど
WordPressのサイトリニュアルは引き受けていました。
このサイト自体ですね、リニュアルしたサイト自体は
実は制作ですね、一番最初の制作も私の方で担当させてもらって
今回は数年後に仕事のブランディングも含めた改修ということで
ステップアップのリニューアルということで再度お吹き受けしたという感じです。
私はブランディングとかデザインとかはやらないので
もちろんいつものようにデザインパートナーさんと一緒にやったということなんですけど
なので私はもう一回ということだから
サイトの構造というのはある程度わかった上で引き受けているということなんですけど
今回もう一回最新の状態から
サイトをローカル開発関係に持ってくるわけですよね、開発する時に。
その時に気づいたんですけど
サイトのサイズが1.2GB超えだったんですよ。
結構ちょっとびっくりして
1GB以上のワールドプレスっていうのはなかなかなんですよ、一般的に。
私がさっき言った通りリニューアルをして制作を担当して
言ってもそんな数年なわけですし
ブログとかもそんなに書いている印象はなかったんですよ。
だからこんなに1.2GBになるってことはバックアップファイルが紛れ込んだのかなと最初思ったんですけど
どうやらバックアップファイルでもないと。
よく見たら画像だったんですよね。
私は製作する時も基本的にはすごい軽量化を意識していて
本当に画像とかも最小限
これはウェブ製作会社だったらみんなそういうことするんですけどね
私に限らず軽い画像をなるべく圧縮して
崩れないぐらいですね。
解像度が低くないすぎないちょうどいいところにするっていうのが一般的なやり方なわけですけど
軽量だったっていう記憶と1.2GBっていうところのギャップがすごくて
なんでだろうってよくよく見たら
犯人は1枚5MBの画像？SEO業者が投稿した記事の裏側
ブログ記事が入ってたわけですよ。
聞いたらSEO業者さんが入ったと。
なので記事をお任せして作ったっていう話だったんですよ。
よく見たら70記事くらい数があって
確かに記事数もすごい多いから画像もそれなりなのかなと思ったんですけど
でもよくよく考えても記事よく見たら
1記事あたり3枚ぐらいしか使えてない。3枚か2枚ぐらい。
で70記事って単純検査してもギガーとかはいかないんですよ。
頭の中で。
だいたいだって画像って100キロいくかいかないか
っていうようなブログの画像なんか特にそうなんですけど
ブログだっていろんなたくさん画像を使ったりするじゃないですか。
そういう意味では画像をなるべく圧縮して
パッと見れるようにしたいというのがあるから
そんなに容量いかないなと思ったんでよく見てみたら
1枚あたり5メガぐらいあったんですよね。
1枚あたり5メガ。
でこの1枚あたり5メガぐらいの画像を
ボンボンボンってあげるというのは結構
このプロの世界ではありえないと思います。
でそのSU業者さんは別に直接私その連絡とかも知らないし
どこが何やったっていうのはあまり詳しく聞いてないからわからないし
これをその会社さんに何か言うっていうあれもないから
別にいいんですけど
「プロの世界ではあり得ない」雑な画像投稿がもたらす反響
でもこれをXで投稿したんですよこの話を。
で1枚あたり5メガぐらい入ってるのがそのままボンボン置いてあったと。
なので70キジ程度で1ギガ超えっていう話をしたと。
もちろんその投稿の中にはこういうことも書きました。
ページでは使われてないと。
まあこれ意味わかりますかね。
ワードプレスってブログに画像を使いたいときって
一回アップロードってしますよね。
で画像サイズって選べますよねその記事の中で。
だから一番大きいその5メガって言われてるサイズを使わないで
大きい大とか大中小サムネイルみたいなの選べると思うんですけど
要はそのページのサイズに幅サイズに合わせたものを使っていると。
なので例えば1枚5メガのファイルがあったときに
それをそのページで完全に読ませてるわけではないということなんですよ。
ということはですよこれ最初からそのサイズで上げればいいんですよね。
一番大きいサイズをドンと上げてそれを選ぶっていう選択肢ももちろんあります。
一般の方は結構そういうことやりがちなんですけど
言ってもSEO業者さんというかねウェブ製作会社さんに近いような方たちが
こういうことをやってるっていうのはちょっとびっくりしちゃったんですよ。
なのでそれをXで投稿したら割と反響というか私にとっては珍しく
リツイートとかいくつかついたんですよね。
これはちょっとやりすぎだよちょっと雑な作業だよねって私はちょっと思ってしまいました。
私は少なくとも絶対そんなことはしないので
こういうことはなるべくしないでほしいですよね。
後でちょっとなんでこういう大きい画像を入れない方がいいかってお話はしますけど
とにかく結構ツッコミどころが多かったんですよ。
写真はJPEG、イラストはPNG？画像形式の使い分けの基本
ちょっともうちょっとじゃあ具体的にしゃべると
1万円当たり5メガっていうのはそもそもウェブ上に上げるなんていうのは
これウェブ製作会社からしたらありえないですね。
ありえない行為です。
かつその画像もですね2種類あるじゃないですか。
画像っていうカテゴリーの中に例えば写真画像。
もう一個はイラストの画像ありますよね。
写真の画像っていうのはJPEGで基本的にこう
カメラとかでも保存するとJPEGになると思うんですけど
AppleのiPhoneを除いてねあれはJPEGじゃないですよね確か。
でもJPEGで保存されるんですけど
これは画像に特化した写真画像に特化した
圧縮率とかも含めて
ちょうどいい画像サイズになるための拡張紙で
PNG逆に言うとイラストとかなんですよ。
イラストとかでちょうどいい拡張紙
イラストようにできてるようなものなんですけど
これもだから写真画像なのにその5メガって言ってるのは
写真画像なのにPNGが使われてたんですよ。
ってことはですねこれ無駄に容量食ってるんですよ。
最適化されてないから。
なんで多分今5メガって言ったのこれJPEGで保存してれば
多分3メガぐらいになるんじゃないかなって私勝手に思ってます。
わからない計算してないから。
でもそういう感じで最適化されてない画像を
わざわざドンと置いてるという感じなので
これはだから良くないパターンですよね。
良くないと思います。
さっきも言った通りコンテンツ幅って言って
1枚の画像がサーバー上で「5〜6枚」に増殖する仕組み
ブログの最大幅に対して
必要最低限のサイズにすると。
例えばブログで見たら使われてる画像って
800ピクセルちょっとぐらいだったんですよ。
コンテンツ幅ってことは2000ピクセルもいらないんですよ。
まあでも一応補足というか
フォローすると
レティナ画像って言って
Apple用のiPhoneとかって
解像度を2倍で読んだりしたりするんですよ。
2倍で読んでさらに綺麗に見えるような仕組みがあるので
一般的なサイズの倍は取っとこう
みたいなのでもあります実際。
これで最適化されているのは
2048ピクセルぐらいの幅で置いておこうみたいな
2048ピクセルを用意しておけば取れる大丈夫だよみたいなのがあると。
なので一般的に2048ピクセルとかを
一番大きいサイズだとしても置くと。
今回フォローすると
この業者さんは2048ピクセルっていうのは実は守ってたんですよね。
2048ピクセルっていうのは知ってたみたいで
それは上げてたんですよ。
2048ピクセルっていうのはビット帳の
ちょうどいいサイズなんですよ。
ちょうどいいサイズなんですよ。
2の2進数で
コンピューターってやってるんですけど処理するんですけど
その2の何畳みたいな感じですよね。
2、2、4、8、16かな。
1、6、3、2、6、4、1、2、8、2、5、6、5、1、2、
1024みたいな2048みたいな感じで
ちょうどいい幅があるわけですよ。
その2048にはなってたんです実はこの画像。
中途半端に知識があるみたいな感じなんですけど
漢字の容量がめちゃくちゃでかいみたいな感じになってて
しかも使ってないんだみたいな。
なので良くないですね。
そういう感じです。
基本的にそういう大きい画像は
サーバーに上げない方がいいですよというお話です。
解決策①：圧倒的に軽い次世代フォーマット「WebP（ウェッピー）」への変換
本来私はどういうのを使っているかというと
もちろんお客さんにも応じるんですけど
基本的にWebPっていう
ブラウザに特化した画像拡張子があるので
それに変換することもあります。
このサイト全体も実はWebPで作っている中で
PNGでめちゃくちゃでかくなったという
ショックな感じだったんですけどね。
という感じです。
もう一回繰り返しになっちゃうかもしれないんですけど
ページ上では5メガのサイズって使われてないから
ページ読み込み速度自体は
なんだかんだ言っても問題ないというか
Xサーバーとか使っていたので
バリキで何とかしているみたいな表示速度は
あったので
直接すごい影響が出ているかといったらそんなことないのが
絶妙というか避難しがたいという
ちょっと難しいところなんですけど
サーバーにでかい画像は絶対上げちゃいけないです。
これはやっちゃダメです。
じゃあなんで大きい画像を入れちゃいけないかという話を一応しますね。
単純になんですけど
さっきもページでは使われてないけど
別にワードプレス上で選べるんだからいいじゃんって思うのは
いいんですけど
サーバーがどんどん容量食っちゃいます。
ワードプレスの特性上なんですけど
ワードプレスって画像サイズを選べるようになっているんですよね。
画像を1個入れました。
その中でフルのサイズなのか大なのか中小サムネイル
みたいな感じで選べるようになっているから
1枚の画像に対して
サーバー上には4つとか5つとか6つとか
テンプレート専用の画像も作ったりするんですよ。
テンプレートでうまくトリミングした
テンプレートに特化した画像も作っちゃったりするわけですよ。
ワードプレスのテンプレートが。
だからそのテンプレートネットは
ワードプレスの基本サイズ以外にもさらに何個か作っちゃうと
だから1個画像5メガ入れちゃうと
その1個自体が10メガになっちゃう可能性があるんですよ。
それだけで。
なんで今回1.2画とかそんな大した数じゃない画像で
いっちゃってるわけですよ。
これもちょっとある程度理解しなきゃいけないんですよ。
だから最初からやっぱりちっちゃいの入れておかないと
もうなんか指数倍的にでかくなっちゃうと。
サーバーアップアップするとさっき言ったように
解決策②：プラグインで過去の画像を一括圧縮する
1.2ギガとかですよね。
1ギガとかのワードプレスをリニューアルないし
保守とかする時って多分
うちはそこまで厳密じゃないですけど
会社さんによっては値上げとかされる可能性はありますよ。
モードに戻すときにやっぱり時間かかるし
そもそもダウンロードするのもすごい時間かかると。
要はその画像のことを気にしないと
スムーズに作業できないというか
行ったり来たりするのがすごい大変なわけですよ。
なのでそういう意味で
サーバーの中身に画像ボンボコ入れて
必要以上にですよ。
入れることのメリットってないんですよ。
サーバーの容量がいくら使えるかだって
そんなことやっちゃダメなんですよね。
さっき言った通り画像を間違ってフルサイズで
それこそページで読み込ませちゃったら
見るほえ閲覧車もたまったもんじゃないんですよ。
5メガとかも
パケットとか言わないでしょうけど
ダラダラ表示されても困るし
そもそもページの表示速度とかも遅くなる可能性もある。
これもワードプレスで頭賢いから
スクロールして画像の位置に来ないと
読み込み始まらないとかもあったりするので
そこら辺も我々が気にしなくていいところで
上手い具合にやってくれてるからいいんですけど
だからじゃあ大きいのも
サーバーにあげていいかどうかそういうことじゃないと
っていう感じですね。
さらに今回の場合70ページ
蓄積していくと
このペースで言ったらあっという間に2ギガになっちゃう。3ギガになっちゃう。
これもだから保守性が本当に悪くなる。
復元数も大変だし。
だからせっかく
プロの話してるわけで
せっかく聞いてるんであれば
画像は最初パソコンでできる限り小さくしましょう。
2048ぐらいにすると。
この後にしゃべりますけど
圧縮する方法もいくつか紹介します。
とにかくデカい画像を
ドーンと入れることはやめたほうがいいですよと
今回言っておきたいなということです。
Googleも重視する「Core Web Vitals」と表示速度の関係
じゃあすでに大きい画像
入れてましたという人は
どうすればいいかという話ですね。
今回2つ方法をお話ししたいんですけど
まず1つはWEBP
WEBPという拡張紙があります。
これはブラウザに特化した
画像拡張紙なのでめちゃくちゃ軽くなります。
これはアドビス買った人だったら
PhotoshopでWEBP保存できるし
GIMPでもWEBP保存できるんですよ。
そのまま別にWEBPに保存するとすれば
それだけで10分の1ぐらい軽くなります。
2048の幅の5メガぐらいだったら
本当に圧倒的に下がりますよ。
500キロもっと下がると思います。
圧縮の仕方もあるんですけどね。
画像の品質を8割にするとか
そういう圧縮の仕方もいろいろあるんですけど
とにかくめちゃくちゃ小さくなって
全然見栄え変わらないみたいなこともありますので
WEBP保存できる人はやってほしいなと。
しかもWEBPでできる人はって言ったんですけど
サービスがあるんですよ。
私もサービス作ったんですけど
WEBP変換みたいなサービスがあって
そこにブラウザに画像をぶん投げれば
WEBPになってあとはダウンロードするだけみたいな
そういうサービスもあるのでぜひ使ってほしいなと思うし
私も作ったので番組概要欄にあるので
そこからぜひ使ってほしいなと思います。
まずWEBPに変換するという選択肢が一つですね。
ちなみにWEBPの話をすると
これ嫌だっていう会社さんも実はいて
それはずっと伝統的にJPGでずっとやってたから
JPGにしてくれっていう理由だと思うんですけど
WEBPにして多分嫌な思いがあったのかな
数年前まではですよ。
例えば私が経験的に
経験なんですけどiPhone7とかですよね
すっごい古いやつあれだと
7だか6はWEBPに対応してないんですよ
だからアップデートしても
最終のアップデートっていうの
iPhoneのOSでは対応できなかったんですよ
確かWEBPって
だから画像リンク切れみたいな感じになっちゃって見えない
多分その時代のコロナとかだったかな
忘れちゃったんですけどね
その時期の人はまだちょっとWEBPはやめてくれみたいな感じで
それは普通に知ってた人が言ってくれたので
JPGで納品はしたことはありますけど
でも多分今はWEBP見れないのって
これ本当は調べなきゃいけないんでしょうけど
パッと調べてわかんない。相当古いブラウザじゃないと
WEBP表示されないとかないんじゃないかなと思うんですけどね
お客さんが相当古いパソコンを使ってる可能性がある
ということを取引する場合ももちろんゼロじゃないじゃないですか
それがわかってる場合は
最初からJPGにすればいいと思います
JPGで圧縮最低限の画像のサイズにしましょうねって話です
そういうWEBPじゃなくて
JPGにするにしても
すでにWordPressにも画像たくさん入っちゃってるって人も
いらっしゃるじゃないですか
そういう人はどうすればいいかってことなんですけど
エンディング：ユーザーと自分の「保守性」のために画像を軽くしよう
そのWordPressのプラグインで
コンバートフォーメディアとかっていうものがあって
すでに大きいWordPress上に入っている
メディア画像を
今ある中から圧縮するっていうプラグインもあります
それを使ってもいいと思います
結構割とこれは有名なんじゃないですかね
画像量が多すぎてどうしようみたいな人が
よく使うやつなんですよね
これもWEBP変換では確かできて
それを変換すれば軽くなるみたいなのが
確かあったはずです
このやり方についても私ブログで公開するので
これ配信する頃に公開する予定なので
番組概要欄から見て
興味ある人はやってほしいなと思います
容量がそんなに気にならない人は別にいいんですけど
でも容量がいっぱいになってから処理するのめちゃくちゃ大変なんで
結局同じくらいの容量
半分くらいの容量ある段階で
コンバートフォームメディアとか使わないと
当然新しい画像ができちゃうから
いっぱいになってからやったんじゃ遅いですからね
そういうのも気をつけてほしいし
あとはイムサニティっていうものかな
これは新ニセプラグインなんですけど
結構便利で
私コートやってた時はイムサニティは絶対入れてください
っていう風にやってたんですけど
これは画像アップロードさっき言った5メガぐらいのあるじゃないですか
5メガぐらいのやつをボーンと入れるときに
一応最大幅をこんくらい
さっき言った2048
2048っていうサイズにフィックスして
圧縮してアップロードを終わらせる
みたいなプログラムあるんですけど
でもさっきの話だとPNGで
2048で5メガだったんでこれ意味ないですけどね
これ使ったら意味ないですけどね
最初からJPEGにやっぱりしなきゃいけないって話なんですけど
これはだから幅の話なんで
幅とさっきの容量の話はちょっと別だから
イムサニティ使っても今回の話だと意味ないかなって思ったりするんですけど
いずれにしてもプラグインでやる方法もあるので
それは記事で私公開するのでぜひ見てほしいなと思います
容量がどのくらいあるかっていうのもあるとは思うんですけど
でも1個の画像をクリックして
例えばメディアとかですよメディアって左メニューにありますよね
1個いつも入れてる画像どのくらいなんだろうみたいな
あとは別にローカルファイルでもいいですけどローカルファイルでアップロードした画像が
一番あたり何メガぐらいあるんだろうみたいなのを見て
っていうかそうするとメガを入れるっていうのは結構
もう考えられないですねメインビジュアルぐらいですよメガでいいのは
メガサイズ何メガみたいな
メインビジュアルだってめちゃくちゃしのぎを削って
じゃないけどメガなんか入れないですからね
メガサイズの容量の1個ものを
ボンってなんか入れないですからね
これコアウェブバイトルって言って
Googleのスピードページスピードインサイト
っていうページがあってですねGoogle製の
ページ表示速度を測るための
ツールがあるんですよ無料ツールが
それでめちゃくちゃ指摘されますこんなでかい画像
WebPにしなさいみたいな感じで指摘されるものです
でこのコアウェブバイトルって言って
どれだけその利便性が高いかってことですよね
さっき言った重さとかも含めて
見やすいさとかそういうのを測ってくれるページの
その評価システムみたいなのがあるんですけどそれも結構ね
便利なんでこれはこれでまた別のエピソードで
喋ろうと思ってますまあでもいずれにしても今回の話は
大きい画像は入れないようにしましょうねという話を
したかったので今回共有してみました
いかがでしたでしょうか今回は
なぜワードプレスに大きな画像をアップロード
してはいけないのかについて話してきましたがいかがでしたでしょうか
基本的にこのプロのアイデアでは
このWebの世界では画像最小限の夜にしてあげましょう
っていうセオリーがまずあるので
それを一般の方でも一般の方というかねワードプレス
使っている方に何か知ってもらいたいなと思って
今回録音してみましたね
画像をたくさん上げたくなるというか
その大きい画像を面倒くさいんですよね
面倒くさいのはわかりますわざわざ軽くして
一枚一枚やっていくっていうのはすごい面倒くさいですよね
わかるんですけどでもユーザー参加したりとか
自分の保守性ですよね自分のハードディスクもそうですよね
どんどんどんどん詰まっていったら大変じゃないですか
一個一個画像を見るのもそういうのと同じ感覚で
サーバーも軽めの最小限のサイズでやっていく
みたいなことを意識してもらえたら
いいなと思っています
この番組ではご意見ご感想リクエストを受け付けています
番組詳細欄のリンクからお気軽にお送りください
XではハッシュタグWeb戦略研究室を付けて投稿してください
またスポーティファーやアップルフォートキャットでは
レビューもできますのでこちらからご感想など書いていただけたら
励みになりますのでよろしくお願いします
それではまたお会いしましょう
お相手はフリーランスエンジニアのとした伊藤でした
