How to keep the Hero image with a high quality?

Support Themes & Styling
1

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.

Sans titre
Sans titre1917×692 152 KB

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,

2

@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?
3

Hello @pamtbaau both questions are related. I was just suggesting a clue.
A friend helped me, we changed the limit of the size for the file, went to .png, reduced the quality and it seems like working now!
Thank you for your help