How to keep the Hero image with a high quality?

Hello there, i'm using the Quark theme and have been struggling with the quality of my hero template. https://walbike.omlet.ovh/

Eventho the image I upload is in high resolution, it gets reduced in quality.

My hero page has these settings:

title: 'Homepage Hero'
menu: Top
hero_classes: 'parallax overlay-dark-gradient text-light title-h1h2 '
hero_image: FS_21_cycling-3.jpg
resizeall: false

Also, in the page file, the picture automatically gets duplicated in several files with @2x, @3x @4x.. in its name. Does it have something to do with it ?

Am I uploading wrong pictures? Should I resize them before?

Thank you,

@Delo, I believe you are again asking two different and unrelated questions in a single post.

1. One about the quality of the hero image
2. The second about duplicate files with @2x, @3x @4x

These questions are not related.

I'll address the hero image question here.

• How did you copy the hero image (FS_21_cycling-3.jpg) to your page folder?
• The hero image you are using on your site is a whopping 15Mb...
  • In general, it is not a good practice to terrorize visitors with forcing them to download an image of 15Mb
  • If that is an image which is reduced in quality, what was the size of the original?