{
  "date": "2026-10-27",
  "method": {
    "ko": "직접 그린 3200×2133 그림(글자·가는 선·자잘한 질감)을 이미지 크기 조절과 같은 processImage로 가로 800·1200·1600·2400px, 화질 85의 WebP와 JPEG로 저장했습니다. 그다음 Edge에서 본문 폭(CSS 720px·360px)에 맞춘 img로 띄우고 화면 배율 1·2·3에서 실제 화소로 캡처했습니다. 글자 SSIM은 원본을 그 화소 수로 정밀하게(lanczos3) 줄인 이상적인 모습과 비교한 값입니다.",
    "en": "A synthetic 3200×2133 scene (text, thin lines, fine texture) was saved by the same processImage as Resize images at widths 800, 1200, 1600 and 2400px as WebP and JPEG quality 85. Each file was then shown in Edge in an img sized to a body column (720 or 360 CSS px) at device pixel ratio 1, 2 or 3 and captured in device pixels. Text SSIM compares that capture with the original reduced precisely (lanczos3) to the same pixel count.",
    "ja": "自作の3200×2133の画像（文字・細い線・細かい質感）を、リサイズと同じprocessImageで幅800・1200・1600・2400px、画質85のWebPとJPEGに保存しました。それをEdgeで本文の幅（CSS 720px・360px）に合わせたimgで表示し、画面の倍率1・2・3で実際の画素として撮影しています。文字のSSIMは、元画像を同じ画素数に精密に（lanczos3）縮小した理想の見え方との比較です。"
  },
  "table": {
    "ko": {
      "headers": [
        "가로 폭",
        "WebP / JPEG 용량",
        "1× 화면 · 본문 720px · 글자 SSIM",
        "2× 화면 · 본문 720px · 글자 SSIM",
        "3× 휴대폰 · 본문 360px · 글자 SSIM"
      ],
      "rows": [
        [
          "800px",
          "20.1 KB / 24.5 KB",
          "0.962",
          "0.916",
          "0.926"
        ],
        [
          "1200px",
          "61.0 KB / 64.6 KB",
          "0.984",
          "0.968",
          "0.977"
        ],
        [
          "1600px",
          "119.4 KB / 135.3 KB",
          "0.985",
          "0.989",
          "0.988"
        ],
        [
          "2400px",
          "284.2 KB / 273.2 KB",
          "0.987",
          "0.994",
          "0.989"
        ]
      ]
    },
    "en": {
      "headers": [
        "Width",
        "WebP / JPEG size",
        "1× screen · 720px column · text SSIM",
        "2× screen · 720px column · text SSIM",
        "3× phone · 360px column · text SSIM"
      ],
      "rows": [
        [
          "800px",
          "20.1 KB / 24.5 KB",
          "0.962",
          "0.916",
          "0.926"
        ],
        [
          "1200px",
          "61.0 KB / 64.6 KB",
          "0.984",
          "0.968",
          "0.977"
        ],
        [
          "1600px",
          "119.4 KB / 135.3 KB",
          "0.985",
          "0.989",
          "0.988"
        ],
        [
          "2400px",
          "284.2 KB / 273.2 KB",
          "0.987",
          "0.994",
          "0.989"
        ]
      ]
    },
    "ja": {
      "headers": [
        "幅",
        "WebP / JPEG 容量",
        "1×画面 · 本文720px · 文字SSIM",
        "2×画面 · 本文720px · 文字SSIM",
        "3×スマホ · 本文360px · 文字SSIM"
      ],
      "rows": [
        [
          "800px",
          "20.1 KB / 24.5 KB",
          "0.962",
          "0.916",
          "0.926"
        ],
        [
          "1200px",
          "61.0 KB / 64.6 KB",
          "0.984",
          "0.968",
          "0.977"
        ],
        [
          "1600px",
          "119.4 KB / 135.3 KB",
          "0.985",
          "0.989",
          "0.988"
        ],
        [
          "2400px",
          "284.2 KB / 273.2 KB",
          "0.987",
          "0.994",
          "0.989"
        ]
      ]
    }
  },
  "raw": {
    "blog": {
      "source": [
        3200,
        2133
      ],
      "boxes": {
        "text": {
          "x": 1840,
          "y": 1080,
          "w": 1100,
          "h": 400
        },
        "texture": {
          "x": 0,
          "y": 1300,
          "w": 1600,
          "h": 833
        },
        "lines": {
          "x": 1830,
          "y": 740,
          "w": 1020,
          "h": 280
        },
        "edge": {
          "x": 2600,
          "y1": 1500,
          "y2": 1680
        }
      },
      "rows": [
        {
          "width": 800,
          "format": "webp",
          "output": [
            800,
            533
          ],
          "bytes": 20540,
          "ms": 261.69999998807907
        },
        {
          "width": 800,
          "format": "jpeg",
          "output": [
            800,
            533
          ],
          "bytes": 25088,
          "ms": 236.30000001192093
        },
        {
          "width": 1200,
          "format": "webp",
          "output": [
            1200,
            800
          ],
          "bytes": 62478,
          "ms": 337.80000001192093
        },
        {
          "width": 1200,
          "format": "jpeg",
          "output": [
            1200,
            800
          ],
          "bytes": 66142,
          "ms": 275.69999998807907
        },
        {
          "width": 1600,
          "format": "webp",
          "output": [
            1600,
            1067
          ],
          "bytes": 122298,
          "ms": 427.10000002384186
        },
        {
          "width": 1600,
          "format": "jpeg",
          "output": [
            1600,
            1067
          ],
          "bytes": 138505,
          "ms": 338.89999997615814
        },
        {
          "width": 2400,
          "format": "webp",
          "output": [
            2400,
            1600
          ],
          "bytes": 290990,
          "ms": 731.3999999761581
        },
        {
          "width": 2400,
          "format": "jpeg",
          "output": [
            2400,
            1600
          ],
          "bytes": 279764,
          "ms": 559
        },
        {
          "width": 3200,
          "format": "webp",
          "output": [
            3200,
            2133
          ],
          "bytes": 515708
        }
      ],
      "display": [
        {
          "referenceEdgeWidth": 0.8000000000000007,
          "idealEdgeWidth": 0.9043212317326095,
          "screen": "desktop",
          "cssWidth": 720,
          "dpr": 1,
          "devicePixels": 720,
          "imageWidth": 800,
          "heights": [
            480,
            480
          ],
          "ssim": 0.9556739990323673,
          "textSsim": 0.9824717473545176,
          "linesSsim": 0.976303848212541,
          "textureSsim": 0.7960105319367669,
          "edgeWidth": 0.818704544976514,
          "textSsimIdeal": 0.9615311141406344
        },
        {
          "referenceEdgeWidth": 0.8000000000000007,
          "idealEdgeWidth": 0.9043212317326095,
          "screen": "desktop",
          "cssWidth": 720,
          "dpr": 1,
          "devicePixels": 720,
          "imageWidth": 1200,
          "heights": [
            480,
            480
          ],
          "ssim": 0.9584835249516429,
          "textSsim": 0.9900418188828697,
          "linesSsim": 0.9641908637183506,
          "textureSsim": 0.8112875723082104,
          "edgeWidth": 0.9470087234876585,
          "textSsimIdeal": 0.9837459591361357
        },
        {
          "referenceEdgeWidth": 0.8000000000000007,
          "idealEdgeWidth": 0.9043212317326095,
          "screen": "desktop",
          "cssWidth": 720,
          "dpr": 1,
          "devicePixels": 720,
          "imageWidth": 1600,
          "heights": [
            480,
            481
          ],
          "ssim": 0.9815415621605323,
          "textSsim": 0.9975964944292616,
          "linesSsim": 0.9998784074423592,
          "textureSsim": 0.9197578485006447,
          "edgeWidth": 0.8008815347102063,
          "textSsimIdeal": 0.9853498305844487
        },
        {
          "referenceEdgeWidth": 0.8000000000000007,
          "idealEdgeWidth": 0.9043212317326095,
          "screen": "desktop",
          "cssWidth": 720,
          "dpr": 1,
          "devicePixels": 720,
          "imageWidth": 2400,
          "heights": [
            480,
            480
          ],
          "ssim": 0.9673098086440064,
          "textSsim": 0.9927207521554745,
          "linesSsim": 0.9506279043708391,
          "textureSsim": 0.8600707536643264,
          "edgeWidth": 0.9434070746717342,
          "textSsimIdeal": 0.9873470547402394
        },
        {
          "referenceEdgeWidth": 0.8000000000000007,
          "idealEdgeWidth": 0.9043212317326095,
          "screen": "desktop",
          "cssWidth": 720,
          "dpr": 1,
          "devicePixels": 720,
          "imageWidth": 3200,
          "heights": [
            480,
            480
          ],
          "ssim": 0.995720464325587,
          "textSsim": 0.9999311885652894,
          "linesSsim": 0.9999061844881333,
          "textureSsim": 0.9950079219674692,
          "edgeWidth": 0.8000000000000007,
          "textSsimIdeal": 0.987655011438477
        },
        {
          "referenceEdgeWidth": 0.8000000000000007,
          "idealEdgeWidth": 0.9043212317326095,
          "screen": "retina",
          "cssWidth": 720,
          "dpr": 2,
          "devicePixels": 1440,
          "imageWidth": 800,
          "heights": [
            960,
            960
          ],
          "ssim": 0.8836073004463468,
          "textSsim": 0.9387773236825342,
          "linesSsim": 0.843663808538225,
          "textureSsim": 0.47547416383086466,
          "edgeWidth": 2.1758407967600295,
          "textSsimIdeal": 0.9156925326969844
        },
        {
          "referenceEdgeWidth": 0.8000000000000007,
          "idealEdgeWidth": 0.9043212317326095,
          "screen": "retina",
          "cssWidth": 720,
          "dpr": 2,
          "devicePixels": 1440,
          "imageWidth": 1200,
          "heights": [
            960,
            960
          ],
          "ssim": 0.9272521313775505,
          "textSsim": 0.9817360548528268,
          "linesSsim": 0.9359054187676284,
          "textureSsim": 0.661249949833764,
          "edgeWidth": 0.9573356745914037,
          "textSsimIdeal": 0.9675942042406157
        },
        {
          "referenceEdgeWidth": 0.8000000000000007,
          "idealEdgeWidth": 0.9043212317326095,
          "screen": "retina",
          "cssWidth": 720,
          "dpr": 2,
          "devicePixels": 1440,
          "imageWidth": 1600,
          "heights": [
            960,
            962
          ],
          "ssim": 0.9654529700771326,
          "textSsim": 0.9942217470846194,
          "linesSsim": 0.9952360147248139,
          "textureSsim": 0.8397798617942624,
          "edgeWidth": 0.8008374892893304,
          "textSsimIdeal": 0.9890511192381933
        },
        {
          "referenceEdgeWidth": 0.8000000000000007,
          "idealEdgeWidth": 0.9043212317326095,
          "screen": "retina",
          "cssWidth": 720,
          "dpr": 2,
          "devicePixels": 1440,
          "imageWidth": 2400,
          "heights": [
            960,
            960
          ],
          "ssim": 0.9768389566899013,
          "textSsim": 0.9968078312184281,
          "linesSsim": 0.9943849406047232,
          "textureSsim": 0.8995777818356564,
          "edgeWidth": 0.8337745187629357,
          "textSsimIdeal": 0.9937207722389004
        },
        {
          "referenceEdgeWidth": 0.8000000000000007,
          "idealEdgeWidth": 0.9043212317326095,
          "screen": "retina",
          "cssWidth": 720,
          "dpr": 2,
          "devicePixels": 1440,
          "imageWidth": 3200,
          "heights": [
            960,
            960
          ],
          "ssim": 0.9955327221010406,
          "textSsim": 0.9998181891912238,
          "linesSsim": 0.9999361341295155,
          "textureSsim": 0.993076717712527,
          "edgeWidth": 0.8000000000000007,
          "textSsimIdeal": 0.9927115111972495
        },
        {
          "referenceEdgeWidth": 1.5999993541504232,
          "idealEdgeWidth": 1.408156520513713,
          "screen": "phone",
          "cssWidth": 360,
          "dpr": 3,
          "devicePixels": 1080,
          "imageWidth": 800,
          "heights": [
            720,
            720
          ],
          "ssim": 0.9108189365802011,
          "textSsim": 0.9515249445009866,
          "linesSsim": 0.8726160710071031,
          "textureSsim": 0.5997676856384071,
          "edgeWidth": 1.6311957814571993,
          "textSsimIdeal": 0.9263923454437706
        },
        {
          "referenceEdgeWidth": 1.5999993541504232,
          "idealEdgeWidth": 1.408156520513713,
          "screen": "phone",
          "cssWidth": 360,
          "dpr": 3,
          "devicePixels": 1080,
          "imageWidth": 1200,
          "heights": [
            720,
            720
          ],
          "ssim": 0.9452886210243616,
          "textSsim": 0.9873624455889913,
          "linesSsim": 0.9613180102477235,
          "textureSsim": 0.7454654155857829,
          "edgeWidth": 1.5989102707000766,
          "textSsimIdeal": 0.9767583404034079
        },
        {
          "referenceEdgeWidth": 1.5999993541504232,
          "idealEdgeWidth": 1.408156520513713,
          "screen": "phone",
          "cssWidth": 360,
          "dpr": 3,
          "devicePixels": 1080,
          "imageWidth": 1600,
          "heights": [
            720,
            723
          ],
          "ssim": 0.966543026738421,
          "textSsim": 0.992059669482286,
          "linesSsim": 0.9991436868608805,
          "textureSsim": 0.8469796538544008,
          "edgeWidth": 1.6000926343100783,
          "textSsimIdeal": 0.9881910295779532
        },
        {
          "referenceEdgeWidth": 1.5999993541504232,
          "idealEdgeWidth": 1.408156520513713,
          "screen": "phone",
          "cssWidth": 360,
          "dpr": 3,
          "devicePixels": 1080,
          "imageWidth": 2400,
          "heights": [
            720,
            720
          ],
          "ssim": 0.9708570531917886,
          "textSsim": 0.9947662614507362,
          "linesSsim": 0.9883455764566611,
          "textureSsim": 0.8702294292972743,
          "edgeWidth": 1.594648932650463,
          "textSsimIdeal": 0.9894656460548789
        },
        {
          "referenceEdgeWidth": 1.5999993541504232,
          "idealEdgeWidth": 1.408156520513713,
          "screen": "phone",
          "cssWidth": 360,
          "dpr": 3,
          "devicePixels": 1080,
          "imageWidth": 3200,
          "heights": [
            720,
            720
          ],
          "ssim": 0.9957635758574571,
          "textSsim": 0.9998708511312003,
          "linesSsim": 0.9999310308404357,
          "textureSsim": 0.9940212619802322,
          "edgeWidth": 1.599995103804762,
          "textSsimIdeal": 0.9905967782406435
        }
      ]
    },
    "derived": {
      "tenImagesMB": {
        "1600": 1.1663246154785156,
        "2400": 2.775096893310547,
        "3200": 4.918174743652344
      },
      "retinaTextSsimGap1600vs2400": 0.004669653000707097,
      "smallTextFontPx": 28
    }
  },
  "figures": [
    {
      "file": {
        "ko": "batch2-blog-image-width-comparison-ko.webp",
        "en": "batch2-blog-image-width-comparison-en.webp",
        "ja": "batch2-blog-image-width-comparison-ja.webp"
      },
      "width": 1200,
      "height": {
        "ko": 771,
        "en": 771,
        "ja": 771
      },
      "alt": {
        "ko": "2× 화면에서 실제로 캡처한 같은 자리입니다. 800px은 작은 글자가 뭉개지고, 1600px부터는 2400px과 거의 같습니다.",
        "en": "The same spot captured on a 2× screen. At 800px the small text smears; from 1600px it looks almost the same as 2400px.",
        "ja": "2×画面で実際に撮影した同じ位置です。800pxは小さな文字がつぶれ、1600pxからは2400pxとほぼ同じです。"
      },
      "caption": {
        "ko": "2× 화면에서 실제로 캡처한 같은 자리입니다. 800px은 작은 글자가 뭉개지고, 1600px부터는 2400px과 거의 같습니다.",
        "en": "The same spot captured on a 2× screen. At 800px the small text smears; from 1600px it looks almost the same as 2400px.",
        "ja": "2×画面で実際に撮影した同じ位置です。800pxは小さな文字がつぶれ、1600pxからは2400pxとほぼ同じです。"
      }
    },
    {
      "file": {
        "ko": "batch2-blog-image-width-steps-ko.webp",
        "en": "batch2-blog-image-width-steps-en.webp",
        "ja": "batch2-blog-image-width-steps-ja.webp"
      },
      "width": 1200,
      "height": {
        "ko": 1800,
        "en": 1800,
        "ja": 1800
      },
      "alt": {
        "ko": "이미지 크기 조절: 가로·세로에서 가로 1200을 넣은 상태(위)와, 최대 크기 1600px로 맞춘 상태(아래)입니다.",
        "en": "Resize images: width 1200 under Width & height (top), then Maximum size 1600px (bottom).",
        "ja": "リサイズ：幅・高さで幅1200を入れた状態（上）と、最大サイズ1600pxにした状態（下）です。"
      },
      "caption": {
        "ko": "이미지 크기 조절: 가로·세로에서 가로 1200을 넣은 상태(위)와, 최대 크기 1600px로 맞춘 상태(아래)입니다.",
        "en": "Resize images: width 1200 under Width & height (top), then Maximum size 1600px (bottom).",
        "ja": "リサイズ：幅・高さで幅1200を入れた状態（上）と、最大サイズ1600pxにした状態（下）です。"
      }
    }
  ]
}