there is a bug in highly optimized images for the size of 200
Initial checklist
- [x] I read the support docs
- [x] I read the contributing guide
- [x] I agree to follow the code of conduct
- [x] 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
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 ?
It may be. Try changing the code, building the site, and see if it fixes it!
Sure will get to you shortly