unifiedjs.github.io icon indicating copy to clipboard operation
unifiedjs.github.io copied to clipboard

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

Open chidam333 opened this issue 10 months ago • 3 comments

Initial checklist

Affected package

I am a noob

Steps to reproduce

Hmm nothing much i know of

Actual behavior

Image

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 avatar Mar 18 '25 05:03 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 ?

chidam333 avatar Mar 18 '25 05:03 chidam333

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

ChristianMurphy avatar Mar 24 '25 22:03 ChristianMurphy

Sure will get to you shortly

chidam333 avatar Mar 25 '25 05:03 chidam333