there is a bug in highly optimized images for the size of 200

[chidam333]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and discussions and couldn’t find anything (or linked relevant results below)

Affected package

I am a noob

Steps to reproduce

Hmm nothing much i know of

Actual behavior

while i am loading the page the link below is the where it is fetching the image from
unifiedjs.com/image/prettier-dark.png,/image/prettier-dark-200.pngIt is obviously wrong

Expected behavior

it should fetch from the below instead
unifiedjs.com/image/prettier-dark-200.png

I would also expect it to load same assets for similar internet speeds. In vivaldi it fetches size 200 but in chrome and edge it fetches 600.

Runtime

Browser

Package manager

NA

Operating system

Windows 11

Build and bundle tools

No response

[chidam333]

if given some direction i can fix it ?

async function transformPng(file) {
  // Note: see `rehype-pictures` for the inverse.
  const sizes = [200, 600, 1200, 2000]
  const options = {
    png: {compressionLevel: 9, quality: 50},
    webp: {alphaQuality: 50, quality: 50}
  }
  const formats = /** @type {Array<keyof typeof options>} */ (
    Object.keys(options)
  )

  await read(file)
  const sharpPipeline = sharp(file.value)
  const metadata = await sharpPipeline.metadata()
  assert(metadata.width)

  const files = [file]

  for (const size of sizes) {
    if (size > metadata.width) continue

    for (const format of formats) {
      const buf = await sharpPipeline
        .clone()
        .resize(size)
        [format](options[format])
        .toBuffer()

      const copy = new VFile({path: file.path, value: buf})

      copy.stem += '-' + size
      copy.extname = '.' + format
      files.push(copy)
    }
  }

  return files
}

Is this the code i should focus on ?

[ChristianMurphy]

It may be.
Try changing the code, building the site, and see if it fixes it!

[chidam333]

Sure will get to you shortly