Better handling of images

[EvgeniiaVak]

Not a very important issue, for someday / maybe.

Currently the images work OK with the default html tag, but there are warnings by next.js like:

60:11  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element

Maybe if we fix the warning we will get some performance boost.

When trying to simply use (import Image from "next/image";) Image provided by next.js, there is this error:

Error: Image Optimization using the default loader is not compatible with `{ output: 'export' }`.
  Possible solutions:
    - Remove `{ output: 'export' }` and run "next start" to run server mode including the Image Optimization API.
    - Configure `{ images: { unoptimized: true } }` in `next.config.js` to disable the Image Optimization API.
  Read more: https://nextjs.org/docs/messages/export-image-api

So something else needs to configured, or if deciding to stay with tags - silence the warnings.

[yuliaSharabi]

@dcts Is this still rellevant? I guess not.

[dcts]

@yuliaSharabi it is still relevant, but not a priority.

We have a lot of < img > tags in the code. We could improve performance if we use the nextJs < Image > components.

I suggest to keep this open.