Images that were inserted via markdown are not lazyloaded

[KOT-OPET]

Description

Although Doks docs page for images clearly states that images are lazyloaded, turned out they are not.

Steps to reproduce

One can see it by looking into the source code of the said docs page. The example of markdown-driven image with the following code...

![Green Sea Turtle Hatchling by Hannah Le Leu](images/green-sea-turtle-hatchling.jpg)

...produces this line of HTML:

<img class="img-fluid blur-up ls-is-cached lazyloaded" srcset="<<<list of sources>>>" width="2048" height="1366">

(I've deleted alt text for clarity)

However, srcset attribute doesn't work with lazysides module that handles lazyloading. It requires data-srcset attribute instead.

I've checked the loading of page sources. All 40 images from my test page loaded right away, without any "laziness".

Expected result

Lazyloading of the images

Actual result

Simultaneous loading of the images.

Environment

{
  '@hyas/doks': '0.5.0',
  npm: '9.6.7',
  node: '20.3.1',
  acorn: '8.8.2',
  ada: '2.5.0',
  ares: '1.19.1',
  base64: '0.5.0',
  brotli: '1.0.9',
  cjs_module_lexer: '1.2.2',
  cldr: '43.0',
  icu: '73.1',
  llhttp: '8.1.1',
  modules: '115',
  napi: '9',
  nghttp2: '1.53.0',
  nghttp3: '0.7.0',
  ngtcp2: '0.8.1',
  openssl: '3.0.9+quic',
  simdutf: '3.2.12',
  tz: '2023c',
  undici: '5.22.1',
  unicode: '15.0',
  uv: '1.45.0',
  uvwasi: '0.0.18',
  v8: '11.3.244.8-node.9',
  zlib: '1.2.13.1-motley'
}

> @hyas/[email protected] check
> exec-bin node_modules/.bin/hugo/hugo version

hugo v0.107.0-2221b5b30a285d01220a26a82305906ad3291880+extended darwin/amd64 BuildDate=2022-11-24T13:59:45Z VendorInfo=gohugoio

[KOT-OPET]

I kinda fixed it by modifying a node_modules/@hyas/images/layouts/partials/helpers/lib-output/image-handling/img-element.html. Things I've modified:

<img{{ with $inClass }} class="{{ . }}"{{ end }}{{ with $loading }} loading="{{ . }}"{{ end -}}
ADDED: data- {{- if and (ge (len $inImgMap.srcSet) 1) $inUseSrcSet }}srcset="{{ delimit $inImgMap.srcSet ", " }}" sizes="{{ $inSizesAttr }}"
{{- end }} REMOVED: src="{{ $inImgMap.finalSrc | safeURL }}"

Removing of src attribute was necessary to get rid of original image files that were loaded on start of the page by this attribute. There are no LQIPs instead of originals for some reason. I doubt I'm able to fix this.

[KOT-OPET]

Another thing I noticed is that card title images (on the showcase list page, for example) are provided with a proper lqip images.

It seems that the Doks theme has two separate image-handling routines, and that's why it has two similar sections in params.toml:

# Images
quality = 85
bgColor = "#fff"
landscapePhotoWidths = [666, 1000]
portraitPhotoWidths = [666, 1000]
lqipWidth = "20x"
smallLimit = "2001"

# Images
imageResponsive = true
imageConvertTo = "webp"
imageImageSizes = ["480","720","1080","1280","1600","2048"]
singleSize = false
imageAddClass = "img-fluid lazyload blur-up"

Is it true?

[h-enk]

Not sure what's causing the issue you're seeing. This looks OK to me: default Doks v0.5 deploy

Is it true?

Correct. It's a Doks history thing. Doks 1.0 will have a third (and only and better) way of doing images: gethyas/images. Doks 1.0 (including a migration path from 0.5) will be available soon.

[KOT-OPET]

Thank you! I've checked and images in my blog posts get the proper treatment, just as in your default deploy.

However, the docs section (i've modified it slightly, but certainly didn't touch markdown image processing!) doesn't apply data-src attribute to pictures. And, as I showed in the first post, getdoks.org docs page does not, too. Check the source of the page I mentioned.

Maybe there are different rules regarding image processing for different sections? Or maybe blog images use one way you mentioned, and docs images use the other?

Great to hear doks 1.0 is close to its release. Your theme inspired me to compose a personal site, so thanks a lot for all your efforts.

Also, is there even a point in bothering with lazysides, if you can just use loading="lazy" and call it a day? I'm a bit new to all this.

[h-enk]

Thanks for your input! Get back to you next Wednesday (when I'm back home).

[h-enk]

Images 3.0 now is way more robust — and I dropped aFarkas/lazysizes support, for no longer really that relevant

You should now see consistent and correct working behavior

[KOT-OPET]

Thank you!

I'm still on Doks 0.5 though, and I'd prefer not to update the main theme, because I've modified it a lot for my project, and I presume there would be a ton of compatibility issues if I'd update it.

Is there an easy way to implement a new image module in Doks 0.5?

Also, how do you handle LQIP now? Is it still some JS module?

[h-enk]

Upgrading to Doks v1 should not be that hard — also in your case. Here's the Upgrade to v1 guide if you'd like to give it a try.

Looks like you could just upgrade easily — this should update @hyas/images from 0.2.1 to 3.0.0. Also check the Manual Setup guide for updating configuration settings.

LQIP now is not that relevant anymore — so I dropped support for it. Read more on that here for example: Browser-level image lazy loading for the web

[KOT-OPET]

Thanks, maybe in the future. I have a lot of custom scss, and also I've modified image handling in a last couple of months. I'm pretty happy with the way it is in my build now.

Probably I'll start another project after I'll finish this one, and then I'll give the new doks version a try.

It's interesting you've marked lqip as irrelevant; I thought it's generally a beneficial web design practice.