Question about image markup

I am editing a table created in Drupal back in 2011.

Each row of the table comprises an image and then, below it, some text.

Some of the images are marked up in the table by the familiar HTML img tag. I can locate those images on the server.

Other images are marked up with tags like this:

[[{“type”:”media”,”view_mode”:”media_large”,”fid”:”667″,”attributes”:{“alt”:””,”class”:”media-image”,”height”:”183″,”id”:”1″,”style”:”width: 200px; height: 183px;;;;;;”,”width”:”200″}}]]

I worked on this page some years ago and do not remember seeing this sort of markup or how to create it. I cannot locate the images referenced in the markup but they are in the CMS somewhere.

Would someone please be able to help me out and point me in the right direction or advise:

  1. is using a table to layout this sort of information even a good idea (I think not)?
  2. where are the images referenced in the [[{…}]] tags likely to be located in the CMS?
  3. how do I create these tags and reference images accordingly? and finally
  4. which method of marking up images is recommended?

Thank you very much!

Drupal version: