Many devs don’t know you can group elements in dropdowns without custom libraries but.. you can easily do this using the optgroup tag…
For your images which are ‘below the fold’ consider using the HTML loading=’lazy’ attribute which will defer loading of images until a user scrolls to them.
In the demo video below the page has 100 cat pictures but we can see from developer tools that they are not requested until a user scrolls to them so there is no wasted bandwidth.
The attribute is supported by most popular Chromium-powered browsers (Chrome, Edge, Opera) and Firefox. Browsers that do not support the loading attribute simply ignore it without side-effects.
Is anyone using this at the moment? It would be ideal to use on ecommerce or catalogue type of sites which are heavy on images where I imagine it could save lots of GBs of bandwidth every month.
More information from Google ->
Browser-level image lazy-loading for the web