[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fwvIbpmrLjb43S52o4RqMfkNS_dBI0C231KOgHxKvCN0":3,"$fjWe0hsatmiEJXAXsyKuQEa_HTBKhLbi722SllMQEeD0":2796,"$f72kh5jwBO6JUuKcRjw2pS3BZFnshC55Xi1xR3Ab-t3U":2798,"$f3zmzLchO3SMmLEH_br16-8B099BGjbT0tB-w9s-9t-Y":2802,"$fbxwMtLgSs2FH1MsE8bqSG0E3k_1Q5sqxA1X5cvhE6-8":2805,"$f6fbeSEomtBYbN5PuhtckQAyM_xgXgIAiEBesJNXIsks":2808,"$fAwYgF9ljHIppuPORlQk8dJod-ITCGG-1JDcDUBn1qmA":2810,"$feVg8I6EvzHKOCP_Lfs6Fyt-pd4T2JhRE-mW9T04anN0":2812,"$fBiuqx7wYalqCpvQ_qmG7dJPMRtcWzUgpy9WtRWsqs9s":2814,"$f4LlEOx9JPv9G8T-m5xrU5duHVgSjBP05WU4v6lSssdo":2816,"$fPtJEg_fLOjpWW32R8bTIre9T3nf5J473lQArNbzUFJc":2818,"$fMGP9fZHdylMrp-j5qHKZMNGU1JjWf8PSMJFcPot6UEY":2820,"$fOQgNOJ2E72jt7JF69RMMPH7MEeKNhpOZBokUhJlJeig":2824,"$frORylBlVvw-Mj5cISX3f93mkP73zpZ72I9cFne4uUBI":2828,"$fVMy_vdbbpJUyKrSDbRGVbyQ9weOm0s-TizET1Oxo410":2831,"$fkDQ_78Ty32f-8QLC2MWBGh0_zuLEUZLK6-Aj-uqll8s":2835},{"id":4,"title":5,"body":6,"date":2782,"description":2783,"extension":2784,"icon":2785,"meta":2786,"navigation":1867,"ogImage":2787,"path":2788,"published":1867,"publishedAt":2789,"seo":2790,"stem":2791,"tags":2792,"updatedAt":2789,"__hash__":2795},"tech/tech/image-optimization.md","Webページの画像最適化について学びなおす",{"type":7,"value":8,"toc":2751},"minimark",[9,13,22,25,35,38,41,45,55,58,75,79,82,91,94,100,103,109,113,119,135,141,145,155,158,176,186,192,201,225,227,230,238,268,277,317,444,455,459,466,494,498,527,530,536,539,647,650,693,696,716,723,753,756,760,785,790,794,812,816,820,840,844,847,997,1000,1003,1006,1009,1015,1325,1339,1342,1345,1355,1364,1433,1436,1439,1442,1446,1449,1456,1459,1465,1468,1475,1481,1492,1495,2177,2181,2188,2191,2194,2198,2203,2309,2314,2397,2409,2416,2419,2425,2494,2500,2666,2671,2674,2732,2735,2738,2741,2744,2747],[10,11,12],"h2",{"id":12},"はじめに",[14,15,16,17,21],"p",{},"あなたのWebサイトは ",[18,19,20],"strong",{},"画像最適化"," について意識できていますか？",[14,23,24],{},"僕自身、曖昧な知識でできた気になっていたので、フロントエンド側でできる画像最適化を体系的にまとめてみようと本記事を書き始めました。",[26,27,28],"warning",{},[14,29,30,31,34],{},"本記事は ",[18,32,33],{},"フロントエンド視点の最適化","に焦点を当てています。サーバー側の圧縮や CDN 配信戦略などは扱いません。",[10,36,37],{"id":37},"画像最適化しないと起こること",[14,39,40],{},"最適化について理解するために、まずは最適化されていない場合に起こり得る問題を挙げて恐怖を植え付けていきたいと思います。",[42,43,44],"h3",{"id":44},"ページ表示スピードが遅くなる",[14,46,47,50,51,54],{},[18,48,49],{},"人生が有限である以上スピードは命","です。",[52,53],"br",{},"\nユーザーは日々コンテンツの摂取に忙しいです、0.1秒でも表示が遅ければ他のコンテンツを探し始めます。一度離脱したユーザーを呼び戻すのは難しいので機嫌を損ねないようにしなければなりません。",[42,56,57],{"id":57},"検索エンジンも機嫌を損ねる",[14,59,60,61,68,69,71,72,74],{},"Google が Core Web vitals という指標を発表し、フロントエンドエンジニア界で一般的になり久しいですが、その指標の一つである ",[18,62,63,67],{},[64,65,66],"code",{},"LCP"," (Largest Contentful Paint) の 約70% が画像が原因","となっています。",[52,70],{},"\nCore Web vitals がSEOに影響を与えることは Google が公言していることから検索エンジンも機嫌を損ねます。",[52,73],{},"\n検索エンジンが機嫌を損ねると検索順位が下がるのでユーザーがきてくれなくなります。",[76,77],"external-link-card-wrapper",{"url":78},"https://developers.google.com/search/docs/appearance/core-web-vitals?hl=ja",[42,80,81],{"id":81},"コストがかかる",[14,83,84,85,87,88,90],{},"最適化されていない画像はファイルサイズが大きくなりがちです。",[52,86],{},"\nCDN やホスティング、トラフィックに応じた従量課金制のインフラを利用している場合、転送量に比例してコストが膨らみます。",[52,89],{},"\nまた、ユーザー側にも無駄なデータ通信を強いることになるので双方にとってメリットがありません。",[92,93],"hr",{},[14,95,96,97,99],{},"また、現代の Web ページでは中央値でも15〜20枚、リッチなページでは数十枚以上 の画像が使われています。",[52,98],{},"\n最適化しないことにより、これらの問題が複数枚の画像で発生し、雪だるま式に悪化していきます。",[76,101],{"url":102},"https://almanac.httparchive.org/en/2021/media",[14,104,105,106,108],{},"ユーザーと検索エンジンに匙を投げられ、お金も尽き、誰にもみられないWebページを前に、ひとり画像の表示を待ちながら今際の際を迎えることになります。",[52,107],{},"\n恐ろしいですね。",[10,110,112],{"id":111},"画像を何に対して最適化するのか","画像を”何”に対して最適化するのか？",[14,114,115,118],{},[18,116,117],{},"ユーザーが使うデバイス","に対してです。",[120,121,122,126,129,132],"ul",{},[123,124,125],"li",{},"画面の大きさ",[123,127,128],{},"解像度",[123,130,131],{},"通信環境",[123,133,134],{},"処理性能",[14,136,137,138,140],{},"などユーザーの閲覧環境は千差万別です。",[52,139],{},"\nにもかかわらず、画像リソースをひとつしか用意していないのはユニバーサルでもアクセシブルでもサスティナブルでもないのです。",[10,142,144],{"id":143},"解像度ごとに最適な画像を表示する","“解像度”ごとに最適な画像を表示する",[14,146,147,150,151,154],{},[64,148,149],{},"DPR"," (",[64,152,153],{},"Device Pixel Ratio",") という概念があり、詳しくは以下の記事を読んでください。",[76,156],{"url":157},"https://developer.mozilla.org/ja/docs/Web/API/Window/devicePixelRatio",[14,159,160,161,164,165,168,169,171,150,173,175],{},"ピクセルには",[18,162,163],{},"物理ピクセル","と",[18,166,167],{},"CSSピクセル","の2つあります。",[52,170],{},[64,172,149],{},[64,174,153],{},") はCSSピクセルに対する物理ピクセルの比率です。",[14,177,178,179,182,183,185],{},"かつては",[64,180,181],{},"DPR = 1","のデバイスしかありませんでした。",[52,184],{},"\nなので、物理ピクセルとCSSピクセルは等価でした。",[14,187,188,189,191],{},"時代は流れディスプレイの画素が上がっていきます。すると、",[64,190,181],{},"（1 CSSピクセル = 1 物理ピクセル）の前提では対応しきれなくなりました。\n（CSSピクセルと物理ピクセルが等価だと高解像度画面で小さく見えてしまう）",[14,193,194,195,197,198,200],{},"物理ピクセルとCSSピクセルのズレを表す仕組みとして",[64,196,149],{},"(",[64,199,153],{},")が導入されたのです。",[120,202,203,214],{},[123,204,205,206],{},"物理ピクセル\n",[120,207,208,211],{},[123,209,210],{},"ディスプレイが実際に持っている最小のドット（ディスプレイの画素）",[123,212,213],{},"デバイスごとに差がある",[123,215,216,217],{},"CSS ピクセル\n",[120,218,219,222],{},[123,220,221],{},"ブラウザ上の論理単位（物理ピクセルと必ずしも一致しない）",[123,223,224],{},"デバイスごとに何個の物理ピクセルに割り当てるかが変わる",[92,226],{},[14,228,229],{},"CSSピクセルで 100px の幅の画像を表示させる場合、DPR = 2 (Retina相当)のデバイスでは 200 物理ピクセル を使って描画をしています。",[26,231,232],{},[14,233,234,235,237],{},"100px の画像しか用意していないと、DPR = 2 のデバイスでは 200物理px 表示領域があるのに対して 100px の画像を引き延ばして使うので画像がぼやけてしまいます。",[52,236],{},"\n逆もまた然りで、100 物理px の領域で 200px の画像ソースだと縮小表示されるため画質は保たれますが、余分に転送量とデコード負荷がかかります。",[239,240,247,254],"div",{"className":241},[242,243,244,245,246],"text-center","mx-auto","flex","flex-col","items-center",[248,249],"img",{"alt":250,"src":251,"height":252,"width":252,"style":253},"`64x64` の画像を `128x128` (DPR = 2 ならさら)に引き伸ばされてぼやけている僕","https://res.cloudinary.com/dyoyv8djx/image/upload/v1754885264/tsukiyama-blog/image-optimization/tsukiyama-64x64_jczd1i.png",128,"width: 128px",[14,255,260,263,264,267],{"className":256},[257,258,259],"mt-0","opacity-60","text-sm",[64,261,262],{},"64x64"," の画像を ",[64,265,266],{},"128x128"," (DPR = 2 ならさら)に引き伸ばされてぼやけている僕",[14,269,270,271,273,274,276],{},"この、",[64,272,149],{}," ごとに画像を用意します。",[52,275],{},"\n（どの画像を描画するかはブラウザが決定してくれます。）",[278,279,280,293],"table",{},[281,282,283],"thead",{},[284,285,286,290],"tr",{},[287,288,289],"th",{},"デバイス",[287,291,292],{},"用意する画像",[294,295,296,307],"tbody",{},[284,297,298,304],{},[299,300,301,303],"td",{},[64,302,149],{}," が 2 のデバイス",[299,305,306],{},"200 x 200 px",[284,308,309,314],{},[299,310,311,313],{},[64,312,149],{}," が 3 のデバイス",[299,315,316],{},"300 x 300 px",[318,319,324],"pre",{"className":320,"code":321,"language":322,"meta":323,"style":323},"language-html shiki shiki-themes material-theme-lighter github-dark-high-contrast github-dark","\u003Cimg\n  src=\"/img/avatar-100.png\"\n  srcset=\"\n    /img/avatar-100.png 1x, // DPR = 1 で使われる画像ソース\n    /img/avatar-200.png 2x, // DPR = 2 で使われる画像ソース\n    /img/avatar-300.png 3x  // DPR = 3 で使われる画像ソース\n  \"\n  width=\"100\"\n  height=\"100\"\n  alt=\"アバター\"\n>\n","html","",[64,325,326,339,360,370,376,382,388,394,409,423,438],{"__ignoreMap":323},[327,328,331,335],"span",{"class":329,"line":330},"line",1,[327,332,334],{"class":333},"seLpV","\u003C",[327,336,338],{"class":337},"siCa7","img\n",[327,340,342,346,349,353,357],{"class":329,"line":341},2,[327,343,345],{"class":344},"sOohs","  src",[327,347,348],{"class":333},"=",[327,350,352],{"class":351},"sPUPB","\"",[327,354,356],{"class":355},"sSIes","/img/avatar-100.png",[327,358,359],{"class":351},"\"\n",[327,361,363,366,368],{"class":329,"line":362},3,[327,364,365],{"class":344},"  srcset",[327,367,348],{"class":333},[327,369,359],{"class":351},[327,371,373],{"class":329,"line":372},4,[327,374,375],{"class":355},"    /img/avatar-100.png 1x, // DPR = 1 で使われる画像ソース\n",[327,377,379],{"class":329,"line":378},5,[327,380,381],{"class":355},"    /img/avatar-200.png 2x, // DPR = 2 で使われる画像ソース\n",[327,383,385],{"class":329,"line":384},6,[327,386,387],{"class":355},"    /img/avatar-300.png 3x  // DPR = 3 で使われる画像ソース\n",[327,389,391],{"class":329,"line":390},7,[327,392,393],{"class":351},"  \"\n",[327,395,397,400,402,404,407],{"class":329,"line":396},8,[327,398,399],{"class":344},"  width",[327,401,348],{"class":333},[327,403,352],{"class":351},[327,405,406],{"class":355},"100",[327,408,359],{"class":351},[327,410,412,415,417,419,421],{"class":329,"line":411},9,[327,413,414],{"class":344},"  height",[327,416,348],{"class":333},[327,418,352],{"class":351},[327,420,406],{"class":355},[327,422,359],{"class":351},[327,424,426,429,431,433,436],{"class":329,"line":425},10,[327,427,428],{"class":344},"  alt",[327,430,348],{"class":333},[327,432,352],{"class":351},[327,434,435],{"class":355},"アバター",[327,437,359],{"class":351},[327,439,441],{"class":329,"line":440},11,[327,442,443],{"class":333},">\n",[239,445,447,452],{"className":446},[242,244,245,246],[248,448],{"alt":449,"src":450,"height":252,"width":252,"srcSet":451,"style":253},"解像度ごとに最適な画像ソースが設定され、くっきりしている僕","https://res.cloudinary.com/dyoyv8djx/image/upload/v1754893394/tsukiyama-blog/image-optimization/tsukiyama-128x128_dxb19q.png","https://res.cloudinary.com/dyoyv8djx/image/upload/v1754893394/tsukiyama-blog/image-optimization/tsukiyama-128x128_dxb19q.png 1x, https://res.cloudinary.com/dyoyv8djx/image/upload/v1754893395/tsukiyama-blog/image-optimization/tsukiyama-256x256_omoir8.png 2x, https://res.cloudinary.com/dyoyv8djx/image/upload/v1754893398/tsukiyama-blog/image-optimization/tsukiyama-384x384_hgygfe.png 3x",[14,453,449],{"className":454},[257,258,259],[42,456,458],{"id":457},"q-どのdprまで考慮すれば良いの","Q. どのDPRまで考慮すれば良いの？",[14,460,461,462,465],{},"A. ",[64,463,464],{},"DPR = 1 ~ 3"," を用意すれば十分です。",[14,467,468,469,472,473,475,476,479,480,482,483,486,487,489,490,493],{},"最新の iPhone 16 の ",[64,470,471],{},"DPR = 3"," です。",[52,474],{},"\n現行のモバイル端末で ",[64,477,478],{},"DPR = 2"," 以下のものはありませんが、古いモニターではまだ ",[64,481,181],{}," のものも残っているので ",[64,484,485],{},"1 ~ 3"," の画像を配置するのが良さそう。",[52,488],{},"\n（Android の一部ハイエンド端末には ",[64,491,492],{},"DPR = 4"," のものもあります。）",[10,495,497],{"id":496},"画面幅ごとに最適な画像を表示する","\"画面幅\"ごとに最適な画像を表示する",[14,499,500,501,504,505,508,509,511,512,515,516,518,519,522,523,526],{},"DPR (",[64,502,503],{},"1x/2x/3x",") で画像を出し分ける方法は ",[18,506,507],{},"CSS 上の表示幅が固定のとき","には向いています。",[52,510],{},"\n一方、",[64,513,514],{},"width: 100%"," のように表示幅が画面幅に応じて変わる画像には向いていません。",[52,517],{},"\nこの場合は ",[64,520,521],{},"w","記述子 + ",[64,524,525],{},"sizes"," を使って最適化します。",[14,528,529],{},"この記事に画像を配置した時を例に解説していきます。",[14,531,532],{},[248,533],{"alt":534,"src":535},"OGP","https://res.cloudinary.com/dyoyv8djx/image/upload/v1744039369/tsukiyama-blog/tsukiyama.blog_uaoqwg.png",[14,537,538],{},"本ブログの記事レイアウトはざっくり以下のようになっています。",[318,540,542],{"className":320,"code":541,"language":322,"meta":323,"style":323},"\u003Cmain class=\"max-w-[1200px] p-4\">\n  \u003Csection class=\"grid gap-8 grid-cols-1 md:grid-cols-[1fr_300px]\">\n    \u003Cmain class=\"w-full max-w-[836px]\">\n      \u003Cimg> // 画像が表示される場所\n    \u003C/main>\n  \u003C/section>\n\u003C/main>\n",[64,543,544,565,586,606,620,629,638],{"__ignoreMap":323},[327,545,546,548,551,554,556,558,561,563],{"class":329,"line":330},[327,547,334],{"class":333},[327,549,550],{"class":337},"main",[327,552,553],{"class":344}," class",[327,555,348],{"class":333},[327,557,352],{"class":351},[327,559,560],{"class":355},"max-w-[1200px] p-4",[327,562,352],{"class":351},[327,564,443],{"class":333},[327,566,567,570,573,575,577,579,582,584],{"class":329,"line":341},[327,568,569],{"class":333},"  \u003C",[327,571,572],{"class":337},"section",[327,574,553],{"class":344},[327,576,348],{"class":333},[327,578,352],{"class":351},[327,580,581],{"class":355},"grid gap-8 grid-cols-1 md:grid-cols-[1fr_300px]",[327,583,352],{"class":351},[327,585,443],{"class":333},[327,587,588,591,593,595,597,599,602,604],{"class":329,"line":362},[327,589,590],{"class":333},"    \u003C",[327,592,550],{"class":337},[327,594,553],{"class":344},[327,596,348],{"class":333},[327,598,352],{"class":351},[327,600,601],{"class":355},"w-full max-w-[836px]",[327,603,352],{"class":351},[327,605,443],{"class":333},[327,607,608,611,613,616],{"class":329,"line":372},[327,609,610],{"class":333},"      \u003C",[327,612,248],{"class":337},[327,614,615],{"class":333},">",[327,617,619],{"class":618},"sdyPO"," // 画像が表示される場所\n",[327,621,622,625,627],{"class":329,"line":378},[327,623,624],{"class":333},"    \u003C/",[327,626,550],{"class":337},[327,628,443],{"class":333},[327,630,631,634,636],{"class":329,"line":384},[327,632,633],{"class":333},"  \u003C/",[327,635,572],{"class":337},[327,637,443],{"class":333},[327,639,640,643,645],{"class":329,"line":390},[327,641,642],{"class":333},"\u003C/",[327,644,550],{"class":337},[327,646,443],{"class":333},[14,648,649],{},"ブレークポイントごとに画像サイズをまとめると",[120,651,652,664,681],{},[123,653,654,657],{},[18,655,656],{},"768px 未満",[120,658,659],{},[123,660,661],{},[64,662,663],{},"100vw(画面全体) - 2rem(左右の余白)",[123,665,666,669],{},[18,667,668],{},"768px 以上 1200px 未満",[120,670,671],{},[123,672,673,676,677,680],{},[64,674,675],{},"100vw(画面全体) - 300px(右カラム分) - 2rem(左右の余白)"," または ",[64,678,679],{},"836px(max-width)"," の小さい方",[123,682,683,686],{},[18,684,685],{},"1200px 以上",[120,687,688],{},[123,689,690,692],{},[64,691,679],{}," 固定",[14,694,695],{},"この情報を sizes 属性に持たせます。",[318,697,699],{"className":320,"code":698,"language":322,"meta":323,"style":323},"sizes=\"(min-width: 1200px) 836px,\n       (min-width: 768px) min(836px, calc(100vw - 300px - 2rem)),\n       calc(100vw - 2rem)\"\n",[64,700,701,706,711],{"__ignoreMap":323},[327,702,703],{"class":329,"line":330},[327,704,705],{"class":618},"sizes=\"(min-width: 1200px) 836px,\n",[327,707,708],{"class":329,"line":341},[327,709,710],{"class":618},"       (min-width: 768px) min(836px, calc(100vw - 300px - 2rem)),\n",[327,712,713],{"class":329,"line":362},[327,714,715],{"class":618},"       calc(100vw - 2rem)\"\n",[14,717,718,719,722],{},"また、サイズごとにバリエーションを持たせた画像を ",[64,720,721],{},"srcset"," に配置します。",[318,724,726],{"className":320,"code":725,"language":322,"meta":323,"style":323},"srcset=\"/img/480w.png 480w,\n        /img/720w.png 720w,\n        /img/960w.png 960w,\n        /img/1280w.png 1280w,\n        /img/1600w.png 1600w\"\n",[64,727,728,733,738,743,748],{"__ignoreMap":323},[327,729,730],{"class":329,"line":330},[327,731,732],{"class":618},"srcset=\"/img/480w.png 480w,\n",[327,734,735],{"class":329,"line":341},[327,736,737],{"class":618},"        /img/720w.png 720w,\n",[327,739,740],{"class":329,"line":362},[327,741,742],{"class":618},"        /img/960w.png 960w,\n",[327,744,745],{"class":329,"line":372},[327,746,747],{"class":618},"        /img/1280w.png 1280w,\n",[327,749,750],{"class":329,"line":378},[327,751,752],{"class":618},"        /img/1600w.png 1600w\"\n",[14,754,755],{},"これらの情報をもとにブラウザは必要最小限の画像を1つだけダウンロードします。",[42,757,759],{"id":758},"例1-画面幅-390px-dpr-2","例1) 画面幅 390px / DPR = 2",[761,762,763,773,779],"ol",{},[123,764,765,766,769,770],{},"sizes = 768px 未満 = ",[64,767,768],{},"calc(390px - 2rem(32px))"," = ",[64,771,772],{},"358px",[123,774,775,776],{},"必要ピクセル数 = ",[64,777,778],{},"358(CSSピクセル) * 2(DPR) = 716px",[123,780,781,782],{},"候補から一番近い画像 = ",[64,783,784],{},"/img/720w.png",[14,786,787,789],{},[64,788,784],{}," の画像が選択されます。",[42,791,793],{"id":792},"例2-画面幅-1200px-dpr-2","例2) 画面幅 1200px / DPR = 2",[761,795,796,802,807],{},[123,797,798,799],{},"sizes = 1200px 以上 = ",[64,800,801],{},"836px",[123,803,775,804],{},[64,805,806],{},"836(CSSピクセル) * 2(DPR) = 1672px",[123,808,781,809],{},[64,810,811],{},"/img/1600w.png",[14,813,814,789],{},[64,815,811],{},[42,817,819],{"id":818},"例3-画面幅-1024px-dpr-1","例3) 画面幅 1024px / DPR = 1",[761,821,822,831,836],{},[123,823,824,825,769,828],{},"sizes = 768px 以上 1200px 未満 = ",[64,826,827],{},"min(836px, calc(1024px - 300px - 2rem(32px)))",[64,829,830],{},"692px",[123,832,775,833],{},[64,834,835],{},"692(CSSピクセル) × 1(DPR) = 692px",[123,837,781,838],{},[64,839,784],{},[14,841,842,789],{},[64,843,784],{},[42,845,846],{"id":846},"コードとプレビュー",[848,849,850,975],"tabs",{},[851,852,855],"tabs-item",{"icon":853,"label":854},"i-lucide-code","Code",[318,856,858],{"className":320,"code":857,"language":322,"meta":323,"style":323},"\u003Cimg\n  src=\"/img/960w.png\"\n  srcset=\"/img/480w.png 480w,\n        /img/720w.png 720w,\n        /img/960w.png 960w,\n        /img/1280w.png 1280w,\n        /img/1600w.png 1600w\"\n  sizes=\"(min-width: 1200px) 836px,\n         (min-width: 768px) min(836px, calc(100vw - 300px - 2rem)),\n         calc(100vw - 2rem)\"\n  width=\"720\"\n  height=\"405\"\n  alt=\"\"\n>\n",[64,859,860,866,879,890,894,898,902,909,921,926,933,946,960,970],{"__ignoreMap":323},[327,861,862,864],{"class":329,"line":330},[327,863,334],{"class":333},[327,865,338],{"class":337},[327,867,868,870,872,874,877],{"class":329,"line":341},[327,869,345],{"class":344},[327,871,348],{"class":333},[327,873,352],{"class":351},[327,875,876],{"class":355},"/img/960w.png",[327,878,359],{"class":351},[327,880,881,883,885,887],{"class":329,"line":362},[327,882,365],{"class":344},[327,884,348],{"class":333},[327,886,352],{"class":351},[327,888,889],{"class":355},"/img/480w.png 480w,\n",[327,891,892],{"class":329,"line":372},[327,893,737],{"class":355},[327,895,896],{"class":329,"line":378},[327,897,742],{"class":355},[327,899,900],{"class":329,"line":384},[327,901,747],{"class":355},[327,903,904,907],{"class":329,"line":390},[327,905,906],{"class":355},"        /img/1600w.png 1600w",[327,908,359],{"class":351},[327,910,911,914,916,918],{"class":329,"line":396},[327,912,913],{"class":344},"  sizes",[327,915,348],{"class":333},[327,917,352],{"class":351},[327,919,920],{"class":355},"(min-width: 1200px) 836px,\n",[327,922,923],{"class":329,"line":411},[327,924,925],{"class":355},"         (min-width: 768px) min(836px, calc(100vw - 300px - 2rem)),\n",[327,927,928,931],{"class":329,"line":425},[327,929,930],{"class":355},"         calc(100vw - 2rem)",[327,932,359],{"class":351},[327,934,935,937,939,941,944],{"class":329,"line":440},[327,936,399],{"class":344},[327,938,348],{"class":333},[327,940,352],{"class":351},[327,942,943],{"class":355},"720",[327,945,359],{"class":351},[327,947,949,951,953,955,958],{"class":329,"line":948},12,[327,950,414],{"class":344},[327,952,348],{"class":333},[327,954,352],{"class":351},[327,956,957],{"class":355},"405",[327,959,359],{"class":351},[327,961,963,965,967],{"class":329,"line":962},13,[327,964,428],{"class":344},[327,966,348],{"class":333},[327,968,969],{"class":351},"\"\"\n",[327,971,973],{"class":329,"line":972},14,[327,974,443],{"class":333},[851,976,979,989],{"icon":977,"label":978},"i-lucide-eye","Preview",[14,980,981,984,985,988],{},[64,982,983],{},"DevTools"," の ",[64,986,987],{},"Responsice"," で 画面幅を変えて確認してください",[248,990],{"alt":991,"src":992,"height":993,"width":994,"srcSet":995,"sizes":996},"参考画像","https://res.cloudinary.com/dyoyv8djx/image/upload/v1754897806/tsukiyama-blog/image-optimization/w960_blksmf.png",405,720,"https://res.cloudinary.com/dyoyv8djx/image/upload/v1754897805/tsukiyama-blog/image-optimization/w480_t88n2r.png 480w,\n          https://res.cloudinary.com/dyoyv8djx/image/upload/v1754897807/tsukiyama-blog/image-optimization/w720_vlgvo5.png 720w,\n          https://res.cloudinary.com/dyoyv8djx/image/upload/v1754897806/tsukiyama-blog/image-optimization/w960_blksmf.png 960w,\n          https://res.cloudinary.com/dyoyv8djx/image/upload/v1754897805/tsukiyama-blog/image-optimization/w1280_saydvq.png 1280w,\n          https://res.cloudinary.com/dyoyv8djx/image/upload/v1754897805/tsukiyama-blog/image-optimization/w1600_ar2ubh.png 1600w","(min-width: 1200px) 836px,\n         (min-width: 768px) min(836px, calc(100vw - 300px - 2rem)),\n         calc(100vw - 2rem)",[10,998,999],{"id":999},"次世代フォーマットの活用",[14,1001,1002],{},"詳しい説明は以下記事に譲ります。",[76,1004],{"url":1005},"https://zenn.dev/xx_suzuki/articles/sharp-verification",[76,1007],{"url":1008},"https://ics.media/entry/201001/",[14,1010,1011,1012,1014],{},"これらのフォーマットは一般的になりつつありますが、まだ対応していないブラウザも見受けられます。",[52,1013],{},"\n未対応ブラウザ用にフォールバック画像を設定するのが親切です。",[318,1016,1018],{"className":320,"code":1017,"language":322,"meta":323,"style":323},"\u003Cpicture>\n  \u003C!-- AVIF -->\n  \u003Csource\n    type=\"image/avif\"\n    srcset=\"/img/hero-480.avif 480w,\n            /img/hero-720.avif 720w,\n            /img/hero-960.avif 960w,\n            /img/hero-1280.avif 1280w,\n            /img/hero-1600.avif 1600w\"\n    sizes=\"(min-width: 768px) 720px, calc(100vw - 2rem)\"\n  >\n  \u003C!-- WebP -->\n  \u003Csource\n    type=\"image/webp\"\n    srcset=\"/img/hero-480.webp 480w,\n            /img/hero-720.webp 720w,\n            /img/hero-960.webp 960w,\n            /img/hero-1280.webp 1280w,\n            /img/hero-1600.webp 1600w\"\n    sizes=\"(min-width: 768px) 720px, calc(100vw - 2rem)\"\n  >\n  \u003C!-- フォールバック（PNG） -->\n  \u003Cimg\n    src=\"/img/hero-960.png\"\n    srcset=\"/img/hero-480.png 480w,\n            /img/hero-720.png 720w,\n            /img/hero-960.png 960w,\n            /img/hero-1280.png 1280w,\n            /img/hero-1600.png 1600w\"\n    sizes=\"(min-width: 768px) 720px, calc(100vw - 2rem)\"\n    width=\"720\"\n    height=\"405\"\n    alt=\"ヒーロー画像\"\n  >\n\u003C/picture>\n\n",[64,1019,1020,1029,1035,1042,1056,1068,1073,1078,1083,1090,1104,1109,1114,1120,1133,1145,1151,1157,1163,1171,1184,1189,1195,1202,1217,1229,1235,1241,1247,1255,1268,1282,1296,1311,1316],{"__ignoreMap":323},[327,1021,1022,1024,1027],{"class":329,"line":330},[327,1023,334],{"class":333},[327,1025,1026],{"class":337},"picture",[327,1028,443],{"class":333},[327,1030,1031],{"class":329,"line":341},[327,1032,1034],{"class":1033},"sZPSj","  \u003C!-- AVIF -->\n",[327,1036,1037,1039],{"class":329,"line":362},[327,1038,569],{"class":333},[327,1040,1041],{"class":337},"source\n",[327,1043,1044,1047,1049,1051,1054],{"class":329,"line":372},[327,1045,1046],{"class":344},"    type",[327,1048,348],{"class":333},[327,1050,352],{"class":351},[327,1052,1053],{"class":355},"image/avif",[327,1055,359],{"class":351},[327,1057,1058,1061,1063,1065],{"class":329,"line":378},[327,1059,1060],{"class":344},"    srcset",[327,1062,348],{"class":333},[327,1064,352],{"class":351},[327,1066,1067],{"class":355},"/img/hero-480.avif 480w,\n",[327,1069,1070],{"class":329,"line":384},[327,1071,1072],{"class":355},"            /img/hero-720.avif 720w,\n",[327,1074,1075],{"class":329,"line":390},[327,1076,1077],{"class":355},"            /img/hero-960.avif 960w,\n",[327,1079,1080],{"class":329,"line":396},[327,1081,1082],{"class":355},"            /img/hero-1280.avif 1280w,\n",[327,1084,1085,1088],{"class":329,"line":411},[327,1086,1087],{"class":355},"            /img/hero-1600.avif 1600w",[327,1089,359],{"class":351},[327,1091,1092,1095,1097,1099,1102],{"class":329,"line":425},[327,1093,1094],{"class":344},"    sizes",[327,1096,348],{"class":333},[327,1098,352],{"class":351},[327,1100,1101],{"class":355},"(min-width: 768px) 720px, calc(100vw - 2rem)",[327,1103,359],{"class":351},[327,1105,1106],{"class":329,"line":440},[327,1107,1108],{"class":333},"  >\n",[327,1110,1111],{"class":329,"line":948},[327,1112,1113],{"class":1033},"  \u003C!-- WebP -->\n",[327,1115,1116,1118],{"class":329,"line":962},[327,1117,569],{"class":333},[327,1119,1041],{"class":337},[327,1121,1122,1124,1126,1128,1131],{"class":329,"line":972},[327,1123,1046],{"class":344},[327,1125,348],{"class":333},[327,1127,352],{"class":351},[327,1129,1130],{"class":355},"image/webp",[327,1132,359],{"class":351},[327,1134,1136,1138,1140,1142],{"class":329,"line":1135},15,[327,1137,1060],{"class":344},[327,1139,348],{"class":333},[327,1141,352],{"class":351},[327,1143,1144],{"class":355},"/img/hero-480.webp 480w,\n",[327,1146,1148],{"class":329,"line":1147},16,[327,1149,1150],{"class":355},"            /img/hero-720.webp 720w,\n",[327,1152,1154],{"class":329,"line":1153},17,[327,1155,1156],{"class":355},"            /img/hero-960.webp 960w,\n",[327,1158,1160],{"class":329,"line":1159},18,[327,1161,1162],{"class":355},"            /img/hero-1280.webp 1280w,\n",[327,1164,1166,1169],{"class":329,"line":1165},19,[327,1167,1168],{"class":355},"            /img/hero-1600.webp 1600w",[327,1170,359],{"class":351},[327,1172,1174,1176,1178,1180,1182],{"class":329,"line":1173},20,[327,1175,1094],{"class":344},[327,1177,348],{"class":333},[327,1179,352],{"class":351},[327,1181,1101],{"class":355},[327,1183,359],{"class":351},[327,1185,1187],{"class":329,"line":1186},21,[327,1188,1108],{"class":333},[327,1190,1192],{"class":329,"line":1191},22,[327,1193,1194],{"class":1033},"  \u003C!-- フォールバック（PNG） -->\n",[327,1196,1198,1200],{"class":329,"line":1197},23,[327,1199,569],{"class":333},[327,1201,338],{"class":337},[327,1203,1205,1208,1210,1212,1215],{"class":329,"line":1204},24,[327,1206,1207],{"class":344},"    src",[327,1209,348],{"class":333},[327,1211,352],{"class":351},[327,1213,1214],{"class":355},"/img/hero-960.png",[327,1216,359],{"class":351},[327,1218,1220,1222,1224,1226],{"class":329,"line":1219},25,[327,1221,1060],{"class":344},[327,1223,348],{"class":333},[327,1225,352],{"class":351},[327,1227,1228],{"class":355},"/img/hero-480.png 480w,\n",[327,1230,1232],{"class":329,"line":1231},26,[327,1233,1234],{"class":355},"            /img/hero-720.png 720w,\n",[327,1236,1238],{"class":329,"line":1237},27,[327,1239,1240],{"class":355},"            /img/hero-960.png 960w,\n",[327,1242,1244],{"class":329,"line":1243},28,[327,1245,1246],{"class":355},"            /img/hero-1280.png 1280w,\n",[327,1248,1250,1253],{"class":329,"line":1249},29,[327,1251,1252],{"class":355},"            /img/hero-1600.png 1600w",[327,1254,359],{"class":351},[327,1256,1258,1260,1262,1264,1266],{"class":329,"line":1257},30,[327,1259,1094],{"class":344},[327,1261,348],{"class":333},[327,1263,352],{"class":351},[327,1265,1101],{"class":355},[327,1267,359],{"class":351},[327,1269,1271,1274,1276,1278,1280],{"class":329,"line":1270},31,[327,1272,1273],{"class":344},"    width",[327,1275,348],{"class":333},[327,1277,352],{"class":351},[327,1279,943],{"class":355},[327,1281,359],{"class":351},[327,1283,1285,1288,1290,1292,1294],{"class":329,"line":1284},32,[327,1286,1287],{"class":344},"    height",[327,1289,348],{"class":333},[327,1291,352],{"class":351},[327,1293,957],{"class":355},[327,1295,359],{"class":351},[327,1297,1299,1302,1304,1306,1309],{"class":329,"line":1298},33,[327,1300,1301],{"class":344},"    alt",[327,1303,348],{"class":333},[327,1305,352],{"class":351},[327,1307,1308],{"class":355},"ヒーロー画像",[327,1310,359],{"class":351},[327,1312,1314],{"class":329,"line":1313},34,[327,1315,1108],{"class":333},[327,1317,1319,1321,1323],{"class":329,"line":1318},35,[327,1320,642],{"class":333},[327,1322,1026],{"class":337},[327,1324,443],{"class":333},[14,1326,1327,1328,1331,1332,1335,1336,1338],{},"ブラウザは ",[64,1329,1330],{},"source"," に指定された ",[64,1333,1334],{},"type"," を確認し、対応しているフォーマットであればそのソースに HTTP リクエストを送ります。",[52,1337],{},"\n対応していない場合はリクエストを送らないため、不要な通信を防げます。",[76,1340],{"url":1341},"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture",[10,1343,1344],{"id":1344},"読み込みタイミングの最適化",[42,1346,1348,1351,1352],{"id":1347},"loadinglazy-decodingasync",[64,1349,1350],{},"loading=\"lazy\""," ＆ ",[64,1353,1354],{},"decoding=\"async\"",[14,1356,1357,1358,1360,1363],{},"初期描画する必要のない（ビューポート外の）画像は初期転送量を減らすために",[52,1359],{},[64,1361,1362],{},"loading=\"lazy\" decoding=\"async\"","が有効です。",[318,1365,1367],{"className":320,"code":1366,"language":322,"meta":323,"style":323},"\u003Cimg\n  src=\"/img/hoge.png\"\n  alt=\"初期描画されない画像\"\n  loading=\"lazy\"\n  decoding=\"async\"\n>\n",[64,1368,1369,1375,1388,1401,1415,1429],{"__ignoreMap":323},[327,1370,1371,1373],{"class":329,"line":330},[327,1372,334],{"class":333},[327,1374,338],{"class":337},[327,1376,1377,1379,1381,1383,1386],{"class":329,"line":341},[327,1378,345],{"class":344},[327,1380,348],{"class":333},[327,1382,352],{"class":351},[327,1384,1385],{"class":355},"/img/hoge.png",[327,1387,359],{"class":351},[327,1389,1390,1392,1394,1396,1399],{"class":329,"line":362},[327,1391,428],{"class":344},[327,1393,348],{"class":333},[327,1395,352],{"class":351},[327,1397,1398],{"class":355},"初期描画されない画像",[327,1400,359],{"class":351},[327,1402,1403,1406,1408,1410,1413],{"class":329,"line":372},[327,1404,1405],{"class":344},"  loading",[327,1407,348],{"class":333},[327,1409,352],{"class":351},[327,1411,1412],{"class":355},"lazy",[327,1414,359],{"class":351},[327,1416,1417,1420,1422,1424,1427],{"class":329,"line":378},[327,1418,1419],{"class":344},"  decoding",[327,1421,348],{"class":333},[327,1423,352],{"class":351},[327,1425,1426],{"class":355},"async",[327,1428,359],{"class":351},[327,1430,1431],{"class":329,"line":384},[327,1432,443],{"class":333},[14,1434,1435],{},"これにより、デコードと描画タイミングをスクロール直前まで後ろ倒しにできます。",[76,1437],{"url":1438},"https://developer.mozilla.org/ja/docs/Web/Performance/Guides/Lazy_loading",[76,1440],{"url":1441},"https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/decoding",[42,1443,1445],{"id":1444},"lcp画像を優先的に先読み","LCP画像を優先的に先読み",[14,1447,1448],{},"初期表示で一番大きく表示する画像(LCP候補)は、ネットワーク優先度を上げると描画が速くなります。",[120,1450,1451],{},[123,1452,1453],{},[64,1454,1455],{},"fetchpriority=\"high\"",[14,1457,1458],{},"ブラウザに画像取得をどのように優先させるべきかヒントを表します。",[14,1460,1461,1464],{},[64,1462,1463],{},"high"," を渡すと他の画像と比較して高い優先度で画像を取得します。",[76,1466],{"url":1467},"https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/fetchPriority",[120,1469,1470],{},[123,1471,1472],{},[64,1473,1474],{},"preload",[14,1476,1477,1478,1480],{},"ブラウザのレンダリング前に読み込みを始めることができます。",[52,1479],{},"\nこれにより、そのリソースが早く利用でき、レンダリングブロックされるのを防げます。",[14,1482,1483,1484,1487,1488,1491],{},"（",[64,1485,1486],{},"rel=\"preload\"","も",[64,1489,1490],{},"\u003Csource>","同様にMIMEタイプを含めることができます。）",[76,1493],{"url":1494},"https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Attributes/rel/preload",[318,1496,1498],{"className":320,"code":1497,"language":322,"meta":323,"style":323},"\u003Chead>\n  \u003C!-- AVIF -->\n  \u003Clink\n    rel=\"preload\"\n    as=\"image\"\n    href=\"/img/hero-1920w.avif\"\n    imagesrcset=\"/img/hero-720w.avif 720w,\n                 /img/hero-1280w.avif 1280w,\n                 /img/hero-1920w.avif 1920w\"\n    imagesizes=\"100vw\"\n    type=\"image/avif\"\n    fetchpriority=\"high\"\n  />\n  \u003C!-- WebP -->\n  \u003Clink\n    rel=\"preload\"\n    as=\"image\"\n    href=\"/img/hero-1920w.webp\"\n    imagesrcset=\"/img/hero-720w.webp 720w,\n                 /img/hero-1280w.webp 1280w,\n                 /img/hero-1920w.webp 1920w\"\n    imagesizes=\"100vw\"\n    type=\"image/webp\"\n    fetchpriority=\"high\"\n  />\n  \u003C!-- PNG（フォールバック） -->\n  \u003Clink\n    rel=\"preload\"\n    as=\"image\"\n    href=\"/img/hero-1920w.png\"\n    imagesrcset=\"/img/hero-720w.png 720w,\n                 /img/hero-1280w.png 1280w,\n                 /img/hero-1920w.png 1920w\"\n    imagesizes=\"100vw\"\n    type=\"image/png\"\n    fetchpriority=\"high\"\n  />\n\u003C/head>\n\n\u003Cbody>\n  \u003Cpicture>\n    \u003C!-- AVIF -->\n    \u003Csource\n      type=\"image/avif\"\n      srcset=\"/img/hero-720w.avif 720w,\n              /img/hero-1280w.avif 1280w,\n              /img/hero-1920w.avif 1920w\"\n      sizes=\"100vw\"\n    />\n    \u003C!-- WebP -->\n    \u003Csource\n      type=\"image/webp\"\n      srcset=\"/img/hero-720w.webp 720w,\n              /img/hero-1280w.webp 1280w,\n              /img/hero-1920w.webp 1920w\"\n      sizes=\"100vw\"\n    />\n    \u003C!-- PNG（フォールバック） -->\n    \u003Cimg\n      src=\"/img/hero-1920w.png\"\n      srcset=\"/img/hero-720w.png 720w,\n              /img/hero-1280w.png 1280w,\n              /img/hero-1920w.png 1920w\"\n      sizes=\"100vw\"\n      width=\"1920\"\n      height=\"1080\"\n      alt=\"メインビジュアル\"\n      fetchpriority=\"high\"\n    />\n  \u003C/picture>\n\u003C/body>\n\n",[64,1499,1500,1509,1513,1520,1533,1547,1561,1573,1578,1585,1599,1611,1624,1629,1633,1639,1651,1663,1676,1687,1692,1699,1711,1723,1735,1739,1744,1750,1762,1774,1787,1798,1803,1810,1822,1835,1848,1853,1862,1869,1879,1888,1894,1901,1915,1927,1933,1941,1955,1961,1967,1974,1987,1998,2004,2012,2025,2030,2036,2043,2057,2068,2074,2082,2095,2110,2125,2140,2154,2159,2168],{"__ignoreMap":323},[327,1501,1502,1504,1507],{"class":329,"line":330},[327,1503,334],{"class":333},[327,1505,1506],{"class":337},"head",[327,1508,443],{"class":333},[327,1510,1511],{"class":329,"line":341},[327,1512,1034],{"class":1033},[327,1514,1515,1517],{"class":329,"line":362},[327,1516,569],{"class":333},[327,1518,1519],{"class":337},"link\n",[327,1521,1522,1525,1527,1529,1531],{"class":329,"line":372},[327,1523,1524],{"class":344},"    rel",[327,1526,348],{"class":333},[327,1528,352],{"class":351},[327,1530,1474],{"class":355},[327,1532,359],{"class":351},[327,1534,1535,1538,1540,1542,1545],{"class":329,"line":378},[327,1536,1537],{"class":344},"    as",[327,1539,348],{"class":333},[327,1541,352],{"class":351},[327,1543,1544],{"class":355},"image",[327,1546,359],{"class":351},[327,1548,1549,1552,1554,1556,1559],{"class":329,"line":384},[327,1550,1551],{"class":344},"    href",[327,1553,348],{"class":333},[327,1555,352],{"class":351},[327,1557,1558],{"class":355},"/img/hero-1920w.avif",[327,1560,359],{"class":351},[327,1562,1563,1566,1568,1570],{"class":329,"line":390},[327,1564,1565],{"class":344},"    imagesrcset",[327,1567,348],{"class":333},[327,1569,352],{"class":351},[327,1571,1572],{"class":355},"/img/hero-720w.avif 720w,\n",[327,1574,1575],{"class":329,"line":396},[327,1576,1577],{"class":355},"                 /img/hero-1280w.avif 1280w,\n",[327,1579,1580,1583],{"class":329,"line":411},[327,1581,1582],{"class":355},"                 /img/hero-1920w.avif 1920w",[327,1584,359],{"class":351},[327,1586,1587,1590,1592,1594,1597],{"class":329,"line":425},[327,1588,1589],{"class":344},"    imagesizes",[327,1591,348],{"class":333},[327,1593,352],{"class":351},[327,1595,1596],{"class":355},"100vw",[327,1598,359],{"class":351},[327,1600,1601,1603,1605,1607,1609],{"class":329,"line":440},[327,1602,1046],{"class":344},[327,1604,348],{"class":333},[327,1606,352],{"class":351},[327,1608,1053],{"class":355},[327,1610,359],{"class":351},[327,1612,1613,1616,1618,1620,1622],{"class":329,"line":948},[327,1614,1615],{"class":344},"    fetchpriority",[327,1617,348],{"class":333},[327,1619,352],{"class":351},[327,1621,1463],{"class":355},[327,1623,359],{"class":351},[327,1625,1626],{"class":329,"line":962},[327,1627,1628],{"class":333},"  />\n",[327,1630,1631],{"class":329,"line":972},[327,1632,1113],{"class":1033},[327,1634,1635,1637],{"class":329,"line":1135},[327,1636,569],{"class":333},[327,1638,1519],{"class":337},[327,1640,1641,1643,1645,1647,1649],{"class":329,"line":1147},[327,1642,1524],{"class":344},[327,1644,348],{"class":333},[327,1646,352],{"class":351},[327,1648,1474],{"class":355},[327,1650,359],{"class":351},[327,1652,1653,1655,1657,1659,1661],{"class":329,"line":1153},[327,1654,1537],{"class":344},[327,1656,348],{"class":333},[327,1658,352],{"class":351},[327,1660,1544],{"class":355},[327,1662,359],{"class":351},[327,1664,1665,1667,1669,1671,1674],{"class":329,"line":1159},[327,1666,1551],{"class":344},[327,1668,348],{"class":333},[327,1670,352],{"class":351},[327,1672,1673],{"class":355},"/img/hero-1920w.webp",[327,1675,359],{"class":351},[327,1677,1678,1680,1682,1684],{"class":329,"line":1165},[327,1679,1565],{"class":344},[327,1681,348],{"class":333},[327,1683,352],{"class":351},[327,1685,1686],{"class":355},"/img/hero-720w.webp 720w,\n",[327,1688,1689],{"class":329,"line":1173},[327,1690,1691],{"class":355},"                 /img/hero-1280w.webp 1280w,\n",[327,1693,1694,1697],{"class":329,"line":1186},[327,1695,1696],{"class":355},"                 /img/hero-1920w.webp 1920w",[327,1698,359],{"class":351},[327,1700,1701,1703,1705,1707,1709],{"class":329,"line":1191},[327,1702,1589],{"class":344},[327,1704,348],{"class":333},[327,1706,352],{"class":351},[327,1708,1596],{"class":355},[327,1710,359],{"class":351},[327,1712,1713,1715,1717,1719,1721],{"class":329,"line":1197},[327,1714,1046],{"class":344},[327,1716,348],{"class":333},[327,1718,352],{"class":351},[327,1720,1130],{"class":355},[327,1722,359],{"class":351},[327,1724,1725,1727,1729,1731,1733],{"class":329,"line":1204},[327,1726,1615],{"class":344},[327,1728,348],{"class":333},[327,1730,352],{"class":351},[327,1732,1463],{"class":355},[327,1734,359],{"class":351},[327,1736,1737],{"class":329,"line":1219},[327,1738,1628],{"class":333},[327,1740,1741],{"class":329,"line":1231},[327,1742,1743],{"class":1033},"  \u003C!-- PNG（フォールバック） -->\n",[327,1745,1746,1748],{"class":329,"line":1237},[327,1747,569],{"class":333},[327,1749,1519],{"class":337},[327,1751,1752,1754,1756,1758,1760],{"class":329,"line":1243},[327,1753,1524],{"class":344},[327,1755,348],{"class":333},[327,1757,352],{"class":351},[327,1759,1474],{"class":355},[327,1761,359],{"class":351},[327,1763,1764,1766,1768,1770,1772],{"class":329,"line":1249},[327,1765,1537],{"class":344},[327,1767,348],{"class":333},[327,1769,352],{"class":351},[327,1771,1544],{"class":355},[327,1773,359],{"class":351},[327,1775,1776,1778,1780,1782,1785],{"class":329,"line":1257},[327,1777,1551],{"class":344},[327,1779,348],{"class":333},[327,1781,352],{"class":351},[327,1783,1784],{"class":355},"/img/hero-1920w.png",[327,1786,359],{"class":351},[327,1788,1789,1791,1793,1795],{"class":329,"line":1270},[327,1790,1565],{"class":344},[327,1792,348],{"class":333},[327,1794,352],{"class":351},[327,1796,1797],{"class":355},"/img/hero-720w.png 720w,\n",[327,1799,1800],{"class":329,"line":1284},[327,1801,1802],{"class":355},"                 /img/hero-1280w.png 1280w,\n",[327,1804,1805,1808],{"class":329,"line":1298},[327,1806,1807],{"class":355},"                 /img/hero-1920w.png 1920w",[327,1809,359],{"class":351},[327,1811,1812,1814,1816,1818,1820],{"class":329,"line":1313},[327,1813,1589],{"class":344},[327,1815,348],{"class":333},[327,1817,352],{"class":351},[327,1819,1596],{"class":355},[327,1821,359],{"class":351},[327,1823,1824,1826,1828,1830,1833],{"class":329,"line":1318},[327,1825,1046],{"class":344},[327,1827,348],{"class":333},[327,1829,352],{"class":351},[327,1831,1832],{"class":355},"image/png",[327,1834,359],{"class":351},[327,1836,1838,1840,1842,1844,1846],{"class":329,"line":1837},36,[327,1839,1615],{"class":344},[327,1841,348],{"class":333},[327,1843,352],{"class":351},[327,1845,1463],{"class":355},[327,1847,359],{"class":351},[327,1849,1851],{"class":329,"line":1850},37,[327,1852,1628],{"class":333},[327,1854,1856,1858,1860],{"class":329,"line":1855},38,[327,1857,642],{"class":333},[327,1859,1506],{"class":337},[327,1861,443],{"class":333},[327,1863,1865],{"class":329,"line":1864},39,[327,1866,1868],{"emptyLinePlaceholder":1867},true,"\n",[327,1870,1872,1874,1877],{"class":329,"line":1871},40,[327,1873,334],{"class":333},[327,1875,1876],{"class":337},"body",[327,1878,443],{"class":333},[327,1880,1882,1884,1886],{"class":329,"line":1881},41,[327,1883,569],{"class":333},[327,1885,1026],{"class":337},[327,1887,443],{"class":333},[327,1889,1891],{"class":329,"line":1890},42,[327,1892,1893],{"class":1033},"    \u003C!-- AVIF -->\n",[327,1895,1897,1899],{"class":329,"line":1896},43,[327,1898,590],{"class":333},[327,1900,1041],{"class":337},[327,1902,1904,1907,1909,1911,1913],{"class":329,"line":1903},44,[327,1905,1906],{"class":344},"      type",[327,1908,348],{"class":333},[327,1910,352],{"class":351},[327,1912,1053],{"class":355},[327,1914,359],{"class":351},[327,1916,1918,1921,1923,1925],{"class":329,"line":1917},45,[327,1919,1920],{"class":344},"      srcset",[327,1922,348],{"class":333},[327,1924,352],{"class":351},[327,1926,1572],{"class":355},[327,1928,1930],{"class":329,"line":1929},46,[327,1931,1932],{"class":355},"              /img/hero-1280w.avif 1280w,\n",[327,1934,1936,1939],{"class":329,"line":1935},47,[327,1937,1938],{"class":355},"              /img/hero-1920w.avif 1920w",[327,1940,359],{"class":351},[327,1942,1944,1947,1949,1951,1953],{"class":329,"line":1943},48,[327,1945,1946],{"class":344},"      sizes",[327,1948,348],{"class":333},[327,1950,352],{"class":351},[327,1952,1596],{"class":355},[327,1954,359],{"class":351},[327,1956,1958],{"class":329,"line":1957},49,[327,1959,1960],{"class":333},"    />\n",[327,1962,1964],{"class":329,"line":1963},50,[327,1965,1966],{"class":1033},"    \u003C!-- WebP -->\n",[327,1968,1970,1972],{"class":329,"line":1969},51,[327,1971,590],{"class":333},[327,1973,1041],{"class":337},[327,1975,1977,1979,1981,1983,1985],{"class":329,"line":1976},52,[327,1978,1906],{"class":344},[327,1980,348],{"class":333},[327,1982,352],{"class":351},[327,1984,1130],{"class":355},[327,1986,359],{"class":351},[327,1988,1990,1992,1994,1996],{"class":329,"line":1989},53,[327,1991,1920],{"class":344},[327,1993,348],{"class":333},[327,1995,352],{"class":351},[327,1997,1686],{"class":355},[327,1999,2001],{"class":329,"line":2000},54,[327,2002,2003],{"class":355},"              /img/hero-1280w.webp 1280w,\n",[327,2005,2007,2010],{"class":329,"line":2006},55,[327,2008,2009],{"class":355},"              /img/hero-1920w.webp 1920w",[327,2011,359],{"class":351},[327,2013,2015,2017,2019,2021,2023],{"class":329,"line":2014},56,[327,2016,1946],{"class":344},[327,2018,348],{"class":333},[327,2020,352],{"class":351},[327,2022,1596],{"class":355},[327,2024,359],{"class":351},[327,2026,2028],{"class":329,"line":2027},57,[327,2029,1960],{"class":333},[327,2031,2033],{"class":329,"line":2032},58,[327,2034,2035],{"class":1033},"    \u003C!-- PNG（フォールバック） -->\n",[327,2037,2039,2041],{"class":329,"line":2038},59,[327,2040,590],{"class":333},[327,2042,338],{"class":337},[327,2044,2046,2049,2051,2053,2055],{"class":329,"line":2045},60,[327,2047,2048],{"class":344},"      src",[327,2050,348],{"class":333},[327,2052,352],{"class":351},[327,2054,1784],{"class":355},[327,2056,359],{"class":351},[327,2058,2060,2062,2064,2066],{"class":329,"line":2059},61,[327,2061,1920],{"class":344},[327,2063,348],{"class":333},[327,2065,352],{"class":351},[327,2067,1797],{"class":355},[327,2069,2071],{"class":329,"line":2070},62,[327,2072,2073],{"class":355},"              /img/hero-1280w.png 1280w,\n",[327,2075,2077,2080],{"class":329,"line":2076},63,[327,2078,2079],{"class":355},"              /img/hero-1920w.png 1920w",[327,2081,359],{"class":351},[327,2083,2085,2087,2089,2091,2093],{"class":329,"line":2084},64,[327,2086,1946],{"class":344},[327,2088,348],{"class":333},[327,2090,352],{"class":351},[327,2092,1596],{"class":355},[327,2094,359],{"class":351},[327,2096,2098,2101,2103,2105,2108],{"class":329,"line":2097},65,[327,2099,2100],{"class":344},"      width",[327,2102,348],{"class":333},[327,2104,352],{"class":351},[327,2106,2107],{"class":355},"1920",[327,2109,359],{"class":351},[327,2111,2113,2116,2118,2120,2123],{"class":329,"line":2112},66,[327,2114,2115],{"class":344},"      height",[327,2117,348],{"class":333},[327,2119,352],{"class":351},[327,2121,2122],{"class":355},"1080",[327,2124,359],{"class":351},[327,2126,2128,2131,2133,2135,2138],{"class":329,"line":2127},67,[327,2129,2130],{"class":344},"      alt",[327,2132,348],{"class":333},[327,2134,352],{"class":351},[327,2136,2137],{"class":355},"メインビジュアル",[327,2139,359],{"class":351},[327,2141,2143,2146,2148,2150,2152],{"class":329,"line":2142},68,[327,2144,2145],{"class":344},"      fetchpriority",[327,2147,348],{"class":333},[327,2149,352],{"class":351},[327,2151,1463],{"class":355},[327,2153,359],{"class":351},[327,2155,2157],{"class":329,"line":2156},69,[327,2158,1960],{"class":333},[327,2160,2162,2164,2166],{"class":329,"line":2161},70,[327,2163,633],{"class":333},[327,2165,1026],{"class":337},[327,2167,443],{"class":333},[327,2169,2171,2173,2175],{"class":329,"line":2170},71,[327,2172,642],{"class":333},[327,2174,1876],{"class":337},[327,2176,443],{"class":333},[10,2178,2180],{"id":2179},"nuxt-ではどうする","Nuxt ではどうする？",[14,2182,2183,2184,2187],{},"Nuxt には画像最適化モジュールとして ",[64,2185,2186],{},"@nuxt/image"," があります。",[76,2189],{"url":2190},"https://image.nuxt.com/",[14,2192,2193],{},"画像最適化モジュールがどんなことをしてくれるかわかりやすいようにコードで比較してみます。",[42,2195,2197],{"id":2196},"html-と-nuxt-image-を比較する","HTML と Nuxt Image を比較する",[120,2199,2200],{},[123,2201,2202],{},"HTML",[318,2204,2205],{"className":320,"code":857,"language":322,"meta":323,"style":323},[64,2206,2207,2213,2225,2235,2239,2243,2247,2253,2263,2267,2273,2285,2297,2305],{"__ignoreMap":323},[327,2208,2209,2211],{"class":329,"line":330},[327,2210,334],{"class":333},[327,2212,338],{"class":337},[327,2214,2215,2217,2219,2221,2223],{"class":329,"line":341},[327,2216,345],{"class":344},[327,2218,348],{"class":333},[327,2220,352],{"class":351},[327,2222,876],{"class":355},[327,2224,359],{"class":351},[327,2226,2227,2229,2231,2233],{"class":329,"line":362},[327,2228,365],{"class":344},[327,2230,348],{"class":333},[327,2232,352],{"class":351},[327,2234,889],{"class":355},[327,2236,2237],{"class":329,"line":372},[327,2238,737],{"class":355},[327,2240,2241],{"class":329,"line":378},[327,2242,742],{"class":355},[327,2244,2245],{"class":329,"line":384},[327,2246,747],{"class":355},[327,2248,2249,2251],{"class":329,"line":390},[327,2250,906],{"class":355},[327,2252,359],{"class":351},[327,2254,2255,2257,2259,2261],{"class":329,"line":396},[327,2256,913],{"class":344},[327,2258,348],{"class":333},[327,2260,352],{"class":351},[327,2262,920],{"class":355},[327,2264,2265],{"class":329,"line":411},[327,2266,925],{"class":355},[327,2268,2269,2271],{"class":329,"line":425},[327,2270,930],{"class":355},[327,2272,359],{"class":351},[327,2274,2275,2277,2279,2281,2283],{"class":329,"line":440},[327,2276,399],{"class":344},[327,2278,348],{"class":333},[327,2280,352],{"class":351},[327,2282,943],{"class":355},[327,2284,359],{"class":351},[327,2286,2287,2289,2291,2293,2295],{"class":329,"line":948},[327,2288,414],{"class":344},[327,2290,348],{"class":333},[327,2292,352],{"class":351},[327,2294,957],{"class":355},[327,2296,359],{"class":351},[327,2298,2299,2301,2303],{"class":329,"line":962},[327,2300,428],{"class":344},[327,2302,348],{"class":333},[327,2304,969],{"class":351},[327,2306,2307],{"class":329,"line":972},[327,2308,443],{"class":333},[120,2310,2311],{},[123,2312,2313],{},"Nuxt Image",[318,2315,2319],{"className":2316,"code":2317,"language":2318,"meta":323,"style":323},"language-vue shiki shiki-themes material-theme-lighter github-dark-high-contrast github-dark","\u003CNuxtImg\n  src=\"/img/1600w.png\"\n  sizes=\"(min-width: 1200px) 836px,\n         (min-width: 768px) min(836px, calc(100vw - 300px - 2rem)),\n         calc(100vw - 2rem)\"\n  width=\"720\"\n  height=\"405\"\n  alt=\"\"\n/>\n","vue",[64,2320,2321,2328,2340,2350,2354,2360,2372,2384,2392],{"__ignoreMap":323},[327,2322,2323,2325],{"class":329,"line":330},[327,2324,334],{"class":333},[327,2326,2327],{"class":337},"NuxtImg\n",[327,2329,2330,2332,2334,2336,2338],{"class":329,"line":341},[327,2331,345],{"class":344},[327,2333,348],{"class":333},[327,2335,352],{"class":351},[327,2337,811],{"class":355},[327,2339,359],{"class":351},[327,2341,2342,2344,2346,2348],{"class":329,"line":362},[327,2343,913],{"class":344},[327,2345,348],{"class":333},[327,2347,352],{"class":351},[327,2349,920],{"class":355},[327,2351,2352],{"class":329,"line":372},[327,2353,925],{"class":355},[327,2355,2356,2358],{"class":329,"line":378},[327,2357,930],{"class":355},[327,2359,359],{"class":351},[327,2361,2362,2364,2366,2368,2370],{"class":329,"line":384},[327,2363,399],{"class":344},[327,2365,348],{"class":333},[327,2367,352],{"class":351},[327,2369,943],{"class":355},[327,2371,359],{"class":351},[327,2373,2374,2376,2378,2380,2382],{"class":329,"line":390},[327,2375,414],{"class":344},[327,2377,348],{"class":333},[327,2379,352],{"class":351},[327,2381,957],{"class":355},[327,2383,359],{"class":351},[327,2385,2386,2388,2390],{"class":329,"line":396},[327,2387,428],{"class":344},[327,2389,348],{"class":333},[327,2391,969],{"class":351},[327,2393,2394],{"class":329,"line":411},[327,2395,2396],{"class":618},"/>\n",[14,2398,2399,2400,2402,2403,2405,2406,2408],{},"高解像度の原本を渡して ",[64,2401,525],{}," を指定すると Nuxt Image が ",[64,2404,721],{}," を生成してくれます。",[52,2407],{},"\nこれにより、複数サイズの画像を手動で作成・配置する必要がなくなり記述もスッキリします。",[42,2410,2412,2415],{"id":2411},"nuxtpicture-を使って複数フォーマット配信",[64,2413,2414],{},"\u003CNuxtPicture>"," を使って複数フォーマット配信",[76,2417],{"url":2418},"https://image.nuxt.com/usage/nuxt-picture",[14,2420,2421,2422,2424],{},"また、",[64,2423,2414],{}," を使用すれば複数フォーマットの配信とフォールバックの指定もできます。",[318,2426,2428],{"className":2316,"code":2427,"language":2318,"meta":323,"style":323},"\u003CNuxtPicture\n  provider=\"cloudinary\"\n  :src=\"_src\" // Cloudinaryに置いてある画像パス\n  format=\"avif,webp\"\n/>\n",[64,2429,2430,2437,2451,2476,2490],{"__ignoreMap":323},[327,2431,2432,2434],{"class":329,"line":330},[327,2433,334],{"class":333},[327,2435,2436],{"class":337},"NuxtPicture\n",[327,2438,2439,2442,2444,2446,2449],{"class":329,"line":341},[327,2440,2441],{"class":344},"  provider",[327,2443,348],{"class":333},[327,2445,352],{"class":351},[327,2447,2448],{"class":355},"cloudinary",[327,2450,359],{"class":351},[327,2452,2453,2456,2459,2461,2464,2467,2469,2473],{"class":329,"line":362},[327,2454,2455],{"class":333},"  :",[327,2457,2458],{"class":344},"src",[327,2460,348],{"class":333},[327,2462,352],{"class":2463},"s5sbo",[327,2465,2466],{"class":618},"_src",[327,2468,352],{"class":2463},[327,2470,2472],{"class":2471},"sGgoF"," //",[327,2474,2475],{"class":344}," Cloudinaryに置いてある画像パス\n",[327,2477,2478,2481,2483,2485,2488],{"class":329,"line":372},[327,2479,2480],{"class":344},"  format",[327,2482,348],{"class":333},[327,2484,352],{"class":351},[327,2486,2487],{"class":355},"avif,webp",[327,2489,359],{"class":351},[327,2491,2492],{"class":329,"line":378},[327,2493,2396],{"class":618},[14,2495,2496,2497,2499],{},"生成されるDOM",[52,2498],{},"\n（画像パスは抽象化しています）",[318,2501,2503],{"className":320,"code":2502,"language":322,"meta":323,"style":323},"\u003Cpicture>\n  // avif\n  \u003Csource type=\"image/avif\" sizes=\"(max-width: 640px) 320px, (max-width: 768px) 640px, (max-width: 1024px) 768px, (max-width: 1280px) 1024px, (max-width: 1536px) 1280px, 1536px\" srcset=\"/img/320w.png 320w, /img/640w.png 640w, /img/768w.png 768w, /img/1024w.png 1024w, /img/1280w.png 1280w, /img/1536w.png 1536w, /img/2048w.png 2048w, /img/2560w.png 2560w, /img/3072w.png 3072w\">\n  // webp\n  \u003Csource type=\"image/webp\" sizes=\"(max-width: 640px) 320px, (max-width: 768px) 640px, (max-width: 1024px) 768px, (max-width: 1280px) 1024px, (max-width: 1536px) 1280px, 1536px\" ssrcset=\"/img/320w.png 320w, /img/640w.png 640w, /img/768w.png 768w, /img/1024w.png 1024w, /img/1280w.png 1280w, /img/1536w.png 1536w, /img/2048w.png 2048w, /img/2560w.png 2560w, /img/3072w.png 3072w\">\n  // img (fallback)\n  \u003Cimg data-nuxt-pic=\"\" src=\"https://res.cloudinary.com/dyoyv8djx/image/upload/f_png,q_auto,w_3072/v1745236671/tsukiyama-blog/image-optimization/w1600_ar2ubh.png\" sizes=\"(max-width: 640px) 320px, (max-width: 768px) 640px, (max-width: 1024px) 768px, (max-width: 1280px) 1024px, (max-width: 1536px) 1280px, 1536px\" srcset=\"/img/320w.png 320w, /img/640w.png 640w, /img/768w.png 768w, /img/1024w.png 1024w, /img/1280w.png 1280w, /img/1536w.png 1536w, /img/2048w.png 2048w, /img/2560w.png 2560w, /img/3072w.png 3072w\">\n\u003C/picture>\n",[64,2504,2505,2513,2518,2561,2566,2605,2610,2658],{"__ignoreMap":323},[327,2506,2507,2509,2511],{"class":329,"line":330},[327,2508,334],{"class":333},[327,2510,1026],{"class":337},[327,2512,443],{"class":333},[327,2514,2515],{"class":329,"line":341},[327,2516,2517],{"class":618},"  // avif\n",[327,2519,2520,2522,2524,2527,2529,2531,2533,2535,2538,2540,2542,2545,2547,2550,2552,2554,2557,2559],{"class":329,"line":362},[327,2521,569],{"class":333},[327,2523,1330],{"class":337},[327,2525,2526],{"class":344}," type",[327,2528,348],{"class":333},[327,2530,352],{"class":351},[327,2532,1053],{"class":355},[327,2534,352],{"class":351},[327,2536,2537],{"class":344}," sizes",[327,2539,348],{"class":333},[327,2541,352],{"class":351},[327,2543,2544],{"class":355},"(max-width: 640px) 320px, (max-width: 768px) 640px, (max-width: 1024px) 768px, (max-width: 1280px) 1024px, (max-width: 1536px) 1280px, 1536px",[327,2546,352],{"class":351},[327,2548,2549],{"class":344}," srcset",[327,2551,348],{"class":333},[327,2553,352],{"class":351},[327,2555,2556],{"class":355},"/img/320w.png 320w, /img/640w.png 640w, /img/768w.png 768w, /img/1024w.png 1024w, /img/1280w.png 1280w, /img/1536w.png 1536w, /img/2048w.png 2048w, /img/2560w.png 2560w, /img/3072w.png 3072w",[327,2558,352],{"class":351},[327,2560,443],{"class":333},[327,2562,2563],{"class":329,"line":372},[327,2564,2565],{"class":618},"  // webp\n",[327,2567,2568,2570,2572,2574,2576,2578,2580,2582,2584,2586,2588,2590,2592,2595,2597,2599,2601,2603],{"class":329,"line":378},[327,2569,569],{"class":333},[327,2571,1330],{"class":337},[327,2573,2526],{"class":344},[327,2575,348],{"class":333},[327,2577,352],{"class":351},[327,2579,1130],{"class":355},[327,2581,352],{"class":351},[327,2583,2537],{"class":344},[327,2585,348],{"class":333},[327,2587,352],{"class":351},[327,2589,2544],{"class":355},[327,2591,352],{"class":351},[327,2593,2594],{"class":344}," ssrcset",[327,2596,348],{"class":333},[327,2598,352],{"class":351},[327,2600,2556],{"class":355},[327,2602,352],{"class":351},[327,2604,443],{"class":333},[327,2606,2607],{"class":329,"line":384},[327,2608,2609],{"class":618},"  // img (fallback)\n",[327,2611,2612,2614,2616,2619,2621,2624,2627,2629,2631,2634,2636,2638,2640,2642,2644,2646,2648,2650,2652,2654,2656],{"class":329,"line":390},[327,2613,569],{"class":333},[327,2615,248],{"class":337},[327,2617,2618],{"class":344}," data-nuxt-pic",[327,2620,348],{"class":333},[327,2622,2623],{"class":351},"\"\"",[327,2625,2626],{"class":344}," src",[327,2628,348],{"class":333},[327,2630,352],{"class":351},[327,2632,2633],{"class":355},"https://res.cloudinary.com/dyoyv8djx/image/upload/f_png,q_auto,w_3072/v1745236671/tsukiyama-blog/image-optimization/w1600_ar2ubh.png",[327,2635,352],{"class":351},[327,2637,2537],{"class":344},[327,2639,348],{"class":333},[327,2641,352],{"class":351},[327,2643,2544],{"class":355},[327,2645,352],{"class":351},[327,2647,2549],{"class":344},[327,2649,348],{"class":333},[327,2651,352],{"class":351},[327,2653,2556],{"class":355},[327,2655,352],{"class":351},[327,2657,443],{"class":333},[327,2659,2660,2662,2664],{"class":329,"line":396},[327,2661,642],{"class":333},[327,2663,1026],{"class":337},[327,2665,443],{"class":333},[14,2667,2668,2670],{},[64,2669,2313],{}," を使うと特に気にせずに一つの画像ソースから複数のサイズ、フォーマットで配信できるのでとても便利です。",[10,2672,2673],{"id":2673},"まとめ",[120,2675,2676,2682,2688,2699,2705,2716,2723],{},[123,2677,2678,2679],{},"最適化の対象は",[18,2680,2681],{},"ユーザーのデバイス",[123,2683,2684,2685],{},"固定幅の画像は ",[18,2686,2687],{},"DPR ごとに画像サイズを変える",[123,2689,2690,2691],{},"可変幅の画像は ",[18,2692,2693,2695,2696,2698],{},[64,2694,521],{}," + ",[64,2697,525],{}," を活用し、画像サイズを変える",[123,2700,2701,2704],{},[18,2702,2703],{},"次世代フォーマット","を使いつつ、フォールバックで互換性を確保する",[123,2706,2707,2708],{},"LCP 画像は ",[18,2709,2710,2712,2713,2715],{},[64,2711,1455],{},",",[64,2714,1474],{}," で読み込みタイミングを制御",[123,2717,2718,2719],{},"重要ではない画像は ",[18,2720,2721],{},[64,2722,1350],{},[123,2724,2725,2726,2728,2729,2731],{},"Nuxt なら ",[64,2727,2186],{}," に任せると自動で ",[64,2730,721],{}," ,フォーマット変換してくれて便利",[14,2733,2734],{},"今回はフロントエンド側でできることを整理しました。\nサーバー側での最適化や CDN 配信戦略など、よりインフラ寄りの話はまた別の機会に書いてみたいと思います。",[10,2736,2737],{"id":2737},"参考文献",[76,2739],{"url":2740},"https://developer.mozilla.org/ja/docs/Web/HTML/Guides/Responsive_images",[76,2742],{"url":2743},"https://stackoverflow.blog/2022/12/27/picture-perfect-images-with-the-modern-element/",[76,2745],{"url":2746},"https://web.dev/articles/fetch-priority?hl=ja",[2748,2749,2750],"style",{},"html pre.shiki code .seLpV, html code.shiki .seLpV{--shiki-light:#39ADB5;--shiki-default:#F0F3F6;--shiki-dark:#E1E4E8}html pre.shiki code .siCa7, html code.shiki .siCa7{--shiki-light:#E53935;--shiki-default:#72F088;--shiki-dark:#85E89D}html pre.shiki code .sOohs, html code.shiki .sOohs{--shiki-light:#9C3EDA;--shiki-default:#91CBFF;--shiki-dark:#B392F0}html pre.shiki code .sPUPB, html code.shiki .sPUPB{--shiki-light:#39ADB5;--shiki-default:#ADDCFF;--shiki-dark:#9ECBFF}html pre.shiki code .sSIes, html code.shiki .sSIes{--shiki-light:#91B859;--shiki-default:#ADDCFF;--shiki-dark:#9ECBFF}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);}html pre.shiki code .sdyPO, html code.shiki .sdyPO{--shiki-light:#90A4AE;--shiki-default:#F0F3F6;--shiki-dark:#E1E4E8}html pre.shiki code .sZPSj, html code.shiki .sZPSj{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#BDC4CC;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .s5sbo, html code.shiki .s5sbo{--shiki-light:#39ADB5;--shiki-default:#F0F3F6;--shiki-dark:#9ECBFF}html pre.shiki code .sGgoF, html code.shiki .sGgoF{--shiki-light:#90A4AE;--shiki-light-font-style:inherit;--shiki-default:#FFB1AF;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":323,"searchDepth":362,"depth":362,"links":2752},[2753,2754,2759,2760,2763,2769,2770,2775,2780,2781],{"id":12,"depth":341,"text":12},{"id":37,"depth":341,"text":37,"children":2755},[2756,2757,2758],{"id":44,"depth":362,"text":44},{"id":57,"depth":362,"text":57},{"id":81,"depth":362,"text":81},{"id":111,"depth":341,"text":112},{"id":143,"depth":341,"text":144,"children":2761},[2762],{"id":457,"depth":362,"text":458},{"id":496,"depth":341,"text":497,"children":2764},[2765,2766,2767,2768],{"id":758,"depth":362,"text":759},{"id":792,"depth":362,"text":793},{"id":818,"depth":362,"text":819},{"id":846,"depth":362,"text":846},{"id":999,"depth":341,"text":999},{"id":1344,"depth":341,"text":1344,"children":2771},[2772,2774],{"id":1347,"depth":362,"text":2773},"loading=\"lazy\" ＆ decoding=\"async\"",{"id":1444,"depth":362,"text":1445},{"id":2179,"depth":341,"text":2180,"children":2776},[2777,2778],{"id":2196,"depth":362,"text":2197},{"id":2411,"depth":362,"text":2779},"\u003CNuxtPicture> を使って複数フォーマット配信",{"id":2673,"depth":341,"text":2673},{"id":2737,"depth":341,"text":2737},"2025-08-17T00:00:00.000Z","フロントエンドでできる画像最適化の基本から Nuxt での実装方法までまとめました。","md","/avatar_orange_t1b2ky.webp",{},"https://res.cloudinary.com/dyoyv8djx/image/upload/v1755351894/tsukiyama-blog/image-optimization/image-optimization_efkg8g.png","/tech/image-optimization",null,{"title":5,"description":2783},"tech/image-optimization",[2793,2794,2313],"HTML5","Core Web Vitals","4lYe-x-iM74rc812ujrmKoaiZ0PlEvGuzvKAaHCsaIo",{"title":2797,"image":323,"description":323},"\u003Cpicture>: The Picture element - HTML | MDNMDNMDNMozilla",{"title":2799,"image":2800,"description":2801},"Optimized Images for your Nuxt Apps","https://image.nuxt.com/social-card.png","Plug-and-play image optimization for Nuxt apps. Resize and transform your images using built-in optimizer or your favorite images CDN.",{"title":2803,"image":2804,"description":323},"Picture perfect images with the modern \u003Cimg> element - Stack Overflow","https://cdn.stackoverflow.co/images/jo7n4k8s/production/657012422149f5176ac4701b38b218782c358c3d-2400x1260.jpg?w=1200&h=630&auto=format",{"title":2414,"image":2806,"description":2807},"https://image.nuxt.com/_og/s/c_Docs,headline_Usage,title_~PE51eHRQaWN0dXJlPg,description_Discover+how+to+use+and+configure+the+Nuxt+Picture+component.,p_Ii91c2FnZS9udXh0LXBpY3R1cmUi.png","Discover how to use and configure the Nuxt Picture component.",{"title":2809,"image":323,"description":323},"rel=\"preload\" - HTML | MDNMDNMDNMozilla",{"title":2811,"image":323,"description":323},"遅延読み込み - パフォーマンス | MDNMDNMDNMozilla",{"title":2813,"image":323,"description":323},"HTMLImageElement: decoding プロパティ - Web API | MDNMDNMDNMozilla",{"title":2815,"image":323,"description":323},"HTMLImageElement: fetchPriority プロパティ - Web API | MDNMDNMDNMozilla",{"title":2817,"image":323,"description":323},"Window: devicePixelRatio プロパティ - Web API | MDNMDNMDNMozilla",{"title":2819,"image":323,"description":323},"HTML におけるレスポンシブ画像の使用 - HTML | MDNMDNMDNMozilla",{"title":2821,"image":2822,"description":2823},"Fetch Priority API を使用してリソースの読み込みを最適化する  |  Articles  |  web.dev","https://web.dev/static/articles/fetch-priority/image/thumbnail.jpg?hl=ja","Fetch Priority API は、ブラウザに対するリソースの相対的な優先度を示します。これにより、読み込みを最適化し、ウェブに関する主な指標を改善できます。",{"title":2825,"image":2826,"description":2827},"次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解 - ICS MEDIA","https://ics.media/entry/201001/images/eyecatch.png","WebP（ウェッピー）という画像形式をご存知でしょうか。長い間、webの静止画は大部分がJPEG/GIF/PNGのいずれかでした。WebPはこのすべてを置き換えることができる次世代のフォーマットです。",{"title":2829,"image":2830,"description":323},"Webサイトの画像フォーマットは積極的に「AVIF」を使おう","https://res.cloudinary.com/zenn/image/upload/s--ntvrQSMu--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:Web%25E3%2582%25B5%25E3%2582%25A4%25E3%2583%2588%25E3%2581%25AE%25E7%2594%25BB%25E5%2583%258F%25E3%2583%2595%25E3%2582%25A9%25E3%2583%25BC%25E3%2583%259E%25E3%2583%2583%25E3%2583%2588%25E3%2581%25AF%25E7%25A9%258D%25E6%25A5%25B5%25E7%259A%2584%25E3%2581%25AB%25E3%2580%258CAVIF%25E3%2580%258D%25E3%2582%2592%25E4%25BD%25BF%25E3%2581%258A%25E3%2581%2586%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:%25E3%2581%2599%25E3%2581%259A%25E3%2581%258D%25E3%2581%2595%25E3%2582%2593%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzBiZWM3OTgwYTguanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACAGSGT",{"title":2832,"image":2833,"description":2834},"Media | 2021 | The Web Almanac by HTTP Archive","https://almanac.httparchive.org/static/images/2019/media/hero_lg.jpg","Media chapter of the 2021 Web Almanac covering how images and videos are currently being encoded, embedded, styled, and delivered on the web.",{"title":2836,"image":2837,"description":2838},"Core Web Vitals と Google 検索の検索結果について | Google 検索セントラル  |  Documentation  |  Google for Developers","https://developers.google.com/static/search/images/home-social-share-lockup.jpg?hl=ja","Core Web Vitals は、実際のユーザー エクスペリエンスを測定する一連の指標です。Google 検索と Core Web Vitals の詳細をご確認ください。"]