私が今までWP Adminify& #39; sマーケティングサイトに出荷された単一の最大のパフォーマンス勝利was& #39; tキャッシュプラグインまたはCDN微調整.それは1 つの画像を削除していました.私たちの古いヒーローは2,400pxのPNGスクリーンショットでしたI& #39; dエクスポート " full quality" 私は頑固にPNGが鮮明を意味すると信じていたので.その1 つのファイルは1.4 MBでした.4G上のミッドレンジのAndroidでは、それは最大のコンテンツフルペイント要素でした - そしてそれはLCPを約4.1 秒にドラッグしていた84 KBに交換しました ウェブP 実際のディスプレイ幅では、LCP は同じ午後に 1.9 未満に低下しました。コードはありません。ただ小さな写真だけです。
That's the frustrating thing about image SEO. It's not exotic.画像は通常、ページ上で最も重いものです - 多くの場合、合計バイトの半分に近い - それでも、私たちのほとんどはそれらを後付けで扱います.CMSにカメラ-オリジナル、タイプ" スクリーンショット" にオルタナティブフィールドにドロップし、次に進みます.そして、なぜ私たちは疑問に思います コア Web Vitals 検索コンソールでのレポートはモバイルで赤く染まります。
このガイドは、私が実際に実行しているチェックリストです Toolz.dev そして、クライアントサイト, このものを出荷する誰かの視点から書かれています. I& #39; 無料のツールが何をするかについて正直になりますし、 - 同様に重要な - 彼らが何を& #39; t. 上のすべての画像ツール Toolz.dev ブラウザーで完全に実行されます。 <canvas>、あなたがドロップインするものは、どこにでもアップロードされます。 それはあなたのワークフローに真の影響を与えます。いくつかは良い、1 つの面倒です。 両方に行きます。
tl;dr: 画像のサイズを最初に実際の表示幅に変更してから、圧縮してから最新の形式を提供します。 実際には、3 つのパスがあります。 画像のサイズ変更 ピクセルの寸法をカットするには、 画像圧縮 バイトを絞るには、 フォーマット変換 WebP を取得します。追加
width/heightレイアウトの変更を停止し、人間が口に出して言う代替テキストを書き、フォールドの下に何かを遅延ロードする属性。そうすれば、LCP と CLS は両方とも改善されます。画像主導の 2 つの Core Web Vitals Google は実際にランク付けされます。
なぜ画像が SEO にとって重要なのですか?
3 つのコア Web バイタルのうち 2 つは、イメージの問題が隠されています。最大のコンテンツフル ペイントは、ほとんどのコンテンツ ページで、ヒーロー イメージのダウンロードが終了します。累積レイアウト シフトは、画像のロードが遅れてテキストが 1 行下に押し込まれることが非常に多いです。どちらもランキング入力として確認されており、どちらもより多くのコンテンツを書くことではなく、画像をより適切に処理することで修正できます。
There& #39; s a second traffic channel people forget: Google Images. eコマース、レシピ、旅行、デザインサイトの多くでは、画像検索は有機的な訪問の意味のあるスライスであり、時にはその5 分の1 のトラフィックを完全に依存しているクローラーが読み取ることができるもの - ファイル名、代替テキスト、周囲のコピー、画像がすぐにインデックスに登録できるほど小さいかどうか。
そして、退屈だが現実的なものがあります。帯域幅は、お金と忍耐力がかかります。 3 MB の画像を出荷するページは、モバイル ユーザーがあなたの見出しを見る前に、メーター制の接続でバウンスします。 より高速なページは人々を引き留め、エンゲージメントはどうでもいいが、Google を測定しても問題はありません。
実際にどの画像形式を使用する必要がありますか?
フォーマットの選択は、節約の大部分が存在する場所であり、ルールはフォーマット ウォーがそれらをサウンドにするよりも簡単です。
jpeg は写真のため - 滑らかな勾配と色数千を持つもの. it& #39; s損失、それはまさにあなたが写真のために望むものです.品質75 ~ 85 で圧縮は通常のビューアには見えず、ファイルは元のDon& #39; tハードエッジ、テキスト、または透明度を持つものすべてに使用します。
png ロスレスです スクリーンショット、ロゴ、図、およびフラットな色の領域や透明度を持つものに使用してください キャッチ: 写真の場合、PNGはJPEGと比較してコミカルに大きなファイルを生成します 私の1.4 MBのヒーローミスはまさにこれでした - 写真のようなスクリーンショットをPNGに強制しました。
ウェブP は 2026 年の実際のデフォルトです。 ロスシーとロスレスの両方を実行し、透明度とアニメーションをサポートし、通常、マッチング品質で JPEG よりも 25 ～ 34% 小さくなります。 ブラウザのサポートは、今や普遍的です。 これは、ほとんどすべてを変換する形式です。
avif 圧縮はさらに難しく - 多くの場合、WebP よりも意味のあるほど小さい - なぜなら、それは & #39; s は AV1 ビデオ コーデック上に構築されています。 It& #39; s は素晴らしい形式です。しかし、私はここであなたとまっすぐでなければなりません。なぜなら、多くのガイド (この記事の草案を含む) があなたに " に変換するだけだからです。 AVIF" オンライン ツールを使用すると、ブラウザ キャンバス エンコーディングがどのように機能するかはわかりません。
svg は、ベクトル: アイコン、ロゴ、シンプルなイラストです。 無限にスケーリングし、小さく保ちます。 写真には役に立たない。
誰も言及しない AVIF の警告
正直なところ、これが少しです。 Toolz.dev's フォーマット変換 輸出 PNG、JPEG、または WebPー そしてその3 つだけです. AVIFを出力することができます& #39; t, そして、どちらもほとんどのブラウザ内コンバータはできません. その理由は技術的なものです: ツールはあなたのイメージをaに描画します <canvas> そして電話 canvas.toBlob('image/webp', quality)。 ブラウザのキャンバス エンコーダは JPEG、PNG、および WebP を出荷し、AVIF エンコーダは出荷しません。 したがって、Avif をキャンバスから完全に押し出して、完全に停止する方法はありません。
まだできます フィード AVIF ファイル - ブラウザは AVIF を喜んでデコードします new Image()ということで、AVIF ドロップインは Canvas に表示されます。 1 つだけ取り戻すことはできません。 これは、デコードイン、エンコードアウトの非対称性であり、常に人々をつまずかせます。
私の現実世界のアドバイス: WebP ステップにフォーマット コンバーターを使用してください。これは、勝利の 95% をカバーするものです。 AVIF が最上位にある場合は、ビルド パイプラインで IT を生成します。 sharp、 avifenc、またはsquoosh& #39; sオフラインエンコーダ - that& #39; sは、AVIFがいずれにせよ属している場所, そのエンコーディングが遅いので、あなたはdon& #39; すべての画像のために手でそれをしたいと思いません。
| フォーマット | に最適 | ロスティー？ | Toolz.dev コンバーターは出力できますか? |
|---|---|---|---|
| jpeg | 写真 | はいって | はいって |
| png | スクリーンショット、ロゴ、透明性 | いやー | はいって |
| ウェブP | ほとんどすべて Web 上の | 両方 | はいって |
| avif | 重い画像での最大圧縮 | はいって | いいえ - ビルドツールを使用します |
| svg | アイコン、ロゴ、ベクトル アート | ふふふ | いいえ (キャンバスではなくベクトル) |
品質を壊さずに画像を圧縮するにはどうすればよいですか?
私が最もよく目にする間違いは、間違ったものを間違った順序で圧縮することです。 800px で表示される 4000px の画像を圧縮することは、決して詰める必要のないスーツケースを真空密封するようなものです。 最初にサイズ変更し、次に圧縮します。 いつも。
つまり、ワークフローは次のとおりです。 画像のサイズ変更、画像が実際にレンダリングする最大のサイズに幅を設定します (レイアウトをチェックしてください - ブログのボディ画像は1920 ではなく、720 ~ 800pxであることがよくあります)。 resizerはターゲットボックスの中に収まり、ストレッチやクロップを決して行わないため、アスペクト比は安全です。 次に、その出力を取り込みます 画像圧縮 そして、あなたがちょうどかろうじて知ることができるまで品質を引き下げます - 通常、写真の場合は78 ~ 82 コミットする前にフルズームでプレビュー; アーティファクトはサムネイルではなく、グラデーションと肌の色調で隠れます。
固定すべき数字の 1 つ: 写真コンテンツの場合、品質 80 は退屈で信頼できる答えです。 私は A/B'D 80 対 90 の実際の製品ショットで、100% ズームで優れたモニターを表示すると、ほとんどの人はそれを呼び出すことができません。 しかし、80 は 40% 小さいことがよくあります。 約 60 未満では、滑らかな領域でブロック状のアーティファクトが見られるようになるので、小さなサムネイル以外のすべての床になります。
混乱する 2 つのブラウザの落とし穴
どちらもデバッグに時間がかかるので、無料で学習してください。
透明な PNG → JPEG は、白ではなく背景を黒くします。 透明なロゴをJPEGに変換したところ、透明な部分が真っ黒になってしまいました。ツールが壊れていると思い込み、20分間見つめました。it'sはバグではありません。it'sはHTML仕様です。キャンバスをアルファ チャネル (JPEG) のない形式にシリアル化すると、透明なピクセルが真っ黒に合成されます。透明度が必要な場合は、PNG を維持するか、アルファをサポートする WebP を使用してください。特に白い背景が必要な場合は、最初に白いレイヤーを置きます。
すべての再エンコードは、EXIF および GPS メタデータを再エンコードします。 これらのツールは、新鮮なキャンバスに画像を再描画するため、出力は、EXIFを持っていない、カメラの情報はありません、埋め込まれたGPS座標はありません。 that& #39; s本物のプライバシーの勝利 - you& #39; 誤って写真に刻印されたあなたの携帯電話の緯度/経度を公開していません。しかし、it& #39; sはまた、あなたが埋め込まれたカラープロファイルや著作権メタデータに依存していた場合はgotcha; それらのあまりにも行く.SEOのためにそれはdoes& #39; 重要ではありませんが、それを知っている& #39; sハプニング.
レスポンシブ画像と SRCSET はどのように機能しますか?
電話は、おそらく 390 ピクセル幅で画像をレンダリングします。 1920px ファイルを出荷すると、慎重に圧縮したバイトのほとんどが無駄になります。 srcset ブラウザにサイズのメニューを渡して選択できるようにすることで、これを修正します。
<img
src="product-800.webp"
srcset="product-400.webp 400w,
product-800.webp 800w,
product-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Matte-black wireless headphones on a walnut desk"
width="800" height="600" loading="lazy" />
これらの 3 つのファイルを作成するには、同じソースを実行します。 画像のサイズ変更 400、800、および 1200px で、それぞれを WebP に変換します。 sizes 属性は人々がスキップする部分であり、それをスキップすると静かに全体が壊れます - それなしでは、ブラウザは画像がビューポートを満たしていると仮定し、最大の候補者をつかみ、画像が実際にレンダリングする幅を伝え、それは正しいものをダウンロードします。
実際に役立つ代替テキストをどのように書きますか?
テキストは画像の残りの半分であり、半分の開発者が急いでいます。 一度に 3 つのジョブを実行します。スクリーン リーダーが視覚障害者に読み上げ、それは、クローラーが画像の内容を理解する方法であり、画像の読み込みに失敗した場合のフォールバック テキストです。 正しく理解することは、ほとんどの場合、人のように書くことであり、ロボットのキーワードではありません。
私が使用するルール: describe the image the way you'd describe it to someone on a phone call. specific, natural, short - under about 125 characters so screen readers don't truncate it awkwardly. skip "image of" or "photo of, " because the screen reader already announces that it's an image; leading with those wastes the listener's time.そして、あなたのターゲットキーワードが本当に絵に合うなら、それを一度、自然に含めてください。 if it does't fit, leave it out - a photo of a keyboard does't need "buy cheap wireless headphones" jammed into its alt.
実際のレビューからのいくつかの前/後は、私がやったことを行いました:
alt="image"→alt="Matte-black wireless headphones on a walnut desk"alt="chart"→alt="Bar chart of monthly revenue rising from $10K in January to $45K in December"alt="best cheap headphones buy now free shipping sale"(キーワード詰め込み) →alt="Over-ear headphones with the carrying case open beside them"
人々が誤解するニュアンスの 1 つは、純粋に装飾的な画像 (仕切り、背景の繁栄) には、次のようなニュアンスがあるはずです 空っぽ alt=""、説明ではありません。 空の代替は、スクリーン リーダーに完全にスキップするように指示します。これはまさにあなたが装飾に求めているものです。 情報を運ぶ画像の実際の代替テキストを予約します。
実行中は、ファイルにも説明的に名前を付けます。 wireless-headphones-matte-black.webp ビーツ IMG_4532.jpg 検索エンジンはファイル名をシグナルとして読み込み、ハイフン (アンダースコアではない) は単語の区切りとしての Google パースを区切って区切られているためです。
これは実際に Web のコア バイタルをどの程度変更しますか?
LCP (最大のコンテンツフル ペイント): あなたのヒーローは通常LCP要素です。 、WebPで、品質~80 で、そして - 批判的に - 正しい次元でそれを提供します でないよ 怠惰にロードします。 怠惰な読み込み 上記のヒーローは、古典的な自己所有であり、LCP が測定する正確な要素を遅らせます。 もしそれがヒーローなら <link rel="preload" as="image"> 代わりに。
CLS (累積レイアウト シフト): いつも置く width あんど height オンザに <img>。 これらの 2 つの属性により、ブラウザは画像が到着する前にスペースを確保できるため、読み込み時にテキストがジャンプしないようにします。 これは、最も安価な CLS の修正であり、まだ見つからないサイトを見つけます。
INP (次のペイントへの相互作用): 画像は直接インプを駆動しませんが、3 MB の最適化されていない画像を窒息させるページがメイン スレッドと JavaScript が応答する必要がある容量のネットワークを飢えさせます。 より軽い画像、よりきびきびとした相互作用、間接的に。
いくつかのことを私が学んだ厄介な方法で
最適化する前に監査します。 PageSpeed Insightsを通してページを実行し、最初に最も重いファイルを修正します - 1.2 MBの犯罪者は、アイコンから4 KBを剃るよりも重要です 人間のようにファイルに名前を付けます: wireless-headphones-matte-black.webp ビーツ IMG_4532.jpg 画像検索では、クローラーがコンテンツ信号としてファイル名を読み取るため。 altテキストを書く you& #39; dは、実際に電話で誰かに写真を記述すると言います - 特定の、自然な、キーワード-込み 収まる場所だけ、決してキーワード詰め。そしてドン& #39;あなたのことを忘れないでください オープングラフ 画像を共有する;正しくサイズが決められた 1200×630 画像のサイズ変更 ソーシャル プレビューに表示されるものであり、場合によっては検索します。
よくある質問
画像の最適化は本当に SEO ランキングに影響しますか?
はい、コア Web バイタルを通じて。 LCP と CL は Google ランキング信号で確認されており、どちらも画像主導型です。 画像の最適化は、通常、モバイル ページの速度スコアを大幅に改善し、モバイルではランキングの動きにつながる可能性があります。 また、別のトラフィック ソースとして Google 画像のロックを解除します。
無料のオンライン ツールで画像を AVIF に変換できますか?
通常はそうではありません。Toolz.dev' のフォーマット コンバーターはできません。 ブラウザ内コンバータは、 <canvas>、およびbrowser& #39; s canvasエンコーダは、JPEG、PNG、およびWebPのみを出力します - there& #39; sは、それが利用できるAVIFエンコーダはありません. winのほとんどのためにオンラインでWebPに変換し、必要に応じてsharpやavifencなどのツールを使用してビルドパイプラインでAVIFを生成します。
2026 年に WebP または AVIF を使用する必要がありますか?
WebPは安全なデフォルトであり、私が最初に到達するもの - ユニバーサルサポート、大きな節約、そしてあなたはそれをブラウザで作ることができます AVIFはさらに激しく圧縮し、大きなヒーローとギャラリーの画像を追加する価値がありますが、ビルド時に生成し、それを介して提供します <picture> WebP フォールバック付き。
JPEG と WebP をどのような品質設定に圧縮すればよいですか?
品質 80 は、写真に対する信頼できる答えです。 通常は、通常の表示では元の状態と見分けがつきませんが、劇的には小さくなります。 アーティファクトはグラデーションやスキン トーンで表示されるため、コミットする前に 100% ズームでプレビューします。 60 未満では、圧縮が表示されます。
JPEG に変換した後、透過的な PNG が黒くなったのはなぜですか?
JPEG にはアルファ チャンネルがないためです。 HTML Canvas 仕様では、非アルファ形式にシリアル化すると、透明なピクセルが黒のソリッドに合成されると表示されています。 これはバグではなく、予期される動作です。 画像を PNG または WebP として残して透明度を維持するか、白が必要な場合は最初に白の背景に合成します。
これらのツールは自分の画像をサーバーにアップロードしますか?
いいえ。 Toolz.dev 上の画像ツールは、ブラウザのキャンバス上ですべてをローカルに処理します。ファイルはデバイスから決して離れることはありません。知っておく価値のある副作用です。すべての再エンコードは EXIF および GPS メタデータを剥奪します。これはプライバシーに優れていますが、埋め込まれたカメラ データとカラー プロファイルも削除されることを意味します。
Web イメージの理想的なファイル サイズは?
大まかなターゲットとして: ヒーロー イメージが 200 KB 未満、コンテンツ内イメージは 100 KB 未満、サムネイルは ~30 KB 未満。 実際の表示幅にサイズ変更して WebP を提供すると、これらは非常に達成可能です。正確な数は、サイズ変更、圧縮、そして変換する習慣よりも重要ではありません。
関連する読み物とツール:
- 画像圧縮ーサイズ変更後にファイルサイズをカットします
- 画像のサイズ変更ーレスポンシブサイズとソーシャルイメージを作る
- フォーマット変換- PNG、JPEG、または WebP をエクスポートします
- 開発者のイメージ ツール ガイド
- 画像圧縮の説明
