CSS Bilder nur in Desktop Version von Chrome unscharf

[safeload]

Hallo, ich erstelle gerade einen kleine Seite für einen Imbiss.

Die gezeigten Bilder sind in allen getesteten Browsern scharf

- FF, Edge, IE (Desktop)
- Chrome (iOS, Android)
- Safari (iOS)

außer in Chrome/Desktop.

Die Container, die die Bilder enthalten besitzen einen Rahmen von 1px.
Entferne ich diesen (was ich nicht möchte) oder den margin zwischen den Containern, dann wird auch in Chrome/Desktop scharf dargestellt.

Es ist wirklich zum verrückt werden

 

[gabbercopter]

bei mir (chrome) ist alles scharf

 

[r15ch13]

Am besten waere es die Bilder direkt in der richtigen groesse 396x247 px auszuliefern. Einfach parallel zu den originialen abspeichern. Reduziert unter anderem auch die Ladezeit.
Warum Chrome die so schlecht verkleinert kann ich dir nicht sagen.


Bei mir im Chrome 66.0.3359.139 ist es auch unscharf im direkten vergleich zu FF 60.0

 

[kicos018]

Schaut bei mir auch unscharf aus im direkten Vergleich.
Füg die mal wie von r15ch13 vorgeschlagen in der gewollten Größe ein. Chrome hat afaik öfters mal ein Problem beim runterskalieren.

 

[Goldi708]

Du hast jedoch noch ein Problem mir der Webseite, sie hat kein Favicon!

 

[safeload]

Am besten waere es die Bilder direkt in der richtigen groesse 396x247 px auszuliefern. Einfach parallel zu den originialen abspeichern. Reduziert unter anderem auch die Ladezeit.
Warum Chrome die so schlecht verkleinert kann ich dir nicht sagen.


Bei mir im Chrome 66.0.3359.139 ist es auch unscharf im direkten vergleich zu FF 60.0

Danke für die Screenshots.
Die Bilder sollen ja für alle Devices stufenlos skalieren, weshalb es sozusagen keine richtigen Größen gibt.
Wenn Du das Fenster in Chrome kleiner ziehst, kannst Du sehen, saß die Bilder in eine einspaltige Darstellung wechseln und dann auch (spätesten beim reload) in jeder Skalierungstufe scharf werden.

Ich hab auch noch eine andere Site, wo dies in ähnlicher Weise funktioniert. Nur hier finde ich den Fehler nicht, bzw. bekomme keinen workaround zustande und ich hab schon einiges versucht um die borders und margins zu ersetzen. Hab's natürlich auch probiert wie auf der funktionierenden Site aber es muß da einen Unterschied geben, weil es hier nicht klappt. Nur kann ich ihn leider nicht finden...

 

[Darrel]

Hi safeload,

ich konnte bei mir das von dir beschriebene Problem in Chrome und Opera ebenfalls feststellen. Wenn ich den Bildern (img) die CSS-Eigenschaft image-rendering: pixelated; gebe, dann werden die Bilder bei mir scharf.

Da ich keine großen Tests durchgeführt habe und weil diese CSS-Eigenschaft definitiv noch im experimentellem Stadium ist, bin ich mir nicht sicher, ob du damit das Problem lösen kannst.

 

[safeload]

Hallo Darrel,

danke für Deine Lösung.

Ich hatte vor einiger Zeit mal mit image-rendering experimentiert (hab´s dann bei dem Projekt auch ohne hingekriegt) und war mit den Ergebnissen, die dazu je nach Browser sehr unterschiedlich waren nicht zufrieden.

Hier jedoch scheint sich image-rendering: pixelated; nur auf webkit auszuwirken, jedenfalls sehe ich bei den anderen keinen Unterschied. Was ja auch gut passt.

Der einzige Nachteil sind die etwas zu aggressive Schärfung und die dirty Edges, die bei ungeraden Skalierungen zu Bildstörungen führen. Da die Bilder in width: >= 896px aber
mit 50% dargestelt werden klappt das schon ganz gut, wenn ich die Eigenschaft nur mit dem entsrechenden MediaQuery einsetze.

Auf einer älteren Imbiss-Site funktioniert es ohne image-rendering.

Es gelingt mir im Moment nur noch nicht das zu reproduzieren bzw. ich komme mit "vermeintlich" gleichem CSS Aufbau in den relevanten Bereichen nicht zum selben Ergebnis...
Unterschiede im CSS_Reset habe ich bereits ausgeschlossen.

Irgendwo muß es da noch einen Unterschied geben, den ich noch nicht erkenne...

und nein, ich mach nicht nur Schawarma Imbiss Sites

edit: [LÖSUNG] Nach dem die im Layout vergleichbare Site keine unscharfen Bilder zeigte und eine Übernahme des gleichen CSS Code keine Besserung brachte, habe ich ein Bild der alten Site in das Layout der neuen eingebunden und siehe da, es war scharf. So bin ich drauf gekommen, daß Chrome bei komplexeren Bildberechnungen anscheinend nur bestimmte Seitenverhältnisse mag.
Demnach sind Bilder in 3:2, 2:1 und 1:1 stets scharf wohingegen es bei anderen Ratios inkl. 4:3 (klappt manchmal) zu Unschärfen kommt. Bin daher auf 3:2 umgestiegen und alles ist ok.

Vielen Dank an alle, die sich hier beteiligt haben!