画像を 1 MB に圧縮

読み込みの速さは読者も検索エンジンも気にかけ、画像はたいていページで最も重い要素です。未処理のカメラ写真一枚で 5〜10 MB になり得るので、記事に三枚入れると、モバイル回線のスマホは本文が現れる前に止まります。

各画像を約 1 MB に保つと、ページは軽快に動き、Largest Contentful Paint のような Core Web Vitals の指標に効き、なおノートパソコンや高精細ディスプレイでの全幅トップ画像に十分な解像度を残せます。見栄えと速い読み込みを釣り合わせるサイズです。

1 メガバイトは余裕があるので、見える品質を犠牲にすることはめったにありません。コツは無駄にしないことです。まず画像を、実際に表示される最大の幅に縮小してください。1600 ピクセル幅で表示されるトップ画像は、6000 ピクセルの原本から重さ以外に何も得ません。

それから 1 MB へ向けて圧縮し、Web 向けには WebP を検討してください。たいてい JPG と同じ鮮明さを、はっきり小さいサイズで保ちます。写真、グラデーション、細部の多い場面はどれも 1 MB に余裕で耐えます。損をするのは、圧縮前に縮めすぎた画像だけです。

縮小と再エンコードはブラウザ内で行われるので、未公開の商品写真やブログの下書きは、公開する前に何もアップロードされません。これは禁輸中や顧客の素材を第三者のサーバーから遠ざけ、アップロードを待たずに記事の全画像を一度で処理させます。ファイルはローカルで処理されダウンロードとして返され、アカウントも痕跡もありません。

Web 画像で最大の節約は、品質を下げることよりも、圧縮前に縮小することから来ます。画像が表示される最大の幅を決めてください。全幅のトップ画像が 2000 ピクセルを超えることはまれで、記事内の画像はずっと小さい。まずそこへ縮小します。実際の表示幅に切り詰めた写真は品質に余裕を残して 1 MB に届きますが、6000 ピクセルのままの同じ写真は収めるために押しつぶされ、そこから甘さが生じます。ピクセルをレイアウトに合わせれば、あとの 1 メガバイトは自ずと収まります。幅に迷うなら、テーマやテンプレートの本文カラム幅を見る方が推測より速いです。