Jetzt möchte ich beim Übermausen (mouseover) eines Gruppenfotos Namen von Personen anzeigen. Doch je nach Viewport beim Leser hat das Bild eine unbekannte Größe in Pixel.

Für dein Vorhaben gibt es Javascript-Klassen/Plugins. Unter Suchmaschine: "responsive image maps" findest du verschiedene Beispiele. Wie performant derartige Lösungen sind kann ich allerdings nicht beurteilen.

Du solltest berücksichtigen, dass, wenn dein Design Responiv sein soll, du auf Touch-Geräten kein "onmouseover" oder :hover zur Verfügung hast. Demnach ist eine derartige Umsetzung für Geräte mit Touch-Screen eher ungeeignet.

Oftmals wird das so gelöst, dass man eine Feature-Erkennung mit Javascript (Modernizr) macht und wenn das Anzeigende Gerät ein Touchdevice ist ersetzt man das onmouseover (oder :hover) durch einen Klick (touchstart). Dann muss der Anwender 2x klicken. Ein erstes Mal um den onmouseover-Effekt zu triggern und ein zweites Mal um das eigentliche Klick-Event auszuführen.

Ich finde diesen Lösungsansatz für deine Anwendung (Anzeige von Namen in einem Gruppenfoto) jedoch vom Aufwand her übertrieben. Es wäre evtl. sinvoller Profilfotos der Gruppenmitglieder zu erstellen und den Namen gleich mit anzuzeigen. Das wäre auch für ein Responsive-Design leichter umzusetzen und hätte auch für den Anwender den Vorteil, dass er gleich an die gewünschte Information kommt. Aber das ist nur meine Bescheidene Meinung und geht an deiner Fragestellung vorbei.

lg
mark