Bilder wie groß anlegen

Zitat von mbhh

Also: Bei mir sind z.B. 300 x 300 Pixel ok, ich lege das Bild dann in 600 x 600 Pixel an. Oder reicht das nicht mehr?

Die hochauflösenden Displays haben eine höhere Pixeldichte als gewöhnliche Monitore. Auf der gleichen Fläche werden etwa viermal so viele Pixel dargestellt. Der Vorteil dieser Technologie liegt darin, dass die Pixel nun so klein sind, dass das menschliche Auge sie nichtmehr auflösen kann. Das Ergebnis sind extrem scharfe Fotos.

Ein Pixel der Grafik entspricht auch auf dem Retina-Display einem Pixel, nur das viermal so viele und dafür kleinere Pixel abgebildet werden. Damit die Grafiken nicht alle zu klein dargestellt werden, rechnen die Geräte die Grafiken um. Dadurch geht allerdings Qualität verloren. Deine 600 x 600 Grafik wird auf dem Retina-Display unscharf ausssehen... außer, du lieferst diese Grafik als alternative für deine 300 x 300 Grafik aus.

Beispiel
https://css-tricks.com/on-responsive-images/

<picture alt="description of image">


  <!-- low-res, default -->
  <source src="small.jpg">


  <!-- med-res -->
  <source src="medium.jpg" media="(min-width: 400px)">


  <!-- high-res -->
  <source src="large.jpg" media="(min-width: 800px)">


  <!-- Fallback content -->
  <img src="small.jpg" alt="description of image">


</picture>

https://github.com/scottjehl/picturefill
https://imulus.github.io/retinajs/

Beispiel und weitere Lösungswege bei SelfHTML
https://wiki.selfhtml.org/wiki/HTML/Tuto…sponsive_Bilder

Zitat von mbhh

Danke dir. Ich bleibe erst mal beim Faktor 2, von meinem Monitor ausgehend, damit liegt man wohl immer noch richtig.

nicht wirklich, man benötigt mindestens bis 4x

<img src = "feuerwehr-320.jpg" srcset = "feuerwehr-640.jpg 2x, feuerwehr-960.jpg 3x, feuerwehr-1280.jpg 4x" >

https://wiki.selfhtml.org/wiki/HTML/Mult…afiken/Grafiken

2x reichte bis 2014 aus...

Ich persönlich würde mich an die aktuellen "Empfehlungen" halten
https://html.spec.whatwg.org/multipage/images.html#images