Aspect ratio for web banners

[Nzkiwis]

So I'm needing to place banners on a website using photos. 

The space online is fixed 500px high and 100% screen width.  Using the example image what is my best approach.

The image is not high res although I can try and get some. I do have permission to use these images. Requesting them each time is an extra burdon on the autther which I don't want to place on him.

I'm using HTML srcset media queries to show different images based on viewpoint size so I can come up with a small (mobile) medium, large and very large image.

My first approach was to crop the image 500px high but as the width is only 850px when expanded in html the focus of the player in the center is expanded. I then thought, do I make the height 200px catering for the growth in height. 

This is where I've got stuck.

1) what ratio should I use?

2) what are best practices / even good ideas to wrap left and right of the main image but also blend it in?

[Nancy OShea]

100% screen width is 100% of available viewport size -- whatever that may be.

The problem with responsive is that it's entirely % based, not pixel based.

CSS width: 100%; height:100%  will re-scale images to fit whatever the viewport width is.

CSS max-width: 100%  will only downscale.  It does not upscale images beyond their native pixel size -- which is perferred for photos because they would become distorted and very pixelated on ultra HI-RES displays.

For this reason, I prefer to use Vector Graphics exported to SVG.  Vector images are math-based, not pixel based.  They can be rescaled to ANY size without loss in quality.  Whenever possible, I use SVG on the web, not bitmap.

To your question of what size to use?  It varies.  Anywhere from extra small mobile to ultra HI-RES jumbotrons and everything in between. 

Who is your main target audience?

[Nzkiwis]

Thanks, I did File > Export As > SVG

My original PS size was 1600x500px. 

My SVG shrinks nicely but the height is lost. 

Is there a way to keep the height in the SVG

[Nancy OShea]

Images should scale proportionally to avoid distortion.  Your website supports a banner max-height of 500px. 

Let's say your largest desktop banner is 1920px w x 500px h.

On smaller devices, 1024 x 267.

On x-small devices, 500 x 130.

[JoeChrist1]

Reset the image and link higher focus.