Image v3.0 Size Issue

[encient]

Description

Thank you for updating to Image v3.0. I have updated my Image to v3.0. My images in the website seems to look weird when the width of the image is more than +-1300px (not sure, just a guess)

Steps done

I've updated my repo using this command:
npm install @hyas/images@latest

Actual result

The image above became blur with a weird size

The image above seems to be dragged longer, but I think the width is maintained and not changed, original image shown below:

Environment

> encient-blog-hyas@0.0.0 preinfo
> npm version

{
  'encient-blog-hyas': '0.0.0',
  npm: '10.3.0',
  node: '21.5.0',
  acorn: '8.11.2',
  ada: '2.7.4',
  ares: '1.20.1',
  base64: '0.5.1',
  brotli: '1.0.9',
  cjs_module_lexer: '1.2.2',
  cldr: '44.0',
  icu: '74.1',
  llhttp: '9.1.3',
  modules: '120',
  napi: '9',
  nghttp2: '1.58.0',
  nghttp3: '0.7.0',
  ngtcp2: '0.8.1',
  openssl: '3.0.12+quic',
  simdjson: '3.6.2',
  simdutf: '4.0.4',
  tz: '2023c',
  undici: '5.28.2',
  unicode: '15.1',
  uv: '1.47.0',
  uvwasi: '0.0.19',
  v8: '11.8.172.17-node.18',
  zlib: '1.3-22124f5'
}

> encient-blog-hyas@0.0.0 info
> npm list

encient-blog-hyas@0.0.0 D:\encient.github.io
+-- @hyas/doks-core@1.2.0
`-- @hyas/images@3.0.0


> encient-blog-hyas@0.0.0 postinfo
> exec-bin node_modules/.bin/hugo/hugo version

[h-enk]

Not sure what's with your setup.

• Did you run npm run clean:build?
• You could try updating Doks to v1.3
• Do you have a repo you could share?

It seems to work for me:

[encient]

Not sure what's with your setup.

• Did you run npm run clean:build?
• You could try updating Doks to v1.3
• Do you have a repo you could share?

It seems to work for me:

I've followed all the steps you mentioned above, and the images have become clearer. However, most of the images are still cropped. You could refer to images in "CTF 2023" CTF Writeup and "Build a Linux Profile" in Blog here for more information. Thank you!

[h-enk]

Update @hyas/images:

npm install @hyas/images@latest

Update parameters in ./config/_default/params.toml:

# Images (@hyas/images)
[hyas_images]
  [hyas_images.defaults]
    decoding = "async" # sync, async, or auto (default)
    fetchpriority = "auto" # high, low, or auto (default) 
    loading = "lazy" # eager or lazy (default)
    widths = [480, 576, 768, 1025, 1200, 1440] # [640, 768, 1024, 1366, 1600, 1920] for example
    sizes = "auto" # 100vw (default), 75vw, or auto for example
    process = "" # "fill 1600x900" or "fill 2100x900" for example
    lqip = "16x webp q20" # "16x webp q20" or "21x webp q20" for example

Add CSS — if not already present

And, boom:

[encient]

Update @hyas/images:

npm install @hyas/images@latest

Update parameters in ./config/_default/params.toml:

# Images (@hyas/images)
[hyas_images]
  [hyas_images.defaults]
    decoding = "async" # sync, async, or auto (default)
    fetchpriority = "auto" # high, low, or auto (default) 
    loading = "lazy" # eager or lazy (default)
    widths = [480, 576, 768, 1025, 1200, 1440] # [640, 768, 1024, 1366, 1600, 1920] for example
    sizes = "auto" # 100vw (default), 75vw, or auto for example
    process = "" # "fill 1600x900" or "fill 2100x900" for example
    lqip = "16x webp q20" # "16x webp q20" or "21x webp q20" for example

Add CSS — if not already present

And, boom:

Followed exactly what you've asked me to do, and now the images are having the original issue where it is dragged and blur again, refer here.

[h-enk]

You did not (add the CSS) — comment out this line: https://github.com/encient/encient.github.io/blob/main/config/_default/module.toml#L23

[encient]

You did not (add the CSS) — comment out this line: https://github.com/encient/encient.github.io/blob/main/config/_default/module.toml#L23

Finally..... It works!!!
Thank you very much for your help, appreciate your time helping, thanks!