There are definitely examples on the forums with loading dynamic data with PHP (and JSON data), though I don’t think I found a canonical example in some searching myself. But I think you have the basic idea; my approach would be:
Assign IDs or Class Names to the elements you want to toggle
The main steps are read in you json file.
Then parse the data.
Then assign the data objects as needed.
Image wise you could serialise the byte data to a string and the reverse decode it but that is not really a good root to go and I have only ever used it for googke appscript. Even then I found other ways so as not to do that.
The best way is s to use an url string of the image
JSONP often makes thing easier concerning cross domain security. If it is simple JSON you are after just fetch it and parse it.
If you are planning on putting all data into one file and hence you need to put the images into your data, it will increase in size as Base64 encoded images are bigger, but they can be dynamically replaced using the HypeResourceLoad event.
If you can allow multiple request to load the images after the data stream you can just put only the image URLs into the data file (instead of the full data). They then will be loaded after you replace the background-image using hypeDocument.setElementProperty. This has the downside that you have to do your own preloading or you could experience small loading flashes.
Then something like Hype Data Fill might come in very handy to simplify assigning data in Hype with a minimal footprint. I am guessing this is dynamic data for ads