[{"data":1,"prerenderedAt":3021},["ShallowReactive",2],{"blog-tag-ja-seo":3},[4,569,934,1128,1702,2242],{"id":5,"title":6,"author":7,"body":8,"category":551,"coverImage":552,"description":553,"draft":554,"extension":555,"locale":556,"meta":557,"navigation":196,"noindex":554,"path":558,"publishedAt":559,"seo":560,"slug":561,"stem":562,"tags":563,"updatedAt":559,"__hash__":568},"blog\u002Fblog\u002Ffavicon-svg-png-ico-guide.md","ファビコンのSVG・PNG・ICO違いと正しい設定方法を徹底解説","Zerosend Editorial",{"type":9,"value":10,"toc":535},"minimark",[11,16,20,28,31,35,40,47,61,65,68,112,122,126,145,152,159,161,164,167,357,372,379,386,388,391,395,398,402,413,422,427,431,441,444,446,449,455,468,477,487,489,492,499,521,531],[12,13,15],"h2",{"id":14},"ファビコンとは何かなぜ形式選びが重要なのか","ファビコンとは何か、なぜ形式選びが重要なのか",[17,18,19],"p",{},"ファビコン（favicon）はブラウザのタブ、ブックマーク一覧、スマートフォンのホーム画面ショートカットなど、あらゆる場面でサイトを識別するための小さなアイコンだ。見た目上は小さな要素だが、形式の選び方を誤るとブラウザによって表示が崩れたり、高解像度ディスプレイでぼやけたりする。",[17,21,22,23,27],{},"ファビコンに使われる主な形式は ",[24,25,26],"strong",{},"ICO・PNG・SVG"," の3種類で、それぞれ特性がまったく異なる。どれか一つだけを置けば済む、という状況は現代のWebでは通用しない。",[29,30],"hr",{},[12,32,34],{"id":33},"icopngsvg-それぞれの違い","ICO・PNG・SVG それぞれの違い",[36,37,39],"h3",{"id":38},"ico形式後方互換性のための保険","ICO形式：後方互換性のための「保険」",[17,41,42,46],{},[43,44,45],"code",{},".ico"," はもともとWindowsのアイコン用形式で、1ファイルに複数の解像度（16×16, 32×32, 48×48など）を格納できる。Internet ExplorerはICOしか認識しなかった歴史的経緯から、長らくファビコンのデファクト標準だった。",[17,48,49,50,53,54,60],{},"現在のChromeやFirefox、Safariも ",[43,51,52],{},"favicon.ico"," をルートディレクトリに置けば認識するため、",[24,55,56,57,59],{},"「",[43,58,52],{}," をとりあえず置く」という慣習が今も続いている","。ただしベクター化できないため、拡大時に劣化する。",[36,62,64],{"id":63},"png形式現在の主流","PNG形式：現在の主流",[17,66,67],{},"PNGはアルファチャンネル（透明）をサポートし、色再現性も高い。モダンブラウザはすべてPNGのファビコンに対応しており、以下のサイズが実務上の標準とされている。",[69,70,71,84],"table",{},[72,73,74],"thead",{},[75,76,77,81],"tr",{},[78,79,80],"th",{},"用途",[78,82,83],{},"サイズ",[85,86,87,96,104],"tbody",{},[75,88,89,93],{},[90,91,92],"td",{},"ブラウザタブ（汎用）",[90,94,95],{},"32×32 px",[75,97,98,101],{},[90,99,100],{},"Apple Touch Icon（iOSホーム画面）",[90,102,103],{},"180×180 px",[75,105,106,109],{},[90,107,108],{},"Android \u002F PWAアイコン",[90,110,111],{},"192×192 px, 512×512 px",[17,113,114,117,118,121],{},[43,115,116],{},"\u003Clink rel=\"icon\" type=\"image\u002Fpng\" sizes=\"32x32\" href=\"\u002Ffavicon-32x32.png\">"," のように ",[43,119,120],{},"sizes"," 属性を明示することで、ブラウザが適切な解像度を選択できる。",[36,123,125],{"id":124},"svg形式将来に向けたスケーラブルな選択","SVG形式：将来に向けた「スケーラブル」な選択",[17,127,128,129,132,133,136,137,144],{},"SVGはXMLベースのベクター形式で、どんな解像度でも劣化しない。ChromeやFirefox、Edgeはすでに ",[43,130,131],{},"rel=\"icon\""," でのSVGを正式サポートしており、",[43,134,135],{},"\u003Clink rel=\"icon\" type=\"image\u002Fsvg+xml\" href=\"\u002Ffavicon.svg\">"," と記述するだけで有効化できる（",[138,139,143],"a",{"href":140,"rel":141},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FHTML\u002FAttributes\u002Frel#icon",[142],"nofollow","MDN: rel=icon","）。",[17,146,147,148,151],{},"ただし",[24,149,150],{},"SafariはSVGファビコンに対応していない","（2025年時点）。そのため現時点でSVGだけに依存するのはリスクがあり、ICOやPNGとの併用が推奨される。",[17,153,154,155,158],{},"また、SVGにはダークモード対応という強みもある。CSSの ",[43,156,157],{},"prefers-color-scheme"," メディアクエリをSVG内に埋め込むことで、OSのダークモード設定に応じてアイコンの色を自動切替できる。",[29,160],{},[12,162,163],{"id":163},"推奨される現実的な設定パターン",[17,165,166],{},"形式ごとの特性を踏まえると、現代のWebサイトに最低限必要なファビコン構成は以下のとおりだ。",[168,169,174],"pre",{"className":170,"code":171,"language":172,"meta":173,"style":173},"language-html shiki shiki-themes github-light github-dark","\u003C!-- ICO：後方互換（ルートに置くだけでブラウザが自動検出） -->\n\u003C!-- favicon.ico は \u003Clink> 不要でルートに置くと自動認識 -->\n\n\u003C!-- PNG：モダンブラウザ・各種デバイス向け -->\n\u003Clink rel=\"icon\" type=\"image\u002Fpng\" sizes=\"32x32\" href=\"\u002Ffavicon-32x32.png\">\n\u003Clink rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"\u002Fapple-touch-icon.png\">\n\n\u003C!-- SVG：Chrome \u002F Firefox \u002F Edge 向け（将来性） -->\n\u003Clink rel=\"icon\" type=\"image\u002Fsvg+xml\" href=\"\u002Ffavicon.svg\">\n\n\u003C!-- PWA \u002F Android向け -->\n\u003Clink rel=\"manifest\" href=\"\u002Fsite.webmanifest\">\n","html","",[43,175,176,185,191,198,204,253,283,288,294,323,328,334],{"__ignoreMap":173},[177,178,181],"span",{"class":179,"line":180},"line",1,[177,182,184],{"class":183},"sJ8bj","\u003C!-- ICO：後方互換（ルートに置くだけでブラウザが自動検出） -->\n",[177,186,188],{"class":179,"line":187},2,[177,189,190],{"class":183},"\u003C!-- favicon.ico は \u003Clink> 不要でルートに置くと自動認識 -->\n",[177,192,194],{"class":179,"line":193},3,[177,195,197],{"emptyLinePlaceholder":196},true,"\n",[177,199,201],{"class":179,"line":200},4,[177,202,203],{"class":183},"\u003C!-- PNG：モダンブラウザ・各種デバイス向け -->\n",[177,205,207,211,215,219,222,226,229,231,234,237,239,242,245,247,250],{"class":179,"line":206},5,[177,208,210],{"class":209},"sVt8B","\u003C",[177,212,214],{"class":213},"s9eBZ","link",[177,216,218],{"class":217},"sScJk"," rel",[177,220,221],{"class":209},"=",[177,223,225],{"class":224},"sZZnC","\"icon\"",[177,227,228],{"class":217}," type",[177,230,221],{"class":209},[177,232,233],{"class":224},"\"image\u002Fpng\"",[177,235,236],{"class":217}," sizes",[177,238,221],{"class":209},[177,240,241],{"class":224},"\"32x32\"",[177,243,244],{"class":217}," href",[177,246,221],{"class":209},[177,248,249],{"class":224},"\"\u002Ffavicon-32x32.png\"",[177,251,252],{"class":209},">\n",[177,254,256,258,260,262,264,267,269,271,274,276,278,281],{"class":179,"line":255},6,[177,257,210],{"class":209},[177,259,214],{"class":213},[177,261,218],{"class":217},[177,263,221],{"class":209},[177,265,266],{"class":224},"\"apple-touch-icon\"",[177,268,236],{"class":217},[177,270,221],{"class":209},[177,272,273],{"class":224},"\"180x180\"",[177,275,244],{"class":217},[177,277,221],{"class":209},[177,279,280],{"class":224},"\"\u002Fapple-touch-icon.png\"",[177,282,252],{"class":209},[177,284,286],{"class":179,"line":285},7,[177,287,197],{"emptyLinePlaceholder":196},[177,289,291],{"class":179,"line":290},8,[177,292,293],{"class":183},"\u003C!-- SVG：Chrome \u002F Firefox \u002F Edge 向け（将来性） -->\n",[177,295,297,299,301,303,305,307,309,311,314,316,318,321],{"class":179,"line":296},9,[177,298,210],{"class":209},[177,300,214],{"class":213},[177,302,218],{"class":217},[177,304,221],{"class":209},[177,306,225],{"class":224},[177,308,228],{"class":217},[177,310,221],{"class":209},[177,312,313],{"class":224},"\"image\u002Fsvg+xml\"",[177,315,244],{"class":217},[177,317,221],{"class":209},[177,319,320],{"class":224},"\"\u002Ffavicon.svg\"",[177,322,252],{"class":209},[177,324,326],{"class":179,"line":325},10,[177,327,197],{"emptyLinePlaceholder":196},[177,329,331],{"class":179,"line":330},11,[177,332,333],{"class":183},"\u003C!-- PWA \u002F Android向け -->\n",[177,335,337,339,341,343,345,348,350,352,355],{"class":179,"line":336},12,[177,338,210],{"class":209},[177,340,214],{"class":213},[177,342,218],{"class":217},[177,344,221],{"class":209},[177,346,347],{"class":224},"\"manifest\"",[177,349,244],{"class":217},[177,351,221],{"class":209},[177,353,354],{"class":224},"\"\u002Fsite.webmanifest\"",[177,356,252],{"class":209},[17,358,359,362,363,366,367,144],{},[43,360,361],{},"site.webmanifest"," の ",[43,364,365],{},"icons"," 配列に192×192と512×512のPNGを登録しておくと、Androidホーム画面への追加やPWAインストール時に適切なアイコンが表示される（",[138,368,371],{"href":369,"rel":370},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fappmanifest\u002F#icons-member",[142],"Web App Manifest仕様 - W3C",[17,373,374,375,378],{},"ポイントは「SVGを優先しつつICOとPNGを保険として残す」構成にすることだ。ブラウザは ",[43,376,377],{},"\u003Clink>"," タグを上から評価し、サポートしている形式を自動で選ぶため、複数形式を並べても問題ない。",[17,380,381],{},[382,383],"img",{"alt":384,"src":385},"スクショ: ブラウザのタブにファビコンが表示されているようす","TODO-screenshot",[29,387],{},[12,389,390],{"id":390},"実際にファビコンを用意する方法",[36,392,394],{"id":393},"手順1元画像を用意する","手順1：元画像を用意する",[17,396,397],{},"最低でも512×512px以上の正方形画像（PNGまたはSVG）を用意する。これを元に各サイズへリサイズ・変換する。ロゴや既存のアイコン素材をそのまま使うことが多い。",[36,399,401],{"id":400},"手順2必要なサイズ形式に変換する","手順2：必要なサイズ・形式に変換する",[17,403,404,405,408,409,412],{},"複数サイズのICO、各種PNG、SVGを手作業で揃えるのは手間がかかる。オンラインツールを使うのが現実的で、代表的なものに ",[24,406,407],{},"RealFaviconGenerator"," や ",[24,410,411],{},"Favicon.io"," がある。どちらも無料で使えるが、アップロードした画像がサーバーに送信・保存される点は留意が必要だ。",[17,414,415,416,421],{},"プライバシーを重視する場合、または社内ロゴや非公開素材を扱う場合は、ファイルがサーバーへ送信されないツールが安心だ。",[138,417,420],{"href":418,"rel":419},"https:\u002F\u002Fzerosend.site\u002Ftools\u002Ffavicon-generator",[142],"ファビコン生成ツール"," はブラウザ内だけで処理が完結し、アップロードした画像が外部サーバーに送信されない設計になっている。ICO・PNG・SVGの各形式を一括で出力できるため、上記の推奨構成を一度に揃えられる。",[17,423,424],{},[382,425],{"alt":426,"src":385},"スクショ: ファビコン生成ツールの操作画面",[36,428,430],{"id":429},"手順3ファイルを配置してhtmlに記述する","手順3：ファイルを配置してHTMLに記述する",[17,432,433,434,436,437,440],{},"生成したファイルをWebサーバーのルートディレクトリ（または任意のパス）に配置し、前節で示した ",[43,435,377],{}," タグを ",[43,438,439],{},"\u003Chead>"," 内に記述すれば完了だ。",[17,442,443],{},"配置後は複数のブラウザとデバイスで表示を確認する。Chromeの開発者ツール（DevTools）のApplicationタブにある「Manifest」セクションでPWA用アイコンの認識状況も確認できる。",[29,445],{},[12,447,448],{"id":448},"よくある失敗と注意点",[17,450,451,454],{},[24,452,453],{},"キャッシュが残って更新されない","：ファビコンはブラウザに強くキャッシュされる。変更後に反映されない場合は、ファイル名にバージョン番号やクエリパラメータを付与するか、スーパーリロード（Ctrl+Shift+R）で確認する。",[17,456,457,460,461,463,464,467],{},[24,458,459],{},"サイズ指定を省略する","：",[43,462,120],{}," 属性を省略すると、ブラウザが適切なファビコンを選択できず、低解像度のアイコンが拡大表示される場合がある。必ず ",[43,465,466],{},"sizes=\"32x32\""," のように明示する。",[17,469,470,473,474,476],{},[24,471,472],{},"ICOファイルを省略する","：古いブラウザや一部のRSSリーダー、ブックマーク管理ツールはICOしか認識しない。",[43,475,52],{}," をルートに置くことで余計なトラブルを防げる。",[17,478,479,482,483,486],{},[24,480,481],{},"apple-touch-icon を忘れる","：iOSでホーム画面に追加した際に使われるアイコンは ",[43,484,485],{},"apple-touch-icon"," で指定する。これを省略すると、iOSがサイトのスクリーンショットをアイコン代わりに使うため、見栄えが悪くなる。",[29,488],{},[12,490,491],{"id":491},"まとめ",[17,493,494,495,498],{},"ファビコンの形式選びは「どれか一つを選ぶ」問題ではなく、",[24,496,497],{},"それぞれの形式の役割を理解して組み合わせる","ことがポイントだ。",[500,501,502,509,515],"ul",{},[503,504,505,508],"li",{},[24,506,507],{},"ICO","：後方互換のためルートに置く",[503,510,511,514],{},[24,512,513],{},"PNG","：現在の主力。32×32、180×180、192×192、512×512を用意",[503,516,517,520],{},[24,518,519],{},"SVG","：ダークモード対応と将来の主流候補。現時点はPNG・ICOと併用",[17,522,523,524,527,528,530],{},"各形式を手動で揃えるのが面倒な場合は、ブラウザ内で完結する ",[138,525,420],{"href":418,"rel":526},[142]," のようなツールを活用して一括生成するのが効率的だ。形式の組み合わせと ",[43,529,377],{}," タグの記述を正しく設定すれば、あらゆるデバイス・ブラウザで意図通りのファビコンが表示される。",[532,533,534],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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":173,"searchDepth":187,"depth":187,"links":536},[537,538,543,544,549,550],{"id":14,"depth":187,"text":15},{"id":33,"depth":187,"text":34,"children":539},[540,541,542],{"id":38,"depth":193,"text":39},{"id":63,"depth":193,"text":64},{"id":124,"depth":193,"text":125},{"id":163,"depth":187,"text":163},{"id":390,"depth":187,"text":390,"children":545},[546,547,548],{"id":393,"depth":193,"text":394},{"id":400,"depth":193,"text":401},{"id":429,"depth":193,"text":430},{"id":448,"depth":187,"text":448},{"id":491,"depth":187,"text":491},"tech",null,"ファビコンの形式（SVG・PNG・ICO）ごとの違いと、ブラウザ対応・設定方法をWeb担当者向けに解説。ブラウザ内完結の無料ツールも紹介。",false,"md","ja",{},"\u002Fblog\u002Ffavicon-svg-png-ico-guide","2026-05-28",{"title":6,"description":553},"favicon-svg-png-ico-guide","blog\u002Ffavicon-svg-png-ico-guide",[564,565,566,567],"ファビコン","Web制作","SEO","技術解説","ah6-GegUDt51_pojAOyzLzrF3LNnhaO7JPdUWvu8L9M",{"id":570,"title":571,"author":7,"body":572,"category":551,"coverImage":552,"description":923,"draft":554,"extension":555,"locale":556,"meta":924,"navigation":196,"noindex":554,"path":925,"publishedAt":926,"seo":927,"slug":928,"stem":929,"tags":930,"updatedAt":926,"__hash__":933},"blog\u002Fblog\u002Fjpeg-png-webp-difference.md","JPEG・PNG・WebP の違いと使い分け完全ガイド｜どれを選ぶべきか",{"type":9,"value":573,"toc":903},[574,577,579,583,587,598,602,613,617,636,638,642,645,681,684,784,790,792,795,798,801,804,812,815,834,837,842,844,847,851,854,858,861,865,868,870,872,900],[17,575,576],{},"Webサイトに画像を掲載するとき、「JPEG でいいか、PNG の方がきれいか、最近よく聞く WebP はどう使うのか」と迷う場面は多い。形式を間違えると、ページの読み込みが遅くなったり、透過が消えて背景が白く塗りつぶされたりと、見た目や Core Web Vitals に直接影響する。本記事では三つの形式の仕組みから実際の選び方、変換の手順までを実践的に整理する。",[29,578],{},[12,580,582],{"id":581},"jpegpngwebpそれぞれ何が違うのか","JPEG・PNG・WebP、それぞれ何が違うのか",[36,584,586],{"id":585},"jpegjpg","JPEG（.jpg）",[17,588,589,590,593,594,597],{},"JPEG は ",[24,591,592],{},"非可逆圧縮"," を採用した形式で、人間の目が感知しにくい色差情報を間引いてファイルサイズを小さくする。写真や複雑なグラデーションとの相性が良く、品質 75〜85 程度に設定すれば視覚的な劣化をほぼ感じさせずに大幅な軽量化が可能だ。ただし ",[24,595,596],{},"透過（アルファチャンネル）は非対応"," で、保存を繰り返すたびに画質が劣化する点に注意が必要。",[36,599,601],{"id":600},"pngpng","PNG（.png）",[17,603,604,605,608,609,612],{},"PNG は ",[24,606,607],{},"可逆圧縮"," を採用しており、圧縮・解凍を繰り返しても元のピクセル情報が完全に保持される。ロゴ・アイコン・スクリーンショットなど、エッジが鋭くテキストを含む画像で威力を発揮する。",[24,610,611],{},"透過に対応"," しているため、背景を透明にしたロゴをWebサイトに配置する用途では事実上の標準。その分、写真のような複雑な色変化を含む画像ではファイルサイズが JPEG より大きくなりやすい。",[36,614,616],{"id":615},"webpwebp","WebP（.webp）",[17,618,619,620,623,624,629,630,635],{},"WebP は Google が開発した形式で、",[24,621,622],{},"可逆・非可逆の両モードと透過","をすべてサポートする。",[138,625,628],{"href":626,"rel":627},"https:\u002F\u002Fdevelopers.google.com\u002Fspeed\u002Fwebp",[142],"Google の公式データ"," によると、非可逆 WebP は同等画質の JPEG に比べて約 25〜34% 小さく、可逆 WebP は同等の PNG より約 26% 小さい。",[138,631,634],{"href":632,"rel":633},"https:\u002F\u002Fcaniuse.com\u002Fwebp",[142],"Can I use のデータ"," では 2024 年時点で主要ブラウザのサポート率は 97% を超えており、実用上の互換性問題はほぼ解消されている。",[29,637],{},[12,639,641],{"id":640},"どれを使うべきか用途別の判断基準","どれを使うべきか：用途別の判断基準",[17,643,644],{},"迷ったときは次の三つの問いで絞り込める。",[646,647,648,661,671],"ol",{},[503,649,650,653],{},[24,651,652],{},"写真か、テキスト・ロゴか？",[500,654,655,658],{},[503,656,657],{},"写真 → WebP（次点で JPEG）",[503,659,660],{},"テキスト・ロゴ・イラスト → WebP（次点で PNG）",[503,662,663,666],{},[24,664,665],{},"透過が必要か？",[500,667,668],{},[503,669,670],{},"必要 → WebP または PNG（JPEG は不可）",[503,672,673,676],{},[24,674,675],{},"古いシステムや特定の印刷環境など WebP 非対応の環境か？",[500,677,678],{},[503,679,680],{},"該当する → JPEG（写真）または PNG（ロゴ等）にフォールバック",[36,682,683],{"id":683},"比較表",[69,685,686,701],{},[72,687,688],{},[75,689,690,693,696,698],{},[78,691,692],{},"項目",[78,694,695],{},"JPEG",[78,697,513],{},[78,699,700],{},"WebP",[85,702,703,717,730,744,757,770],{},[75,704,705,708,711,714],{},[90,706,707],{},"圧縮方式",[90,709,710],{},"非可逆",[90,712,713],{},"可逆",[90,715,716],{},"可逆・非可逆両対応",[75,718,719,722,725,728],{},[90,720,721],{},"透過（アルファ）",[90,723,724],{},"非対応",[90,726,727],{},"対応",[90,729,727],{},[75,731,732,735,738,741],{},[90,733,734],{},"ファイルサイズ（写真）",[90,736,737],{},"中",[90,739,740],{},"大",[90,742,743],{},"小",[75,745,746,749,752,755],{},[90,747,748],{},"ファイルサイズ（ロゴ等）",[90,750,751],{},"中〜大",[90,753,754],{},"小〜中",[90,756,743],{},[75,758,759,762,765,767],{},[90,760,761],{},"ブラウザ対応",[90,763,764],{},"ほぼ全て",[90,766,764],{},[90,768,769],{},"97%超（2024年）",[75,771,772,775,778,781],{},[90,773,774],{},"主な用途",[90,776,777],{},"写真・バナー",[90,779,780],{},"ロゴ・スクショ",[90,782,783],{},"Web全般",[17,785,786,789],{},[24,787,788],{},"結論として、新規 Web 制作で特別な制約がなければ WebP を第一候補にする","のが現時点での合理的な選択だ。既存の JPEG・PNG 資産がある場合は、それらを WebP に変換することでページ速度の改善が見込める。",[29,791],{},[12,793,794],{"id":794},"実際に形式を変換する方法",[36,796,797],{"id":797},"オンラインツールを使う場合の注意点",[17,799,800],{},"Smallpdf や TinyPNG、Adobe Express といった有名なオンラインツールは手軽だが、ファイルをいったんサーバーにアップロードして処理する仕組みをとっている。社外秘のスライドキャプチャや顧客データを含む画像を変換する際は、利用規約とプライバシーポリシーの確認が必要になる。",[36,802,803],{"id":803},"ブラウザ内で処理する方法",[17,805,806,807,811],{},"サーバーにファイルを送りたくない場合、",[138,808,810],{"href":809},"\u002Ftools\u002Fimage-convert","画像形式変換ツール"," を使うとブラウザ内だけで変換が完結する。WebAssembly ベースで動作するため、ファイルは外部に送信されない。DevTools の Network タブを開いた状態で変換を実行しても、画像データの通信が発生しないことを自分で確認できる。",[17,813,814],{},"操作手順は次のとおりだ。",[646,816,817,822,825,828,831],{},[503,818,819,821],{},[138,820,810],{"href":809}," をブラウザで開く",[503,823,824],{},"変換したいファイルをドラッグ＆ドロップ、または「ファイルを選択」からアップロード",[503,826,827],{},"出力形式（JPEG \u002F PNG \u002F WebP）を選択する",[503,829,830],{},"必要に応じて品質を調整し、「変換」を実行",[503,832,833],{},"変換後のファイルをダウンロードする",[17,835,836],{},"初回ロード後は Service Worker によってキャッシュされるため、オフライン環境でも動作する。",[17,838,839],{},[382,840],{"alt":841,"src":385},"スクショ: 画像形式変換ツールのファイル選択画面",[29,843],{},[12,845,846],{"id":846},"よくある誤解と落とし穴",[36,848,850],{"id":849},"png-は常に高画質は正確ではない","「PNG は常に高画質」は正確ではない",[17,852,853],{},"PNG は可逆圧縮なので情報の欠落はないが、ファイルサイズが大きくなりやすく、ページ速度に悪影響を与えることがある。写真を PNG で保存しても画質は上がらず、サイズだけが増える。写真は WebP か JPEG を使う方が現実的だ。",[36,855,857],{"id":856},"webp-は古いブラウザで使えないは今や過去の話","「WebP は古いブラウザで使えない」は今や過去の話",[17,859,860],{},"Internet Explorer の終了（2022 年 6 月）以降、主要なビジネス環境で WebP が表示できないケースは大幅に減った。社内システムが特定の旧ブラウザを強制している場合を除き、WebP の採用を躊躇う理由は薄い。",[36,862,864],{"id":863},"jpeg-の再保存劣化は累積する","JPEG の再保存劣化は累積する",[17,866,867],{},"JPEG を編集・保存するたびに非可逆圧縮が適用され、画質が段階的に落ちる。マスターデータは PNG や WebP（可逆モード）で保管し、配布・公開用に JPEG や非可逆 WebP を都度書き出す運用が望ましい。",[29,869],{},[12,871,491],{"id":491},[500,873,874,879,885,891],{},[503,875,876,878],{},[24,877,777],{}," → WebP（互換性が問題なければ）、次点で JPEG",[503,880,881,884],{},[24,882,883],{},"ロゴ・アイコン・透過が必要な画像"," → WebP または PNG",[503,886,887,890],{},[24,888,889],{},"新規 Web 制作全般"," → WebP を基本とし、フォールバックが必要な場合のみ JPEG\u002FPNG を使う",[503,892,893,896,897,899],{},[24,894,895],{},"変換時にファイルをサーバーに送りたくない場合"," → ブラウザ完結型の ",[138,898,810],{"href":809}," が選択肢になる",[17,901,902],{},"形式の選択一つで LCP（Largest Contentful Paint）や CLS（Cumulative Layout Shift）といった Core Web Vitals 指標に影響が出る。小さな意思決定の積み重ねがページ全体のパフォーマンスと SEO に効いてくる。",{"title":173,"searchDepth":187,"depth":187,"links":904},[905,910,913,917,922],{"id":581,"depth":187,"text":582,"children":906},[907,908,909],{"id":585,"depth":193,"text":586},{"id":600,"depth":193,"text":601},{"id":615,"depth":193,"text":616},{"id":640,"depth":187,"text":641,"children":911},[912],{"id":683,"depth":193,"text":683},{"id":794,"depth":187,"text":794,"children":914},[915,916],{"id":797,"depth":193,"text":797},{"id":803,"depth":193,"text":803},{"id":846,"depth":187,"text":846,"children":918},[919,920,921],{"id":849,"depth":193,"text":850},{"id":856,"depth":193,"text":857},{"id":863,"depth":193,"text":864},{"id":491,"depth":187,"text":491},"JPEG・PNG・WebP の違いを画質・ファイルサイズ・透過・対応ブラウザの観点で比較。Web担当者やビジネスパーソンが迷わず形式を選べるよう実践的に解説します。",{},"\u002Fblog\u002Fjpeg-png-webp-difference","2026-05-19",{"title":571,"description":923},"jpeg-png-webp-difference","blog\u002Fjpeg-png-webp-difference",[931,932,565,566],"画像","変換","9dQaLCdyLgXuv_IQveNVOMwTHUIQLW9xfGj_d9pT4nI",{"id":935,"title":936,"author":7,"body":937,"category":551,"coverImage":552,"description":1118,"draft":554,"extension":555,"locale":556,"meta":1119,"navigation":196,"noindex":554,"path":1120,"publishedAt":1121,"seo":1122,"slug":1123,"stem":1124,"tags":1125,"updatedAt":1121,"__hash__":1127},"blog\u002Fblog\u002Fogp-image-size-optimization.md","OGP画像のサイズ最適化ガイド｜SNSでキレイに表示される設定と作り方",{"type":9,"value":938,"toc":1112},[939,943,946,953,960,962,966,969,974,988,993,1004,1009,1017,1022,1027,1034,1037,1039,1043,1046,1051,1054,1059,1062,1067,1076,1081,1084,1086,1090,1097,1100,1103,1110],[12,940,942],{"id":941},"ogp画像が崩れる切れる原因はサイズ指定にある","OGP画像が「崩れる」「切れる」原因はサイズ指定にある",[17,944,945],{},"SNSでURLをシェアしたとき、サムネイル画像が途中で切れていたり、極端に小さく表示されたりした経験はないでしょうか。あるいは、自分のサイトをX（旧Twitter）やFacebookに投稿したら、想定と全く違う画像が表示された、というケースもよく聞かれます。",[17,947,948,949,952],{},"こうした問題の多くは、OGP（Open Graph Protocol）画像のサイズが各プラットフォームの仕様と合っていないことが原因です。OGPはHTMLのmetaタグで設定するもので、",[43,950,951],{},"og:image","に指定した画像がSNSカードのサムネイルとして使われます。しかし、画像サイズや縦横比が規定から外れていると、プラットフォーム側でトリミングされたり、表示をスキップされたりします。",[17,954,955,956,959],{},"さらに見落とされがちなのが、",[24,957,958],{},"ファイルサイズ（容量）の上限","です。画像の縦横ピクセル数が正しくても、ファイルが重すぎるとSNSのクローラーが取得に失敗し、画像なしのカードとして表示されることがあります。OGP画像の最適化は「ピクセル寸法」と「ファイル容量」の両方を意識する必要があります。",[29,961],{},[12,963,965],{"id":964},"各snsプラットフォームの推奨サイズ一覧","各SNS・プラットフォームの推奨サイズ一覧",[17,967,968],{},"OGP画像の最適なサイズはプラットフォームによって異なります。主要サービスの推奨値をまとめました。",[17,970,971],{},[24,972,973],{},"X（旧Twitter）",[500,975,976,979,982,985],{},[503,977,978],{},"Summaryカード（小さいサムネイル）：144×144px以上、縦横比1:1",[503,980,981],{},"Summary Card with Large Image（横長サムネイル）：300×157px以上、縦横比2:1",[503,983,984],{},"推奨サイズ：1200×628px",[503,986,987],{},"ファイルサイズ上限：5MB（JPG\u002FPNG\u002FWebP）",[17,989,990],{},[24,991,992],{},"Facebook \u002F Meta",[500,994,995,998,1001],{},[503,996,997],{},"最小サイズ：200×200px",[503,999,1000],{},"推奨サイズ：1200×630px（縦横比1.91:1）",[503,1002,1003],{},"推奨ファイルサイズ：1MB以下",[17,1005,1006],{},[24,1007,1008],{},"LinkedIn",[500,1010,1011,1014],{},[503,1012,1013],{},"推奨サイズ：1200×627px",[503,1015,1016],{},"ファイルサイズ上限：5MB",[17,1018,1019],{},[24,1020,1021],{},"Slack \u002F チャットツール",[500,1023,1024],{},[503,1025,1026],{},"og:imageを取得してプレビュー表示。1200×630px前後が無難",[17,1028,1029,1030,1033],{},"これらを横断的に見ると、",[24,1031,1032],{},"1200×630px（または1200×628px）"," という解像度がほぼすべてのサービスに対応できる事実上の標準サイズです。縦横比は約1.91:1を維持しつつ、JPEG品質を80〜85程度に抑えてファイルサイズを300KB以内に収めると、どの環境でも安定して表示されます。",[17,1035,1036],{},"ただし、既存の画像を流用する場合や、デザイン素材が別のアスペクト比で作られている場合は、リサイズ作業が必要になります。",[29,1038],{},[12,1040,1042],{"id":1041},"実践ogp画像を正しいサイズにリサイズする手順","実践：OGP画像を正しいサイズにリサイズする手順",[17,1044,1045],{},"OGP画像のリサイズ自体は難しい作業ではありませんが、いくつか気をつけたいポイントがあります。",[17,1047,1048],{},[24,1049,1050],{},"① 元画像の縦横比を確認する",[17,1052,1053],{},"元画像が正方形（1:1）や縦長の場合、単純にリサイズすると1200×630pxに収まらず、余白が生じたり主要な被写体が切り取られたりします。リサイズ前に、画像をどこを中心にトリミングするかを先に決めておくと作業がスムーズです。",[17,1055,1056],{},[24,1057,1058],{},"② 出力形式はJPEGかWebPを選ぶ",[17,1060,1061],{},"OGP画像には透過（アルファチャンネル）が不要なケースがほとんどです。PNGは品質が高い反面ファイルが重くなりやすいため、JPEGかWebPで書き出すのが現実的です。SNSのクローラーはWebPにも対応していますが、古いクローラーを考慮してJPEGを第一候補にするのが無難です。",[17,1063,1064],{},[24,1065,1066],{},"③ ツールを選ぶ：Photoshopがなくても問題ない",[17,1068,1069,1070,1075],{},"プロ向けの画像編集ソフトがなくても、ブラウザだけで完結するツールが充実しています。その一つとして ",[138,1071,1074],{"href":1072,"rel":1073},"https:\u002F\u002Fzerosend.site\u002Ftools\u002Fimage-resize",[142],"画像リサイズツール"," があります。このツールの特徴は、アップロードした画像がサーバーに送信されない点です。画像データはブラウザ内だけで処理されるため、社内資料や未公開のバナー画像を扱う場合でも、情報漏洩リスクを気にせず使えます。縦横のピクセル数を数値で直接指定できるので、1200×630pxに合わせる作業が直感的に行えます。",[17,1077,1078],{},[24,1079,1080],{},"④ リサイズ後にOGPキャッシュをクリアする",[17,1082,1083],{},"画像を差し替えても、SNS側のキャッシュが残っていると古い画像が表示され続けます。Xであれば「Card Validator」、Facebookであれば「Sharing Debugger」を使ってキャッシュを強制更新してください。ツールにURLを入力して「スクレイプ」または「デバッグ」を実行するだけで、新しい画像が反映されます。",[29,1085],{},[12,1087,1089],{"id":1088},"ogp画像の最適化がseoにも影響する理由","OGP画像の最適化がSEOにも影響する理由",[17,1091,1092,1093,1096],{},"OGPはSNS表示のための仕様であり、Googleの検索順位に直接影響するわけではありません。しかし、",[24,1094,1095],{},"間接的にSEOへのプラス効果","が期待できます。",[17,1098,1099],{},"SNSでシェアされたときに魅力的なサムネイルが表示されれば、クリック率が上がり、リンクが拡散されやすくなります。これがサイトへの流入増加につながり、滞在時間や被リンク獲得に好影響を与えます。また、画像ファイルのサイズを適切に絞ることはページの読み込み速度改善に直結し、Googleが重視するCore Web Vitalsの指標（特にLCPやFID）にも貢献します。",[17,1101,1102],{},"OGP画像を「SNS用の飾り」として後回しにしがちですが、サイトのパフォーマンスとブランド品質を底上げする実務的な施策として捉えると、優先度が変わってくるはずです。",[17,1104,1105,1106,1109],{},"まず手元にあるキービジュアルやアイキャッチ画像を1200×630px・300KB以内に整えるところから始めてみてください。専用ソフトが不要な環境であれば、前述した ",[138,1107,1074],{"href":1072,"rel":1108},[142]," のようなブラウザベースのツールを活用すると、余計な手間をかけずに作業を完結できます。",[29,1111],{},{"title":173,"searchDepth":187,"depth":187,"links":1113},[1114,1115,1116,1117],{"id":941,"depth":187,"text":942},{"id":964,"depth":187,"text":965},{"id":1041,"depth":187,"text":1042},{"id":1088,"depth":187,"text":1089},"OGP画像の推奨サイズや各SNSの仕様を解説。Twitterやog:imageが正しく表示されない原因と、ブラウザだけで完結する無料ツールを使った具体的な対処法を紹介します。",{},"\u002Fblog\u002Fogp-image-size-optimization","2026-05-12",{"title":936,"description":1118},"ogp-image-size-optimization","blog\u002Fogp-image-size-optimization",[931,1126,565,566],"リサイズ","mIit_bdGiULblUiC2FeigxS7qW8uxuS9f-pKvrNhJKM",{"id":1129,"title":1130,"author":7,"body":1131,"category":551,"coverImage":552,"description":1691,"draft":554,"extension":555,"locale":556,"meta":1692,"navigation":196,"noindex":554,"path":1693,"publishedAt":1694,"seo":1695,"slug":1696,"stem":1697,"tags":1698,"updatedAt":1700,"__hash__":1701},"blog\u002Fblog\u002Fwebp-convert-seo.md","WebP変換でSEOを改善する完全ガイド｜Core Web Vitals改善と安全な変換手順",{"type":9,"value":1132,"toc":1664},[1133,1137,1144,1151,1154,1156,1160,1164,1167,1179,1182,1185,1188,1192,1195,1197,1201,1204,1211,1228,1300,1302,1306,1309,1316,1319,1323,1447,1450,1452,1456,1476,1479,1499,1502,1505,1526,1529,1532,1535,1537,1541,1544,1547,1553,1556,1559,1562,1565,1567,1570,1574,1579,1582,1587,1590,1595,1598,1603,1609,1614,1617,1620,1640,1642,1646,1649,1652,1658,1661],[12,1134,1136],{"id":1135},"webp変換とseoの関係なぜ今これが重要なのか","WebP変換とSEOの関係——なぜ今これが重要なのか",[17,1138,1139,1140,1143],{},"PageSpeed InsightsやGoogle Search Consoleでサイトを計測すると、「次世代フォーマットで画像を配信してください」という指摘が出てくることが多い。この「次世代フォーマット」の筆頭が ",[24,1141,1142],{},"WebP（ウェブピー）"," だ。",[17,1145,1146,1147,1150],{},"Googleが2021年以降、Core Web Vitals（CWV）を検索順位の評価要素に組み込んだことで、画像の最適化はSEOと直結する問題になった。JPEGやPNGをWebPに変換するだけで、同等の画質を保ちながらファイルサイズを ",[24,1148,1149],{},"平均25〜35%削減"," できる。この数字は、画像を多く使うECサイト・ブログ・ポートフォリオサイトにとって、ページ速度の体感差として現れる水準だ。",[17,1152,1153],{},"本記事では、WebP変換がSEOに与える具体的な効果、安全な変換方法の選び方、競合ツールとの比較、そして実際の運用への組み込み方を順を追って解説する。",[29,1155],{},[12,1157,1159],{"id":1158},"webp変換がseoに与える具体的な3つの効果","WebP変換がSEOに与える具体的な3つの効果",[36,1161,1163],{"id":1162},"lcplargest-contentful-paintの改善","LCP（Largest Contentful Paint）の改善",[17,1165,1166],{},"Core Web Vitalsの中でも特に注目度の高いLCPは、ページ内で最大の可視要素が描画されるまでの時間を測る指標だ。多くのページでLCPの対象はメインビジュアルや商品画像など、ファイルサイズの大きい画像要素になる。",[17,1168,1169,1174,1175,1178],{},[138,1170,1173],{"href":1171,"rel":1172},"https:\u002F\u002Fweb.dev\u002Farticles\u002Flcp",[142],"Googleのウェブ・パフォーマンスに関するドキュメント","によれば、LCPの目標値は ",[24,1176,1177],{},"2.5秒以内"," とされている。WebPへの変換でネットワーク転送量が減れば、ダウンロード時間が短縮されLCPが改善する。2MBのJPEGが1.4MB程度のWebPに変わるだけで、モバイル回線では0.5秒前後の短縮につながるケースもある。",[36,1180,1181],{"id":1181},"ページ速度とユーザー行動シグナルの改善",[17,1183,1184],{},"ページの表示速度が速くなると、直帰率が下がりセッション時間が延びる傾向がある。Googleはこうしたユーザー行動のシグナルも評価の参考にしていると考えられており、間接的なSEO効果として機能する。",[17,1186,1187],{},"特にモバイル環境では、Wi-Fiより通信が不安定な4G\u002F5G回線でアクセスするユーザーが多い。軽量なWebPはこの差が体感しやすく、モバイルファーストインデックスへの対応としても有効だ。",[36,1189,1191],{"id":1190},"pagespeed-insightsスコアの向上","PageSpeed Insightsスコアの向上",[17,1193,1194],{},"PageSpeed Insightsの「次世代フォーマットで画像を配信してください」という指摘は、JPEGやPNGを使い続けている限り消えない。WebPへの変換はこの指摘を直接解消し、PerformanceスコアとSEO関連スコアの両方に好影響をもたらす。",[29,1196],{},[12,1198,1200],{"id":1199},"webpの仕様と主要ブラウザの対応状況","WebPの仕様と主要ブラウザの対応状況",[17,1202,1203],{},"WebPはGoogleが開発し、2010年に公開した画像フォーマットだ。非可逆圧縮と可逆圧縮の両方をサポートし、アルファチャンネル（透過）やアニメーションにも対応している。",[17,1205,1206,1210],{},[138,1207,1209],{"href":626,"rel":1208},[142],"WebPの公式仕様（developers.google.com）","によると、可逆圧縮ではPNGより平均26%、非可逆圧縮ではJPEGより平均25〜34%小さいファイルを生成できる。",[17,1212,1213,1214,1219,1220,1223,1224,1227],{},"ブラウザ対応については、",[138,1215,1218],{"href":1216,"rel":1217},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FMedia\u002FGuides\u002FFormats\u002FImage_types#webp",[142],"MDN Web Docs の WebP ページ","が参考になる。Chrome・Firefox・Safari・Edge の主要4ブラウザはいずれも対応済みで、2024年時点のグローバルシェアでは ",[24,1221,1222],{},"97%以上のブラウザがWebPを表示可能"," だ。古いIEや旧Safari向けのフォールバックが必要な場面では、以下のような",[43,1225,1226],{},"\u003Cpicture>","タグを使う方法が安全だ。",[168,1229,1231],{"className":170,"code":1230,"language":172,"meta":173,"style":173},"\u003Cpicture>\n  \u003Csource srcset=\"image.webp\" type=\"image\u002Fwebp\">\n  \u003Cimg src=\"image.jpg\" alt=\"代替テキスト\">\n\u003C\u002Fpicture>\n",[43,1232,1233,1242,1267,1291],{"__ignoreMap":173},[177,1234,1235,1237,1240],{"class":179,"line":180},[177,1236,210],{"class":209},[177,1238,1239],{"class":213},"picture",[177,1241,252],{"class":209},[177,1243,1244,1247,1250,1253,1255,1258,1260,1262,1265],{"class":179,"line":187},[177,1245,1246],{"class":209},"  \u003C",[177,1248,1249],{"class":213},"source",[177,1251,1252],{"class":217}," srcset",[177,1254,221],{"class":209},[177,1256,1257],{"class":224},"\"image.webp\"",[177,1259,228],{"class":217},[177,1261,221],{"class":209},[177,1263,1264],{"class":224},"\"image\u002Fwebp\"",[177,1266,252],{"class":209},[177,1268,1269,1271,1273,1276,1278,1281,1284,1286,1289],{"class":179,"line":193},[177,1270,1246],{"class":209},[177,1272,382],{"class":213},[177,1274,1275],{"class":217}," src",[177,1277,221],{"class":209},[177,1279,1280],{"class":224},"\"image.jpg\"",[177,1282,1283],{"class":217}," alt",[177,1285,221],{"class":209},[177,1287,1288],{"class":224},"\"代替テキスト\"",[177,1290,252],{"class":209},[177,1292,1293,1296,1298],{"class":179,"line":200},[177,1294,1295],{"class":209},"\u003C\u002F",[177,1297,1239],{"class":213},[177,1299,252],{"class":209},[29,1301],{},[12,1303,1305],{"id":1304},"変換ツールの選び方どこで処理されるかが重要な理由","変換ツールの選び方——「どこで処理されるか」が重要な理由",[17,1307,1308],{},"WebPへの変換方法は複数ある。サーバーサイドでImageMagickやlibwebpを使うバッチ処理、WordPressプラグイン（Imagify、ShortPixel等）、そしてブラウザ上で動作するオンラインツールだ。",[17,1310,1311,1312,1315],{},"選択する際に見落とされやすい観点が ",[24,1313,1314],{},"「ファイルがどこで処理されるか」"," だ。一般的なオンラインサービスは、ファイルを一度サーバーにアップロードして処理し、変換後のファイルをダウンロードさせる仕組みになっている。業務で扱う画像には、公開前の商品写真・社内資料のスクリーンショット・個人情報を含む書類画像など、外部に送信したくないものが含まれるケースも多い。",[17,1317,1318],{},"その点でブラウザ内処理（クライアントサイド処理）のツールは、ファイルが自分のデバイスの外に出ない。これはプライバシーポリシーや社内セキュリティ規定への適合という観点でも重要な差だ。",[36,1320,1322],{"id":1321},"主要webp変換ツール比較表","主要WebP変換ツール比較表",[69,1324,1325,1344],{},[72,1326,1327],{},[75,1328,1329,1332,1335,1338,1341],{},[78,1330,1331],{},"ツール",[78,1333,1334],{},"処理場所（送信先サーバー）",[78,1336,1337],{},"無料制限",[78,1339,1340],{},"オフライン動作",[78,1342,1343],{},"登録",[85,1345,1346,1374,1388,1404,1418,1432],{},[75,1347,1348,1354,1359,1364,1369],{},[90,1349,1350,1353],{},[24,1351,1352],{},"zerosend","（画像変換）",[90,1355,1356],{},[24,1357,1358],{},"なし（ブラウザ内完結）",[90,1360,1361],{},[24,1362,1363],{},"なし",[90,1365,1366],{},[24,1367,1368],{},"可（SW キャッシュ後）",[90,1370,1371],{},[24,1372,1373],{},"不要",[75,1375,1376,1379,1381,1383,1386],{},[90,1377,1378],{},"Squoosh（Google）",[90,1380,1358],{},[90,1382,1363],{},[90,1384,1385],{},"可",[90,1387,1373],{},[75,1389,1390,1393,1396,1399,1402],{},[90,1391,1392],{},"TinyPNG",[90,1394,1395],{},"あり（サーバー処理）",[90,1397,1398],{},"月20ファイルまで",[90,1400,1401],{},"不可",[90,1403,1373],{},[75,1405,1406,1409,1411,1414,1416],{},[90,1407,1408],{},"Smallpdf",[90,1410,1395],{},[90,1412,1413],{},"1日2タスクまで",[90,1415,1401],{},[90,1417,1373],{},[75,1419,1420,1423,1425,1428,1430],{},[90,1421,1422],{},"iLovePDF",[90,1424,1395],{},[90,1426,1427],{},"ファイルサイズ制限あり",[90,1429,1401],{},[90,1431,1373],{},[75,1433,1434,1437,1439,1442,1444],{},[90,1435,1436],{},"Adobe Express",[90,1438,1395],{},[90,1440,1441],{},"機能制限あり",[90,1443,1401],{},[90,1445,1446],{},"要Adobe ID",[17,1448,1449],{},"TinyPNG・Smallpdf・iLovePDFといったサービスは利便性が高く広く使われているが、いずれもファイルをサーバーに送信する構造だ。Google製のSquooshもブラウザ内処理だが、2023年以降アクティブな開発が止まっており、一部の機能に不具合が報告されている。",[29,1451],{},[12,1453,1455],{"id":1454},"zerosend-でブラウザ内webp変換を行う手順","zerosend でブラウザ内WebP変換を行う手順",[17,1457,1458,1463,1464,1467,1468,1471,1472,1475],{},[138,1459,1462],{"href":1460,"rel":1461},"https:\u002F\u002Fzerosend.site\u002Ftools\u002Fimage-convert",[142],"zerosendの画像形式変換ツール","は、",[24,1465,1466],{},"browser-image-compression"," ライブラリと ",[24,1469,1470],{},"Canvas API"," をベースに構築されており、変換処理はすべてブラウザのメインスレッドではなく ",[24,1473,1474],{},"Web Worker"," 上で実行される。これにより、大容量ファイルの変換中もUIがフリーズしない設計になっている。",[36,1477,1478],{"id":1478},"操作手順",[646,1480,1481,1487,1490,1493,1496],{},[503,1482,1483,1486],{},[138,1484,1460],{"href":1460,"rel":1485},[142]," にアクセスする",[503,1488,1489],{},"変換したい画像ファイル（JPEG・PNG・GIF・AVIF等）をドラッグ＆ドロップ、または「ファイルを選択」で指定する",[503,1491,1492],{},"出力フォーマットとして「WebP」を選択する",[503,1494,1495],{},"品質スライダーで圧縮率を調整する（デフォルト値は多くの用途で適切）",[503,1497,1498],{},"「変換」ボタンをクリックし、完了後にダウンロードする",[36,1500,1501],{"id":1501},"ネットワーク通信ゼロを自分で確認する方法",[17,1503,1504],{},"本当にファイルがサーバーに送られていないかは、ブラウザのDevToolsで確認できる。",[646,1506,1507,1510,1520,1523],{},[503,1508,1509],{},"Chrome または Edge で変換ページを開く",[503,1511,1512,1515,1516,1519],{},[43,1513,1514],{},"F12","（または ",[43,1517,1518],{},"Cmd+Option+I","）でDevToolsを開き、「Network」タブを選択",[503,1521,1522],{},"ファイルをドラッグ＆ドロップして変換を実行する",[503,1524,1525],{},"NetworkタブにPOSTリクエストや外部ドメインへの通信が発生していないことを確認する",[17,1527,1528],{},"変換実行後も外部への通信が一切記録されないことが、クライアントサイド処理の証拠だ。",[36,1530,1531],{"id":1531},"オフライン動作について",[17,1533,1534],{},"zerosendはService Workerによるリソースキャッシュを実装している。初回アクセス後は、インターネット接続がない環境でも変換ツールが動作する。これはオフライン環境での業務や、通信制限を気にせず使いたい場面で実用的な特徴だ。",[29,1536],{},[12,1538,1540],{"id":1539},"webp変換を継続的な運用フローに組み込む方法","WebP変換を継続的な運用フローに組み込む方法",[36,1542,1543],{"id":1543},"既存コンテンツへの対応",[17,1545,1546],{},"まず既存のページ・記事・商品ページで使われている画像を洗い出し、PageSpeed Insightsで「次世代フォーマット」として指摘を受けているものを優先リストに入れる。ファイルサイズが500KB以上のJPEGやPNGは特に優先度が高い。",[17,1548,1549,1550,1552],{},"変換後は元のファイルをバックアップとして残しておき、",[43,1551,1226],{},"タグを使ってWebPとJPEGの両方を配信する構成にすると安全だ。",[36,1554,1555],{"id":1555},"新規コンテンツへのルール化",[17,1557,1558],{},"画像をアップロードする前にWebP変換を行うことを、コンテンツ制作フローのチェックリストに加える。「記事公開前にゼロsendで変換してからCMSにアップロードする」という一手順を加えるだけで、新規コンテンツの最適化を継続できる。",[36,1560,1561],{"id":1561},"変換前後の効果測定",[17,1563,1564],{},"PageSpeed InsightsとGoogle Search Consoleの「ページエクスペリエンス」レポートを使い、変換前後のLCPスコアを比較する。特にモバイルスコアの変化に注目すると、改善効果が数値として把握しやすい。",[29,1566],{},[12,1568,1569],{"id":1569},"よくある疑問と落とし穴",[36,1571,1573],{"id":1572},"faq","FAQ",[17,1575,1576],{},[24,1577,1578],{},"Q1. WebPに変換すると画質は落ちるのか？",[17,1580,1581],{},"非可逆圧縮（品質設定80〜85程度）であれば、通常のWeb表示ではJPEGと視覚的な差がほぼわからない。画質が重要な場面では品質を90以上に設定するか、可逆圧縮を使うことで元の品質を維持できる。",[17,1583,1584],{},[24,1585,1586],{},"Q2. PNG（透過画像）もWebPに変換できるか？",[17,1588,1589],{},"WebPはアルファチャンネルをサポートしているため、透過PNGをそのままWebPに変換できる。透過を保ちたい場合は可逆圧縮モードを選ぶか、品質設定を高めにすると良い。",[17,1591,1592],{},[24,1593,1594],{},"Q3. WordPressサイトの場合、プラグインとブラウザツールのどちらを使うべきか？",[17,1596,1597],{},"大量の画像を一括変換・自動最適化したい場合はShortPixelやImageifyなどのプラグインが効率的だ。一方、非公開の画像や機密性の高いファイルを変換したい場合は、ブラウザ内処理のツールの方がセキュリティ面で安心できる。用途によって使い分けが合理的だ。",[17,1599,1600],{},[24,1601,1602],{},"Q4. AVIFとWebPどちらを選ぶべきか？",[17,1604,1605,1606,1608],{},"AVIFはWebPよりさらに圧縮率が高いフォーマットだが、2024年時点ではブラウザ対応がWebPより若干低く（特に旧バージョンのSafari）、エンコード処理が遅い。汎用性の高さでは現時点でWebPが安定した選択肢だ。",[43,1607,1226],{},"タグでAVIF→WebP→JPEGの順でフォールバックを指定する方法も有効だ。",[17,1610,1611],{},[24,1612,1613],{},"Q5. ファイルサイズが逆に大きくなることはあるか？",[17,1615,1616],{},"ある。既にJPEGで強く圧縮されている画像や、小さなサイズの画像をWebPに変換すると、わずかにサイズが増えるケースがある。変換後は必ず元ファイルと比較し、小さくなっているものだけを採用するのが確実だ。",[36,1618,1619],{"id":1619},"実運用での落とし穴",[500,1621,1622,1628,1634],{},[503,1623,1624,1627],{},[24,1625,1626],{},"SNS投稿用画像への使用","：TwitterやInstagramなど一部のSNSプラットフォームはWebPのアップロードを受け付けないか、自動的に変換する。SNS向け画像はJPEGのままにしておくか、個別に確認が必要だ。",[503,1629,1630,1633],{},[24,1631,1632],{},"メールに添付する画像","：メールクライアントはWebPに対応していないものが多い。メール添付用途にはJPEGまたはPNGを維持する。",[503,1635,1636,1639],{},[24,1637,1638],{},"印刷データへの転用","：WebPはRGB色空間のみでCMYKには対応していない。印刷データとしては使用できない。",[29,1641],{},[12,1643,1645],{"id":1644},"まとめwebp変換が持つ実際のインパクト","まとめ——WebP変換が持つ実際のインパクト",[17,1647,1648],{},"WebP変換は、特別な開発環境や有料ツールを使わなくても取り組めるSEO改善施策だ。ファイルサイズの削減がLCPを改善し、ページ速度が上がり、ユーザー体験が向上し、それがSEOシグナルとして積み重なる。この一連の効果は、1枚の画像変換から始まる。",[17,1650,1651],{},"変換方法の選択では、「ファイルがサーバーに送信されるかどうか」が実務上の重要な判断軸になる。TinyPNGやSmallpdfのようなサービスは利便性が高い一方、業務上の機密画像を扱う場合はブラウザ内処理が適切だ。",[17,1653,1654,1657],{},[138,1655,1462],{"href":1460,"rel":1656},[142],"はbrowser-image-compressionとCanvas APIを使ったクライアントサイド処理で動作し、初回アクセス後はオフラインでも使用できる。DevToolsのNetworkタブで通信が発生していないことを自分で確認できるという透明性も、他の多くのオンラインツールにはない特徴だ。",[17,1659,1660],{},"まず手元の重い画像を一枚変換し、PageSpeed InsightsでLCPスコアの変化を確認する。そこから得られる数値が、次のアクションの判断根拠になる。",[532,1662,1663],{},"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":173,"searchDepth":187,"depth":187,"links":1665},[1666,1667,1672,1673,1676,1681,1686,1690],{"id":1135,"depth":187,"text":1136},{"id":1158,"depth":187,"text":1159,"children":1668},[1669,1670,1671],{"id":1162,"depth":193,"text":1163},{"id":1181,"depth":193,"text":1181},{"id":1190,"depth":193,"text":1191},{"id":1199,"depth":187,"text":1200},{"id":1304,"depth":187,"text":1305,"children":1674},[1675],{"id":1321,"depth":193,"text":1322},{"id":1454,"depth":187,"text":1455,"children":1677},[1678,1679,1680],{"id":1478,"depth":193,"text":1478},{"id":1501,"depth":193,"text":1501},{"id":1531,"depth":193,"text":1531},{"id":1539,"depth":187,"text":1540,"children":1682},[1683,1684,1685],{"id":1543,"depth":193,"text":1543},{"id":1555,"depth":193,"text":1555},{"id":1561,"depth":193,"text":1561},{"id":1569,"depth":187,"text":1569,"children":1687},[1688,1689],{"id":1572,"depth":193,"text":1573},{"id":1619,"depth":193,"text":1619},{"id":1644,"depth":187,"text":1645},"WebP変換がLCP・ページ速度・SEOに与える効果を数値で解説。ブラウザ内完結の無料ツールと競合サービスを比較し、実践的な導入手順まで網羅。",{},"\u002Fblog\u002Fwebp-convert-seo","2026-05-07",{"title":1130,"description":1691},"webp-convert-seo","blog\u002Fwebp-convert-seo",[566,932,1699,565],"Core Web Vitals","2026-05-15","-Eu7pPexS28YvfGAGQBghTT8cKqNen8fJjREmiLVn5w",{"id":1703,"title":1704,"author":7,"body":1705,"category":551,"coverImage":552,"description":2232,"draft":554,"extension":555,"locale":556,"meta":2233,"navigation":196,"noindex":554,"path":2234,"publishedAt":2235,"seo":2236,"slug":2237,"stem":2238,"tags":2239,"updatedAt":1700,"__hash__":2241},"blog\u002Fblog\u002Fcore-web-vitals-image-compress.md","Core Web Vitals を画像圧縮で改善する完全ガイド【LCP対策】",{"type":9,"value":1706,"toc":2203},[1707,1711,1714,1734,1743,1746,1750,1761,1765,1768,1779,1781,1784,1787,1848,1851,1853,1857,1860,1864,1871,1875,1878,1882,1891,1895,1914,1916,1920,1932,1936,1942,1946,1949,1953,1956,1960,1963,1967,1970,1972,1975,1978,2086,2089,2092,2094,2097,2101,2107,2113,2116,2119,2122,2125,2129,2132,2134,2136,2141,2144,2149,2152,2157,2165,2170,2173,2178,2185,2187,2189,2192,2200],[12,1708,1710],{"id":1709},"なぜ画像が-core-web-vitals-を下げるのか","なぜ画像が Core Web Vitals を下げるのか",[17,1712,1713],{},"Google が検索ランキングの評価基準に組み込んでいる「Core Web Vitals」は、現在3つの指標で構成されている。",[500,1715,1716,1722,1728],{},[503,1717,1718,1721],{},[24,1719,1720],{},"LCP（Largest Contentful Paint）","：ページ内で最も大きなコンテンツが描画されるまでの時間",[503,1723,1724,1727],{},[24,1725,1726],{},"INP（Interaction to Next Paint）","：ユーザー操作から次の描画までの応答速度",[503,1729,1730,1733],{},[24,1731,1732],{},"CLS（Cumulative Layout Shift）","：読み込み中に発生するレイアウトのずれ",[17,1735,1736,1737,1742],{},"このうち画像が直撃するのは LCP だ。ファーストビューに置かれたヒーロー画像や記事アイキャッチが LCP 対象要素になるケースは非常に多く、ファイルが重いほど「良好」の合格ライン（2.5秒以内）を超えやすい。Google の ",[138,1738,1741],{"href":1739,"rel":1740},"https:\u002F\u002Fweb.dev\u002Farticles\u002Fvitals",[142],"Core Web Vitals 技術文書"," では、LCP 悪化の主因として「リソースのロード時間」が明示されており、その代表格が最適化されていない画像ファイルだ。",[17,1744,1745],{},"デジタルカメラやスマートフォンが出力する JPEG は、無処理のまま 3〜8 MB に達することが珍しくない。そのファイルをそのまま CMS にアップロードし続けた結果、PageSpeed Insights の LCP が「改善が必要（2.5秒超）」になっているサイトは今でも大量に存在する。",[36,1747,1749],{"id":1748},"cls-への影響も見落とさない","CLS への影響も見落とさない",[17,1751,1752,1753,1756,1757,1760],{},"CLS への影響も軽視できない。画像タグに ",[43,1754,1755],{},"width","・",[43,1758,1759],{},"height"," 属性が設定されていない場合、ブラウザは読み込み完了まで表示領域を確保できず、後からレイアウトがずれる。圧縮によって読み込みを速くしつつ、属性指定でスペースを事前に予約する組み合わせが CLS スコアの維持にも寄与する。",[36,1762,1764],{"id":1763},"pagespeed-insights-が出す画像関連の警告を読む","PageSpeed Insights が出す画像関連の警告を読む",[17,1766,1767],{},"PageSpeed Insights で計測した際に以下のいずれかが「改善が必要」として表示されているなら、画像圧縮は費用対効果が最も高い改善アクションになる。",[500,1769,1770,1773,1776],{},[503,1771,1772],{},"「適切なサイズの画像」",[503,1774,1775],{},"「効率的な画像エンコード」",[503,1777,1778],{},"「次世代フォーマットでの画像の配信」",[29,1780],{},[12,1782,1783],{"id":1783},"圧縮前後のスコア変化の目安",[17,1785,1786],{},"ファイルサイズ別の改善期待値を下表に示す。値はページ構成や通信速度によって変動するが、3 MB 超の画像を抱えているページはほぼ例外なく効果を体感できる。",[69,1788,1789,1802],{},[72,1790,1791],{},[75,1792,1793,1796,1799],{},[78,1794,1795],{},"元のファイルサイズ",[78,1797,1798],{},"圧縮後の目安",[78,1800,1801],{},"LCP 改善の期待値",[85,1803,1804,1815,1826,1837],{},[75,1805,1806,1809,1812],{},[90,1807,1808],{},"5 MB 以上",[90,1810,1811],{},"300〜500 KB",[90,1813,1814],{},"大きく改善（数秒単位）",[75,1816,1817,1820,1823],{},[90,1818,1819],{},"1〜3 MB",[90,1821,1822],{},"150〜300 KB",[90,1824,1825],{},"明確に改善（1秒前後）",[75,1827,1828,1831,1834],{},[90,1829,1830],{},"500 KB〜1 MB",[90,1832,1833],{},"80〜150 KB",[90,1835,1836],{},"中程度改善（0.5秒前後）",[75,1838,1839,1842,1845],{},[90,1840,1841],{},"500 KB 未満",[90,1843,1844],{},"50〜80 KB",[90,1846,1847],{},"軽微〜誤差の範囲",[17,1849,1850],{},"圧縮後は必ず PageSpeed Insights または Chrome DevTools の Lighthouse で再計測し、改善幅を数値で把握する。「やった気になる」だけで終わらせないためにも、計測は必須のステップだ。",[29,1852],{},[12,1854,1856],{"id":1855},"画像圧縮の一般的な手順ツール非依存","画像圧縮の一般的な手順（ツール非依存）",[17,1858,1859],{},"ツールを問わず共通する圧縮の流れを4ステップで整理する。",[36,1861,1863],{"id":1862},"ステップ-1lcp-対象要素を特定する","ステップ 1：LCP 対象要素を特定する",[17,1865,1866,1867,1870],{},"Chrome DevTools を開き、Lighthouse タブで「パフォーマンス」を計測する。レポートの「LCP」セクションをクリックすると、対象要素がハイライト表示される。まずその要素の URL とファイルサイズを確認することが出発点だ。対象要素が思ったものと異なるケースは多い。CMS が自動生成したサムネイルや、CSS の ",[43,1868,1869],{},"background-image"," で指定した画像が LCP になっていることもある。",[36,1872,1874],{"id":1873},"ステップ-2リサイズと圧縮をセットで行う","ステップ 2：リサイズと圧縮をセットで行う",[17,1876,1877],{},"「圧縮」と「リサイズ（解像度の変更）」は別の操作だが、セットで考えると効果が大きい。横幅 800 px で表示している領域に対して 3,000 px 幅の画像を使っていれば、まず 800 px 程度にリサイズしてから JPEG 品質を 70〜80 % に落とすだけで、ファイルサイズが元の 10 分の 1 以下になることがある。品質を下げる前にまずリサイズを行うのが、視覚品質を保ちながらサイズを削るコツだ。",[36,1879,1881],{"id":1880},"ステップ-3フォーマットを検討する","ステップ 3：フォーマットを検討する",[17,1883,1884,1885,1890],{},"WebP は JPEG と比較して同等の視覚品質で 20〜30 % 程度ファイルサイズを削減できる。",[138,1886,1889],{"href":1887,"rel":1888},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FMedia\u002FFormats\u002FImage_types#webp",[142],"MDN の WebP 解説"," によれば、現在の主要ブラウザは広く WebP をサポートしており、モダンな環境では JPEG を WebP に置き換えるだけでも LCP に貢献する。ただし古い CMS 環境やメールマガジンへの埋め込みなど、WebP 未対応の環境が対象に含まれる場合は慎重に判断する。",[36,1892,1894],{"id":1893},"ステップ-4html-の属性を整備する","ステップ 4：HTML の属性を整備する",[17,1896,1897,1898,1756,1900,1902,1903,1906,1907,1910,1911,1913],{},"圧縮後、画像タグに ",[43,1899,1755],{},[43,1901,1759],{}," 属性を設定して CLS を防ぐ。ファーストビューの画像には ",[43,1904,1905],{},"loading=\"eager\"","（または属性なし）、スクロール先の画像には ",[43,1908,1909],{},"loading=\"lazy\""," を使い分けると、必要なリソースが優先的に読み込まれる。ファーストビュー画像への ",[43,1912,1909],{}," は LCP を悪化させる典型的な誤りなので注意が必要だ。",[29,1915],{},[12,1917,1919],{"id":1918},"zerosend-を使ったブラウザ内圧縮の手順","zerosend を使ったブラウザ内圧縮の手順",[17,1921,1922,1927,1928,1931],{},[138,1923,1926],{"href":1924,"rel":1925},"https:\u002F\u002Fzerosend.site\u002Ftools\u002Fimage-compress",[142],"zerosend の画像圧縮ツール"," は、圧縮処理をサーバーではなくブラウザ内で完結させる設計になっている。使用しているライブラリは ",[24,1929,1930],{},"browser-image-compression（Web Worker）"," で、メインスレッドをブロックせずにバックグラウンドで処理を走らせる。ファイルの内容は一切外部サーバーに送信されない。",[36,1933,1935],{"id":1934},"ステップ-1ツールにアクセスする","ステップ 1：ツールにアクセスする",[17,1937,1938,1941],{},[138,1939,1924],{"href":1924,"rel":1940},[142]," をブラウザで開く。インストール不要、アカウント登録不要。Service Worker によるキャッシュが有効なため、初回ロード後はオフライン環境でも動作する。社内ネットワークでインターネットアクセスが制限されている環境でも、一度ロードさえしておけば継続して使用できる。",[36,1943,1945],{"id":1944},"ステップ-2ファイルを選択する","ステップ 2：ファイルを選択する",[17,1947,1948],{},"ドラッグ＆ドロップ、またはファイル選択ダイアログで画像を読み込む。JPEG・PNG・WebP に対応している。複数ファイルをまとめて読み込むバッチ処理にも対応しており、複数枚を一度に圧縮できる。",[36,1950,1952],{"id":1951},"ステップ-3品質スライダーを調整する","ステップ 3：品質スライダーを調整する",[17,1954,1955],{},"品質 70〜80 % が Web サイト用途のデフォルト推奨値だ。ファーストビューの主要ビジュアルであれば 80 %、背景画像や繰り返し使うアイコン類なら 65〜70 % でも視覚的な劣化はほぼ感じられない。スライダーを動かすたびにプレビューが更新されるため、圧縮前後の見た目を比較しながら数値を決められる。",[36,1957,1959],{"id":1958},"ステップ-4network-タブでアップロード通信がゼロであることを確認する","ステップ 4：Network タブでアップロード通信がゼロであることを確認する",[17,1961,1962],{},"セキュリティポリシーが厳しい環境での利用前や、「本当にサーバーに送っていないか」を確認したい場合は、自分で検証できる。Chrome DevTools を開いて Network タブを選択し、ツールを操作しながらリクエストを監視する。画像ファイルに関するアップロード通信が一切発生しないことをリアルタイムで確認できる。クラウド型のサービスではこの確認を行うとアップロードリクエストが記録されるが、zerosend では何も記録されない。",[36,1964,1966],{"id":1965},"ステップ-5ダウンロードして-cms-に反映する","ステップ 5：ダウンロードして CMS に反映する",[17,1968,1969],{},"圧縮後のファイルをダウンロードし、そのまま CMS やサーバーにアップロードする。元ファイルとのサイズ比較が画面上で確認でき、何 % 削減されたかが数値で表示される。",[29,1971],{},[12,1973,1974],{"id":1974},"主要ツールとの比較",[17,1976,1977],{},"圧縮ツールを選ぶ際に重視される観点を整理した。特に「送信先サーバー」列は、機密性の高い画像を扱う場合に見落としがちな観点だ。",[69,1979,1980,2000],{},[72,1981,1982],{},[75,1983,1984,1986,1989,1992,1994,1997],{},[78,1985,1331],{},[78,1987,1988],{},"送信先サーバー",[78,1990,1991],{},"無料枠の制限",[78,1993,1340],{},[78,1995,1996],{},"処理場所",[78,1998,1999],{},"バッチ処理",[85,2001,2002,2018,2036,2052,2070],{},[75,2003,2004,2006,2008,2011,2014,2016],{},[90,2005,1352],{},[90,2007,1358],{},[90,2009,2010],{},"制限なし",[90,2012,2013],{},"可（SW キャッシュ）",[90,2015,1474],{},[90,2017,1385],{},[75,2019,2020,2022,2025,2028,2030,2033],{},[90,2021,1408],{},[90,2023,2024],{},"あり（Smallpdf のサーバー）",[90,2026,2027],{},"1日 2 ファイルまで",[90,2029,1401],{},[90,2031,2032],{},"クラウド",[90,2034,2035],{},"有料プランのみ",[75,2037,2038,2040,2043,2046,2048,2050],{},[90,2039,1422],{},[90,2041,2042],{},"あり（iLovePDF のサーバー）",[90,2044,2045],{},"1日上限あり",[90,2047,1401],{},[90,2049,2032],{},[90,2051,2035],{},[75,2053,2054,2057,2060,2063,2065,2067],{},[90,2055,2056],{},"TinyPNG \u002F TinyJPG",[90,2058,2059],{},"あり（Tinify のサーバー）",[90,2061,2062],{},"月 500 ファイルまで",[90,2064,1401],{},[90,2066,2032],{},[90,2068,2069],{},"可（API 利用時）",[75,2071,2072,2074,2076,2078,2080,2083],{},[90,2073,1378],{},[90,2075,1358],{},[90,2077,2010],{},[90,2079,1385],{},[90,2081,2082],{},"WASM",[90,2084,2085],{},"不可（1 ファイルずつ）",[17,2087,2088],{},"Smallpdf・iLovePDF・TinyPNG はいずれもクラウドサーバーでの処理が前提であり、アップロードしたファイルは一時的にでも外部サーバーに送信される。個人写真・社内資料・顧客から提供された素材を扱う場合、そのリスクは無視できない。",[17,2090,2091],{},"Squoosh はブラウザ内処理でプライバシー面に優れているが、1 ファイルずつしか処理できないため、複数枚を日常的に扱うワークフローには向いていない。zerosend は複数ファイルの一括処理に対応している点で、実務的な運用に組み込みやすい。",[29,2093],{},[12,2095,2096],{"id":2096},"よくある落とし穴と対処法",[36,2098,2100],{"id":2099},"圧縮したのに-lcp-が改善しない","圧縮したのに LCP が改善しない",[17,2102,2103,2104,2106],{},"最も多い原因は「圧縮した画像とは別のファイルが実際には LCP に使われている」ケースだ。CMS のプラグインが自動生成したサムネイル画像が LCP 対象になっていたり、CSS の ",[43,2105,1869],{}," で設定した画像が LCP 要素になっていたりする。Lighthouse のレポートで対象要素の URL を確認し、実際に差し替えたファイルと一致しているかを必ず検証する。",[17,2108,2109,2110,2112],{},"もう一つの原因として、ファーストビュー画像に ",[43,2111,1909],{}," が設定されている場合がある。lazy-load は LCP 対象要素には逆効果になるため、ファーストビューの画像には設定しない。",[36,2114,2115],{"id":2115},"圧縮しすぎてブランドイメージを損ねた",[17,2117,2118],{},"品質を 50 % 以下まで落とすと、JPEG 特有のブロックノイズが目立ち始める。特に人物写真やグラデーションを含む画像では視覚的な劣化が顕著になる。品質は 70〜80 % を下限の目安とし、どうしてもファイルサイズを削りたい場合はリサイズを先に行う方が品質を維持しやすい。",[36,2120,2121],{"id":2121},"一度だけ対応して終わりにした",[17,2123,2124],{},"新しいページを追加するたびに未最適化の画像が混入すると、サイト全体のスコアは再び悪化する。制作フローに「アップロード前に圧縮ツールを通す」というステップを明示的に組み込むか、CMS の自動最適化機能（WordPress であれば ShortPixel や Imagify 等のプラグイン）を併用することで、属人的な対応をなくすことができる。",[36,2126,2128],{"id":2127},"_100-kb-以下でも警告が出る","100 KB 以下でも警告が出る",[17,2130,2131],{},"ファイルサイズではなく「表示サイズに対して解像度が過剰」と判定されている場合に出る。例えば 100 KB の PNG でも、横幅 2,000 px で書き出されたものを 400 px の領域で表示していれば警告対象になる。リサイズで解像度を表示サイズに合わせることで解消する。",[29,2133],{},[12,2135,1573],{"id":1572},[17,2137,2138],{},[24,2139,2140],{},"Q1. 圧縮すると SEO 的に不利になることはあるか？",[17,2142,2143],{},"ない。Google は表示速度を評価するが、同一 URL で提供される限りファイルサイズの変化それ自体がコンテンツの品質評価に影響することはない。むしろ圧縮によって LCP が改善すれば Core Web Vitals のスコアが向上し、検索順位にプラスに働く可能性がある。",[17,2145,2146],{},[24,2147,2148],{},"Q2. WebP への変換は必須か？",[17,2150,2151],{},"必須ではないが効果は高い。既存の JPEG を WebP に変換するだけで 20〜30 % のファイル削減が見込めるため、LCP がギリギリ合格ラインにあるページでは変換を検討する価値がある。ただし古い CMS 環境やメールマガジンへの埋め込みなど、WebP 未対応の環境が対象に含まれる場合は注意が必要だ。",[17,2153,2154],{},[24,2155,2156],{},"Q3. zerosend で PNG を WebP に変換することはできるか？",[17,2158,2159,2160,2164],{},"zerosend の",[138,2161,2163],{"href":1460,"rel":2162},[142],"画像変換ツール","では、PNG・JPEG を WebP に変換する機能を提供している。圧縮と変換を組み合わせることで、さらに大きなファイルサイズ削減が期待できる。変換処理もブラウザ内で完結するため、ファイルは外部に送信されない。",[17,2166,2167],{},[24,2168,2169],{},"Q4. スマートフォン撮影の写真を直接圧縮してもよいか？",[17,2171,2172],{},"問題ない。ただしスマートフォン写真は EXIF データ（GPS 情報・撮影日時等）を含むことが多い。zerosend のブラウザ内処理ではファイルが外部に送信されないため、EXIF データを含む写真でも情報漏洩のリスクなしに圧縮できる。クラウド型サービスでは EXIF 情報ごと外部サーバーに送信される点と対照的だ。",[17,2174,2175],{},[24,2176,2177],{},"Q5. 画像圧縮以外に LCP を改善する手段はあるか？",[17,2179,2180,2181,2184],{},"ある。CDN の利用、サーバー応答時間の短縮、",[43,2182,2183],{},"\u003Clink rel=\"preload\">"," による画像の事前読み込み指定、フォントの最適化などが代表的な手段だ。ただしこれらは設定変更やインフラ費用を伴うことが多く、即効性という点では画像圧縮が最も着手しやすい。画像圧縮で対処できる改善余地をまず使い切り、それでも目標値に届かない場合に他の手段を検討するのが現実的な順序だ。",[29,2186],{},[12,2188,491],{"id":491},[17,2190,2191],{},"Core Web Vitals のうちページ表示速度に最も直結する LCP を改善するには、画像圧縮が最も即効性の高い手段だ。対応の手順は「LCP 対象要素の特定 → リサイズ → 圧縮 → HTML 属性の整備 → 再計測」のサイクルを回すだけであり、特別な専門知識は不要だ。",[17,2193,2194,2195,2199],{},"プライバシーが気になる業務用途では、ファイルをサーバーに送信しないブラウザ内処理ツールを選ぶことが重要になる。zerosend の",[138,2196,2198],{"href":1924,"rel":2197},[142],"画像圧縮ツール","は browser-image-compression を Web Worker で動作させており、Chrome DevTools の Network タブでアップロード通信がゼロであることを誰でも自分で検証できる。初回ロード後は Service Worker のキャッシュによりオフライン環境でも動作するため、ネットワーク制限のある環境でも継続して使用できる。",[17,2201,2202],{},"一度の対応で終わらせず、画像をアップロードする前に圧縮するというステップを制作フローに組み込むことが、Core Web Vitals のスコアを継続的に維持する最も現実的な方法だ。",{"title":173,"searchDepth":187,"depth":187,"links":2204},[2205,2209,2210,2216,2223,2224,2230,2231],{"id":1709,"depth":187,"text":1710,"children":2206},[2207,2208],{"id":1748,"depth":193,"text":1749},{"id":1763,"depth":193,"text":1764},{"id":1783,"depth":187,"text":1783},{"id":1855,"depth":187,"text":1856,"children":2211},[2212,2213,2214,2215],{"id":1862,"depth":193,"text":1863},{"id":1873,"depth":193,"text":1874},{"id":1880,"depth":193,"text":1881},{"id":1893,"depth":193,"text":1894},{"id":1918,"depth":187,"text":1919,"children":2217},[2218,2219,2220,2221,2222],{"id":1934,"depth":193,"text":1935},{"id":1944,"depth":193,"text":1945},{"id":1951,"depth":193,"text":1952},{"id":1958,"depth":193,"text":1959},{"id":1965,"depth":193,"text":1966},{"id":1974,"depth":187,"text":1974},{"id":2096,"depth":187,"text":2096,"children":2225},[2226,2227,2228,2229],{"id":2099,"depth":193,"text":2100},{"id":2115,"depth":193,"text":2115},{"id":2121,"depth":193,"text":2121},{"id":2127,"depth":193,"text":2128},{"id":1572,"depth":187,"text":1573},{"id":491,"depth":187,"text":491},"LCP悪化の主因は画像の重さ。圧縮前後のスコア目安・手順・プライバシー安全なブラウザ内処理ツールの比較まで、実践的に解説します。",{},"\u002Fblog\u002Fcore-web-vitals-image-compress","2026-05-05",{"title":1704,"description":2232},"core-web-vitals-image-compress","blog\u002Fcore-web-vitals-image-compress",[931,2240,566,1699],"圧縮","FRRn6aETDLGIWfMvq0hTPpmd8dMvwj0BA7KDHibK5yY",{"id":2243,"title":2244,"author":7,"body":2245,"category":551,"coverImage":552,"description":3012,"draft":554,"extension":555,"locale":556,"meta":3013,"navigation":196,"noindex":554,"path":3014,"publishedAt":3015,"seo":3016,"slug":3017,"stem":3018,"tags":3019,"updatedAt":1700,"__hash__":3020},"blog\u002Fblog\u002Fimage-compress-guide.md","画像圧縮で画質を保つ完全ガイド2026 — 品質85%の黄金点からブラウザ完結処理まで",{"type":9,"value":2246,"toc":2971},[2247,2256,2259,2261,2265,2269,2278,2281,2285,2288,2292,2295,2297,2301,2305,2371,2374,2378,2385,2388,2397,2400,2406,2412,2414,2417,2421,2428,2431,2535,2538,2542,2545,2552,2559,2563,2570,2574,2581,2585,2588,2590,2593,2596,2599,2740,2743,2746,2753,2777,2784,2786,2790,2801,2803,2828,2830,2833,2835,2837,2841,2851,2854,2861,2865,2872,2875,2878,2880,2882,2886,2892,2896,2899,2903,2906,2910,2913,2917,2926,2928,2930,2933,2964],[17,2248,2249,2250,2255],{},"Web ページが重くなる原因の第1位は画像である。Google の ",[138,2251,2254],{"href":2252,"rel":2253},"https:\u002F\u002Falmanac.httparchive.org\u002Fja\u002F2023\u002Fpage-weight",[142],"Web Almanac 2023"," によれば、ページあたりの転送量の中央値の約 50% を画像が占める。表示速度の改善もプライバシーの確保も、圧縮の基礎を正しく理解するところから始まる。",[17,2257,2258],{},"本記事では「どの設定で圧縮するか」「どのフォーマットを選ぶか」「どのツールが安全か」の3点を実証的に整理する。ツール選定は後半で行い、前半は仕組みの解説に徹する。",[29,2260],{},[12,2262,2264],{"id":2263},"なぜ画像圧縮が収益seouxに直結するのか","なぜ画像圧縮が収益・SEO・UXに直結するのか",[36,2266,2268],{"id":2267},"core-web-vitals-と-lcp-の関係","Core Web Vitals と LCP の関係",[17,2270,2271,2272,2275,2276,1143],{},"Google の検索品質アルゴリズムは ",[138,2273,1699],{"href":1739,"rel":2274},[142]," を正式な順位シグナルとして使用している。LCP（Largest Contentful Paint）は「画面内で最大のコンテンツが表示されるまでの時間」を計測し、推奨値は ",[24,2277,1177],{},[17,2279,2280],{},"遅延の最大要因は未圧縮の画像である。4K スマホカメラで撮影した JPEG はそのままだと 6〜12 MB になる。モバイル回線（下り実効 10 Mbps 程度）では1枚で転送に 5〜12 秒かかる計算だ。圧縮して 200 KB に抑えると、同じ回線で 0.16 秒に短縮できる。",[36,2282,2284],{"id":2283},"ストレージcdn-コストの累積","ストレージ・CDN コストの累積",[17,2286,2287],{},"画像 1 枚を節約する効果は小さく見えるが、PV が積み上がると転送コストに直接影響する。月 100 万 PV のサイトで 1 枚あたり 1 MB を 200 KB に削減した場合、月間転送量を 800 GB 節約できる計算になる。",[36,2289,2291],{"id":2290},"プライバシーリスクexif-メタデータ","プライバシーリスク：EXIF メタデータ",[17,2293,2294],{},"スマートフォンで撮影した写真には EXIF データが埋め込まれており、撮影日時・GPS 座標・端末機種などが記録されている。企業の社内資料や個人の写真をそのまま Web にアップすると、位置情報が意図せず公開されるリスクがある。圧縮処理の際に EXIF を除去することは、容量削減と同時にプライバシー保護にもなる。",[29,2296],{},[12,2298,2300],{"id":2299},"画像フォーマットの選び方jpgpngwebpavif","画像フォーマットの選び方：JPG・PNG・WebP・AVIF",[36,2302,2304],{"id":2303},"jpg-と-png-の使い分け原則","JPG と PNG の使い分け原則",[69,2306,2307,2322],{},[72,2308,2309],{},[75,2310,2311,2314,2317,2319],{},[78,2312,2313],{},"フォーマット",[78,2315,2316],{},"向いている用途",[78,2318,707],{},[78,2320,2321],{},"透過",[85,2323,2324,2336,2347,2358],{},[75,2325,2326,2329,2332,2334],{},[90,2327,2328],{},"JPG",[90,2330,2331],{},"写真・グラデーション",[90,2333,710],{},[90,2335,724],{},[75,2337,2338,2340,2343,2345],{},[90,2339,513],{},[90,2341,2342],{},"ロゴ・スクリーンショット・透過",[90,2344,713],{},[90,2346,727],{},[75,2348,2349,2351,2354,2356],{},[90,2350,700],{},[90,2352,2353],{},"写真・イラスト両方",[90,2355,716],{},[90,2357,727],{},[75,2359,2360,2363,2366,2369],{},[90,2361,2362],{},"AVIF",[90,2364,2365],{},"写真・高効率配信",[90,2367,2368],{},"非可逆・可逆",[90,2370,727],{},[17,2372,2373],{},"写真を PNG で保存するのは最も多い初歩的ミスで、JPG 比で 5〜10 倍の容量になりやすい。ロゴやテキスト入り画像を JPG にすると、輪郭のギザギザ（JPEG アーティファクト）が発生する。",[36,2375,2377],{"id":2376},"webp-と-avif-の現在地2026年時点","WebP と AVIF の現在地（2026年時点）",[17,2379,2380,2384],{},[138,2381,2383],{"href":1887,"rel":2382},[142],"MDN Web Docs の WebP ブラウザ互換表"," によると、WebP は 2026 年現在で全主要ブラウザの最新版で対応済みである。Edge Legacy など古い環境への対応が必要でなければ、WebP を第一選択肢にして問題ない。",[17,2386,2387],{},"AVIF は JPG より 30〜50% 小さい容量を実現できるが、エンコード処理が重く、古いデバイスでは表示が遅くなる場合がある。対応状況は Chrome・Firefox・Safari で概ね揃っているが、業務用イントラや特定企業環境では注意が必要だ。",[17,2389,2390,2392,2393,2396],{},[43,2391,1226],{}," 要素の ",[43,2394,2395],{},"srcset"," を使えば、対応ブラウザには AVIF を、非対応ブラウザには WebP または JPG を自動配信できる。",[36,2398,2399],{"id":2399},"可逆圧縮と非可逆圧縮の選択基準",[17,2401,2402,2405],{},[24,2403,2404],{},"可逆（lossless）"," はファイルを展開すれば元データと完全に一致する。PNG がその代表例で、ロゴや図版など「1 ピクセルも変えたくない」素材に適している。",[17,2407,2408,2411],{},[24,2409,2410],{},"非可逆（lossy）"," は人間の視覚が感知しにくい情報を捨てることで大幅な容量削減を実現する。JPG・WebP lossy・AVIF がこれに当たる。Web 配信用の写真は非可逆で十分だ。",[29,2413],{},[12,2415,2416],{"id":2416},"画質を保ったまま圧縮する5つの実践的コツ",[36,2418,2420],{"id":2419},"コツ1品質-8085-が最適点","コツ1：品質 80〜85% が最適点",[17,2422,2423,2424,2427],{},"JPG の品質設定は 100% である必要はなく、",[24,2425,2426],{},"85% が最適点"," である。視覚的に差がほぼ分からないにもかかわらず、ファイルサイズは 100% 比で約 40% に減少する。",[17,2429,2430],{},"以下は品質設定と容量・画質の関係を示した実測ベースの目安だ。",[69,2432,2433,2449],{},[72,2434,2435],{},[75,2436,2437,2440,2443,2446],{},[78,2438,2439],{},"品質設定",[78,2441,2442],{},"体感画質",[78,2444,2445],{},"元画像比サイズ",[78,2447,2448],{},"推奨用途",[85,2450,2451,2464,2477,2493,2507,2521],{},[75,2452,2453,2456,2459,2461],{},[90,2454,2455],{},"100%",[90,2457,2458],{},"最高",[90,2460,2455],{},[90,2462,2463],{},"原本保存のみ",[75,2465,2466,2469,2471,2474],{},[90,2467,2468],{},"95%",[90,2470,2458],{},[90,2472,2473],{},"約70%",[90,2475,2476],{},"印刷・高品質配信",[75,2478,2479,2482,2485,2488],{},[90,2480,2481],{},"85%",[90,2483,2484],{},"ほぼ最高",[90,2486,2487],{},"約40%",[90,2489,2490],{},[24,2491,2492],{},"Web 配信の黄金点",[75,2494,2495,2498,2501,2504],{},[90,2496,2497],{},"75%",[90,2499,2500],{},"良好",[90,2502,2503],{},"約30%",[90,2505,2506],{},"軽量化優先",[75,2508,2509,2512,2515,2518],{},[90,2510,2511],{},"60%",[90,2513,2514],{},"ノイズが見え始める",[90,2516,2517],{},"約22%",[90,2519,2520],{},"サムネイル等",[75,2522,2523,2526,2529,2532],{},[90,2524,2525],{},"40%",[90,2527,2528],{},"明確に劣化",[90,2530,2531],{},"約15%",[90,2533,2534],{},"非推奨",[17,2536,2537],{},"85% より上は容量削減効率が急落し、75% 以下は輪郭にブロックノイズが発生し始める。この「85% の黄金点」は Google の PageSpeed Insights が推奨する水準とも一致している。",[36,2539,2541],{"id":2540},"コツ2リサイズは圧縮より先に行う","コツ2：リサイズは圧縮より先に行う",[17,2543,2544],{},"「圧縮前にピクセル数を表示サイズに合わせる」は、品質と容量の両立において圧縮設定の調整より効果が大きい。",[17,2546,2547,2548,2551],{},"3,000px 幅の写真を 300px で表示するページに置くと、ダウンロードされるのは 3,000px の高解像度データであり、ブラウザが表示時に縮小するだけだ。無駄な転送が発生している。",[138,2549,1074],{"href":2550},"\u002Ftools\u002Fimage-resize"," で先に縮小してから圧縮する手順を徹底すること。",[17,2553,2554,2555,2558],{},"なお、元画像より ",[24,2556,2557],{},"大きく拡大しても画質は上がらない","。補間処理でぼやけるだけで情報量は増えないため、リサイズは縮小方向にのみ使う。",[36,2560,2562],{"id":2561},"コツ3exif-メタデータを除去する","コツ3：EXIF メタデータを除去する",[17,2564,2565,2566,2569],{},"前述のプライバシーリスクに加え、EXIF は数 KB〜数十 KB のオーバーヘッドになる。多くの圧縮ツールは EXIF 除去をオプションとして提供しているが、",[24,2567,2568],{},"デフォルトでオフ"," のものも多い。除去設定を確認してから処理することを習慣にする。",[36,2571,2573],{"id":2572},"コツ4非可逆圧縮を繰り返さない","コツ4：非可逆圧縮を繰り返さない",[17,2575,2576,2577,2580],{},"JPG の非可逆圧縮は「元画像 → 圧縮済み JPG」の処理ごとに画質が劣化する。一度圧縮した JPG を再度読み込んで再圧縮すると、劣化が積み重なる。必ず ",[24,2578,2579],{},"元画像（RAW または高品質 JPG）から 1 回だけ"," 圧縮する運用にする。",[36,2582,2584],{"id":2583},"コツ5重要な画像は目視で差分確認する","コツ5：重要な画像は目視で差分確認する",[17,2586,2587],{},"アイキャッチ・製品写真・プレゼン図版など視覚的品質が重要な画像は、圧縮前後の比較確認を行う。多くのツールは圧縮前後を並べて表示するプレビュー機能を持つ。自動バッチ処理に任せると過剰圧縮が見落とされることがある。",[29,2589],{},[12,2591,2592],{"id":2592},"オンライン画像圧縮ツールの比較",[36,2594,2595],{"id":2595},"主要ツール比較表",[17,2597,2598],{},"以下は 2026 年時点での主要な画像圧縮ツールの比較だ。",[69,2600,2601,2622],{},[72,2602,2603],{},[75,2604,2605,2607,2609,2612,2615,2617,2620],{},[78,2606,1331],{},[78,2608,1988],{},[78,2610,2611],{},"処理方式",[78,2613,2614],{},"無料枠",[78,2616,1999],{},[78,2618,2619],{},"EXIF 除去",[78,2621,1340],{},[85,2623,2624,2651,2668,2689,2707,2724],{},[75,2625,2626,2631,2636,2639,2642,2645,2648],{},[90,2627,2628],{},[24,2629,2630],{},"Zerosend",[90,2632,2633],{},[24,2634,2635],{},"なし（ブラウザ完結）",[90,2637,2638],{},"Web Worker + browser-image-compression",[90,2640,2641],{},"無制限",[90,2643,2644],{},"○",[90,2646,2647],{},"○（デフォルト有効）",[90,2649,2650],{},"○（SW キャッシュ）",[75,2652,2653,2655,2657,2659,2661,2664,2666],{},[90,2654,1378],{},[90,2656,2635],{},[90,2658,2082],{},[90,2660,2641],{},[90,2662,2663],{},"△（1枚ずつ）",[90,2665,2644],{},[90,2667,2644],{},[75,2669,2670,2672,2675,2677,2680,2683,2686],{},[90,2671,1392],{},[90,2673,2674],{},"PNG\u002FJPG をサーバーに送信",[90,2676,2032],{},[90,2678,2679],{},"月20枚",[90,2681,2682],{},"○（API）",[90,2684,2685],{},"△",[90,2687,2688],{},"✕",[75,2690,2691,2693,2696,2698,2701,2703,2705],{},[90,2692,1408],{},[90,2694,2695],{},"サーバーに送信",[90,2697,2032],{},[90,2699,2700],{},"日2回",[90,2702,2644],{},[90,2704,2685],{},[90,2706,2688],{},[75,2708,2709,2711,2713,2715,2718,2720,2722],{},[90,2710,1422],{},[90,2712,2695],{},[90,2714,2032],{},[90,2716,2717],{},"制限あり",[90,2719,2644],{},[90,2721,2685],{},[90,2723,2688],{},[75,2725,2726,2728,2730,2732,2734,2736,2738],{},[90,2727,1436],{},[90,2729,2695],{},[90,2731,2032],{},[90,2733,2717],{},[90,2735,2685],{},[90,2737,2685],{},[90,2739,2688],{},[17,2741,2742],{},"TinyPNG や Smallpdf は高品質なサービスだが、ファイルを一度クラウドサーバーに送信する設計であるため、機密性の高い画像（社内資料・個人情報を含む写真など）には適さない。",[36,2744,2745],{"id":2745},"サーバー送信有無を自分で確認する方法",[17,2747,2748,2749,2752],{},"ツールの説明を信頼するだけでなく、",[24,2750,2751],{},"DevTools の Network タブで実際に確認する"," のが確実だ。",[646,2754,2755,2758,2768,2771,2774],{},[503,2756,2757],{},"圧縮ツールのページを開く",[503,2759,2760,2761,2763,2764,2767],{},"ブラウザの DevTools を起動（Windows: ",[43,2762,1514],{},"、Mac: ",[43,2765,2766],{},"Cmd + Option + I","）",[503,2769,2770],{},"「Network」タブを選択し「Preserve log」を有効にする",[503,2772,2773],{},"画像をドラッグ&ドロップして処理を実行する",[503,2775,2776],{},"Network タブの通信ログを確認する",[17,2778,2779,2780,2783],{},"サーバー送信型のツールは、処理時に大きなペイロードを含む POST リクエストが発生する。Zerosend の場合、画像をドロップしても POST リクエストは発生せず、CDN・アナリティクスなどの通常のページリクエストのみが表示される。",[24,2781,2782],{},"アップロード通信ゼロ"," を自分で確認できる。",[29,2785],{},[12,2787,2789],{"id":2788},"zerosend-でブラウザ完結の画像圧縮を行う手順","Zerosend でブラウザ完結の画像圧縮を行う手順",[17,2791,2792,2793,2797,2798,2800],{},"Zerosend の画像圧縮ツールは ",[138,2794,1466],{"href":2795,"rel":2796},"https:\u002F\u002Fgithub.com\u002FDonaldcwl\u002Fbrowser-image-compression",[142]," ライブラリを ",[24,2799,1474],{}," 上で動作させている。Web Worker はメインスレッドとは別のスレッドで処理を実行するブラウザの仕組みであり、処理中でもページの操作が固まらない。圧縮処理はすべてユーザーのブラウザ内で完結し、外部サーバーへの送信は一切発生しない。",[36,2802,1478],{"id":1478},[646,2804,2805,2810,2813,2819,2822,2825],{},[503,2806,2807,1486],{},[138,2808,2809],{"href":2809},"\u002Ftools\u002Fimage-compress",[503,2811,2812],{},"JPG \u002F PNG \u002F WebP 形式の画像をドラッグ&ドロップ、または「ファイルを選択」から複数選択する",[503,2814,2815,2816,2767],{},"品質スライダーを調整する（推奨値は ",[24,2817,2818],{},"80〜85",[503,2820,2821],{},"「圧縮する」ボタンをクリックする",[503,2823,2824],{},"圧縮結果のプレビューと圧縮率を確認する",[503,2826,2827],{},"1 枚の場合はそのままダウンロード、複数の場合は ZIP でまとめてダウンロードする",[36,2829,1531],{"id":1531},[17,2831,2832],{},"Zerosend は Service Worker によるキャッシュを実装しており、初回アクセス後はネットワーク接続がなくても動作する。出張先や電波の届かない環境でも、ブラウザを開いていれば画像圧縮を実行できる。",[29,2834],{},[12,2836,2096],{"id":2096},[36,2838,2840],{"id":2839},"透過-png-を-jpg-変換すると白背景になる","透過 PNG を JPG 変換すると白背景になる",[17,2842,2843,2844,2847,2848,2850],{},"JPG フォーマットは透過（アルファチャンネル）をサポートしていない。透過 PNG を JPG 変換すると、透過部分が白で塗りつぶされる。ロゴやアイコンで透過が必要な場合は ",[24,2845,2846],{},"PNG のまま圧縮するか WebP に変換する","。",[138,2849,810],{"href":809}," を参照。",[36,2852,2853],{"id":2853},"圧縮後に色がくすんで見える",[17,2855,2856,2857,2860],{},"Adobe RGB や Display P3 プロファイルで保存された画像を sRGB 非対応の処理フローに通すと、色空間の変換時に彩度が失われる。Web 配信では ",[24,2858,2859],{},"sRGB に統一"," するのが安全だ。プロファイルが不明な画像は、圧縮後に別のブラウザやデバイスで色味を確認する。",[36,2862,2864],{"id":2863},"sns-投稿は自分での極限圧縮が逆効果になる場合がある","SNS 投稿は自分での極限圧縮が逆効果になる場合がある",[17,2866,2867,2868,2871],{},"Twitter（X）・Instagram・LINE は投稿時に独自アルゴリズムで再圧縮を行う。自分で品質を 40〜50% まで下げた上に SNS 側の再圧縮が重なると、最終的な画質が著しく低下することがある。SNS 向けの画像は ",[24,2869,2870],{},"80〜85% の設定で一度だけ圧縮"," し、プラットフォームの再処理に任せる方が綺麗な結果になりやすい。",[36,2873,2874],{"id":2874},"バッチ処理後に全件確認をしない",[17,2876,2877],{},"一括処理の便利さから、圧縮後の全ファイルを確認しないまま公開するケースがある。異常に小さいファイルサイズになっているものや、極端に品質が下がっているものが混入していることがある。少なくともサムネイル一覧で目視確認する習慣をつける。",[29,2879],{},[12,2881,1573],{"id":1572},[36,2883,2885],{"id":2884},"q1-webp-への変換は必須ですか","Q1. WebP への変換は必須ですか？",[17,2887,2888,2889,2891],{},"必須ではないが、推奨する。同等の画質で JPG より 25〜35% 容量を削減できるケースが多い。ただし古い環境への対応が必要な場合は ",[43,2890,1226],{}," タグでフォールバックを設定する。",[36,2893,2895],{"id":2894},"q2-png-を圧縮しても容量があまり減らないのはなぜですか","Q2. PNG を圧縮しても容量があまり減らないのはなぜですか？",[17,2897,2898],{},"PNG は可逆圧縮であるため、非可逆圧縮の JPG ほど大幅な削減は期待できない。PNG の容量を大きく削減したい場合は、非可逆の WebP への変換を検討する。透過が不要な写真系コンテンツであれば JPG または WebP lossy が最適だ。",[36,2900,2902],{"id":2901},"q3-圧縮ツールに画像をアップロードするとデータは保存されますか","Q3. 圧縮ツールに画像をアップロードするとデータは保存されますか？",[17,2904,2905],{},"サーバー処理型のツール（TinyPNG・Smallpdf 等）は各社のプライバシーポリシーに従って一定期間保存される場合がある。ブラウザ処理型のツール（Zerosend・Squoosh 等）はファイルをサーバーに送信しないため、保存の問題自体が発生しない。",[36,2907,2909],{"id":2908},"q4-圧縮後にファイルが元より大きくなることはありますか","Q4. 圧縮後にファイルが元より大きくなることはありますか？",[17,2911,2912],{},"ある。既に高圧縮済みの JPG をさらに圧縮しようとすると、再エンコードのオーバーヘッドでわずかに大きくなる場合がある。また、小さな PNG を WebP に変換した際に逆に大きくなるケースもある。圧縮後サイズを必ず確認し、大きくなっていた場合は元ファイルを使用する。",[36,2914,2916],{"id":2915},"q5-スマートフォンのカメラ写真に含まれる-gps-情報を削除できますか","Q5. スマートフォンのカメラ写真に含まれる GPS 情報を削除できますか？",[17,2918,2919,2920,2925],{},"EXIF 除去機能を持つ圧縮ツールであれば削除できる。Zerosend の画像圧縮はデフォルトで EXIF を除去する。除去されているかどうかは、処理後のファイルを ",[138,2921,2924],{"href":2922,"rel":2923},"https:\u002F\u002Fexifdata.com\u002F",[142],"Jeffrey's Exif Viewer"," 等のオンラインツールで確認できる。",[29,2927],{},[12,2929,491],{"id":491},[17,2931,2932],{},"画像圧縮の実践的な結論をまとめる。",[500,2934,2935,2941,2946,2952,2958],{},[503,2936,2937,2940],{},[24,2938,2939],{},"フォーマット選択","：写真は JPG または WebP lossy、ロゴ・透過は PNG または WebP lossless",[503,2942,2943,2945],{},[24,2944,2439],{},"：JPG \u002F WebP は 80〜85% を起点に調整する",[503,2947,2948,2951],{},[24,2949,2950],{},"処理順序","：リサイズ（ピクセル数削減）→ 圧縮（品質調整）→ EXIF 除去",[503,2953,2954,2957],{},[24,2955,2956],{},"非可逆圧縮は元画像から1回のみ","：再圧縮による劣化の積み重ねを避ける",[503,2959,2960,2963],{},[24,2961,2962],{},"ツール選定","：機密画像を扱う場合はサーバー送信の有無を DevTools で確認する",[17,2965,2966,2967,2970],{},"機密性の高い画像、個人写真、社内資料の圧縮には、ブラウザ完結処理の ",[138,2968,2969],{"href":2809},"Zerosend 画像圧縮ツール"," が選択肢の一つとなる。処理が完全にローカルで完結するため、送信リスクが構造的にない。品質スライダーと圧縮前後のプレビューで結果を確認しながら、適切な設定を見つけることができる。",{"title":173,"searchDepth":187,"depth":187,"links":2972},[2973,2978,2983,2990,2994,2998,3004,3011],{"id":2263,"depth":187,"text":2264,"children":2974},[2975,2976,2977],{"id":2267,"depth":193,"text":2268},{"id":2283,"depth":193,"text":2284},{"id":2290,"depth":193,"text":2291},{"id":2299,"depth":187,"text":2300,"children":2979},[2980,2981,2982],{"id":2303,"depth":193,"text":2304},{"id":2376,"depth":193,"text":2377},{"id":2399,"depth":193,"text":2399},{"id":2416,"depth":187,"text":2416,"children":2984},[2985,2986,2987,2988,2989],{"id":2419,"depth":193,"text":2420},{"id":2540,"depth":193,"text":2541},{"id":2561,"depth":193,"text":2562},{"id":2572,"depth":193,"text":2573},{"id":2583,"depth":193,"text":2584},{"id":2592,"depth":187,"text":2592,"children":2991},[2992,2993],{"id":2595,"depth":193,"text":2595},{"id":2745,"depth":193,"text":2745},{"id":2788,"depth":187,"text":2789,"children":2995},[2996,2997],{"id":1478,"depth":193,"text":1478},{"id":1531,"depth":193,"text":1531},{"id":2096,"depth":187,"text":2096,"children":2999},[3000,3001,3002,3003],{"id":2839,"depth":193,"text":2840},{"id":2853,"depth":193,"text":2853},{"id":2863,"depth":193,"text":2864},{"id":2874,"depth":193,"text":2874},{"id":1572,"depth":187,"text":1573,"children":3005},[3006,3007,3008,3009,3010],{"id":2884,"depth":193,"text":2885},{"id":2894,"depth":193,"text":2895},{"id":2901,"depth":193,"text":2902},{"id":2908,"depth":193,"text":2909},{"id":2915,"depth":193,"text":2916},{"id":491,"depth":187,"text":491},"画像圧縮で画質を損なわず最大限軽くする方法を解説。品質設定・フォーマット選択・リサイズ順序・サーバー非送信ツールの比較まで実用的な情報を網羅。",{},"\u002Fblog\u002Fimage-compress-guide","2026-04-19",{"title":2244,"description":3012},"image-compress-guide","blog\u002Fimage-compress-guide",[931,566,1699],"NdMNaoponIzt7H_Nhsf12BUmwdeRFRcxjEU5co1oVCo",1782000329836]