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