[{"data":1,"prerenderedAt":372},["ShallowReactive",2],{"blog-tag-ja-seo":3},[4],{"id":5,"title":6,"author":7,"body":8,"category":354,"coverImage":355,"description":356,"draft":357,"extension":358,"locale":359,"meta":360,"navigation":361,"noindex":357,"path":362,"publishedAt":363,"seo":364,"slug":365,"stem":366,"tags":367,"updatedAt":363,"__hash__":371},"blog\u002Fblog\u002Fimage-compress-guide.md","オンライン画像圧縮 完全ガイド 2026 — 画質を落とさず最大限軽くする方法","Zerosend Editorial",{"type":9,"value":10,"toc":319},"minimark",[11,21,25,30,38,42,45,48,52,68,71,75,82,94,98,112,119,123,127,134,138,145,149,161,165,172,176,183,186,190,193,208,211,218,221,224,228,248,251,255,273,276,280,288,291,298,302,309,312],[12,13,14,15,20],"p",{},"Web サイトに画像を載せるとき、「軽くしたいけど画質は落としたくない」という悩みは共通です。本記事では、画像圧縮の基本と実用的なコツ、そしてファイルをサーバーに預けずに処理できる ",[16,17,19],"a",{"href":18},"\u002Ftools\u002Fimage-compress","Zerosend の画像圧縮ツール"," の使い方を整理します。",[22,23,24],"h2",{"id":24},"なぜ画像圧縮が必要か",[26,27,29],"h3",{"id":28},"表示速度と-seo-core-web-vitals","表示速度と SEO (Core Web Vitals)",[12,31,32,33,37],{},"Google の Core Web Vitals では、ページ内の最大コンテンツの表示時間 (LCP) を評価軸にしています。LCP の遅延原因の多くは",[34,35,36],"strong",{},"巨大な画像","です。未圧縮の写真を 1 枚置くだけで、モバイル回線ではページ全体の表示が数秒遅れます。検索順位にも影響します。",[26,39,41],{"id":40},"サーバー費用ストレージ節約","サーバー費用・ストレージ節約",[12,43,44],{},"画像 1 枚あたり数 MB を 100 枚置けば数 GB。配信帯域・ストレージ・CDN 費用は使い手がその画像を見る回数だけ上乗せで発生します。初期の圧縮コストをサボるほど、後でお金と速度の両方で払うことになります。",[22,46,47],{"id":47},"主要な画像フォーマットと圧縮方式",[26,49,51],{"id":50},"jpg-と-png-の使い分け","JPG と PNG の使い分け",[53,54,55,62],"ul",{},[56,57,58,61],"li",{},[34,59,60],{},"JPG",": 写真向け。非可逆圧縮 (情報を捨てて軽くする)。透過不可。",[56,63,64,67],{},[34,65,66],{},"PNG",": ロゴ・スクリーンショット・透過が必要な画像向け。可逆圧縮。",[12,69,70],{},"写真を PNG で保存すると JPG の 5〜10 倍の容量になります。まずこの判断を間違えないこと。",[26,72,74],{"id":73},"webp-avif-の現在地","WebP \u002F AVIF の現在地",[12,76,77,78,81],{},"2026 年時点では ",[34,79,80],{},"WebP は実質全ブラウザで使えます","。AVIF も主要ブラウザが対応済みで、JPG の 2〜3 割小さい容量を実現できます。",[12,83,84,85,89,90,93],{},"互換性が不安なら、WebP を第一選択にしつつ、フォールバックで JPG \u002F PNG を用意するのが安全です。",[86,87,88],"code",{},"\u003Cpicture>"," タグの ",[86,91,92],{},"srcset"," で自動切替できます。",[26,95,97],{"id":96},"可逆圧縮-vs-非可逆圧縮","可逆圧縮 vs 非可逆圧縮",[53,99,100,106],{},[56,101,102,105],{},[34,103,104],{},"可逆 (lossless)",": ファイルを小さくするが画質は 1 ピクセルも失わない。PNG \u002F WebP lossless \u002F AVIF lossless。",[56,107,108,111],{},[34,109,110],{},"非可逆 (lossy)",": 人間の目に目立ちにくい情報を捨てて大幅に軽くする。JPG \u002F WebP lossy \u002F AVIF。",[12,113,114,115,118],{},"Web 配信用は",[34,116,117],{},"基本的に非可逆で十分","。ロゴやイラストのような「元画像が重要」なものだけ可逆を選びます。",[22,120,122],{"id":121},"画質を落とさず圧縮する-5-つのコツ","画質を落とさず圧縮する 5 つのコツ",[26,124,126],{"id":125},"_1-品質-8085-の黄金点","1. 品質 80〜85 % の黄金点",[12,128,129,130,133],{},"JPG の品質設定は 100% ではなく ",[34,131,132],{},"85% がベスト","です。体感の画質差はほぼ分かりませんが、ファイルサイズは 100% の約 40% まで落ちます。70% まで下げると輪郭にノイズが出始めるので、そこが下限の目安です。",[26,135,137],{"id":136},"_2-不要なメタデータを削る","2. 不要なメタデータを削る",[12,139,140,141,144],{},"スマホで撮った写真には EXIF (撮影日時・GPS 位置情報・カメラ機種) が埋め込まれています。サイズ的にわずか数十 KB ですが、",[34,142,143],{},"プライバシー面でも削るべき","です。Zerosend の画像圧縮は保存時に EXIF を自動で除去します。",[26,146,148],{"id":147},"_3-画像サイズを先にリサイズ","3. 画像サイズを先にリサイズ",[12,150,151,152,156,157,160],{},"圧縮前に画像サイズ (ピクセル) を表示サイズに合わせることが、品質と容量を両立する最強の施策です。300px で表示する画像を 3000px のまま圧縮しても、帯域の無駄でしかありません。",[16,153,155],{"href":154},"\u002Ftools\u002Fimage-resize","画像リサイズツール"," で",[34,158,159],{},"先に縮めてから","圧縮してください。",[26,162,164],{"id":163},"_4-複数ツールを重ねがけしない","4. 複数ツールを重ねがけしない",[12,166,167,168,171],{},"非可逆圧縮は毎回わずかに画質が落ちます。「JPG を圧縮 → またアップ → また圧縮」を繰り返すと、ジワジワ劣化が積み重なります。元画像から ",[34,169,170],{},"1 回だけ"," 圧縮する運用にしましょう。",[26,173,175],{"id":174},"_5-重要な画像だけ手動で確認","5. 重要な画像だけ手動で確認",[12,177,178,179,182],{},"自動処理で全部済ませてよい画像と、見出し画像やアイキャッチのように",[34,180,181],{},"手動で結果を確認すべき画像","を分けます。後者は品質 85% に加えて、元画像とのスライダー比較を挟むと事故を防げます。",[22,184,185],{"id":185},"オンライン画像圧縮ツールの選び方",[26,187,189],{"id":188},"アップロードされるされないを見分ける","アップロードされる\u002Fされないを見分ける",[12,191,192],{},"「オンラインで無料で使える」と謳うツールの多くは、一度ファイルをサーバーに送って処理しています。画像のロゴや社内資料では、これが問題になる場面があります。",[12,194,195,196,199,200,203,204,207],{},"見分け方はシンプルです。ブラウザの ",[34,197,198],{},"DevTools を開き Network タブを表示","してからツールを使ってみてください。アップロード時に大きなデータを伴う POST リクエストが出ていれば、そのツールは送信型です。",[16,201,202],{"href":18},"Zerosend の画像圧縮"," はこの検証で",[34,205,206],{},"送信ゼロ","が確認できます。",[26,209,210],{"id":210},"画質コントロールの柔軟性",[12,212,213,214,217],{},"品質スライダーがあるか、形式を選べるか、出力プレビューがあるかは必ずチェックしましょう。プリセット一択のツールは",[34,215,216],{},"過剰圧縮","に陥りがちです。",[26,219,220],{"id":220},"バッチ処理に対応しているか",[12,222,223],{},"1 枚ずつでは時間がかかる業務向けに、複数ファイルの一括処理 + ZIP ダウンロードに対応したツールを選びます。",[22,225,227],{"id":226},"zerosend-でブラウザ内完結の画像圧縮をする手順","Zerosend でブラウザ内完結の画像圧縮をする手順",[229,230,231,236,239,242,245],"ol",{},[56,232,233,235],{},[16,234,18],{"href":18}," にアクセス",[56,237,238],{},"画像をドラッグ&ドロップ (JPG \u002F PNG \u002F WebP、複数可)",[56,240,241],{},"品質スライダーを調整 (推奨は 80)",[56,243,244],{},"「圧縮する」ボタン",[56,246,247],{},"1 枚ならそのまま、複数なら ZIP でダウンロード",[12,249,250],{},"すべての処理がブラウザ内で完結するので、機密画像も安心して扱えます。",[26,252,254],{"id":253},"devtools-の-network-タブで検証する方法","DevTools の Network タブで検証する方法",[229,256,257,260,263,266],{},[56,258,259],{},"圧縮する前に DevTools を開く (右クリック → 検証)",[56,261,262],{},"Network タブに切り替え、「Preserve log」をオンに",[56,264,265],{},"画像をドラッグ&ドロップして処理を走らせる",[56,267,268,269,272],{},"表示される通信が CDN \u002F GA \u002F AdSense だけで、",[34,270,271],{},"画像自体を POST している通信がない"," ことを確認",[22,274,275],{"id":275},"よくある落とし穴",[26,277,279],{"id":278},"透過-png-が白背景になる","透過 PNG が白背景になる",[12,281,282,283,287],{},"JPG は透過を扱えません。PNG の透過画像を「形式変換: JPG」で処理すると、透過部分が白で埋まります。透過を保ちたい場合は PNG のまま \u002F WebP に変換してください。",[16,284,286],{"href":285},"\u002Ftools\u002Fimage-convert","画像形式変換ツール"," を参照。",[26,289,290],{"id":290},"圧縮後に色がくすむ",[12,292,293,294,297],{},"sRGB 以外のプロファイル (Adobe RGB \u002F Display P3) で保存された画像は、非対応ブラウザで色がくすんで見えることがあります。Web 配信は ",[34,295,296],{},"sRGB に統一","するのが無難です。",[26,299,301],{"id":300},"sns-側で再圧縮される","SNS 側で再圧縮される",[12,303,304,305,308],{},"Twitter \u002F Instagram \u002F LINE では、投稿された画像がプラットフォーム側でさらに圧縮されます。自分で極限まで圧縮するよりも、",[34,306,307],{},"そこそこで止めて SNS の再圧縮に任せる","方が綺麗に見えるケースもあります。",[22,310,311],{"id":311},"まとめ",[12,313,314,315,318],{},"画像圧縮は「JPG 品質 85% を目安に、先にリサイズ、メタデータは削る」の 3 原則で大半がうまくいきます。Zerosend の画像圧縮は、この原則をブラウザ内で実現します。機密画像でも気兼ねなく使えるので、",[16,316,317],{"href":18},"試してみてください","。",{"title":320,"searchDepth":321,"depth":321,"links":322},"",2,[323,328,333,340,345,348,353],{"id":24,"depth":321,"text":24,"children":324},[325,327],{"id":28,"depth":326,"text":29},3,{"id":40,"depth":326,"text":41},{"id":47,"depth":321,"text":47,"children":329},[330,331,332],{"id":50,"depth":326,"text":51},{"id":73,"depth":326,"text":74},{"id":96,"depth":326,"text":97},{"id":121,"depth":321,"text":122,"children":334},[335,336,337,338,339],{"id":125,"depth":326,"text":126},{"id":136,"depth":326,"text":137},{"id":147,"depth":326,"text":148},{"id":163,"depth":326,"text":164},{"id":174,"depth":326,"text":175},{"id":185,"depth":321,"text":185,"children":341},[342,343,344],{"id":188,"depth":326,"text":189},{"id":210,"depth":326,"text":210},{"id":220,"depth":326,"text":220},{"id":226,"depth":321,"text":227,"children":346},[347],{"id":253,"depth":326,"text":254},{"id":275,"depth":321,"text":275,"children":349},[350,351,352],{"id":278,"depth":326,"text":279},{"id":290,"depth":326,"text":290},{"id":300,"depth":326,"text":301},{"id":311,"depth":321,"text":311},"tech",null,"画像圧縮で画質を落とさず最大限軽くするための実用テクと、ファイルをサーバーに送らずブラウザだけで圧縮する方法を解説。品質 85% の黄金点・フォーマット選び・リサイズとの順序まで。",false,"md","ja",{},true,"\u002Fblog\u002Fimage-compress-guide","2026-04-19",{"title":6,"description":356},"image-compress-guide","blog\u002Fimage-compress-guide",[368,369,370],"画像","SEO","Core Web Vitals","Ey8g1pEDQwSyU-EUzZGf5O3w7cY2ZPIiGZ56wTtCHfw",1777617518136]