++++++++++++Update: Issue solved!++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
************************Note: I think I've found a way to solve this Mitch, so don't worry about it for now. Ill update this if I succeed. Cheers. ***********
I would like to serve a different sized logo at the following breakpoints:
Name-----Viewport size ------Image size
Large --- 1366px and up --- 250x46px
Medium --- 768px-1366px --- 204x38px
Small --- 768px and smaller --- 158x32px
Currently the top size (Large) is the default on the site but when the viewport gets smaller this image becomes too big and loses resolution, hence why I want to serve scaled versions at these sizes. I am working from a SVG source which I have resized and exported to get the various pngs.
I am trying to do this via Drupal's responsive image module using the srcset attribute but it is not working (this is the guide I am using: https://chromatichq.com/blog/responsive-images-drupal-8-using-srcset). From research and forums it seems I need an overall image preferences pane but I cannot find them in the theme or within Drupal admin. Can you tell me how to do this, perhaps using PHP as I obviously cannot just use HTML which would be the straightforward option.
Alternatively, it might be easier to achieve this by using an svg version of the logo (I have found a way to upload an svg into the site branding region) and coding it to change size based on viewport dimensions.
Or maybe you know a better way. As far as I can tell the theme only allows for a single logo image but I really think it should offer more adaptive options.
This is really crucial to the appearance of my site so I would be grateful if you could advise.
Many thanks for any help here.