I'm looking for a trick/workaround. My years-old scheme for serving different versions of a page to different devices works great ...except it doesn't mesh well with Google's handling of image sitemaps.
Each of my pages is actually implemented as a "set" of pages, one "generic" (and canonical) entry page, and several "phantom" pages. The generic/landing page sniffs its environment, then vectors to the best fit specific phantom page. Only the generic page appears in Google's index, not any of the phantom pages that are also part of the page-set. This scheme has worked fine for several years.
The new twist is I now want Google to list some of my images, and am constructing a sitemap. My question is how to list the "hosting" page for an image in the sitemap. My actual hosting page for each image is one of my phantom pages; the generic page hosts only thumbnails.
The current -clearly incorrect- situation is the sitemap lists the actual phantom page as "hosting" the image, and that phantom page is marked NOINDEX (and uses rel="canonical" to point at the generic page). When Google crawls this, it complains that a listed page is marked NOINDEX. Further, if a user asks Google to visit the image, they are presented with the literal sitemap XML (rather than a graphic page displaying images).
How can I construct a sitemap so Google [visit] displays correctly, yet only the generic page (not any of the phantom pages in the page-set) is included in its index?
EDIT: April 2021 - the question was heavily edited for clarity, as the initial answers suggested the question could be easily misunderstood.