[{"data":1,"prerenderedAt":1233},["ShallowReactive",2],{"blog-tag-ja-seo":3},[4,220,498,791],{"id":5,"title":6,"author":7,"body":8,"category":201,"coverImage":202,"description":203,"draft":204,"extension":205,"locale":206,"meta":207,"navigation":208,"noindex":204,"path":209,"publishedAt":210,"seo":211,"slug":212,"stem":213,"tags":214,"updatedAt":210,"__hash__":219},"blog\u002Fblog\u002Fogp-image-size-optimization.md","OGP画像のサイズ最適化ガイド｜SNSでキレイに表示される設定と作り方","Zerosend Editorial",{"type":9,"value":10,"toc":193},"minimark",[11,16,20,28,36,39,43,46,51,67,72,83,88,96,101,106,113,116,118,122,125,130,133,138,141,146,157,162,165,167,171,178,181,184,191],[12,13,15],"h2",{"id":14},"ogp画像が崩れる切れる原因はサイズ指定にある","OGP画像が「崩れる」「切れる」原因はサイズ指定にある",[17,18,19],"p",{},"SNSでURLをシェアしたとき、サムネイル画像が途中で切れていたり、極端に小さく表示されたりした経験はないでしょうか。あるいは、自分のサイトをX（旧Twitter）やFacebookに投稿したら、想定と全く違う画像が表示された、というケースもよく聞かれます。",[17,21,22,23,27],{},"こうした問題の多くは、OGP（Open Graph Protocol）画像のサイズが各プラットフォームの仕様と合っていないことが原因です。OGPはHTMLのmetaタグで設定するもので、",[24,25,26],"code",{},"og:image","に指定した画像がSNSカードのサムネイルとして使われます。しかし、画像サイズや縦横比が規定から外れていると、プラットフォーム側でトリミングされたり、表示をスキップされたりします。",[17,29,30,31,35],{},"さらに見落とされがちなのが、",[32,33,34],"strong",{},"ファイルサイズ（容量）の上限","です。画像の縦横ピクセル数が正しくても、ファイルが重すぎるとSNSのクローラーが取得に失敗し、画像なしのカードとして表示されることがあります。OGP画像の最適化は「ピクセル寸法」と「ファイル容量」の両方を意識する必要があります。",[37,38],"hr",{},[12,40,42],{"id":41},"各snsプラットフォームの推奨サイズ一覧","各SNS・プラットフォームの推奨サイズ一覧",[17,44,45],{},"OGP画像の最適なサイズはプラットフォームによって異なります。主要サービスの推奨値をまとめました。",[17,47,48],{},[32,49,50],{},"X（旧Twitter）",[52,53,54,58,61,64],"ul",{},[55,56,57],"li",{},"Summaryカード（小さいサムネイル）：144×144px以上、縦横比1:1",[55,59,60],{},"Summary Card with Large Image（横長サムネイル）：300×157px以上、縦横比2:1",[55,62,63],{},"推奨サイズ：1200×628px",[55,65,66],{},"ファイルサイズ上限：5MB（JPG\u002FPNG\u002FWebP）",[17,68,69],{},[32,70,71],{},"Facebook \u002F Meta",[52,73,74,77,80],{},[55,75,76],{},"最小サイズ：200×200px",[55,78,79],{},"推奨サイズ：1200×630px（縦横比1.91:1）",[55,81,82],{},"推奨ファイルサイズ：1MB以下",[17,84,85],{},[32,86,87],{},"LinkedIn",[52,89,90,93],{},[55,91,92],{},"推奨サイズ：1200×627px",[55,94,95],{},"ファイルサイズ上限：5MB",[17,97,98],{},[32,99,100],{},"Slack \u002F チャットツール",[52,102,103],{},[55,104,105],{},"og:imageを取得してプレビュー表示。1200×630px前後が無難",[17,107,108,109,112],{},"これらを横断的に見ると、",[32,110,111],{},"1200×630px（または1200×628px）"," という解像度がほぼすべてのサービスに対応できる事実上の標準サイズです。縦横比は約1.91:1を維持しつつ、JPEG品質を80〜85程度に抑えてファイルサイズを300KB以内に収めると、どの環境でも安定して表示されます。",[17,114,115],{},"ただし、既存の画像を流用する場合や、デザイン素材が別のアスペクト比で作られている場合は、リサイズ作業が必要になります。",[37,117],{},[12,119,121],{"id":120},"実践ogp画像を正しいサイズにリサイズする手順","実践：OGP画像を正しいサイズにリサイズする手順",[17,123,124],{},"OGP画像のリサイズ自体は難しい作業ではありませんが、いくつか気をつけたいポイントがあります。",[17,126,127],{},[32,128,129],{},"① 元画像の縦横比を確認する",[17,131,132],{},"元画像が正方形（1:1）や縦長の場合、単純にリサイズすると1200×630pxに収まらず、余白が生じたり主要な被写体が切り取られたりします。リサイズ前に、画像をどこを中心にトリミングするかを先に決めておくと作業がスムーズです。",[17,134,135],{},[32,136,137],{},"② 出力形式はJPEGかWebPを選ぶ",[17,139,140],{},"OGP画像には透過（アルファチャンネル）が不要なケースがほとんどです。PNGは品質が高い反面ファイルが重くなりやすいため、JPEGかWebPで書き出すのが現実的です。SNSのクローラーはWebPにも対応していますが、古いクローラーを考慮してJPEGを第一候補にするのが無難です。",[17,142,143],{},[32,144,145],{},"③ ツールを選ぶ：Photoshopがなくても問題ない",[17,147,148,149,156],{},"プロ向けの画像編集ソフトがなくても、ブラウザだけで完結するツールが充実しています。その一つとして ",[150,151,155],"a",{"href":152,"rel":153},"https:\u002F\u002Fzerosend.site\u002Ftools\u002Fimage-resize",[154],"nofollow","画像リサイズツール"," があります。このツールの特徴は、アップロードした画像がサーバーに送信されない点です。画像データはブラウザ内だけで処理されるため、社内資料や未公開のバナー画像を扱う場合でも、情報漏洩リスクを気にせず使えます。縦横のピクセル数を数値で直接指定できるので、1200×630pxに合わせる作業が直感的に行えます。",[17,158,159],{},[32,160,161],{},"④ リサイズ後にOGPキャッシュをクリアする",[17,163,164],{},"画像を差し替えても、SNS側のキャッシュが残っていると古い画像が表示され続けます。Xであれば「Card Validator」、Facebookであれば「Sharing Debugger」を使ってキャッシュを強制更新してください。ツールにURLを入力して「スクレイプ」または「デバッグ」を実行するだけで、新しい画像が反映されます。",[37,166],{},[12,168,170],{"id":169},"ogp画像の最適化がseoにも影響する理由","OGP画像の最適化がSEOにも影響する理由",[17,172,173,174,177],{},"OGPはSNS表示のための仕様であり、Googleの検索順位に直接影響するわけではありません。しかし、",[32,175,176],{},"間接的にSEOへのプラス効果","が期待できます。",[17,179,180],{},"SNSでシェアされたときに魅力的なサムネイルが表示されれば、クリック率が上がり、リンクが拡散されやすくなります。これがサイトへの流入増加につながり、滞在時間や被リンク獲得に好影響を与えます。また、画像ファイルのサイズを適切に絞ることはページの読み込み速度改善に直結し、Googleが重視するCore Web Vitalsの指標（特にLCPやFID）にも貢献します。",[17,182,183],{},"OGP画像を「SNS用の飾り」として後回しにしがちですが、サイトのパフォーマンスとブランド品質を底上げする実務的な施策として捉えると、優先度が変わってくるはずです。",[17,185,186,187,190],{},"まず手元にあるキービジュアルやアイキャッチ画像を1200×630px・300KB以内に整えるところから始めてみてください。専用ソフトが不要な環境であれば、前述した ",[150,188,155],{"href":152,"rel":189},[154]," のようなブラウザベースのツールを活用すると、余計な手間をかけずに作業を完結できます。",[37,192],{},{"title":194,"searchDepth":195,"depth":195,"links":196},"",2,[197,198,199,200],{"id":14,"depth":195,"text":15},{"id":41,"depth":195,"text":42},{"id":120,"depth":195,"text":121},{"id":169,"depth":195,"text":170},"tech",null,"OGP画像の推奨サイズや各SNSの仕様を解説。Twitterやog:imageが正しく表示されない原因と、ブラウザだけで完結する無料ツールを使った具体的な対処法を紹介します。",false,"md","ja",{},true,"\u002Fblog\u002Fogp-image-size-optimization","2026-05-12",{"title":6,"description":203},"ogp-image-size-optimization","blog\u002Fogp-image-size-optimization",[215,216,217,218],"画像","リサイズ","Web制作","SEO","mIit_bdGiULblUiC2FeigxS7qW8uxuS9f-pKvrNhJKM",{"id":221,"title":222,"author":7,"body":223,"category":201,"coverImage":202,"description":487,"draft":204,"extension":205,"locale":206,"meta":488,"navigation":208,"noindex":204,"path":489,"publishedAt":490,"seo":491,"slug":492,"stem":493,"tags":494,"updatedAt":490,"__hash__":497},"blog\u002Fblog\u002Fwebp-convert-seo.md","WebP変換でSEOを改善する方法｜画像最適化の効果と手順を解説",{"type":9,"value":224,"toc":472},[225,229,236,243,250,252,256,259,264,271,274,278,285,289,292,294,298,301,308,321,324,327,329,333,340,343,346,349,356,445,449,452,454,458,461,468],[12,226,228],{"id":227},"画像が重いはseoの大敵見落とされがちなボトルネック","「画像が重い」はSEOの大敵——見落とされがちなボトルネック",[17,230,231,232,235],{},"Webサイトのパフォーマンス改善に取り組む際、JavaScriptの最適化やキャッシュ設定に目が向きがちです。しかし実際には、",[32,233,234],{},"画像ファイルの容量","がページ速度のボトルネックになっているケースが非常に多く見られます。",[17,237,238,239,242],{},"Google Search Consoleや PageSpeed Insights でサイトを計測してみると、「画像を次世代フォーマットで配信してください」という指摘を受けた経験がある方も多いでしょう。ここで言う「次世代フォーマット」とは、主に ",[32,240,241],{},"WebP（ウェブピー）"," のことを指します。",[17,244,245,246,249],{},"JPEGやPNGと比較して、WebPは同等の画質を保ちながらファイルサイズを ",[32,247,248],{},"平均25〜35%程度削減"," できると言われています。この差は、特に画像を多く使うECサイトやブログ、ポートフォリオサイトでは非常に大きなインパクトをもたらします。",[37,251],{},[12,253,255],{"id":254},"webp変換がseoに与える具体的な効果","WebP変換がSEOに与える具体的な効果",[17,257,258],{},"WebPに変換することがSEOにどう効くのか、具体的なポイントを整理してみましょう。",[260,261,263],"h3",{"id":262},"core-web-vitalsのスコアが改善する","① Core Web Vitalsのスコアが改善する",[17,265,266,267,270],{},"Googleは2021年からCore Web Vitals（CWV）を検索順位の評価指標に加えています。その中でも特に重要な ",[32,268,269],{},"LCP（Largest Contentful Paint）"," は、ページ内で最も大きな要素が表示されるまでの時間を測るものです。多くの場合、LCPの対象はメインビジュアルや商品画像など、大きな画像要素です。",[17,272,273],{},"WebPへの変換によってこれらの画像ファイルが軽くなれば、ダウンロード時間が短縮され、LCPスコアが改善します。結果として、Googleからの評価が高まりやすくなります。",[260,275,277],{"id":276},"ページの読み込み速度が体感レベルで上がる","② ページの読み込み速度が体感レベルで上がる",[17,279,280,281,284],{},"SEOの指標改善だけでなく、",[32,282,283],{},"ユーザー体験（UX）"," への直接的な効果も見逃せません。ページの表示が速くなれば直帰率が下がり、セッション時間が延びる傾向があります。Googleはこうしたユーザー行動のシグナルも評価に組み込んでいると考えられており、間接的にSEOへも好影響を与えます。",[260,286,288],{"id":287},"モバイル環境での優位性が上がる","③ モバイル環境での優位性が上がる",[17,290,291],{},"スマートフォンからのアクセスが主流となった現在、モバイル環境でのパフォーマンスは特に重要です。モバイル回線はWi-Fiよりも通信速度が不安定なことが多く、画像の軽量化がより体感しやすい差として現れます。WebPはモバイルファーストインデックスへの対応という観点でも有効な施策です。",[37,293],{},[12,295,297],{"id":296},"実際にどうやってwebpへ変換するか","実際にどうやってWebPへ変換するか",[17,299,300],{},"WebPへの変換方法はいくつかあります。サーバー側でImageMagickやlibwebpを使ってバッチ処理する方法、CMSのプラグインを使う方法、そしてブラウザ上で動作する変換ツールを使う方法などです。",[17,302,303,304,307],{},"サーバー環境を持たない方や、手軽に試してみたい方には、",[32,305,306],{},"ブラウザ上で完結する変換ツール","が最も手軽です。",[17,309,310,311,316,317,320],{},"その選択肢の一つとして、",[150,312,315],{"href":313,"rel":314},"https:\u002F\u002Fzerosend.site\u002Ftools\u002Fimage-convert",[154],"画像形式変換ツール"," があります。このツールの特徴は、",[32,318,319],{},"ファイルをサーバーに送信せず、ブラウザ内だけで処理する","という点です。",[17,322,323],{},"業務で扱う画像の中には、公開前の商品写真や社内資料のスクリーンショットなど、外部に送信したくないものも含まれることがあります。クラウド型のサービスでは、アップロード時にファイルがサーバーを経由するため、情報漏えいのリスクをゼロにはできません。一方、ブラウザ内処理であれば、その心配がありません。",[17,325,326],{},"操作はシンプルで、変換したい画像ファイルをドラッグ＆ドロップし、出力形式としてWebPを選択するだけです。JPEGやPNGはもちろん、複数形式に対応しているため、様々な用途で活用できます。",[37,328],{},[12,330,332],{"id":331},"webp変換を運用に組み込むためのポイント","WebP変換を運用に組み込むためのポイント",[17,334,335,336,339],{},"WebPへの変換は一度やれば終わりではなく、",[32,337,338],{},"継続的な運用","として組み込むことが大切です。",[260,341,342],{"id":342},"既存ページと新規ページの両方に対応する",[17,344,345],{},"まず既存の記事や製品ページに使われている画像を洗い出し、ファイルサイズの大きいものから優先的に変換していきましょう。次に、新規コンテンツを作成する際のルールとして「アップロード前にWebP変換を行う」というフローを定めておくと、徐々に全体の最適化が進みます。",[260,347,348],{"id":348},"ブラウザの対応状況を確認する",[17,350,351,352,355],{},"WebPは主要なモダンブラウザではほぼすべて対応していますが、ごく一部の古いブラウザでは表示されない場合があります。HTMLの ",[24,353,354],{},"\u003Cpicture>"," タグを使ってWebPとJPEGをフォールバックとして両方指定する方法が、安全性の高い実装です。",[357,358,362],"pre",{"className":359,"code":360,"language":361,"meta":194,"style":194},"language-html shiki shiki-themes github-light github-dark","\u003Cpicture>\n  \u003Csource srcset=\"image.webp\" type=\"image\u002Fwebp\">\n  \u003Cimg src=\"image.jpg\" alt=\"説明テキスト\">\n\u003C\u002Fpicture>\n","html",[24,363,364,380,409,435],{"__ignoreMap":194},[365,366,369,373,377],"span",{"class":367,"line":368},"line",1,[365,370,372],{"class":371},"sVt8B","\u003C",[365,374,376],{"class":375},"s9eBZ","picture",[365,378,379],{"class":371},">\n",[365,381,382,385,388,392,395,399,402,404,407],{"class":367,"line":195},[365,383,384],{"class":371},"  \u003C",[365,386,387],{"class":375},"source",[365,389,391],{"class":390},"sScJk"," srcset",[365,393,394],{"class":371},"=",[365,396,398],{"class":397},"sZZnC","\"image.webp\"",[365,400,401],{"class":390}," type",[365,403,394],{"class":371},[365,405,406],{"class":397},"\"image\u002Fwebp\"",[365,408,379],{"class":371},[365,410,412,414,417,420,422,425,428,430,433],{"class":367,"line":411},3,[365,413,384],{"class":371},[365,415,416],{"class":375},"img",[365,418,419],{"class":390}," src",[365,421,394],{"class":371},[365,423,424],{"class":397},"\"image.jpg\"",[365,426,427],{"class":390}," alt",[365,429,394],{"class":371},[365,431,432],{"class":397},"\"説明テキスト\"",[365,434,379],{"class":371},[365,436,438,441,443],{"class":367,"line":437},4,[365,439,440],{"class":371},"\u003C\u002F",[365,442,376],{"class":375},[365,444,379],{"class":371},[260,446,448],{"id":447},"変換後はpagespeed-insightsで効果を確認する","変換後はPageSpeed Insightsで効果を確認する",[17,450,451],{},"変換前後でPageSpeed Insightsのスコアを比較することで、改善の効果を数値として確認できます。特にモバイルのスコアに注目しながら、優先度の高いページから順に対応を進めると効率的です。",[37,453],{},[12,455,457],{"id":456},"まとめ小さな変換が大きな差を生む","まとめ——小さな変換が、大きな差を生む",[17,459,460],{},"WebPへの変換は、特別な技術知識がなくても取り組めるSEO改善施策の一つです。ファイルサイズを削減することで、Core Web Vitalsの改善、ページ速度の向上、そしてユーザー体験の向上につながります。",[17,462,463,464,467],{},"「まずは手元の画像を一枚変換してみる」という小さな一歩から始めることが、継続的な改善への入り口になります。プライバシーを気にしながら手軽に試したい方は、ブラウザ内処理で動作する ",[150,465,315],{"href":313,"rel":466},[154]," を一度使ってみてください。ツールを使った体験を通じて、変換の効果を実感するのが一番の近道です。",[469,470,471],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":194,"searchDepth":195,"depth":195,"links":473},[474,475,480,481,486],{"id":227,"depth":195,"text":228},{"id":254,"depth":195,"text":255,"children":476},[477,478,479],{"id":262,"depth":411,"text":263},{"id":276,"depth":411,"text":277},{"id":287,"depth":411,"text":288},{"id":296,"depth":195,"text":297},{"id":331,"depth":195,"text":332,"children":482},[483,484,485],{"id":342,"depth":411,"text":342},{"id":348,"depth":411,"text":348},{"id":447,"depth":411,"text":448},{"id":456,"depth":195,"text":457},"WebPへの変換がSEOに与える効果を具体的に解説。ページ速度の改善やCore Web Vitalsへの影響、無料ツールを使った実践的な変換手順まで分かりやすく紹介します。",{},"\u002Fblog\u002Fwebp-convert-seo","2026-05-07",{"title":222,"description":487},"webp-convert-seo","blog\u002Fwebp-convert-seo",[218,495,496,217],"変換","Core Web Vitals","ohRygyiARrZiiJTtMjcj1pIeCMmom8JQlMu5cJV0TS8",{"id":499,"title":500,"author":7,"body":501,"category":201,"coverImage":202,"description":781,"draft":204,"extension":205,"locale":206,"meta":782,"navigation":208,"noindex":204,"path":783,"publishedAt":784,"seo":785,"slug":786,"stem":787,"tags":788,"updatedAt":784,"__hash__":790},"blog\u002Fblog\u002Fcore-web-vitals-image-compress.md","Core Web Vitals を改善する画像圧縮の方法と実践ステップ",{"type":9,"value":502,"toc":775},[503,507,510,529,532,535,542,544,547,550,606,609,620,623,625,629,636,648,651,681,684,686,689,692,697,722,727,764,767,770,772],[12,504,506],{"id":505},"core-web-vitals-と画像の関係を正しく理解する","Core Web Vitals と画像の関係を正しく理解する",[17,508,509],{},"Googleが検索ランキングの評価指標として採用している「Core Web Vitals」は、大きく3つの指標で構成されています。",[52,511,512,517,523],{},[55,513,514,516],{},[32,515,269],{},"：ページ内の最も大きなコンテンツが表示されるまでの時間",[55,518,519,522],{},[32,520,521],{},"INP（Interaction to Next Paint）","：ユーザー操作に対する応答速度",[55,524,525,528],{},[32,526,527],{},"CLS（Cumulative Layout Shift）","：レイアウトのずれ具合",[17,530,531],{},"このうち、画像が直接影響するのは主にLCPです。ページを開いたときに最初に目に入る大きな画像（ヒーローイメージやメインビジュアルなど）がLCPの対象になることが多く、その画像ファイルが重いほど表示に時間がかかり、スコアが下がります。",[17,533,534],{},"Googleが定めるLCPの合格ラインは「2.5秒以内」。これを超えると「改善が必要」と判定され、検索順位にも悪影響が出る可能性があります。",[17,536,537,538,541],{},"ブログやコーポレートサイトを運営しているWeb担当者の方から「PageSpeed Insightsで低スコアが出たけど何をすればいいのかわからない」という声をよく聞きます。そのほとんどのケースで、",[32,539,540],{},"画像の最適化が最も効果的な改善策","になります。",[37,543],{},[12,545,546],{"id":546},"画像圧縮で改善できるスコアの目安",[17,548,549],{},"画像圧縮の効果は、元のファイルサイズによって大きく変わります。一般的な傾向として以下のような改善が見込めます。",[551,552,553,569],"table",{},[554,555,556],"thead",{},[557,558,559,563,566],"tr",{},[560,561,562],"th",{},"元のファイルサイズ",[560,564,565],{},"圧縮後の目安",[560,567,568],{},"LCPへの効果",[570,571,572,584,595],"tbody",{},[557,573,574,578,581],{},[575,576,577],"td",{},"3MB以上",[575,579,580],{},"300KB〜500KB程度",[575,582,583],{},"大きく改善",[557,585,586,589,592],{},[575,587,588],{},"1MB前後",[575,590,591],{},"100KB〜200KB程度",[575,593,594],{},"中程度改善",[557,596,597,600,603],{},[575,598,599],{},"500KB以下",[575,601,602],{},"50KB〜100KB程度",[575,604,605],{},"微改善〜維持",[17,607,608],{},"デジタルカメラやスマートフォンで撮影した画像は、何も処理しないと3〜8MB程度になることがよくあります。そのままWebサイトに掲載すると、モバイル回線のユーザーにとっては表示まで数秒かかることも珍しくありません。",[17,610,611,612,615,616,619],{},"また、画像圧縮はLCPだけでなくCLSにも間接的に効果があります。画像に",[24,613,614],{},"width","と",[24,617,618],{},"height","属性を設定したうえでファイルサイズを適切に管理すると、読み込み中のレイアウトずれを防ぎやすくなります。",[17,621,622],{},"PageSpeed Insightsで「適切なサイズの画像」「次世代フォーマットでの画像の配信」「効率的な画像エンコード」などの警告が出ている場合は、まず画像圧縮から取り組むのが王道です。",[37,624],{},[12,626,628],{"id":627},"実践ブラウザだけで完結する画像圧縮の手順","実践：ブラウザだけで完結する画像圧縮の手順",[17,630,631,632,635],{},"画像圧縮ツールは数多くありますが、業務で使う場合に気になるのが",[32,633,634],{},"ファイルのプライバシー","です。社内資料の画像や顧客の写真をアップロードする際、そのデータがサーバーに保存・収集されていないかどうかは確認しておきたいポイントです。",[17,637,638,643,644,647],{},[150,639,642],{"href":640,"rel":641},"https:\u002F\u002Fzerosend.site\u002Ftools\u002Fimage-compress",[154],"ZeroSend の画像圧縮ツール","は、ファイルをサーバーに送信せず、",[32,645,646],{},"ブラウザ内だけで処理を完結","させる設計になっています。アップロードした画像が外部に送信されることはないため、社内ルールが厳しい職場でも安心して使いやすいのが特徴です。",[17,649,650],{},"使い方はシンプルです。",[652,653,654,663,669,675],"ol",{},[55,655,656,659,662],{},[32,657,658],{},"ツールにアクセスする",[150,660,640],{"href":640,"rel":661},[154]," をブラウザで開きます。インストール不要です。",[55,664,665,668],{},[32,666,667],{},"画像ファイルを選択する","\nJPEG・PNG・WebPなど主要なフォーマットに対応しています。ドラッグ＆ドロップでも選択できます。",[55,670,671,674],{},[32,672,673],{},"圧縮品質を調整する","\nスライダーで圧縮率を調整できます。品質を下げすぎると画像が荒くなるため、まずは「品質70〜80%」を目安に試してみてください。多くのケースでこの範囲でもビジュアル上の劣化はほとんど気になりません。",[55,676,677,680],{},[32,678,679],{},"ダウンロードして使用する","\n圧縮後のファイルをダウンロードして、そのままWebサイトにアップロードできます。",[17,682,683],{},"処理はすべてローカルで行われるため、通信環境に関わらず速く動作し、データが外部に出ることもありません。",[37,685],{},[12,687,688],{"id":688},"画像圧縮の前後に確認すべきチェックリスト",[17,690,691],{},"圧縮するだけで終わりにしてしまうと、せっかくの改善効果が半減することがあります。以下のチェックリストを参考に、一連の対応を整理してみてください。",[17,693,694],{},[32,695,696],{},"圧縮前に確認すること",[52,698,701,710,716],{"className":699},[700],"contains-task-list",[55,702,705,709],{"className":703},[704],"task-list-item",[706,707],"input",{"disabled":208,"type":708},"checkbox"," PageSpeed Insights（またはLighthouse）でLCPの対象要素を特定する",[55,711,713,715],{"className":712},[704],[706,714],{"disabled":208,"type":708}," 改善対象の画像ファイルサイズを把握する（100KB以上なら圧縮優先）",[55,717,719,721],{"className":718},[704],[706,720],{"disabled":208,"type":708}," 表示サイズに対して必要以上に大きな解像度になっていないか確認する（例：横幅800pxで表示しているのに3000px幅の画像を使っていないか）",[17,723,724],{},[32,725,726],{},"圧縮後に確認すること",[52,728,730,736,748,758],{"className":729},[700],[55,731,733,735],{"className":732},[704],[706,734],{"disabled":208,"type":708}," 視覚的な品質が許容範囲に収まっているか確認する",[55,737,739,741,742,744,745,747],{"className":738},[704],[706,740],{"disabled":208,"type":708}," 画像タグに",[24,743,614],{},"・",[24,746,618],{},"属性が設定されているか確認する（CLSの防止）",[55,749,751,753,754,757],{"className":750},[704],[706,752],{"disabled":208,"type":708}," 可能であれば",[24,755,756],{},"loading=\"lazy\"","を設定する（ファーストビュー外の画像に有効）",[55,759,761,763],{"className":760},[704],[706,762],{"disabled":208,"type":708}," 再度PageSpeed Insightsでスコアを計測して改善幅を確認する",[17,765,766],{},"画像圧縮は一度やれば終わりではありません。新しいページを追加するたびに同じ基準で対応する習慣をつけると、Core Web Vitalsのスコアを継続的に維持できます。",[17,768,769],{},"また、今後Webサイトに掲載する画像は、撮影・制作の段階からファイルサイズを意識しておくと後の作業が楽になります。「Web用に書き出す」「解像度は72dpiで十分」といった基準を制作フローに組み込んでおくことをおすすめします。",[37,771],{},[17,773,774],{},"Core Web Vitalsの改善は、一見難しそうに感じますが、画像圧縮という具体的なアクションから着手するのが最も効果を実感しやすい方法です。ツールの導入コストも時間もほとんどかからないため、まずは今のサイトの画像を一度確認してみてください。",{"title":194,"searchDepth":195,"depth":195,"links":776},[777,778,779,780],{"id":505,"depth":195,"text":506},{"id":546,"depth":195,"text":546},{"id":627,"depth":195,"text":628},{"id":688,"depth":195,"text":688},"Core Web Vitals のスコアを下げる画像の重さを解消する方法を解説。ブラウザだけで完結する無料ツールを使った実践的な改善ステップを紹介します。",{},"\u002Fblog\u002Fcore-web-vitals-image-compress","2026-05-05",{"title":500,"description":781},"core-web-vitals-image-compress","blog\u002Fcore-web-vitals-image-compress",[215,789,218,496],"圧縮","UwuTfke-zayrzyjzA0lR0uobGodScG9hVZstptUy0MI",{"id":792,"title":793,"author":7,"body":794,"category":201,"coverImage":202,"description":1223,"draft":204,"extension":205,"locale":206,"meta":1224,"navigation":208,"noindex":204,"path":1225,"publishedAt":1226,"seo":1227,"slug":1228,"stem":1229,"tags":1230,"updatedAt":1231,"__hash__":1232},"blog\u002Fblog\u002Fimage-compress-guide.md","オンライン画像圧縮 完全ガイド 2026 — 画質を落とさず最大限軽くする方法",{"type":9,"value":795,"toc":1191},[796,804,807,811,818,822,825,828,832,846,849,853,860,870,874,888,895,899,903,910,913,995,1002,1006,1013,1017,1028,1035,1039,1046,1050,1057,1060,1064,1067,1082,1085,1092,1095,1098,1102,1121,1124,1128,1146,1149,1153,1160,1163,1170,1174,1181,1184],[17,797,798,799,803],{},"Web サイトに画像を載せるとき、「軽くしたいけど画質は落としたくない」という悩みは共通です。本記事では、画像圧縮の基本と実用的なコツ、そしてファイルをサーバーに預けずに処理できる ",[150,800,802],{"href":801},"\u002Ftools\u002Fimage-compress","Zerosend の画像圧縮ツール"," の使い方を整理します。",[12,805,806],{"id":806},"なぜ画像圧縮が必要か",[260,808,810],{"id":809},"表示速度と-seo-core-web-vitals","表示速度と SEO (Core Web Vitals)",[17,812,813,814,817],{},"Google の Core Web Vitals では、ページ内の最大コンテンツの表示時間 (LCP) を評価軸にしています。LCP の遅延原因の多くは",[32,815,816],{},"巨大な画像","です。未圧縮の写真を 1 枚置くだけで、モバイル回線ではページ全体の表示が数秒遅れます。検索順位にも影響します。",[260,819,821],{"id":820},"サーバー費用ストレージ節約","サーバー費用・ストレージ節約",[17,823,824],{},"画像 1 枚あたり数 MB を 100 枚置けば数 GB。配信帯域・ストレージ・CDN 費用は使い手がその画像を見る回数だけ上乗せで発生します。初期の圧縮コストをサボるほど、後でお金と速度の両方で払うことになります。",[12,826,827],{"id":827},"主要な画像フォーマットと圧縮方式",[260,829,831],{"id":830},"jpg-と-png-の使い分け","JPG と PNG の使い分け",[52,833,834,840],{},[55,835,836,839],{},[32,837,838],{},"JPG",": 写真向け。非可逆圧縮 (情報を捨てて軽くする)。透過不可。",[55,841,842,845],{},[32,843,844],{},"PNG",": ロゴ・スクリーンショット・透過が必要な画像向け。可逆圧縮。",[17,847,848],{},"写真を PNG で保存すると JPG の 5〜10 倍の容量になります。まずこの判断を間違えないこと。",[260,850,852],{"id":851},"webp-avif-の現在地","WebP \u002F AVIF の現在地",[17,854,855,856,859],{},"2026 年時点では ",[32,857,858],{},"WebP は実質全ブラウザで使えます","。AVIF も主要ブラウザが対応済みで、JPG の 2〜3 割小さい容量を実現できます。",[17,861,862,863,865,866,869],{},"互換性が不安なら、WebP を第一選択にしつつ、フォールバックで JPG \u002F PNG を用意するのが安全です。",[24,864,354],{}," タグの ",[24,867,868],{},"srcset"," で自動切替できます。",[260,871,873],{"id":872},"可逆圧縮-vs-非可逆圧縮","可逆圧縮 vs 非可逆圧縮",[52,875,876,882],{},[55,877,878,881],{},[32,879,880],{},"可逆 (lossless)",": ファイルを小さくするが画質は 1 ピクセルも失わない。PNG \u002F WebP lossless \u002F AVIF lossless。",[55,883,884,887],{},[32,885,886],{},"非可逆 (lossy)",": 人間の目に目立ちにくい情報を捨てて大幅に軽くする。JPG \u002F WebP lossy \u002F AVIF。",[17,889,890,891,894],{},"Web 配信用は",[32,892,893],{},"基本的に非可逆で十分","。ロゴやイラストのような「元画像が重要」なものだけ可逆を選びます。",[12,896,898],{"id":897},"画質を落とさず圧縮する-5-つのコツ","画質を落とさず圧縮する 5 つのコツ",[260,900,902],{"id":901},"_1-品質-8085-の黄金点","1. 品質 80〜85 % の黄金点",[17,904,905,906,909],{},"JPG の品質設定は 100% ではなく ",[32,907,908],{},"85% がベスト","です。体感の画質差はほぼ分かりませんが、ファイルサイズは 100% の約 40% まで落ちます。70% まで下げると輪郭にノイズが出始めるので、そこが下限の目安です。",[17,911,912],{},"具体的な目安は次の通りです (元画像比のおおよその容量)。",[551,914,915,928],{},[554,916,917],{},[557,918,919,922,925],{},[560,920,921],{},"品質",[560,923,924],{},"体感画質",[560,926,927],{},"容量目安 (元比)",[570,929,930,941,951,962,973,984],{},[557,931,932,935,938],{},[575,933,934],{},"100",[575,936,937],{},"最高",[575,939,940],{},"100%",[557,942,943,946,948],{},[575,944,945],{},"95",[575,947,937],{},[575,949,950],{},"70%",[557,952,953,956,959],{},[575,954,955],{},"85",[575,957,958],{},"ほぼ最高",[575,960,961],{},"40%",[557,963,964,967,970],{},[575,965,966],{},"75",[575,968,969],{},"良好",[575,971,972],{},"30%",[557,974,975,978,981],{},[575,976,977],{},"60",[575,979,980],{},"ノイズが見え始める",[575,982,983],{},"22%",[557,985,986,989,992],{},[575,987,988],{},"40",[575,990,991],{},"明らかに劣化",[575,993,994],{},"15%",[17,996,997,998,1001],{},"85% より上は容量効率が悪く、これより下はブロックノイズが目立ち始めます。",[32,999,1000],{},"85% が黄金点","である理由がここにあります。",[260,1003,1005],{"id":1004},"_2-不要なメタデータを削る","2. 不要なメタデータを削る",[17,1007,1008,1009,1012],{},"スマホで撮った写真には EXIF (撮影日時・GPS 位置情報・カメラ機種) が埋め込まれています。サイズ的にわずか数十 KB ですが、",[32,1010,1011],{},"プライバシー面でも削るべき","です。Zerosend の画像圧縮は保存時に EXIF を自動で除去します。",[260,1014,1016],{"id":1015},"_3-画像サイズを先にリサイズ","3. 画像サイズを先にリサイズ",[17,1018,1019,1020,1023,1024,1027],{},"圧縮前に画像サイズ (ピクセル) を表示サイズに合わせることが、品質と容量を両立する最強の施策です。300px で表示する画像を 3000px のまま圧縮しても、帯域の無駄でしかありません。",[150,1021,155],{"href":1022},"\u002Ftools\u002Fimage-resize"," で",[32,1025,1026],{},"先に縮めてから","圧縮してください。",[17,1029,1030,1031,1034],{},"なお、",[32,1032,1033],{},"元画像より大きいサイズに拡大しても画質は上がりません","。800px の画像を 1600px にリサイズすると、補間で輪郭がぼやけるだけで情報量は増えません。リサイズは「元画像の最大サイズを上限」にして縮小方向だけに使うのが鉄則です。",[260,1036,1038],{"id":1037},"_4-複数ツールを重ねがけしない","4. 複数ツールを重ねがけしない",[17,1040,1041,1042,1045],{},"非可逆圧縮は毎回わずかに画質が落ちます。「JPG を圧縮 → またアップ → また圧縮」を繰り返すと、ジワジワ劣化が積み重なります。元画像から ",[32,1043,1044],{},"1 回だけ"," 圧縮する運用にしましょう。",[260,1047,1049],{"id":1048},"_5-重要な画像だけ手動で確認","5. 重要な画像だけ手動で確認",[17,1051,1052,1053,1056],{},"自動処理で全部済ませてよい画像と、見出し画像やアイキャッチのように",[32,1054,1055],{},"手動で結果を確認すべき画像","を分けます。後者は品質 85% に加えて、元画像とのスライダー比較を挟むと事故を防げます。",[12,1058,1059],{"id":1059},"オンライン画像圧縮ツールの選び方",[260,1061,1063],{"id":1062},"アップロードされるされないを見分ける","アップロードされる\u002Fされないを見分ける",[17,1065,1066],{},"「オンラインで無料で使える」と謳うツールの多くは、一度ファイルをサーバーに送って処理しています。画像のロゴや社内資料では、これが問題になる場面があります。",[17,1068,1069,1070,1073,1074,1077,1078,1081],{},"見分け方はシンプルです。ブラウザの ",[32,1071,1072],{},"DevTools を開き Network タブを表示","してからツールを使ってみてください。アップロード時に大きなデータを伴う POST リクエストが出ていれば、そのツールは送信型です。",[150,1075,1076],{"href":801},"Zerosend の画像圧縮"," はこの検証で",[32,1079,1080],{},"送信ゼロ","が確認できます。",[260,1083,1084],{"id":1084},"画質コントロールの柔軟性",[17,1086,1087,1088,1091],{},"品質スライダーがあるか、形式を選べるか、出力プレビューがあるかは必ずチェックしましょう。プリセット一択のツールは",[32,1089,1090],{},"過剰圧縮","に陥りがちです。",[260,1093,1094],{"id":1094},"バッチ処理に対応しているか",[17,1096,1097],{},"1 枚ずつでは時間がかかる業務向けに、複数ファイルの一括処理 + ZIP ダウンロードに対応したツールを選びます。",[12,1099,1101],{"id":1100},"zerosend-でブラウザ内完結の画像圧縮をする手順","Zerosend でブラウザ内完結の画像圧縮をする手順",[652,1103,1104,1109,1112,1115,1118],{},[55,1105,1106,1108],{},[150,1107,801],{"href":801}," にアクセス",[55,1110,1111],{},"画像をドラッグ&ドロップ (JPG \u002F PNG \u002F WebP、複数可)",[55,1113,1114],{},"品質スライダーを調整 (推奨は 80)",[55,1116,1117],{},"「圧縮する」ボタン",[55,1119,1120],{},"1 枚ならそのまま、複数なら ZIP でダウンロード",[17,1122,1123],{},"すべての処理がブラウザ内で完結するので、機密画像も安心して扱えます。",[260,1125,1127],{"id":1126},"devtools-の-network-タブで検証する方法","DevTools の Network タブで検証する方法",[652,1129,1130,1133,1136,1139],{},[55,1131,1132],{},"圧縮する前に DevTools を開く (右クリック → 検証)",[55,1134,1135],{},"Network タブに切り替え、「Preserve log」をオンに",[55,1137,1138],{},"画像をドラッグ&ドロップして処理を走らせる",[55,1140,1141,1142,1145],{},"表示される通信が CDN \u002F GA \u002F AdSense だけで、",[32,1143,1144],{},"画像自体を POST している通信がない"," ことを確認",[12,1147,1148],{"id":1148},"よくある落とし穴",[260,1150,1152],{"id":1151},"透過-png-が白背景になる","透過 PNG が白背景になる",[17,1154,1155,1156,1159],{},"JPG は透過を扱えません。PNG の透過画像を「形式変換: JPG」で処理すると、透過部分が白で埋まります。透過を保ちたい場合は PNG のまま \u002F WebP に変換してください。",[150,1157,315],{"href":1158},"\u002Ftools\u002Fimage-convert"," を参照。",[260,1161,1162],{"id":1162},"圧縮後に色がくすむ",[17,1164,1165,1166,1169],{},"sRGB 以外のプロファイル (Adobe RGB \u002F Display P3) で保存された画像は、非対応ブラウザで色がくすんで見えることがあります。Web 配信は ",[32,1167,1168],{},"sRGB に統一","するのが無難です。",[260,1171,1173],{"id":1172},"sns-側で再圧縮される","SNS 側で再圧縮される",[17,1175,1176,1177,1180],{},"Twitter \u002F Instagram \u002F LINE では、投稿された画像がプラットフォーム側でさらに圧縮されます。自分で極限まで圧縮するよりも、",[32,1178,1179],{},"そこそこで止めて SNS の再圧縮に任せる","方が綺麗に見えるケースもあります。",[12,1182,1183],{"id":1183},"まとめ",[17,1185,1186,1187,1190],{},"画像圧縮は「JPG 品質 85% を目安に、先にリサイズ、メタデータは削る」の 3 原則で大半がうまくいきます。Zerosend の画像圧縮は、この原則をブラウザ内で実現します。機密画像でも気兼ねなく使えるので、",[150,1188,1189],{"href":801},"試してみてください","。",{"title":194,"searchDepth":195,"depth":195,"links":1192},[1193,1197,1202,1209,1214,1217,1222],{"id":806,"depth":195,"text":806,"children":1194},[1195,1196],{"id":809,"depth":411,"text":810},{"id":820,"depth":411,"text":821},{"id":827,"depth":195,"text":827,"children":1198},[1199,1200,1201],{"id":830,"depth":411,"text":831},{"id":851,"depth":411,"text":852},{"id":872,"depth":411,"text":873},{"id":897,"depth":195,"text":898,"children":1203},[1204,1205,1206,1207,1208],{"id":901,"depth":411,"text":902},{"id":1004,"depth":411,"text":1005},{"id":1015,"depth":411,"text":1016},{"id":1037,"depth":411,"text":1038},{"id":1048,"depth":411,"text":1049},{"id":1059,"depth":195,"text":1059,"children":1210},[1211,1212,1213],{"id":1062,"depth":411,"text":1063},{"id":1084,"depth":411,"text":1084},{"id":1094,"depth":411,"text":1094},{"id":1100,"depth":195,"text":1101,"children":1215},[1216],{"id":1126,"depth":411,"text":1127},{"id":1148,"depth":195,"text":1148,"children":1218},[1219,1220,1221],{"id":1151,"depth":411,"text":1152},{"id":1162,"depth":411,"text":1162},{"id":1172,"depth":411,"text":1173},{"id":1183,"depth":195,"text":1183},"画像圧縮で画質を落とさず最大限軽くするための実用テクと、ファイルをサーバーに送らずブラウザだけで圧縮する方法を解説。品質 85% の黄金点・フォーマット選び・リサイズとの順序まで。",{},"\u002Fblog\u002Fimage-compress-guide","2026-04-19",{"title":793,"description":1223},"image-compress-guide","blog\u002Fimage-compress-guide",[215,218,496],"2026-05-14","WgkSGzLGGIWj-RYIlFVIe_Mx6myS-glWbsNMBp0XNvU",1778757806139]