[{"data":1,"prerenderedAt":1959},["ShallowReactive",2],{"blog-tag-ja-core-web-vitals":3},[4,627,1169],{"id":5,"title":6,"author":7,"body":8,"category":607,"coverImage":608,"description":609,"draft":610,"extension":611,"locale":612,"meta":613,"navigation":614,"noindex":610,"path":615,"publishedAt":616,"seo":617,"slug":618,"stem":619,"tags":620,"updatedAt":625,"__hash__":626},"blog\u002Fblog\u002Fwebp-convert-seo.md","WebP変換でSEOを改善する完全ガイド｜Core Web Vitals改善と安全な変換手順","Zerosend Editorial",{"type":9,"value":10,"toc":580},"minimark",[11,16,25,32,35,38,42,47,50,64,67,70,73,77,80,82,86,89,97,115,206,208,212,215,222,225,229,359,362,364,368,388,391,413,416,419,440,443,446,449,451,455,458,461,467,470,473,476,479,481,484,488,493,496,501,504,509,512,517,523,528,531,534,555,557,561,564,567,573,576],[12,13,15],"h2",{"id":14},"webp変換とseoの関係なぜ今これが重要なのか","WebP変換とSEOの関係——なぜ今これが重要なのか",[17,18,19,20,24],"p",{},"PageSpeed InsightsやGoogle Search Consoleでサイトを計測すると、「次世代フォーマットで画像を配信してください」という指摘が出てくることが多い。この「次世代フォーマット」の筆頭が ",[21,22,23],"strong",{},"WebP（ウェブピー）"," だ。",[17,26,27,28,31],{},"Googleが2021年以降、Core Web Vitals（CWV）を検索順位の評価要素に組み込んだことで、画像の最適化はSEOと直結する問題になった。JPEGやPNGをWebPに変換するだけで、同等の画質を保ちながらファイルサイズを ",[21,29,30],{},"平均25〜35%削減"," できる。この数字は、画像を多く使うECサイト・ブログ・ポートフォリオサイトにとって、ページ速度の体感差として現れる水準だ。",[17,33,34],{},"本記事では、WebP変換がSEOに与える具体的な効果、安全な変換方法の選び方、競合ツールとの比較、そして実際の運用への組み込み方を順を追って解説する。",[36,37],"hr",{},[12,39,41],{"id":40},"webp変換がseoに与える具体的な3つの効果","WebP変換がSEOに与える具体的な3つの効果",[43,44,46],"h3",{"id":45},"lcplargest-contentful-paintの改善","LCP（Largest Contentful Paint）の改善",[17,48,49],{},"Core Web Vitalsの中でも特に注目度の高いLCPは、ページ内で最大の可視要素が描画されるまでの時間を測る指標だ。多くのページでLCPの対象はメインビジュアルや商品画像など、ファイルサイズの大きい画像要素になる。",[17,51,52,59,60,63],{},[53,54,58],"a",{"href":55,"rel":56},"https:\u002F\u002Fweb.dev\u002Farticles\u002Flcp",[57],"nofollow","Googleのウェブ・パフォーマンスに関するドキュメント","によれば、LCPの目標値は ",[21,61,62],{},"2.5秒以内"," とされている。WebPへの変換でネットワーク転送量が減れば、ダウンロード時間が短縮されLCPが改善する。2MBのJPEGが1.4MB程度のWebPに変わるだけで、モバイル回線では0.5秒前後の短縮につながるケースもある。",[43,65,66],{"id":66},"ページ速度とユーザー行動シグナルの改善",[17,68,69],{},"ページの表示速度が速くなると、直帰率が下がりセッション時間が延びる傾向がある。Googleはこうしたユーザー行動のシグナルも評価の参考にしていると考えられており、間接的なSEO効果として機能する。",[17,71,72],{},"特にモバイル環境では、Wi-Fiより通信が不安定な4G\u002F5G回線でアクセスするユーザーが多い。軽量なWebPはこの差が体感しやすく、モバイルファーストインデックスへの対応としても有効だ。",[43,74,76],{"id":75},"pagespeed-insightsスコアの向上","PageSpeed Insightsスコアの向上",[17,78,79],{},"PageSpeed Insightsの「次世代フォーマットで画像を配信してください」という指摘は、JPEGやPNGを使い続けている限り消えない。WebPへの変換はこの指摘を直接解消し、PerformanceスコアとSEO関連スコアの両方に好影響をもたらす。",[36,81],{},[12,83,85],{"id":84},"webpの仕様と主要ブラウザの対応状況","WebPの仕様と主要ブラウザの対応状況",[17,87,88],{},"WebPはGoogleが開発し、2010年に公開した画像フォーマットだ。非可逆圧縮と可逆圧縮の両方をサポートし、アルファチャンネル（透過）やアニメーションにも対応している。",[17,90,91,96],{},[53,92,95],{"href":93,"rel":94},"https:\u002F\u002Fdevelopers.google.com\u002Fspeed\u002Fwebp",[57],"WebPの公式仕様（developers.google.com）","によると、可逆圧縮ではPNGより平均26%、非可逆圧縮ではJPEGより平均25〜34%小さいファイルを生成できる。",[17,98,99,100,105,106,109,110,114],{},"ブラウザ対応については、",[53,101,104],{"href":102,"rel":103},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FMedia\u002FGuides\u002FFormats\u002FImage_types#webp",[57],"MDN Web Docs の WebP ページ","が参考になる。Chrome・Firefox・Safari・Edge の主要4ブラウザはいずれも対応済みで、2024年時点のグローバルシェアでは ",[21,107,108],{},"97%以上のブラウザがWebPを表示可能"," だ。古いIEや旧Safari向けのフォールバックが必要な場面では、以下のような",[111,112,113],"code",{},"\u003Cpicture>","タグを使う方法が安全だ。",[116,117,122],"pre",{"className":118,"code":119,"language":120,"meta":121,"style":121},"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","",[111,123,124,140,170,196],{"__ignoreMap":121},[125,126,129,133,137],"span",{"class":127,"line":128},"line",1,[125,130,132],{"class":131},"sVt8B","\u003C",[125,134,136],{"class":135},"s9eBZ","picture",[125,138,139],{"class":131},">\n",[125,141,143,146,149,153,156,160,163,165,168],{"class":127,"line":142},2,[125,144,145],{"class":131},"  \u003C",[125,147,148],{"class":135},"source",[125,150,152],{"class":151},"sScJk"," srcset",[125,154,155],{"class":131},"=",[125,157,159],{"class":158},"sZZnC","\"image.webp\"",[125,161,162],{"class":151}," type",[125,164,155],{"class":131},[125,166,167],{"class":158},"\"image\u002Fwebp\"",[125,169,139],{"class":131},[125,171,173,175,178,181,183,186,189,191,194],{"class":127,"line":172},3,[125,174,145],{"class":131},[125,176,177],{"class":135},"img",[125,179,180],{"class":151}," src",[125,182,155],{"class":131},[125,184,185],{"class":158},"\"image.jpg\"",[125,187,188],{"class":151}," alt",[125,190,155],{"class":131},[125,192,193],{"class":158},"\"代替テキスト\"",[125,195,139],{"class":131},[125,197,199,202,204],{"class":127,"line":198},4,[125,200,201],{"class":131},"\u003C\u002F",[125,203,136],{"class":135},[125,205,139],{"class":131},[36,207],{},[12,209,211],{"id":210},"変換ツールの選び方どこで処理されるかが重要な理由","変換ツールの選び方——「どこで処理されるか」が重要な理由",[17,213,214],{},"WebPへの変換方法は複数ある。サーバーサイドでImageMagickやlibwebpを使うバッチ処理、WordPressプラグイン（Imagify、ShortPixel等）、そしてブラウザ上で動作するオンラインツールだ。",[17,216,217,218,221],{},"選択する際に見落とされやすい観点が ",[21,219,220],{},"「ファイルがどこで処理されるか」"," だ。一般的なオンラインサービスは、ファイルを一度サーバーにアップロードして処理し、変換後のファイルをダウンロードさせる仕組みになっている。業務で扱う画像には、公開前の商品写真・社内資料のスクリーンショット・個人情報を含む書類画像など、外部に送信したくないものが含まれるケースも多い。",[17,223,224],{},"その点でブラウザ内処理（クライアントサイド処理）のツールは、ファイルが自分のデバイスの外に出ない。これはプライバシーポリシーや社内セキュリティ規定への適合という観点でも重要な差だ。",[43,226,228],{"id":227},"主要webp変換ツール比較表","主要WebP変換ツール比較表",[230,231,232,254],"table",{},[233,234,235],"thead",{},[236,237,238,242,245,248,251],"tr",{},[239,240,241],"th",{},"ツール",[239,243,244],{},"処理場所（送信先サーバー）",[239,246,247],{},"無料制限",[239,249,250],{},"オフライン動作",[239,252,253],{},"登録",[255,256,257,286,300,316,330,344],"tbody",{},[236,258,259,266,271,276,281],{},[260,261,262,265],"td",{},[21,263,264],{},"zerosend","（画像変換）",[260,267,268],{},[21,269,270],{},"なし（ブラウザ内完結）",[260,272,273],{},[21,274,275],{},"なし",[260,277,278],{},[21,279,280],{},"可（SW キャッシュ後）",[260,282,283],{},[21,284,285],{},"不要",[236,287,288,291,293,295,298],{},[260,289,290],{},"Squoosh（Google）",[260,292,270],{},[260,294,275],{},[260,296,297],{},"可",[260,299,285],{},[236,301,302,305,308,311,314],{},[260,303,304],{},"TinyPNG",[260,306,307],{},"あり（サーバー処理）",[260,309,310],{},"月20ファイルまで",[260,312,313],{},"不可",[260,315,285],{},[236,317,318,321,323,326,328],{},[260,319,320],{},"Smallpdf",[260,322,307],{},[260,324,325],{},"1日2タスクまで",[260,327,313],{},[260,329,285],{},[236,331,332,335,337,340,342],{},[260,333,334],{},"iLovePDF",[260,336,307],{},[260,338,339],{},"ファイルサイズ制限あり",[260,341,313],{},[260,343,285],{},[236,345,346,349,351,354,356],{},[260,347,348],{},"Adobe Express",[260,350,307],{},[260,352,353],{},"機能制限あり",[260,355,313],{},[260,357,358],{},"要Adobe ID",[17,360,361],{},"TinyPNG・Smallpdf・iLovePDFといったサービスは利便性が高く広く使われているが、いずれもファイルをサーバーに送信する構造だ。Google製のSquooshもブラウザ内処理だが、2023年以降アクティブな開発が止まっており、一部の機能に不具合が報告されている。",[36,363],{},[12,365,367],{"id":366},"zerosend-でブラウザ内webp変換を行う手順","zerosend でブラウザ内WebP変換を行う手順",[17,369,370,375,376,379,380,383,384,387],{},[53,371,374],{"href":372,"rel":373},"https:\u002F\u002Fzerosend.site\u002Ftools\u002Fimage-convert",[57],"zerosendの画像形式変換ツール","は、",[21,377,378],{},"browser-image-compression"," ライブラリと ",[21,381,382],{},"Canvas API"," をベースに構築されており、変換処理はすべてブラウザのメインスレッドではなく ",[21,385,386],{},"Web Worker"," 上で実行される。これにより、大容量ファイルの変換中もUIがフリーズしない設計になっている。",[43,389,390],{"id":390},"操作手順",[392,393,394,401,404,407,410],"ol",{},[395,396,397,400],"li",{},[53,398,372],{"href":372,"rel":399},[57]," にアクセスする",[395,402,403],{},"変換したい画像ファイル（JPEG・PNG・GIF・AVIF等）をドラッグ＆ドロップ、または「ファイルを選択」で指定する",[395,405,406],{},"出力フォーマットとして「WebP」を選択する",[395,408,409],{},"品質スライダーで圧縮率を調整する（デフォルト値は多くの用途で適切）",[395,411,412],{},"「変換」ボタンをクリックし、完了後にダウンロードする",[43,414,415],{"id":415},"ネットワーク通信ゼロを自分で確認する方法",[17,417,418],{},"本当にファイルがサーバーに送られていないかは、ブラウザのDevToolsで確認できる。",[392,420,421,424,434,437],{},[395,422,423],{},"Chrome または Edge で変換ページを開く",[395,425,426,429,430,433],{},[111,427,428],{},"F12","（または ",[111,431,432],{},"Cmd+Option+I","）でDevToolsを開き、「Network」タブを選択",[395,435,436],{},"ファイルをドラッグ＆ドロップして変換を実行する",[395,438,439],{},"NetworkタブにPOSTリクエストや外部ドメインへの通信が発生していないことを確認する",[17,441,442],{},"変換実行後も外部への通信が一切記録されないことが、クライアントサイド処理の証拠だ。",[43,444,445],{"id":445},"オフライン動作について",[17,447,448],{},"zerosendはService Workerによるリソースキャッシュを実装している。初回アクセス後は、インターネット接続がない環境でも変換ツールが動作する。これはオフライン環境での業務や、通信制限を気にせず使いたい場面で実用的な特徴だ。",[36,450],{},[12,452,454],{"id":453},"webp変換を継続的な運用フローに組み込む方法","WebP変換を継続的な運用フローに組み込む方法",[43,456,457],{"id":457},"既存コンテンツへの対応",[17,459,460],{},"まず既存のページ・記事・商品ページで使われている画像を洗い出し、PageSpeed Insightsで「次世代フォーマット」として指摘を受けているものを優先リストに入れる。ファイルサイズが500KB以上のJPEGやPNGは特に優先度が高い。",[17,462,463,464,466],{},"変換後は元のファイルをバックアップとして残しておき、",[111,465,113],{},"タグを使ってWebPとJPEGの両方を配信する構成にすると安全だ。",[43,468,469],{"id":469},"新規コンテンツへのルール化",[17,471,472],{},"画像をアップロードする前にWebP変換を行うことを、コンテンツ制作フローのチェックリストに加える。「記事公開前にゼロsendで変換してからCMSにアップロードする」という一手順を加えるだけで、新規コンテンツの最適化を継続できる。",[43,474,475],{"id":475},"変換前後の効果測定",[17,477,478],{},"PageSpeed InsightsとGoogle Search Consoleの「ページエクスペリエンス」レポートを使い、変換前後のLCPスコアを比較する。特にモバイルスコアの変化に注目すると、改善効果が数値として把握しやすい。",[36,480],{},[12,482,483],{"id":483},"よくある疑問と落とし穴",[43,485,487],{"id":486},"faq","FAQ",[17,489,490],{},[21,491,492],{},"Q1. WebPに変換すると画質は落ちるのか？",[17,494,495],{},"非可逆圧縮（品質設定80〜85程度）であれば、通常のWeb表示ではJPEGと視覚的な差がほぼわからない。画質が重要な場面では品質を90以上に設定するか、可逆圧縮を使うことで元の品質を維持できる。",[17,497,498],{},[21,499,500],{},"Q2. PNG（透過画像）もWebPに変換できるか？",[17,502,503],{},"WebPはアルファチャンネルをサポートしているため、透過PNGをそのままWebPに変換できる。透過を保ちたい場合は可逆圧縮モードを選ぶか、品質設定を高めにすると良い。",[17,505,506],{},[21,507,508],{},"Q3. WordPressサイトの場合、プラグインとブラウザツールのどちらを使うべきか？",[17,510,511],{},"大量の画像を一括変換・自動最適化したい場合はShortPixelやImageifyなどのプラグインが効率的だ。一方、非公開の画像や機密性の高いファイルを変換したい場合は、ブラウザ内処理のツールの方がセキュリティ面で安心できる。用途によって使い分けが合理的だ。",[17,513,514],{},[21,515,516],{},"Q4. AVIFとWebPどちらを選ぶべきか？",[17,518,519,520,522],{},"AVIFはWebPよりさらに圧縮率が高いフォーマットだが、2024年時点ではブラウザ対応がWebPより若干低く（特に旧バージョンのSafari）、エンコード処理が遅い。汎用性の高さでは現時点でWebPが安定した選択肢だ。",[111,521,113],{},"タグでAVIF→WebP→JPEGの順でフォールバックを指定する方法も有効だ。",[17,524,525],{},[21,526,527],{},"Q5. ファイルサイズが逆に大きくなることはあるか？",[17,529,530],{},"ある。既にJPEGで強く圧縮されている画像や、小さなサイズの画像をWebPに変換すると、わずかにサイズが増えるケースがある。変換後は必ず元ファイルと比較し、小さくなっているものだけを採用するのが確実だ。",[43,532,533],{"id":533},"実運用での落とし穴",[535,536,537,543,549],"ul",{},[395,538,539,542],{},[21,540,541],{},"SNS投稿用画像への使用","：TwitterやInstagramなど一部のSNSプラットフォームはWebPのアップロードを受け付けないか、自動的に変換する。SNS向け画像はJPEGのままにしておくか、個別に確認が必要だ。",[395,544,545,548],{},[21,546,547],{},"メールに添付する画像","：メールクライアントはWebPに対応していないものが多い。メール添付用途にはJPEGまたはPNGを維持する。",[395,550,551,554],{},[21,552,553],{},"印刷データへの転用","：WebPはRGB色空間のみでCMYKには対応していない。印刷データとしては使用できない。",[36,556],{},[12,558,560],{"id":559},"まとめwebp変換が持つ実際のインパクト","まとめ——WebP変換が持つ実際のインパクト",[17,562,563],{},"WebP変換は、特別な開発環境や有料ツールを使わなくても取り組めるSEO改善施策だ。ファイルサイズの削減がLCPを改善し、ページ速度が上がり、ユーザー体験が向上し、それがSEOシグナルとして積み重なる。この一連の効果は、1枚の画像変換から始まる。",[17,565,566],{},"変換方法の選択では、「ファイルがサーバーに送信されるかどうか」が実務上の重要な判断軸になる。TinyPNGやSmallpdfのようなサービスは利便性が高い一方、業務上の機密画像を扱う場合はブラウザ内処理が適切だ。",[17,568,569,572],{},[53,570,374],{"href":372,"rel":571},[57],"はbrowser-image-compressionとCanvas APIを使ったクライアントサイド処理で動作し、初回アクセス後はオフラインでも使用できる。DevToolsのNetworkタブで通信が発生していないことを自分で確認できるという透明性も、他の多くのオンラインツールにはない特徴だ。",[17,574,575],{},"まず手元の重い画像を一枚変換し、PageSpeed InsightsでLCPスコアの変化を確認する。そこから得られる数値が、次のアクションの判断根拠になる。",[577,578,579],"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":121,"searchDepth":142,"depth":142,"links":581},[582,583,588,589,592,597,602,606],{"id":14,"depth":142,"text":15},{"id":40,"depth":142,"text":41,"children":584},[585,586,587],{"id":45,"depth":172,"text":46},{"id":66,"depth":172,"text":66},{"id":75,"depth":172,"text":76},{"id":84,"depth":142,"text":85},{"id":210,"depth":142,"text":211,"children":590},[591],{"id":227,"depth":172,"text":228},{"id":366,"depth":142,"text":367,"children":593},[594,595,596],{"id":390,"depth":172,"text":390},{"id":415,"depth":172,"text":415},{"id":445,"depth":172,"text":445},{"id":453,"depth":142,"text":454,"children":598},[599,600,601],{"id":457,"depth":172,"text":457},{"id":469,"depth":172,"text":469},{"id":475,"depth":172,"text":475},{"id":483,"depth":142,"text":483,"children":603},[604,605],{"id":486,"depth":172,"text":487},{"id":533,"depth":172,"text":533},{"id":559,"depth":142,"text":560},"tech",null,"WebP変換がLCP・ページ速度・SEOに与える効果を数値で解説。ブラウザ内完結の無料ツールと競合サービスを比較し、実践的な導入手順まで網羅。",false,"md","ja",{},true,"\u002Fblog\u002Fwebp-convert-seo","2026-05-07",{"title":6,"description":609},"webp-convert-seo","blog\u002Fwebp-convert-seo",[621,622,623,624],"SEO","変換","Core Web Vitals","Web制作","2026-05-15","-Eu7pPexS28YvfGAGQBghTT8cKqNen8fJjREmiLVn5w",{"id":628,"title":629,"author":7,"body":630,"category":607,"coverImage":608,"description":1158,"draft":610,"extension":611,"locale":612,"meta":1159,"navigation":614,"noindex":610,"path":1160,"publishedAt":1161,"seo":1162,"slug":1163,"stem":1164,"tags":1165,"updatedAt":625,"__hash__":1168},"blog\u002Fblog\u002Fcore-web-vitals-image-compress.md","Core Web Vitals を画像圧縮で改善する完全ガイド【LCP対策】",{"type":9,"value":631,"toc":1129},[632,636,639,659,668,671,675,686,690,693,704,706,709,712,773,776,778,782,785,789,796,800,803,807,816,820,839,841,845,857,861,867,871,874,878,881,885,888,892,895,897,900,903,1011,1014,1017,1019,1022,1026,1032,1038,1041,1044,1047,1050,1054,1057,1059,1061,1066,1069,1074,1077,1082,1090,1095,1098,1103,1110,1112,1115,1118,1126],[12,633,635],{"id":634},"なぜ画像が-core-web-vitals-を下げるのか","なぜ画像が Core Web Vitals を下げるのか",[17,637,638],{},"Google が検索ランキングの評価基準に組み込んでいる「Core Web Vitals」は、現在3つの指標で構成されている。",[535,640,641,647,653],{},[395,642,643,646],{},[21,644,645],{},"LCP（Largest Contentful Paint）","：ページ内で最も大きなコンテンツが描画されるまでの時間",[395,648,649,652],{},[21,650,651],{},"INP（Interaction to Next Paint）","：ユーザー操作から次の描画までの応答速度",[395,654,655,658],{},[21,656,657],{},"CLS（Cumulative Layout Shift）","：読み込み中に発生するレイアウトのずれ",[17,660,661,662,667],{},"このうち画像が直撃するのは LCP だ。ファーストビューに置かれたヒーロー画像や記事アイキャッチが LCP 対象要素になるケースは非常に多く、ファイルが重いほど「良好」の合格ライン（2.5秒以内）を超えやすい。Google の ",[53,663,666],{"href":664,"rel":665},"https:\u002F\u002Fweb.dev\u002Farticles\u002Fvitals",[57],"Core Web Vitals 技術文書"," では、LCP 悪化の主因として「リソースのロード時間」が明示されており、その代表格が最適化されていない画像ファイルだ。",[17,669,670],{},"デジタルカメラやスマートフォンが出力する JPEG は、無処理のまま 3〜8 MB に達することが珍しくない。そのファイルをそのまま CMS にアップロードし続けた結果、PageSpeed Insights の LCP が「改善が必要（2.5秒超）」になっているサイトは今でも大量に存在する。",[43,672,674],{"id":673},"cls-への影響も見落とさない","CLS への影響も見落とさない",[17,676,677,678,681,682,685],{},"CLS への影響も軽視できない。画像タグに ",[111,679,680],{},"width","・",[111,683,684],{},"height"," 属性が設定されていない場合、ブラウザは読み込み完了まで表示領域を確保できず、後からレイアウトがずれる。圧縮によって読み込みを速くしつつ、属性指定でスペースを事前に予約する組み合わせが CLS スコアの維持にも寄与する。",[43,687,689],{"id":688},"pagespeed-insights-が出す画像関連の警告を読む","PageSpeed Insights が出す画像関連の警告を読む",[17,691,692],{},"PageSpeed Insights で計測した際に以下のいずれかが「改善が必要」として表示されているなら、画像圧縮は費用対効果が最も高い改善アクションになる。",[535,694,695,698,701],{},[395,696,697],{},"「適切なサイズの画像」",[395,699,700],{},"「効率的な画像エンコード」",[395,702,703],{},"「次世代フォーマットでの画像の配信」",[36,705],{},[12,707,708],{"id":708},"圧縮前後のスコア変化の目安",[17,710,711],{},"ファイルサイズ別の改善期待値を下表に示す。値はページ構成や通信速度によって変動するが、3 MB 超の画像を抱えているページはほぼ例外なく効果を体感できる。",[230,713,714,727],{},[233,715,716],{},[236,717,718,721,724],{},[239,719,720],{},"元のファイルサイズ",[239,722,723],{},"圧縮後の目安",[239,725,726],{},"LCP 改善の期待値",[255,728,729,740,751,762],{},[236,730,731,734,737],{},[260,732,733],{},"5 MB 以上",[260,735,736],{},"300〜500 KB",[260,738,739],{},"大きく改善（数秒単位）",[236,741,742,745,748],{},[260,743,744],{},"1〜3 MB",[260,746,747],{},"150〜300 KB",[260,749,750],{},"明確に改善（1秒前後）",[236,752,753,756,759],{},[260,754,755],{},"500 KB〜1 MB",[260,757,758],{},"80〜150 KB",[260,760,761],{},"中程度改善（0.5秒前後）",[236,763,764,767,770],{},[260,765,766],{},"500 KB 未満",[260,768,769],{},"50〜80 KB",[260,771,772],{},"軽微〜誤差の範囲",[17,774,775],{},"圧縮後は必ず PageSpeed Insights または Chrome DevTools の Lighthouse で再計測し、改善幅を数値で把握する。「やった気になる」だけで終わらせないためにも、計測は必須のステップだ。",[36,777],{},[12,779,781],{"id":780},"画像圧縮の一般的な手順ツール非依存","画像圧縮の一般的な手順（ツール非依存）",[17,783,784],{},"ツールを問わず共通する圧縮の流れを4ステップで整理する。",[43,786,788],{"id":787},"ステップ-1lcp-対象要素を特定する","ステップ 1：LCP 対象要素を特定する",[17,790,791,792,795],{},"Chrome DevTools を開き、Lighthouse タブで「パフォーマンス」を計測する。レポートの「LCP」セクションをクリックすると、対象要素がハイライト表示される。まずその要素の URL とファイルサイズを確認することが出発点だ。対象要素が思ったものと異なるケースは多い。CMS が自動生成したサムネイルや、CSS の ",[111,793,794],{},"background-image"," で指定した画像が LCP になっていることもある。",[43,797,799],{"id":798},"ステップ-2リサイズと圧縮をセットで行う","ステップ 2：リサイズと圧縮をセットで行う",[17,801,802],{},"「圧縮」と「リサイズ（解像度の変更）」は別の操作だが、セットで考えると効果が大きい。横幅 800 px で表示している領域に対して 3,000 px 幅の画像を使っていれば、まず 800 px 程度にリサイズしてから JPEG 品質を 70〜80 % に落とすだけで、ファイルサイズが元の 10 分の 1 以下になることがある。品質を下げる前にまずリサイズを行うのが、視覚品質を保ちながらサイズを削るコツだ。",[43,804,806],{"id":805},"ステップ-3フォーマットを検討する","ステップ 3：フォーマットを検討する",[17,808,809,810,815],{},"WebP は JPEG と比較して同等の視覚品質で 20〜30 % 程度ファイルサイズを削減できる。",[53,811,814],{"href":812,"rel":813},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FMedia\u002FFormats\u002FImage_types#webp",[57],"MDN の WebP 解説"," によれば、現在の主要ブラウザは広く WebP をサポートしており、モダンな環境では JPEG を WebP に置き換えるだけでも LCP に貢献する。ただし古い CMS 環境やメールマガジンへの埋め込みなど、WebP 未対応の環境が対象に含まれる場合は慎重に判断する。",[43,817,819],{"id":818},"ステップ-4html-の属性を整備する","ステップ 4：HTML の属性を整備する",[17,821,822,823,681,825,827,828,831,832,835,836,838],{},"圧縮後、画像タグに ",[111,824,680],{},[111,826,684],{}," 属性を設定して CLS を防ぐ。ファーストビューの画像には ",[111,829,830],{},"loading=\"eager\"","（または属性なし）、スクロール先の画像には ",[111,833,834],{},"loading=\"lazy\""," を使い分けると、必要なリソースが優先的に読み込まれる。ファーストビュー画像への ",[111,837,834],{}," は LCP を悪化させる典型的な誤りなので注意が必要だ。",[36,840],{},[12,842,844],{"id":843},"zerosend-を使ったブラウザ内圧縮の手順","zerosend を使ったブラウザ内圧縮の手順",[17,846,847,852,853,856],{},[53,848,851],{"href":849,"rel":850},"https:\u002F\u002Fzerosend.site\u002Ftools\u002Fimage-compress",[57],"zerosend の画像圧縮ツール"," は、圧縮処理をサーバーではなくブラウザ内で完結させる設計になっている。使用しているライブラリは ",[21,854,855],{},"browser-image-compression（Web Worker）"," で、メインスレッドをブロックせずにバックグラウンドで処理を走らせる。ファイルの内容は一切外部サーバーに送信されない。",[43,858,860],{"id":859},"ステップ-1ツールにアクセスする","ステップ 1：ツールにアクセスする",[17,862,863,866],{},[53,864,849],{"href":849,"rel":865},[57]," をブラウザで開く。インストール不要、アカウント登録不要。Service Worker によるキャッシュが有効なため、初回ロード後はオフライン環境でも動作する。社内ネットワークでインターネットアクセスが制限されている環境でも、一度ロードさえしておけば継続して使用できる。",[43,868,870],{"id":869},"ステップ-2ファイルを選択する","ステップ 2：ファイルを選択する",[17,872,873],{},"ドラッグ＆ドロップ、またはファイル選択ダイアログで画像を読み込む。JPEG・PNG・WebP に対応している。複数ファイルをまとめて読み込むバッチ処理にも対応しており、複数枚を一度に圧縮できる。",[43,875,877],{"id":876},"ステップ-3品質スライダーを調整する","ステップ 3：品質スライダーを調整する",[17,879,880],{},"品質 70〜80 % が Web サイト用途のデフォルト推奨値だ。ファーストビューの主要ビジュアルであれば 80 %、背景画像や繰り返し使うアイコン類なら 65〜70 % でも視覚的な劣化はほぼ感じられない。スライダーを動かすたびにプレビューが更新されるため、圧縮前後の見た目を比較しながら数値を決められる。",[43,882,884],{"id":883},"ステップ-4network-タブでアップロード通信がゼロであることを確認する","ステップ 4：Network タブでアップロード通信がゼロであることを確認する",[17,886,887],{},"セキュリティポリシーが厳しい環境での利用前や、「本当にサーバーに送っていないか」を確認したい場合は、自分で検証できる。Chrome DevTools を開いて Network タブを選択し、ツールを操作しながらリクエストを監視する。画像ファイルに関するアップロード通信が一切発生しないことをリアルタイムで確認できる。クラウド型のサービスではこの確認を行うとアップロードリクエストが記録されるが、zerosend では何も記録されない。",[43,889,891],{"id":890},"ステップ-5ダウンロードして-cms-に反映する","ステップ 5：ダウンロードして CMS に反映する",[17,893,894],{},"圧縮後のファイルをダウンロードし、そのまま CMS やサーバーにアップロードする。元ファイルとのサイズ比較が画面上で確認でき、何 % 削減されたかが数値で表示される。",[36,896],{},[12,898,899],{"id":899},"主要ツールとの比較",[17,901,902],{},"圧縮ツールを選ぶ際に重視される観点を整理した。特に「送信先サーバー」列は、機密性の高い画像を扱う場合に見落としがちな観点だ。",[230,904,905,925],{},[233,906,907],{},[236,908,909,911,914,917,919,922],{},[239,910,241],{},[239,912,913],{},"送信先サーバー",[239,915,916],{},"無料枠の制限",[239,918,250],{},[239,920,921],{},"処理場所",[239,923,924],{},"バッチ処理",[255,926,927,943,961,977,995],{},[236,928,929,931,933,936,939,941],{},[260,930,264],{},[260,932,270],{},[260,934,935],{},"制限なし",[260,937,938],{},"可（SW キャッシュ）",[260,940,386],{},[260,942,297],{},[236,944,945,947,950,953,955,958],{},[260,946,320],{},[260,948,949],{},"あり（Smallpdf のサーバー）",[260,951,952],{},"1日 2 ファイルまで",[260,954,313],{},[260,956,957],{},"クラウド",[260,959,960],{},"有料プランのみ",[236,962,963,965,968,971,973,975],{},[260,964,334],{},[260,966,967],{},"あり（iLovePDF のサーバー）",[260,969,970],{},"1日上限あり",[260,972,313],{},[260,974,957],{},[260,976,960],{},[236,978,979,982,985,988,990,992],{},[260,980,981],{},"TinyPNG \u002F TinyJPG",[260,983,984],{},"あり（Tinify のサーバー）",[260,986,987],{},"月 500 ファイルまで",[260,989,313],{},[260,991,957],{},[260,993,994],{},"可（API 利用時）",[236,996,997,999,1001,1003,1005,1008],{},[260,998,290],{},[260,1000,270],{},[260,1002,935],{},[260,1004,297],{},[260,1006,1007],{},"WASM",[260,1009,1010],{},"不可（1 ファイルずつ）",[17,1012,1013],{},"Smallpdf・iLovePDF・TinyPNG はいずれもクラウドサーバーでの処理が前提であり、アップロードしたファイルは一時的にでも外部サーバーに送信される。個人写真・社内資料・顧客から提供された素材を扱う場合、そのリスクは無視できない。",[17,1015,1016],{},"Squoosh はブラウザ内処理でプライバシー面に優れているが、1 ファイルずつしか処理できないため、複数枚を日常的に扱うワークフローには向いていない。zerosend は複数ファイルの一括処理に対応している点で、実務的な運用に組み込みやすい。",[36,1018],{},[12,1020,1021],{"id":1021},"よくある落とし穴と対処法",[43,1023,1025],{"id":1024},"圧縮したのに-lcp-が改善しない","圧縮したのに LCP が改善しない",[17,1027,1028,1029,1031],{},"最も多い原因は「圧縮した画像とは別のファイルが実際には LCP に使われている」ケースだ。CMS のプラグインが自動生成したサムネイル画像が LCP 対象になっていたり、CSS の ",[111,1030,794],{}," で設定した画像が LCP 要素になっていたりする。Lighthouse のレポートで対象要素の URL を確認し、実際に差し替えたファイルと一致しているかを必ず検証する。",[17,1033,1034,1035,1037],{},"もう一つの原因として、ファーストビュー画像に ",[111,1036,834],{}," が設定されている場合がある。lazy-load は LCP 対象要素には逆効果になるため、ファーストビューの画像には設定しない。",[43,1039,1040],{"id":1040},"圧縮しすぎてブランドイメージを損ねた",[17,1042,1043],{},"品質を 50 % 以下まで落とすと、JPEG 特有のブロックノイズが目立ち始める。特に人物写真やグラデーションを含む画像では視覚的な劣化が顕著になる。品質は 70〜80 % を下限の目安とし、どうしてもファイルサイズを削りたい場合はリサイズを先に行う方が品質を維持しやすい。",[43,1045,1046],{"id":1046},"一度だけ対応して終わりにした",[17,1048,1049],{},"新しいページを追加するたびに未最適化の画像が混入すると、サイト全体のスコアは再び悪化する。制作フローに「アップロード前に圧縮ツールを通す」というステップを明示的に組み込むか、CMS の自動最適化機能（WordPress であれば ShortPixel や Imagify 等のプラグイン）を併用することで、属人的な対応をなくすことができる。",[43,1051,1053],{"id":1052},"_100-kb-以下でも警告が出る","100 KB 以下でも警告が出る",[17,1055,1056],{},"ファイルサイズではなく「表示サイズに対して解像度が過剰」と判定されている場合に出る。例えば 100 KB の PNG でも、横幅 2,000 px で書き出されたものを 400 px の領域で表示していれば警告対象になる。リサイズで解像度を表示サイズに合わせることで解消する。",[36,1058],{},[12,1060,487],{"id":486},[17,1062,1063],{},[21,1064,1065],{},"Q1. 圧縮すると SEO 的に不利になることはあるか？",[17,1067,1068],{},"ない。Google は表示速度を評価するが、同一 URL で提供される限りファイルサイズの変化それ自体がコンテンツの品質評価に影響することはない。むしろ圧縮によって LCP が改善すれば Core Web Vitals のスコアが向上し、検索順位にプラスに働く可能性がある。",[17,1070,1071],{},[21,1072,1073],{},"Q2. WebP への変換は必須か？",[17,1075,1076],{},"必須ではないが効果は高い。既存の JPEG を WebP に変換するだけで 20〜30 % のファイル削減が見込めるため、LCP がギリギリ合格ラインにあるページでは変換を検討する価値がある。ただし古い CMS 環境やメールマガジンへの埋め込みなど、WebP 未対応の環境が対象に含まれる場合は注意が必要だ。",[17,1078,1079],{},[21,1080,1081],{},"Q3. zerosend で PNG を WebP に変換することはできるか？",[17,1083,1084,1085,1089],{},"zerosend の",[53,1086,1088],{"href":372,"rel":1087},[57],"画像変換ツール","では、PNG・JPEG を WebP に変換する機能を提供している。圧縮と変換を組み合わせることで、さらに大きなファイルサイズ削減が期待できる。変換処理もブラウザ内で完結するため、ファイルは外部に送信されない。",[17,1091,1092],{},[21,1093,1094],{},"Q4. スマートフォン撮影の写真を直接圧縮してもよいか？",[17,1096,1097],{},"問題ない。ただしスマートフォン写真は EXIF データ（GPS 情報・撮影日時等）を含むことが多い。zerosend のブラウザ内処理ではファイルが外部に送信されないため、EXIF データを含む写真でも情報漏洩のリスクなしに圧縮できる。クラウド型サービスでは EXIF 情報ごと外部サーバーに送信される点と対照的だ。",[17,1099,1100],{},[21,1101,1102],{},"Q5. 画像圧縮以外に LCP を改善する手段はあるか？",[17,1104,1105,1106,1109],{},"ある。CDN の利用、サーバー応答時間の短縮、",[111,1107,1108],{},"\u003Clink rel=\"preload\">"," による画像の事前読み込み指定、フォントの最適化などが代表的な手段だ。ただしこれらは設定変更やインフラ費用を伴うことが多く、即効性という点では画像圧縮が最も着手しやすい。画像圧縮で対処できる改善余地をまず使い切り、それでも目標値に届かない場合に他の手段を検討するのが現実的な順序だ。",[36,1111],{},[12,1113,1114],{"id":1114},"まとめ",[17,1116,1117],{},"Core Web Vitals のうちページ表示速度に最も直結する LCP を改善するには、画像圧縮が最も即効性の高い手段だ。対応の手順は「LCP 対象要素の特定 → リサイズ → 圧縮 → HTML 属性の整備 → 再計測」のサイクルを回すだけであり、特別な専門知識は不要だ。",[17,1119,1120,1121,1125],{},"プライバシーが気になる業務用途では、ファイルをサーバーに送信しないブラウザ内処理ツールを選ぶことが重要になる。zerosend の",[53,1122,1124],{"href":849,"rel":1123},[57],"画像圧縮ツール","は browser-image-compression を Web Worker で動作させており、Chrome DevTools の Network タブでアップロード通信がゼロであることを誰でも自分で検証できる。初回ロード後は Service Worker のキャッシュによりオフライン環境でも動作するため、ネットワーク制限のある環境でも継続して使用できる。",[17,1127,1128],{},"一度の対応で終わらせず、画像をアップロードする前に圧縮するというステップを制作フローに組み込むことが、Core Web Vitals のスコアを継続的に維持する最も現実的な方法だ。",{"title":121,"searchDepth":142,"depth":142,"links":1130},[1131,1135,1136,1142,1149,1150,1156,1157],{"id":634,"depth":142,"text":635,"children":1132},[1133,1134],{"id":673,"depth":172,"text":674},{"id":688,"depth":172,"text":689},{"id":708,"depth":142,"text":708},{"id":780,"depth":142,"text":781,"children":1137},[1138,1139,1140,1141],{"id":787,"depth":172,"text":788},{"id":798,"depth":172,"text":799},{"id":805,"depth":172,"text":806},{"id":818,"depth":172,"text":819},{"id":843,"depth":142,"text":844,"children":1143},[1144,1145,1146,1147,1148],{"id":859,"depth":172,"text":860},{"id":869,"depth":172,"text":870},{"id":876,"depth":172,"text":877},{"id":883,"depth":172,"text":884},{"id":890,"depth":172,"text":891},{"id":899,"depth":142,"text":899},{"id":1021,"depth":142,"text":1021,"children":1151},[1152,1153,1154,1155],{"id":1024,"depth":172,"text":1025},{"id":1040,"depth":172,"text":1040},{"id":1046,"depth":172,"text":1046},{"id":1052,"depth":172,"text":1053},{"id":486,"depth":142,"text":487},{"id":1114,"depth":142,"text":1114},"LCP悪化の主因は画像の重さ。圧縮前後のスコア目安・手順・プライバシー安全なブラウザ内処理ツールの比較まで、実践的に解説します。",{},"\u002Fblog\u002Fcore-web-vitals-image-compress","2026-05-05",{"title":629,"description":1158},"core-web-vitals-image-compress","blog\u002Fcore-web-vitals-image-compress",[1166,1167,621,623],"画像","圧縮","FRRn6aETDLGIWfMvq0hTPpmd8dMvwj0BA7KDHibK5yY",{"id":1170,"title":1171,"author":7,"body":1172,"category":607,"coverImage":608,"description":1950,"draft":610,"extension":611,"locale":612,"meta":1951,"navigation":614,"noindex":610,"path":1952,"publishedAt":1953,"seo":1954,"slug":1955,"stem":1956,"tags":1957,"updatedAt":625,"__hash__":1958},"blog\u002Fblog\u002Fimage-compress-guide.md","画像圧縮で画質を保つ完全ガイド2026 — 品質85%の黄金点からブラウザ完結処理まで",{"type":9,"value":1173,"toc":1909},[1174,1183,1186,1188,1192,1196,1205,1208,1212,1215,1219,1222,1224,1228,1232,1306,1309,1313,1320,1323,1332,1335,1341,1347,1349,1352,1356,1363,1366,1470,1473,1477,1480,1488,1495,1499,1506,1510,1517,1521,1524,1526,1529,1532,1535,1676,1679,1682,1689,1713,1720,1722,1726,1737,1739,1764,1766,1769,1771,1773,1777,1789,1792,1799,1803,1810,1813,1816,1818,1820,1824,1830,1834,1837,1841,1844,1848,1851,1855,1864,1866,1868,1871,1902],[17,1175,1176,1177,1182],{},"Web ページが重くなる原因の第1位は画像である。Google の ",[53,1178,1181],{"href":1179,"rel":1180},"https:\u002F\u002Falmanac.httparchive.org\u002Fja\u002F2023\u002Fpage-weight",[57],"Web Almanac 2023"," によれば、ページあたりの転送量の中央値の約 50% を画像が占める。表示速度の改善もプライバシーの確保も、圧縮の基礎を正しく理解するところから始まる。",[17,1184,1185],{},"本記事では「どの設定で圧縮するか」「どのフォーマットを選ぶか」「どのツールが安全か」の3点を実証的に整理する。ツール選定は後半で行い、前半は仕組みの解説に徹する。",[36,1187],{},[12,1189,1191],{"id":1190},"なぜ画像圧縮が収益seouxに直結するのか","なぜ画像圧縮が収益・SEO・UXに直結するのか",[43,1193,1195],{"id":1194},"core-web-vitals-と-lcp-の関係","Core Web Vitals と LCP の関係",[17,1197,1198,1199,1202,1203,24],{},"Google の検索品質アルゴリズムは ",[53,1200,623],{"href":664,"rel":1201},[57]," を正式な順位シグナルとして使用している。LCP（Largest Contentful Paint）は「画面内で最大のコンテンツが表示されるまでの時間」を計測し、推奨値は ",[21,1204,62],{},[17,1206,1207],{},"遅延の最大要因は未圧縮の画像である。4K スマホカメラで撮影した JPEG はそのままだと 6〜12 MB になる。モバイル回線（下り実効 10 Mbps 程度）では1枚で転送に 5〜12 秒かかる計算だ。圧縮して 200 KB に抑えると、同じ回線で 0.16 秒に短縮できる。",[43,1209,1211],{"id":1210},"ストレージcdn-コストの累積","ストレージ・CDN コストの累積",[17,1213,1214],{},"画像 1 枚を節約する効果は小さく見えるが、PV が積み上がると転送コストに直接影響する。月 100 万 PV のサイトで 1 枚あたり 1 MB を 200 KB に削減した場合、月間転送量を 800 GB 節約できる計算になる。",[43,1216,1218],{"id":1217},"プライバシーリスクexif-メタデータ","プライバシーリスク：EXIF メタデータ",[17,1220,1221],{},"スマートフォンで撮影した写真には EXIF データが埋め込まれており、撮影日時・GPS 座標・端末機種などが記録されている。企業の社内資料や個人の写真をそのまま Web にアップすると、位置情報が意図せず公開されるリスクがある。圧縮処理の際に EXIF を除去することは、容量削減と同時にプライバシー保護にもなる。",[36,1223],{},[12,1225,1227],{"id":1226},"画像フォーマットの選び方jpgpngwebpavif","画像フォーマットの選び方：JPG・PNG・WebP・AVIF",[43,1229,1231],{"id":1230},"jpg-と-png-の使い分け原則","JPG と PNG の使い分け原則",[230,1233,1234,1250],{},[233,1235,1236],{},[236,1237,1238,1241,1244,1247],{},[239,1239,1240],{},"フォーマット",[239,1242,1243],{},"向いている用途",[239,1245,1246],{},"圧縮方式",[239,1248,1249],{},"透過",[255,1251,1252,1266,1280,1293],{},[236,1253,1254,1257,1260,1263],{},[260,1255,1256],{},"JPG",[260,1258,1259],{},"写真・グラデーション",[260,1261,1262],{},"非可逆",[260,1264,1265],{},"非対応",[236,1267,1268,1271,1274,1277],{},[260,1269,1270],{},"PNG",[260,1272,1273],{},"ロゴ・スクリーンショット・透過",[260,1275,1276],{},"可逆",[260,1278,1279],{},"対応",[236,1281,1282,1285,1288,1291],{},[260,1283,1284],{},"WebP",[260,1286,1287],{},"写真・イラスト両方",[260,1289,1290],{},"可逆・非可逆両対応",[260,1292,1279],{},[236,1294,1295,1298,1301,1304],{},[260,1296,1297],{},"AVIF",[260,1299,1300],{},"写真・高効率配信",[260,1302,1303],{},"非可逆・可逆",[260,1305,1279],{},[17,1307,1308],{},"写真を PNG で保存するのは最も多い初歩的ミスで、JPG 比で 5〜10 倍の容量になりやすい。ロゴやテキスト入り画像を JPG にすると、輪郭のギザギザ（JPEG アーティファクト）が発生する。",[43,1310,1312],{"id":1311},"webp-と-avif-の現在地2026年時点","WebP と AVIF の現在地（2026年時点）",[17,1314,1315,1319],{},[53,1316,1318],{"href":812,"rel":1317},[57],"MDN Web Docs の WebP ブラウザ互換表"," によると、WebP は 2026 年現在で全主要ブラウザの最新版で対応済みである。Edge Legacy など古い環境への対応が必要でなければ、WebP を第一選択肢にして問題ない。",[17,1321,1322],{},"AVIF は JPG より 30〜50% 小さい容量を実現できるが、エンコード処理が重く、古いデバイスでは表示が遅くなる場合がある。対応状況は Chrome・Firefox・Safari で概ね揃っているが、業務用イントラや特定企業環境では注意が必要だ。",[17,1324,1325,1327,1328,1331],{},[111,1326,113],{}," 要素の ",[111,1329,1330],{},"srcset"," を使えば、対応ブラウザには AVIF を、非対応ブラウザには WebP または JPG を自動配信できる。",[43,1333,1334],{"id":1334},"可逆圧縮と非可逆圧縮の選択基準",[17,1336,1337,1340],{},[21,1338,1339],{},"可逆（lossless）"," はファイルを展開すれば元データと完全に一致する。PNG がその代表例で、ロゴや図版など「1 ピクセルも変えたくない」素材に適している。",[17,1342,1343,1346],{},[21,1344,1345],{},"非可逆（lossy）"," は人間の視覚が感知しにくい情報を捨てることで大幅な容量削減を実現する。JPG・WebP lossy・AVIF がこれに当たる。Web 配信用の写真は非可逆で十分だ。",[36,1348],{},[12,1350,1351],{"id":1351},"画質を保ったまま圧縮する5つの実践的コツ",[43,1353,1355],{"id":1354},"コツ1品質-8085-が最適点","コツ1：品質 80〜85% が最適点",[17,1357,1358,1359,1362],{},"JPG の品質設定は 100% である必要はなく、",[21,1360,1361],{},"85% が最適点"," である。視覚的に差がほぼ分からないにもかかわらず、ファイルサイズは 100% 比で約 40% に減少する。",[17,1364,1365],{},"以下は品質設定と容量・画質の関係を示した実測ベースの目安だ。",[230,1367,1368,1384],{},[233,1369,1370],{},[236,1371,1372,1375,1378,1381],{},[239,1373,1374],{},"品質設定",[239,1376,1377],{},"体感画質",[239,1379,1380],{},"元画像比サイズ",[239,1382,1383],{},"推奨用途",[255,1385,1386,1399,1412,1428,1442,1456],{},[236,1387,1388,1391,1394,1396],{},[260,1389,1390],{},"100%",[260,1392,1393],{},"最高",[260,1395,1390],{},[260,1397,1398],{},"原本保存のみ",[236,1400,1401,1404,1406,1409],{},[260,1402,1403],{},"95%",[260,1405,1393],{},[260,1407,1408],{},"約70%",[260,1410,1411],{},"印刷・高品質配信",[236,1413,1414,1417,1420,1423],{},[260,1415,1416],{},"85%",[260,1418,1419],{},"ほぼ最高",[260,1421,1422],{},"約40%",[260,1424,1425],{},[21,1426,1427],{},"Web 配信の黄金点",[236,1429,1430,1433,1436,1439],{},[260,1431,1432],{},"75%",[260,1434,1435],{},"良好",[260,1437,1438],{},"約30%",[260,1440,1441],{},"軽量化優先",[236,1443,1444,1447,1450,1453],{},[260,1445,1446],{},"60%",[260,1448,1449],{},"ノイズが見え始める",[260,1451,1452],{},"約22%",[260,1454,1455],{},"サムネイル等",[236,1457,1458,1461,1464,1467],{},[260,1459,1460],{},"40%",[260,1462,1463],{},"明確に劣化",[260,1465,1466],{},"約15%",[260,1468,1469],{},"非推奨",[17,1471,1472],{},"85% より上は容量削減効率が急落し、75% 以下は輪郭にブロックノイズが発生し始める。この「85% の黄金点」は Google の PageSpeed Insights が推奨する水準とも一致している。",[43,1474,1476],{"id":1475},"コツ2リサイズは圧縮より先に行う","コツ2：リサイズは圧縮より先に行う",[17,1478,1479],{},"「圧縮前にピクセル数を表示サイズに合わせる」は、品質と容量の両立において圧縮設定の調整より効果が大きい。",[17,1481,1482,1483,1487],{},"3,000px 幅の写真を 300px で表示するページに置くと、ダウンロードされるのは 3,000px の高解像度データであり、ブラウザが表示時に縮小するだけだ。無駄な転送が発生している。",[53,1484,1486],{"href":1485},"\u002Ftools\u002Fimage-resize","画像リサイズツール"," で先に縮小してから圧縮する手順を徹底すること。",[17,1489,1490,1491,1494],{},"なお、元画像より ",[21,1492,1493],{},"大きく拡大しても画質は上がらない","。補間処理でぼやけるだけで情報量は増えないため、リサイズは縮小方向にのみ使う。",[43,1496,1498],{"id":1497},"コツ3exif-メタデータを除去する","コツ3：EXIF メタデータを除去する",[17,1500,1501,1502,1505],{},"前述のプライバシーリスクに加え、EXIF は数 KB〜数十 KB のオーバーヘッドになる。多くの圧縮ツールは EXIF 除去をオプションとして提供しているが、",[21,1503,1504],{},"デフォルトでオフ"," のものも多い。除去設定を確認してから処理することを習慣にする。",[43,1507,1509],{"id":1508},"コツ4非可逆圧縮を繰り返さない","コツ4：非可逆圧縮を繰り返さない",[17,1511,1512,1513,1516],{},"JPG の非可逆圧縮は「元画像 → 圧縮済み JPG」の処理ごとに画質が劣化する。一度圧縮した JPG を再度読み込んで再圧縮すると、劣化が積み重なる。必ず ",[21,1514,1515],{},"元画像（RAW または高品質 JPG）から 1 回だけ"," 圧縮する運用にする。",[43,1518,1520],{"id":1519},"コツ5重要な画像は目視で差分確認する","コツ5：重要な画像は目視で差分確認する",[17,1522,1523],{},"アイキャッチ・製品写真・プレゼン図版など視覚的品質が重要な画像は、圧縮前後の比較確認を行う。多くのツールは圧縮前後を並べて表示するプレビュー機能を持つ。自動バッチ処理に任せると過剰圧縮が見落とされることがある。",[36,1525],{},[12,1527,1528],{"id":1528},"オンライン画像圧縮ツールの比較",[43,1530,1531],{"id":1531},"主要ツール比較表",[17,1533,1534],{},"以下は 2026 年時点での主要な画像圧縮ツールの比較だ。",[230,1536,1537,1558],{},[233,1538,1539],{},[236,1540,1541,1543,1545,1548,1551,1553,1556],{},[239,1542,241],{},[239,1544,913],{},[239,1546,1547],{},"処理方式",[239,1549,1550],{},"無料枠",[239,1552,924],{},[239,1554,1555],{},"EXIF 除去",[239,1557,250],{},[255,1559,1560,1587,1604,1625,1643,1660],{},[236,1561,1562,1567,1572,1575,1578,1581,1584],{},[260,1563,1564],{},[21,1565,1566],{},"Zerosend",[260,1568,1569],{},[21,1570,1571],{},"なし（ブラウザ完結）",[260,1573,1574],{},"Web Worker + browser-image-compression",[260,1576,1577],{},"無制限",[260,1579,1580],{},"○",[260,1582,1583],{},"○（デフォルト有効）",[260,1585,1586],{},"○（SW キャッシュ）",[236,1588,1589,1591,1593,1595,1597,1600,1602],{},[260,1590,290],{},[260,1592,1571],{},[260,1594,1007],{},[260,1596,1577],{},[260,1598,1599],{},"△（1枚ずつ）",[260,1601,1580],{},[260,1603,1580],{},[236,1605,1606,1608,1611,1613,1616,1619,1622],{},[260,1607,304],{},[260,1609,1610],{},"PNG\u002FJPG をサーバーに送信",[260,1612,957],{},[260,1614,1615],{},"月20枚",[260,1617,1618],{},"○（API）",[260,1620,1621],{},"△",[260,1623,1624],{},"✕",[236,1626,1627,1629,1632,1634,1637,1639,1641],{},[260,1628,320],{},[260,1630,1631],{},"サーバーに送信",[260,1633,957],{},[260,1635,1636],{},"日2回",[260,1638,1580],{},[260,1640,1621],{},[260,1642,1624],{},[236,1644,1645,1647,1649,1651,1654,1656,1658],{},[260,1646,334],{},[260,1648,1631],{},[260,1650,957],{},[260,1652,1653],{},"制限あり",[260,1655,1580],{},[260,1657,1621],{},[260,1659,1624],{},[236,1661,1662,1664,1666,1668,1670,1672,1674],{},[260,1663,348],{},[260,1665,1631],{},[260,1667,957],{},[260,1669,1653],{},[260,1671,1621],{},[260,1673,1621],{},[260,1675,1624],{},[17,1677,1678],{},"TinyPNG や Smallpdf は高品質なサービスだが、ファイルを一度クラウドサーバーに送信する設計であるため、機密性の高い画像（社内資料・個人情報を含む写真など）には適さない。",[43,1680,1681],{"id":1681},"サーバー送信有無を自分で確認する方法",[17,1683,1684,1685,1688],{},"ツールの説明を信頼するだけでなく、",[21,1686,1687],{},"DevTools の Network タブで実際に確認する"," のが確実だ。",[392,1690,1691,1694,1704,1707,1710],{},[395,1692,1693],{},"圧縮ツールのページを開く",[395,1695,1696,1697,1699,1700,1703],{},"ブラウザの DevTools を起動（Windows: ",[111,1698,428],{},"、Mac: ",[111,1701,1702],{},"Cmd + Option + I","）",[395,1705,1706],{},"「Network」タブを選択し「Preserve log」を有効にする",[395,1708,1709],{},"画像をドラッグ&ドロップして処理を実行する",[395,1711,1712],{},"Network タブの通信ログを確認する",[17,1714,1715,1716,1719],{},"サーバー送信型のツールは、処理時に大きなペイロードを含む POST リクエストが発生する。Zerosend の場合、画像をドロップしても POST リクエストは発生せず、CDN・アナリティクスなどの通常のページリクエストのみが表示される。",[21,1717,1718],{},"アップロード通信ゼロ"," を自分で確認できる。",[36,1721],{},[12,1723,1725],{"id":1724},"zerosend-でブラウザ完結の画像圧縮を行う手順","Zerosend でブラウザ完結の画像圧縮を行う手順",[17,1727,1728,1729,1733,1734,1736],{},"Zerosend の画像圧縮ツールは ",[53,1730,378],{"href":1731,"rel":1732},"https:\u002F\u002Fgithub.com\u002FDonaldcwl\u002Fbrowser-image-compression",[57]," ライブラリを ",[21,1735,386],{}," 上で動作させている。Web Worker はメインスレッドとは別のスレッドで処理を実行するブラウザの仕組みであり、処理中でもページの操作が固まらない。圧縮処理はすべてユーザーのブラウザ内で完結し、外部サーバーへの送信は一切発生しない。",[43,1738,390],{"id":390},[392,1740,1741,1746,1749,1755,1758,1761],{},[395,1742,1743,400],{},[53,1744,1745],{"href":1745},"\u002Ftools\u002Fimage-compress",[395,1747,1748],{},"JPG \u002F PNG \u002F WebP 形式の画像をドラッグ&ドロップ、または「ファイルを選択」から複数選択する",[395,1750,1751,1752,1703],{},"品質スライダーを調整する（推奨値は ",[21,1753,1754],{},"80〜85",[395,1756,1757],{},"「圧縮する」ボタンをクリックする",[395,1759,1760],{},"圧縮結果のプレビューと圧縮率を確認する",[395,1762,1763],{},"1 枚の場合はそのままダウンロード、複数の場合は ZIP でまとめてダウンロードする",[43,1765,445],{"id":445},[17,1767,1768],{},"Zerosend は Service Worker によるキャッシュを実装しており、初回アクセス後はネットワーク接続がなくても動作する。出張先や電波の届かない環境でも、ブラウザを開いていれば画像圧縮を実行できる。",[36,1770],{},[12,1772,1021],{"id":1021},[43,1774,1776],{"id":1775},"透過-png-を-jpg-変換すると白背景になる","透過 PNG を JPG 変換すると白背景になる",[17,1778,1779,1780,1783,1784,1788],{},"JPG フォーマットは透過（アルファチャンネル）をサポートしていない。透過 PNG を JPG 変換すると、透過部分が白で塗りつぶされる。ロゴやアイコンで透過が必要な場合は ",[21,1781,1782],{},"PNG のまま圧縮するか WebP に変換する","。",[53,1785,1787],{"href":1786},"\u002Ftools\u002Fimage-convert","画像形式変換ツール"," を参照。",[43,1790,1791],{"id":1791},"圧縮後に色がくすんで見える",[17,1793,1794,1795,1798],{},"Adobe RGB や Display P3 プロファイルで保存された画像を sRGB 非対応の処理フローに通すと、色空間の変換時に彩度が失われる。Web 配信では ",[21,1796,1797],{},"sRGB に統一"," するのが安全だ。プロファイルが不明な画像は、圧縮後に別のブラウザやデバイスで色味を確認する。",[43,1800,1802],{"id":1801},"sns-投稿は自分での極限圧縮が逆効果になる場合がある","SNS 投稿は自分での極限圧縮が逆効果になる場合がある",[17,1804,1805,1806,1809],{},"Twitter（X）・Instagram・LINE は投稿時に独自アルゴリズムで再圧縮を行う。自分で品質を 40〜50% まで下げた上に SNS 側の再圧縮が重なると、最終的な画質が著しく低下することがある。SNS 向けの画像は ",[21,1807,1808],{},"80〜85% の設定で一度だけ圧縮"," し、プラットフォームの再処理に任せる方が綺麗な結果になりやすい。",[43,1811,1812],{"id":1812},"バッチ処理後に全件確認をしない",[17,1814,1815],{},"一括処理の便利さから、圧縮後の全ファイルを確認しないまま公開するケースがある。異常に小さいファイルサイズになっているものや、極端に品質が下がっているものが混入していることがある。少なくともサムネイル一覧で目視確認する習慣をつける。",[36,1817],{},[12,1819,487],{"id":486},[43,1821,1823],{"id":1822},"q1-webp-への変換は必須ですか","Q1. WebP への変換は必須ですか？",[17,1825,1826,1827,1829],{},"必須ではないが、推奨する。同等の画質で JPG より 25〜35% 容量を削減できるケースが多い。ただし古い環境への対応が必要な場合は ",[111,1828,113],{}," タグでフォールバックを設定する。",[43,1831,1833],{"id":1832},"q2-png-を圧縮しても容量があまり減らないのはなぜですか","Q2. PNG を圧縮しても容量があまり減らないのはなぜですか？",[17,1835,1836],{},"PNG は可逆圧縮であるため、非可逆圧縮の JPG ほど大幅な削減は期待できない。PNG の容量を大きく削減したい場合は、非可逆の WebP への変換を検討する。透過が不要な写真系コンテンツであれば JPG または WebP lossy が最適だ。",[43,1838,1840],{"id":1839},"q3-圧縮ツールに画像をアップロードするとデータは保存されますか","Q3. 圧縮ツールに画像をアップロードするとデータは保存されますか？",[17,1842,1843],{},"サーバー処理型のツール（TinyPNG・Smallpdf 等）は各社のプライバシーポリシーに従って一定期間保存される場合がある。ブラウザ処理型のツール（Zerosend・Squoosh 等）はファイルをサーバーに送信しないため、保存の問題自体が発生しない。",[43,1845,1847],{"id":1846},"q4-圧縮後にファイルが元より大きくなることはありますか","Q4. 圧縮後にファイルが元より大きくなることはありますか？",[17,1849,1850],{},"ある。既に高圧縮済みの JPG をさらに圧縮しようとすると、再エンコードのオーバーヘッドでわずかに大きくなる場合がある。また、小さな PNG を WebP に変換した際に逆に大きくなるケースもある。圧縮後サイズを必ず確認し、大きくなっていた場合は元ファイルを使用する。",[43,1852,1854],{"id":1853},"q5-スマートフォンのカメラ写真に含まれる-gps-情報を削除できますか","Q5. スマートフォンのカメラ写真に含まれる GPS 情報を削除できますか？",[17,1856,1857,1858,1863],{},"EXIF 除去機能を持つ圧縮ツールであれば削除できる。Zerosend の画像圧縮はデフォルトで EXIF を除去する。除去されているかどうかは、処理後のファイルを ",[53,1859,1862],{"href":1860,"rel":1861},"https:\u002F\u002Fexifdata.com\u002F",[57],"Jeffrey's Exif Viewer"," 等のオンラインツールで確認できる。",[36,1865],{},[12,1867,1114],{"id":1114},[17,1869,1870],{},"画像圧縮の実践的な結論をまとめる。",[535,1872,1873,1879,1884,1890,1896],{},[395,1874,1875,1878],{},[21,1876,1877],{},"フォーマット選択","：写真は JPG または WebP lossy、ロゴ・透過は PNG または WebP lossless",[395,1880,1881,1883],{},[21,1882,1374],{},"：JPG \u002F WebP は 80〜85% を起点に調整する",[395,1885,1886,1889],{},[21,1887,1888],{},"処理順序","：リサイズ（ピクセル数削減）→ 圧縮（品質調整）→ EXIF 除去",[395,1891,1892,1895],{},[21,1893,1894],{},"非可逆圧縮は元画像から1回のみ","：再圧縮による劣化の積み重ねを避ける",[395,1897,1898,1901],{},[21,1899,1900],{},"ツール選定","：機密画像を扱う場合はサーバー送信の有無を DevTools で確認する",[17,1903,1904,1905,1908],{},"機密性の高い画像、個人写真、社内資料の圧縮には、ブラウザ完結処理の ",[53,1906,1907],{"href":1745},"Zerosend 画像圧縮ツール"," が選択肢の一つとなる。処理が完全にローカルで完結するため、送信リスクが構造的にない。品質スライダーと圧縮前後のプレビューで結果を確認しながら、適切な設定を見つけることができる。",{"title":121,"searchDepth":142,"depth":142,"links":1910},[1911,1916,1921,1928,1932,1936,1942,1949],{"id":1190,"depth":142,"text":1191,"children":1912},[1913,1914,1915],{"id":1194,"depth":172,"text":1195},{"id":1210,"depth":172,"text":1211},{"id":1217,"depth":172,"text":1218},{"id":1226,"depth":142,"text":1227,"children":1917},[1918,1919,1920],{"id":1230,"depth":172,"text":1231},{"id":1311,"depth":172,"text":1312},{"id":1334,"depth":172,"text":1334},{"id":1351,"depth":142,"text":1351,"children":1922},[1923,1924,1925,1926,1927],{"id":1354,"depth":172,"text":1355},{"id":1475,"depth":172,"text":1476},{"id":1497,"depth":172,"text":1498},{"id":1508,"depth":172,"text":1509},{"id":1519,"depth":172,"text":1520},{"id":1528,"depth":142,"text":1528,"children":1929},[1930,1931],{"id":1531,"depth":172,"text":1531},{"id":1681,"depth":172,"text":1681},{"id":1724,"depth":142,"text":1725,"children":1933},[1934,1935],{"id":390,"depth":172,"text":390},{"id":445,"depth":172,"text":445},{"id":1021,"depth":142,"text":1021,"children":1937},[1938,1939,1940,1941],{"id":1775,"depth":172,"text":1776},{"id":1791,"depth":172,"text":1791},{"id":1801,"depth":172,"text":1802},{"id":1812,"depth":172,"text":1812},{"id":486,"depth":142,"text":487,"children":1943},[1944,1945,1946,1947,1948],{"id":1822,"depth":172,"text":1823},{"id":1832,"depth":172,"text":1833},{"id":1839,"depth":172,"text":1840},{"id":1846,"depth":172,"text":1847},{"id":1853,"depth":172,"text":1854},{"id":1114,"depth":142,"text":1114},"画像圧縮で画質を損なわず最大限軽くする方法を解説。品質設定・フォーマット選択・リサイズ順序・サーバー非送信ツールの比較まで実用的な情報を網羅。",{},"\u002Fblog\u002Fimage-compress-guide","2026-04-19",{"title":1171,"description":1950},"image-compress-guide","blog\u002Fimage-compress-guide",[1166,621,623],"NdMNaoponIzt7H_Nhsf12BUmwdeRFRcxjEU5co1oVCo",1782000329841]