[{"data":1,"prerenderedAt":933},["ShallowReactive",2],{"blog-post-/blog/ja-jp/how-to-convert-images-for-shopify-and-e-commerce":3,"related-posts-/ja-JP/blog/how-to-convert-images-for-shopify-and-e-commerce":311},{"id":4,"title":5,"author":6,"body":7,"category":291,"date":292,"description":293,"extension":294,"featured":295,"image":296,"meta":297,"navigation":298,"path":299,"readingTime":300,"seo":301,"stem":302,"tags":303,"tools":309,"__hash__":310},"content/blog/ja-JP/how-to-convert-images-for-shopify-and-e-commerce.md","ShopifyとEC向けに画像を変換する方法","Anything Tools Editorial",{"type":8,"value":9,"toc":278},"minimark",[10,14,18,37,42,45,48,67,70,73,76,87,95,98,101,119,122,126,129,146,149,153,156,170,173,176,179,185,199,202,205,208,214,217,231,234,238,241,258,261,264,267],[11,12,5],"h1",{"id":13},"shopifyとec向けに画像を変換する方法",[15,16,17],"p",{},"EC画像は、見た目が良いだけでは足りません。商品ページで鮮明に見え、表示が重くなりすぎず、ストアのレイアウトに合っている必要があります。そのためには、アップロード前に形式を整えることが重要です。",[15,19,20,21,26,27,31,32,36],{},"ブラウザで素早く準備したいなら、まず ",[22,23,25],"a",{"href":24},"/image/converter","Anything Tools 画像変換ツール"," を使い、必要に応じて ",[22,28,30],{"href":29},"/image/compressor","画像圧縮ツール"," と ",[22,33,35],{"href":34},"/image/resizer","画像リサイズツール"," を組み合わせるのが効率的です。",[38,39,41],"h2",{"id":40},"shopifyで画像変換が重要な理由","Shopifyで画像変換が重要な理由",[15,43,44],{},"多くのストアでは、手元にある画像をそのままアップロードしがちです。たとえば、デザイナーが出した PNG、大きすぎる JPG、未整理のスクリーンショットなどです。",[15,46,47],{},"その結果、次のような問題が起こります。",[49,50,51,55,58,61,64],"ul",{},[52,53,54],"li",{},"モバイルでの商品ページが重い",[52,56,57],{},"ギャラリー画像の表示が遅い",[52,59,60],{},"透過素材のファイルが大きすぎる",[52,62,63],{},"バナーやサムネイルの見た目が揃わない",[52,65,66],{},"他の販売チャネルへ再利用しづらい",[15,68,69],{},"画像変換は、「画像がある」状態を「ストアで使える画像がある」状態に変える作業です。",[38,71,72],{"id":72},"どの形式を選ぶべきか",[15,74,75],{},"多くの Shopify / EC ワークフローでは、次の考え方が実用的です。",[49,77,78,81,84],{},[52,79,80],{},"商品写真は JPG を優先する",[52,82,83],{},"透過背景やシンプルな図形には PNG を使う",[52,85,86],{},"画質と圧縮効率のバランスを取りたいなら WebP も検討する",[15,88,89,90,94],{},"透過画像に関する判断を深掘りしたい場合は、",[22,91,93],{"href":92},"/blog/webp-vs-png-for-logos-and-transparent-images","ロゴや透明画像での WebP と PNG の比較"," も参考になります。",[38,96,97],{"id":97},"実用的な作業手順",[15,99,100],{},"多くのストアでは、次の流れで十分です。",[102,103,104,107,110,113,116],"ol",{},[52,105,106],{},"できるだけきれいな元画像を用意する。",[52,108,109],{},"用途に合う形式へ変換する。",[52,111,112],{},"実際のレイアウトに合わせてリサイズする。",[52,114,115],{},"見た目を壊さない範囲で圧縮する。",[52,117,118],{},"テスト画像をアップロードして、PC とスマホの両方で確認する。",[15,120,121],{},"この順番は重要です。先に圧縮しすぎたり、リサイズを後回しにしたりすると、不要な劣化や手戻りが増えやすくなります。",[38,123,125],{"id":124},"商品写真をjpgに変えるべき場面","商品写真をJPGに変えるべき場面",[15,127,128],{},"JPG は次のような商品写真で特に使いやすいです。",[49,130,131,134,137,140,143],{},[52,132,133],{},"アパレルの商品画像",[52,135,136],{},"白背景の物撮り",[52,138,139],{},"細部の寄り画像",[52,141,142],{},"ライフスタイル写真",[52,144,145],{},"コレクション一覧のサムネイル",[15,147,148],{},"写真ベースで透明背景が不要なら、JPG はかなり安定した選択です。大きすぎる PNG の商品写真を JPG に変えるだけで、ファイルサイズがかなり改善することもあります。",[38,150,152],{"id":151},"pngを残すべき場面","PNGを残すべき場面",[15,154,155],{},"次のケースでは PNG が向いています。",[49,157,158,161,164,167],{},[52,159,160],{},"透過背景が必要",[52,162,163],{},"エッジのはっきりしたシンプルな図形",[52,165,166],{},"UI モックや説明図",[52,168,169],{},"さまざまな背景に重ねるロゴやバッジ",[15,171,172],{},"「いつも PNG で書き出しているから」という理由だけなら、JPG や WebP を試す価値があります。",[38,174,175],{"id":175},"リサイズも変換作業の一部",[15,177,178],{},"形式が正しくても、サイズが大きすぎれば意味がありません。小さな表示枠に対して巨大な原画像をそのまま上げると、読み込みが無駄に重くなります。",[15,180,181,184],{},[22,182,183],{"href":34},"Anything Tools 画像リサイズツール"," を使って、実際の役割に合わせてサイズを整えましょう。",[49,186,187,190,193,196],{},[52,188,189],{},"商品詳細ページの画像",[52,191,192],{},"カテゴリ一覧のサムネイル",[52,194,195],{},"ホームのバナー",[52,197,198],{},"SNS 用の販促画像",[15,200,201],{},"目標は「できるだけ大きい画像」ではなく、「その場面で十分にきれいで、できるだけ軽い画像」です。",[38,203,204],{"id":204},"圧縮は最後の仕上げ",[15,206,207],{},"形式変換とリサイズが終わった後に圧縮すると、余分な容量をさらに減らしやすくなります。画像点数が多いストアほど、この差が効いてきます。",[15,209,210,213],{},[22,211,212],{"href":29},"Anything Tools 画像圧縮ツール"," は、ブラウザ内で品質の落としどころを素早く試せるので便利です。",[15,215,216],{},"書き出し前には、次の点を確認してください。",[49,218,219,222,225,228],{},[52,220,221],{},"布地やパッケージの質感",[52,223,224],{},"商品の輪郭がぼやけていないか",[52,226,227],{},"ラベルや細かな文字が読めるか",[52,229,230],{},"拡大表示で破綻していないか",[15,232,233],{},"ここが問題なければ、実運用でもかなり安定します。",[38,235,237],{"id":236},"ec画像でよくある失敗","EC画像でよくある失敗",[15,239,240],{},"よくあるミスは次の通りです。",[49,242,243,246,249,252,255],{},[52,244,245],{},"カメラの原画像をそのまま上げる",[52,247,248],{},"商品写真をすべて PNG のままにする",[52,250,251],{},"形式を決める前に先に圧縮する",[52,253,254],{},"モバイル表示を確認しない",[52,256,257],{},"一覧ページ内でサイズ感が揃っていない",[15,259,260],{},"対策はシンプルです。変換して、リサイズして、圧縮して、最後に実際のストアで確認します。",[38,262,263],{"id":263},"まとめ",[15,265,266],{},"Shopify や EC 向けの画像準備は、単に形式を変えるだけでは終わりません。形式を選び、実際の用途に合わせてサイズを整え、圧縮し、最終的にページ上で確認するところまでが一連の流れです。",[15,268,269,270,272,273,31,275,277],{},"ブラウザで手早く進めたいなら、まず ",[22,271,25],{"href":24}," から始め、最後に ",[22,274,35],{"href":34},[22,276,30],{"href":29}," を組み合わせるのが実用的です。",{"title":279,"searchDepth":280,"depth":280,"links":281},"",2,[282,283,284,285,286,287,288,289,290],{"id":40,"depth":280,"text":41},{"id":72,"depth":280,"text":72},{"id":97,"depth":280,"text":97},{"id":124,"depth":280,"text":125},{"id":151,"depth":280,"text":152},{"id":175,"depth":280,"text":175},{"id":204,"depth":280,"text":204},{"id":236,"depth":280,"text":237},{"id":263,"depth":280,"text":263},"画像最適化","2026-04-08T00:00:00.000Z","Shopify や他の EC サイト向けに、商品画像を変換、圧縮、リサイズして表示品質と読み込み速度を両立する実用ガイドです。","md",false,"/blog/how-to-convert-images-for-shopify-and-e-commerce.png",{},true,"/blog/ja-jp/how-to-convert-images-for-shopify-and-e-commerce",8,{"title":5,"description":293},"blog/ja-JP/how-to-convert-images-for-shopify-and-e-commerce",[304,305,306,307,308],"Shopify","EC","画像変換","画像圧縮","商品画像",[24,29,34],"dXhJ5XpyiqO0qGjLtPWaEBQZVgdgYCPN-nyr4ooWB3s",[312,846],{"id":313,"title":314,"author":315,"body":316,"category":291,"date":832,"description":833,"extension":294,"featured":295,"image":834,"meta":835,"navigation":298,"path":836,"readingTime":837,"seo":838,"stem":839,"tags":840,"tools":843,"__hash__":845},"content/blog/ja-JP/avif-vs-webp-comparison.md","AVIF vs WebP: 2026年、最適な画像フォーマットはどれ？","Anything Tools チーム",{"type":8,"value":317,"toc":813},[318,321,333,340,344,453,457,462,467,487,491,497,501,521,524,528,531,544,548,551,555,569,583,720,723,726,729,732,752,755,766,770,775,783,788,799,809],[11,319,314],{"id":320},"avif-vs-webp-2026年最適な画像フォーマットはどれ",[15,322,323,324,328,329,332],{},"より高速なウェブサイトとより良いユーザー体験を追求する中で、画像の最適化は重要な役割を果たします。長年にわたり、",[325,326,327],"strong",{},"WebP"," はJPEGやPNGへの対抗馬でした。しかし今、新たな競争相手が登場しました：",[325,330,331],{},"AVIF","です。",[15,334,335,336,339],{},"このガイドでは、",[325,337,338],{},"AVIF vs WebP"," を比較し、2026年のプロジェクトに最適な次世代フォーマットはどちらかを判断する手助けをします。",[38,341,343],{"id":342},"概要結論","概要：結論",[345,346,347,364],"table",{},[348,349,350],"thead",{},[351,352,353,357,359,361],"tr",{},[354,355,356],"th",{},"機能",[354,358,327],{},[354,360,331],{},[354,362,363],{},"勝者",[365,366,367,386,403,420,437],"tbody",{},[351,368,369,375,378,381],{},[370,371,372],"td",{},[325,373,374],{},"圧縮",[370,376,377],{},"良好 (JPEGより25-35%小さい)",[370,379,380],{},"優秀 (JPEGより50%以上小さい)",[370,382,383,384],{},"🏆 ",[325,385,331],{},[351,387,388,393,396,399],{},[370,389,390],{},[325,391,392],{},"画質",[370,394,395],{},"中/高ビットレートで良好",[370,397,398],{},"低ビットレートで優れている",[370,400,383,401],{},[325,402,331],{},[351,404,405,410,413,416],{},[370,406,407],{},[325,408,409],{},"ブラウザ対応",[370,411,412],{},"ほぼ全て (97%以上)",[370,414,415],{},"優秀 (93%以上)",[370,417,383,418],{},[325,419,327],{},[351,421,422,427,430,433],{},[370,423,424],{},[325,425,426],{},"エンコード速度",[370,428,429],{},"早い",[370,431,432],{},"遅め",[370,434,383,435],{},[325,436,327],{},[351,438,439,443,446,449],{},[370,440,441],{},[325,442,356],{},[370,444,445],{},"透明度, アニメーション",[370,447,448],{},"透明度, アニメーション, HDR, 広色域",[370,450,383,451],{},[325,452,331],{},[38,454,456],{"id":455},"webpとは","WebPとは？",[15,458,459,461],{},[325,460,327],{}," は、2010年にGoogleによって開発された画像フォーマットです。予測符号化を使用して、JPEGやPNGよりも効率的に画像を圧縮します。",[463,464,466],"h3",{"id":465},"webpの主な利点","WebPの主な利点：",[49,468,469,475,481],{},[52,470,471,474],{},[325,472,473],{},"広範なサポート:"," すべての主要ブラウザ（Chrome、Firefox、Safari、Edge）でサポートされています。",[52,476,477,480],{},[325,478,479],{},"多用途:"," 不可逆圧縮と可逆圧縮の両方、および透明度（アルファチャンネル）とアニメーションをサポートしています。",[52,482,483,486],{},[325,484,485],{},"パフォーマンス:"," 通常、同等のJPEG画像よりも25-35%小さくなります。",[38,488,490],{"id":489},"avifとは","AVIFとは？",[15,492,493,496],{},[325,494,495],{},"AVIF (AV1 Image File Format)"," は、AV1ビデオコーデックのキーフレームから派生した新しいフォーマットです。2019年にAlliance for Open Media (AOMedia) によってリリースされました。",[463,498,500],{"id":499},"avifの主な利点","AVIFの主な利点：",[49,502,503,509,515],{},[52,504,505,508],{},[325,506,507],{},"卓越した圧縮:"," 同じ画質でJPEGより50%、WebPより20-30%小さくできます。",[52,510,511,514],{},[325,512,513],{},"高画質:"," WebP（ブロック状に見えることがある）と比較して、非常に小さなファイルサイズでも構造的な詳細をより維持します。",[52,516,517,520],{},[325,518,519],{},"高度な機能:"," HDR（ハイダイナミックレンジ）と広色域（WCG）をネイティブサポートしています。",[38,522,523],{"id":523},"詳細比較",[463,525,527],{"id":526},"_1-ファイルサイズと圧縮","1. ファイルサイズと圧縮",[15,529,530],{},"ここではAVIFが明確な勝者です。その圧縮アルゴリズムはより高度で、より少ないバイト数により多くのデータを詰め込むことができます。私たちのテストでは：",[49,532,533,539],{},[52,534,535,536,538],{},"100KB JPEG を ",[325,537,327],{}," に変換: ~70KB",[52,540,535,541,543],{},[325,542,331],{}," に変換: ~50KB",[463,545,547],{"id":546},"_2-視覚的な品質","2. 視覚的な品質",[15,549,550],{},"ファイルサイズが小さい場合、WebPは「ブロックノイズ」やぼやけが発生しがちです。一方、AVIFは細かいテクスチャや粒子が失われる可能性がありますが、一般的にエッジや形状をはるかによく保持し、積極的な圧縮レベルでも人間の目にはより心地よい画像を生成します。",[463,552,554],{"id":553},"_3-ブラウザ対応-2026","3. ブラウザ対応 (2026)",[49,556,557,563],{},[52,558,559,562],{},[325,560,561],{},"WebP:"," 基本的にすべての環境でサポートされています。主要なフォーマットとして安全に使用できます。",[52,564,565,568],{},[325,566,567],{},"AVIF:"," Chrome、Firefox、Safari (iOS 16+, macOS Ventura+)、Edgeでサポートされています。グローバルなサポート率は93%を超えています。",[570,571,572],"blockquote",{},[15,573,574,577,578,582],{},[325,575,576],{},"推奨:"," ",[579,580,581],"code",{},"\u003Cpicture>","タグを使用して、最新のブラウザにはAVIFを提供し、古いブラウザにはWebPまたはJPEGにフォールバックします。",[584,585,589],"pre",{"className":586,"code":587,"language":588,"meta":279,"style":279},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cpicture>\n  \u003Csource srcset=\"image.avif\" type=\"image/avif\">\n  \u003Csource srcset=\"image.webp\" type=\"image/webp\">\n  \u003Cimg src=\"image.jpg\" alt=\"説明\">\n\u003C/picture>\n","html",[579,590,591,607,645,676,710],{"__ignoreMap":279},[592,593,596,600,604],"span",{"class":594,"line":595},"line",1,[592,597,599],{"class":598},"sMK4o","\u003C",[592,601,603],{"class":602},"swJcz","picture",[592,605,606],{"class":598},">\n",[592,608,609,612,615,619,622,625,629,631,634,636,638,641,643],{"class":594,"line":280},[592,610,611],{"class":598},"  \u003C",[592,613,614],{"class":602},"source",[592,616,618],{"class":617},"spNyl"," srcset",[592,620,621],{"class":598},"=",[592,623,624],{"class":598},"\"",[592,626,628],{"class":627},"sfazB","image.avif",[592,630,624],{"class":598},[592,632,633],{"class":617}," type",[592,635,621],{"class":598},[592,637,624],{"class":598},[592,639,640],{"class":627},"image/avif",[592,642,624],{"class":598},[592,644,606],{"class":598},[592,646,648,650,652,654,656,658,661,663,665,667,669,672,674],{"class":594,"line":647},3,[592,649,611],{"class":598},[592,651,614],{"class":602},[592,653,618],{"class":617},[592,655,621],{"class":598},[592,657,624],{"class":598},[592,659,660],{"class":627},"image.webp",[592,662,624],{"class":598},[592,664,633],{"class":617},[592,666,621],{"class":598},[592,668,624],{"class":598},[592,670,671],{"class":627},"image/webp",[592,673,624],{"class":598},[592,675,606],{"class":598},[592,677,679,681,684,687,689,691,694,696,699,701,703,706,708],{"class":594,"line":678},4,[592,680,611],{"class":598},[592,682,683],{"class":602},"img",[592,685,686],{"class":617}," src",[592,688,621],{"class":598},[592,690,624],{"class":598},[592,692,693],{"class":627},"image.jpg",[592,695,624],{"class":598},[592,697,698],{"class":617}," alt",[592,700,621],{"class":598},[592,702,624],{"class":598},[592,704,705],{"class":627},"説明",[592,707,624],{"class":598},[592,709,606],{"class":598},[592,711,713,716,718],{"class":594,"line":712},5,[592,714,715],{"class":598},"\u003C/",[592,717,603],{"class":602},[592,719,606],{"class":598},[38,721,722],{"id":722},"画像の変換方法",[15,724,725],{},"次世代画像を作成するために高価なソフトウェアは必要ありません。",[463,727,728],{"id":728},"オンラインツール",[15,730,731],{},"私たちの無料ツールを使用して画像を変換できます：",[49,733,734,740,746],{},[52,735,736],{},[22,737,739],{"href":738},"/image/converter/jpg-to-webp","JPGをWebPに変換",[52,741,742],{},[22,743,745],{"href":744},"/image/converter/png-to-avif","PNGをAVIFに変換",[52,747,748],{},[22,749,751],{"href":750},"/image/converter/heic-to-jpg","HEICをJPGに変換",[463,753,754],{"id":754},"コマンドライン",[15,756,757,758,761,762,765],{},"開発者にとって、",[579,759,760],{},"ffmpeg"," (AVIF用) や ",[579,763,764],{},"cwebp"," (WebP用) のようなツールは、バッチ処理のための強力な選択肢です。",[38,767,769],{"id":768},"結論どちらを使うべき","結論：どちらを使うべき？",[15,771,772],{},[325,773,774],{},"以下の場合にWebPを使用してください：",[49,776,777,780],{},[52,778,779],{},"フォールバック戦略なしで最大の互換性が必要な場合。",[52,781,782],{},"高速なエンコード速度が必要な場合（例：その場で画像を生成する）。",[15,784,785],{},[325,786,787],{},"以下の場合にAVIFを使用してください：",[49,789,790,793,796],{},[52,791,792],{},"最速のページ読み込みのために、ファイルサイズを最小限に抑えたい場合。",[52,794,795],{},"HDRサポートやより高いビット深度の色が必要な場合。",[52,797,798],{},"フォールバックタグの使用に抵抗がない場合。",[15,800,801,804,805,808],{},[325,802,803],{},"最終判定:"," 2026年現在、",[325,806,807],{},"パフォーマンスにはAVIFが最適","ですが、WebPは依然として堅実で普遍的にサポートされている主力フォーマットです。最良の戦略は、多くの場合、両方を使用することです。",[810,811,812],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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":279,"searchDepth":280,"depth":280,"links":814},[815,816,819,822,827,831],{"id":342,"depth":280,"text":343},{"id":455,"depth":280,"text":456,"children":817},[818],{"id":465,"depth":647,"text":466},{"id":489,"depth":280,"text":490,"children":820},[821],{"id":499,"depth":647,"text":500},{"id":523,"depth":280,"text":523,"children":823},[824,825,826],{"id":526,"depth":647,"text":527},{"id":546,"depth":647,"text":547},{"id":553,"depth":647,"text":554},{"id":722,"depth":280,"text":722,"children":828},[829,830],{"id":728,"depth":647,"text":728},{"id":754,"depth":647,"text":754},{"id":768,"depth":280,"text":769},"2026-01-20T00:00:00.000Z","AVIFとWebP画像フォーマットの包括的な比較。圧縮率、画質、ブラウザ対応状況、そしてあなたのウェブサイトにどちらを使用すべきかを解説します。","/blog/avif-vs-webp.jpg",{},"/blog/ja-jp/avif-vs-webp-comparison",6,{"title":314,"description":833},"blog/ja-JP/avif-vs-webp-comparison",[331,327,307,841,842],"Webパフォーマンス","SEO",[844],"/image/converter/webp-to-avif","VKl8mlHRAWoibjHFRpfqfu4IYVMz1lX226jm7PqRMRg",{"id":847,"title":848,"author":6,"body":849,"category":291,"date":920,"description":921,"extension":294,"featured":295,"image":922,"meta":923,"navigation":298,"path":924,"readingTime":925,"seo":926,"stem":927,"tags":928,"tools":931,"__hash__":932},"content/blog/ja-JP/how-to-compress-images-for-faster-page-speed.md","画像を圧縮してページ表示を高速化する方法",{"type":8,"value":850,"toc":913},[851,853,856,860,863,867,874,878,885,889,906,910],[11,852,848],{"id":848},[15,854,855],{},"重い画像は、今でもページ表示を遅くする最大要因のひとつです。特にモバイル体験と Core Web Vitals に効いてきます。",[38,857,859],{"id":858},"why-compression-matters","Why compression matters",[15,861,862],{},"Large images increase download weight, slow perceived load time, and make Core Web Vitals harder to improve.",[38,864,866],{"id":865},"pick-the-right-format-first","Pick the right format first",[15,868,869,870,873],{},"Use JPG for photos, PNG for graphics with transparency, and WebP when you want a modern web delivery format. You can compare options with the ",[22,871,872],{"href":24},"Image Converter",".",[38,875,877],{"id":876},"resize-before-compressing","Resize before compressing",[15,879,880,881,884],{},"Do not compress a 4000px image if the layout only needs 1200px. Start with the ",[22,882,883],{"href":34},"Image Resizer",", then compress the smaller file.",[38,886,888],{"id":887},"delivery-workflow","Delivery workflow",[102,890,891,894,897,903],{},[52,892,893],{},"Export the original asset.",[52,895,896],{},"Resize to the real display range.",[52,898,899,900,873],{},"Compress with ",[22,901,902],{"href":29},"Image Compressor",[52,904,905],{},"Recheck the page and compare before/after in the browser.",[38,907,909],{"id":908},"final-takeaway","Final takeaway",[15,911,912],{},"For better page speed, think in this order: dimensions first, format second, compression third.",{"title":279,"searchDepth":280,"depth":280,"links":914},[915,916,917,918,919],{"id":858,"depth":280,"text":859},{"id":865,"depth":280,"text":866},{"id":876,"depth":280,"text":877},{"id":887,"depth":280,"text":888},{"id":908,"depth":280,"text":909},"2026-03-24T00:00:00.000Z","適切な形式の選択、先にリサイズしてから圧縮する流れ、そして画質と Core Web Vitals のバランスを実践的に解説します。","/blog/how-to-compress-images-for-faster-page-speed.png",{},"/blog/ja-jp/how-to-compress-images-for-faster-page-speed",7,{"title":848,"description":921},"blog/ja-JP/how-to-compress-images-for-faster-page-speed",[307,929,930,841,842],"ページ速度","Core Web Vitals",[29],"KgaEJP5Pv_YBcX6U7udC-k98i4IbI5_jwBuYMUgdUe0",1781404379595]