Wie breit soll eine Grafik sein um auf jedem Gerät fürs Responsive Design 100% breit zu sein?

Wenn du wirklich von jedem Gerät sprichst wären das so um die 7680px (UHXGA), wenn du von häufigen (großen) Auflösungen sprichst wären das 1920px (FullHD, gängigste große Größe bei Computern).

Ja 1920x1080px (FullHD) ist die gängige Auflösung von Fernsehern im 16:9 Format, im 16:10 Format (welches jedoch eher selten ist) wären das 1920x1200.

1920x1080px ist übrigens auch die Auflösung die in modernen Kinos auf der Leinwand flimmert.

Jedes Bild kann beliebig groß skaliert werden.
Insofern ist die dimensionale Größe also erstmal nicht entscheidend.

Wichtiger dabei ist die Bildqualität und die Dateigröße.
Wenn das Bild zu klein ist und dann für hohe Auflösungen hoch skaliert werden muss, dann leidet die Bildqualität.
Für diesen Fall ist es am besten, wenn das Ausgangsbild so groß wie möglich ist.

Wenn das Bild zu groß ist, dann muss es bei kleinen Auflösungen runter skaliert werden.
Auch hier kann die Bildqualität leiden, weil Browser da meistens nicht die beste Arbeit leisten.
Außerdem wird ein riesen Bild mit einer riesen Dateigröße geladen, obwohl es nur in einer kleinen Größe dargestellt werden muss.
Für diesen Fall ist es am besten, wenn das Ausgangsbild so klein wie möglich ist.

Um beide Fälle halbwegs befriedigend abzudecken, wird meistens eine Breite von 1600px verwendet,
weil die Bildqualität auf größeren Bildschirmen noch ausreichend ist
und kleine Displays keine riesige Datei laden müssen (was dann mobile Bandbreite kostet und zu langsamen Seitenaufbau führt).

Um für jedes Gerät die optimale Bildgröße zu laden, gibt es auch javascript Lösungen.
Damit gibt es dann riesige Bilder für große Displays und schön kleine Bilder für Smartphones.

In Zukunft wird es auch ein überarbeitetes <img> Element geben, dem man ein set an src attributen verpassen kann.
Dann wird automatisch das Bild geladen, dass auf den aktuellen viewport passt.
Aber das ist noch Zukunftsmusik.
Quelle: https://blog.kulturbanause.de/…es-srcset-sizes-adaptive/

Was du da erzählst, ist aktuell nicht mehr korrekt.

Aktuelle HTML-Renderer wie WebKit, Gecko oder EdgeHTML arbeiten mit bikubischer Interpolation und leisten beim Downscaling hervorragende Arbeit. Beim Vergrößern sind die Ergebnisse qualitativ auch nicht wesentlich schlechter.

Einfach 1600 Pixel Breite nehmen ist Quatsch. Es kommt darauf an, was man darstellen möchte. Wenn ich bereits weiß, dass mein Zielpublikum Breitere Geräte verwendet und eine horizontale Skalierung beim verwendeten Bild nicht gut aussieht, kann ich mich schlecht auf so eine Größe festlegen. Derzeit ist es eher gängig auf solche Grafiken zu verzichten, oder direkt verschiedene Größen anzubieten und im nächsten Absatz weiterzulesen.

Um Grafiken abhängig von der Bildschirmauflösung anzuzeigen, braucht es kein Javascript. Das kann CSS mittels Mediaquerys, was aktuell auch überall Anwendung findet, wo jemand Ahnung hatte.

Deine Quelle ist von 2014. Genauer gesagt etwa 1 Monat vor Veröffentlichung von HTML5. In nun bald 2 Jahren ist in der Hinsicht weder etwas passiert, noch finden sich Informationen darüber auf der Seite des w3c. Bleibt also entweder noch sehr lange Zukunft, oder wird einfach nie eingeführt. Es handelt sich um Spekulation, also kann man nicht fest behaupten, dass es dies "in Zukunft geben wird".

Ich gebe zu, dass ich mit meiner Zukunftsprognose etwas über das Ziel hinaus geschossen bin.
Aber es zeigt zumindest, dass sich über das Problem Gedanken gemacht wird.

Denn das Problem ist die Darstellung von eingebundenen Bildern per <im> tag.
Diese Bilder können nicht per css mediaquerrys ausgetauscht werden.
Man kann sie zwar hoch- und runter skalieren.
Aber eben nicht komplett durch größere oder kleinere Bilder ersetzten.

Für dieses Szenario muss man auch 2016 noch javascript verwenden.

Anders sieht das ganze natürlich aus, wenn das Bild per css geladen wird,
Dann kann man natürlich jedem viewport das passende Bild liefern.

Mit dem img-Element hast du Recht. Jedoch ging es in dem Beitraf um Design und Design wird nicht über das img-Element gelöst, sondern über CSS.

Bilder für den Inhalt sind in der Regel sowieso nicht groß (was Höhe, Breite und Dateigröße betriftt). Da braucht man in der Regel keine unterschiedlichen Versionen und kann das img-Element durchaus mit Media Queries manipulieren.

Also, verallgemeinern kann man da wirklich nicht. Kommt ganz auf Ausrichtung und Inhalte der Seite an. Ich persönlich prüf das immer gerne "on the fly" mit dem guten alten Google Resizer .