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>
Alles anzeigen
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