| 350 | } |
| 351 | |
| 352 | function getWidths( |
| 353 | { deviceSizes, allSizes }: ImageConfig, |
| 354 | width: number | undefined, |
| 355 | layout: LayoutValue, |
| 356 | sizes: string | undefined |
| 357 | ): { widths: number[]; kind: 'w' | 'x' } { |
| 358 | if (sizes && (layout === 'fill' || layout === 'responsive')) { |
| 359 | // Find all the "vw" percent sizes used in the sizes prop |
| 360 | const viewportWidthRe = /(^|\s)(1?\d?\d)vw/g |
| 361 | const percentSizes = [] |
| 362 | for (let match; (match = viewportWidthRe.exec(sizes)); match) { |
| 363 | percentSizes.push(parseInt(match[2])) |
| 364 | } |
| 365 | if (percentSizes.length) { |
| 366 | const smallestRatio = Math.min(...percentSizes) * 0.01 |
| 367 | return { |
| 368 | widths: allSizes.filter((s) => s >= deviceSizes[0] * smallestRatio), |
| 369 | kind: 'w', |
| 370 | } |
| 371 | } |
| 372 | return { widths: allSizes, kind: 'w' } |
| 373 | } |
| 374 | if ( |
| 375 | typeof width !== 'number' || |
| 376 | layout === 'fill' || |
| 377 | layout === 'responsive' |
| 378 | ) { |
| 379 | return { widths: deviceSizes, kind: 'w' } |
| 380 | } |
| 381 | |
| 382 | const widths = [ |
| 383 | ...new Set( |
| 384 | // > This means that most OLED screens that say they are 3x resolution, |
| 385 | // > are actually 3x in the green color, but only 1.5x in the red and |
| 386 | // > blue colors. Showing a 3x resolution image in the app vs a 2x |
| 387 | // > resolution image will be visually the same, though the 3x image |
| 388 | // > takes significantly more data. Even true 3x resolution screens are |
| 389 | // > wasteful as the human eye cannot see that level of detail without |
| 390 | // > something like a magnifying glass. |
| 391 | // https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/capping-image-fidelity-on-ultra-high-resolution-devices.html |
| 392 | [width, width * 2 /*, width * 3*/].map( |
| 393 | (w) => allSizes.find((p) => p >= w) || allSizes[allSizes.length - 1] |
| 394 | ) |
| 395 | ), |
| 396 | ] |
| 397 | return { widths, kind: 'x' } |
| 398 | } |
| 399 | |
| 400 | type GenImgAttrsData = { |
| 401 | config: ImageConfig |