Joplin Web Clipper: Poor quality images captured for "Clip Simplified Page" option

[brandontan]

Environment

Joplin version: Joplin 2.6.10 (prod, darwin)

Platform: MacOS OS specifics: 12.1 Monterey M1

Steps to reproduce

1. Do a "Clip Simplified Page" on https://www.forbes.com/sites/stevenehrlich/2022/02/08/how-cryptos-original-bubble-boy-rode-ethereum-and-is-now-pulling-the-strings-of-the-defi-boom

2. Images are of low quality

Describe what you expected to happen

Images should be of same quality as the site

Logfile

[Daeraxa]

This seems to be because this the image the website actually serves intially before scaling the resolution to fit the size of the display window or some other kind of witchcraft.

<progressive-image src="[https://specials-images.forbesimg.com/imageserve/61fd6e3a712b5bf7646f0b21/cut-077b-Olaf-Carson-Wee-by-Guerin-Blask-for-Forbes-0158-RGB/0x0.jpg?fit=scale](view-source:https://specials-images.forbesimg.com/imageserve/61fd6e3a712b5bf7646f0b21/cut-077b-Olaf-Carson-Wee-by-Guerin-Blask-for-Forbes-0158-RGB/0x0.jpg?fit=scale)" alt="[cut-077b-Olaf-Carson-Wee-by-Guerin-Blask-for-Forbes_0158_RGB]()" class="" data-height="[1333]()" data-width="[2000]()"></progressive-image>

Annoyingly I can't replicate it now but when I first opened that image in its own tab it presented me with a tiny thumbnail sized resolution before scaling up which seems to be what the webclipper downloaded.

[brandontan]

Here's another example: https://blog.devgenius.io/inside-the-javascript-engine-bb7b9f26e84b

Other pics are ok

[Daeraxa]

Again it looks like it serves a low res thumbnail image first before the "real" image.

[krishna8421]

Again it looks like it serves a low res thumbnail image first before the "real" image.

Yes, Its due to Lazy Loading of the Image, The image will only load if the user scroll to the image.

We can do 2 things

• Manually scroll to the image so the image gets updated with a better resolution.
• Or we automate the scroll. (scroll 50px every 100ms)

  (() => {
  const scroll = setInterval(()=>{
      window.scrollBy(0,50)
      if(document.body.scrollHeight===window.innerHeight+window.scrollY){
          scrollTo(0,0)
          clearInterval(scroll)
      }
  },100)
  })();

Medium Links can be converted.

https://miro.medium.com/max/60/0*R632wR_iGTpig9yq.png (Low quality) TO https://miro.medium.com/max/1400/0*R632wR_iGTpig9yq.png (High quality)

[github-actions[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, feel free to create a new issue with up-to-date information.