Hallo,
Praktisch ist so, dass ein 950 Pixel breites Bild automatisch auf 1170 Pixel Breite vergrößert, so auf dem Server gespeichert wird und anschließend wieder auf 950 Pixel Breite verkleinert dargestellt wird.
Danke für den Hinweis, ich habe jetzt herausgefunden was da los ist und es auch bereits behoben - der Fix ist aber noch nicht online, da noch einige Tests ausstehen.
Wenn es scharf und farblich stimmig sein soll, dann ist so etwas wie Flickr besser, und dann verlinken.
Ich bezweifle, dass flickr mit dem selben Ausgangsmaterial „farblich stimmigere“ Fotos zur Verfügung stellt, lasse mich aber gern eines Besseren belehren!
Es ist überhaupt eine neue Unsitte, Bilder auf Websites hoch- und runter zu skalieren, bis es passt.
Das ist leider nicht so trivial wie man vielleicht denken mag. Das Skalieren von Bildern muss zwangsläufig an irgendeiner Stelle (Server und/oder Browser) geschehen, da die Seite der Fotoansicht für unzählige Bildschirmauflösungen angezeigt werden muss. Das beginnt beim Smartphone mit 320 Pixeln Bildschirmbreite und hört auf beim Desktop-Rechner mit Retina-Bildschirm. Schau dir z. B. mal dieses Bild an:
http://fotos.mtb-news.de/p/2066852
Im HTML-Markup sieht das so aus:
Code:
<img
src="https://fstatic0.mtb-news.de/f3/20/2066/2066852-dsbxa60e1cek-28245588952_6eb32df0d8_o-medium.jpg?2"
class="photo large image-annotate"
alt="Testbild"
title="Testbild"
rel="2066852"
srcset="https://fthumb1.mtb-news.de/cache/1170_auto_1_1_2/d8/aHR0cHM6Ly9mc3RhdGljMC5tdGItbmV3cy5kZS9mMy8yMC8yMDY2LzIwNjY4NTItZHNieGE2MGUxY2VrLTI4MjQ1NTg4OTUyXzZlYjMyZGYwZDhfby1vcmlnaW5hbC5qcGc_Mg.jpg 1170w,
https://fthumb1.mtb-news.de/cache/724_auto_1_1_2/d8/aHR0cHM6Ly9mc3RhdGljMC5tdGItbmV3cy5kZS9mMy8yMC8yMDY2LzIwNjY4NTItZHNieGE2MGUxY2VrLTI4MjQ1NTg4OTUyXzZlYjMyZGYwZDhfby1vcmlnaW5hbC5qcGc_Mg.jpg 724w,
https://fthumb1.mtb-news.de/cache/480_auto_1_1_2/d8/aHR0cHM6Ly9mc3RhdGljMC5tdGItbmV3cy5kZS9mMy8yMC8yMDY2LzIwNjY4NTItZHNieGE2MGUxY2VrLTI4MjQ1NTg4OTUyXzZlYjMyZGYwZDhfby1vcmlnaW5hbC5qcGc_Mg.jpg 480w,
https://fthumb1.mtb-news.de/cache/320_auto_1_1_2/d8/aHR0cHM6Ly9mc3RhdGljMC5tdGItbmV3cy5kZS9mMy8yMC8yMDY2LzIwNjY4NTItZHNieGE2MGUxY2VrLTI4MjQ1NTg4OTUyXzZlYjMyZGYwZDhfby1vcmlnaW5hbC5qcGc_Mg.jpg 320w,
https://fthumb1.mtb-news.de/cache/2340_auto_1_1_2/d8/aHR0cHM6Ly9mc3RhdGljMC5tdGItbmV3cy5kZS9mMy8yMC8yMDY2LzIwNjY4NTItZHNieGE2MGUxY2VrLTI4MjQ1NTg4OTUyXzZlYjMyZGYwZDhfby1vcmlnaW5hbC5qcGc_Mg.jpg 2340w,
https://fthumb1.mtb-news.de/cache/1880_auto_1_1_2/d8/aHR0cHM6Ly9mc3RhdGljMC5tdGItbmV3cy5kZS9mMy8yMC8yMDY2LzIwNjY4NTItZHNieGE2MGUxY2VrLTI4MjQ1NTg4OTUyXzZlYjMyZGYwZDhfby1vcmlnaW5hbC5qcGc_Mg.jpg 1880w,
https://fthumb1.mtb-news.de/cache/1448_auto_1_1_2/d8/aHR0cHM6Ly9mc3RhdGljMC5tdGItbmV3cy5kZS9mMy8yMC8yMDY2LzIwNjY4NTItZHNieGE2MGUxY2VrLTI4MjQ1NTg4OTUyXzZlYjMyZGYwZDhfby1vcmlnaW5hbC5qcGc_Mg.jpg 1448w,
https://fthumb1.mtb-news.de/cache/960_auto_1_1_2/d8/aHR0cHM6Ly9mc3RhdGljMC5tdGItbmV3cy5kZS9mMy8yMC8yMDY2LzIwNjY4NTItZHNieGE2MGUxY2VrLTI4MjQ1NTg4OTUyXzZlYjMyZGYwZDhfby1vcmlnaW5hbC5qcGc_Mg.jpg 960w,
https://fthumb1.mtb-news.de/cache/640_auto_1_1_2/d8/aHR0cHM6Ly9mc3RhdGljMC5tdGItbmV3cy5kZS9mMy8yMC8yMDY2LzIwNjY4NTItZHNieGE2MGUxY2VrLTI4MjQ1NTg4OTUyXzZlYjMyZGYwZDhfby1vcmlnaW5hbC5qcGc_Mg.jpg 640w"
sizes="(min-width: 1200px) 1170px, (min-width: 980px) 940px, (min-width: 768px) 724px, 100vw"
>
Wir kennen die verschiedenen Breiten, in denen das Bild dargestellt wird (
sizes-Attribut):
bei ≥1200 Pixel Bildschirm- bzw. Browserbreite ist das Bild 1170 Pixel breit
bei ≥980 Pixel sind es 940 Pixel
bei ≥ 768 Pixel sind es 724 Pixel
und bei schmaleren Bildschirmen ist es
100% der Bildschirmbreite
Für jede Breite berechnen wir pixelgenau die Bilder, sodass der Browser normalerweise nicht mehr selbst skalieren muss. Ausnahme sind die Bildschirmauflösungen unterhalb von 768 Pixel, wo wir den Browser aus den verfügbaren Breiten (724 Pixel, 640 Pixel, 480 Pixel, 320 Pixel) selbstständig auswählen lassen. Diese werden dann auch ggf. im Browser skaliert.
Zählt man die High-dpi („Retina“) Screens dazu, verdoppelt sich die Anzahl der benötigten Bildauflösungen. Wir stellen für alle definierten Auflösungen auch die Bilder mit doppelter Kantenlänge zur Verfügung. Für ein Foto im Fotoalbum bieten wir neun verschiedene Versionen an.
Schlussendlich entscheidet der Webbrowser, welches der neun verfügbaren Bilder er lädt und anzeigt. Hier war auch der Knackpunkt des beobachteten Problems. Ich habe jetzt die URI der originalen Version des Bildes in die Auswahl der Bild-URIs (
srcset) hinzugefügt. Damit wählt der Browser im beschriebenen Sonderfall (maximale Bildgröße ist schmaler als Inhalts-Container) jetzt auch genau dieses zusätzliche Bild aus, da es exakt zu der verwendeten Breite passt.
Ich denke, dass ich den Fix morgen auf die Server laden kann.
Viele Grüße
rik
Test mit einem 950 Pixel breitem Bild
→ vorher:
→ nachher: