EDIT: Ok, now realise the problem seems to be with ImgBB, the image host I've used. The HTML link it gives me is this: https://i.ibb.co/V9fsk7B/Untitled-3kpgversion.jpg, a very small version of the image I uploaded. Viewer link is this: https://ibb.co/NCcMG8Y. Any ideas why it's doing that?

I'm currently in the process of making a Shopwired website and am making some little adjustments to the provided theme. I've inserted an image where there would usually just be heading text on the original code. I've added a banner instead, which I made myself. I originally made this banner 2600px wide and tried inserting it, to find it looked very blurry. So the current one I have re-made at 5000px wide, but it is also blurry. I've also tried switching from .png file to a .jpeg. I don't think it's an issue with the actual image, it should be a good enough resolution, I think something needs changing with the coding but I'm not experienced with this stuff at all! Any advice? Inserted photo below- a screenshot of the website with the blurred banner, and the code I used to insert banner.

https://ibb.co/vDwSmpK

                <h2 />
                   <section  style="padding-left: 0 !important; padding-right: 0 !important; padding-top: 0!important;">
                       <img src="https://i.ibb.co/HTHkKym/Untitled-3kpgversion.jpg" style="width: 100%;"/>

    </section>
{% endblock %} 

CodePudding user response：

The original size of the image is way bellow what you need, if it is https://i.ibb.co/HTHkKym/Untitled-3kpgversion.jpg

CodePudding user response：

I had the same problem before, I discovered by turning the photo into an SVG it'll be similar to the original resolution of the image. You can use Figma to do this.

https://www.figma.com/ui-design-tool/

It may not be perfect, but it'll look better.