Galerie Thumbnails unscharf

[gia-online]

Hallo zusammen,

beim verwenden der Standard-Galerie werden bei mir die Bilder (Thumbnails) sehr ungünstig komprimiert und
demzufolge sind diese sehr unscharf. Ich habe im Backend -> Einstellungen die Qualität auf 100 gesetzt, aber
die Komprimierung macht einfach die Bilder unscharf.
Wie kann ich die Komprimierung noch beeinflussen?

Viele Grüße,
Mikro

[Kahmoon]

Sie die Bilder vielleicht kleiner als das Thumbnail? Klingt als würden die Bilder hochskaliert. Vergleich mal die Infos in der Dateiverwaltung mit den Einstellungen in der Galerie.

[Spooky]

Link zur Seite?

[gia-online]

Hallo Kahmoon,

die Bilder sind größer als die Thumbnails und wie schon erwähnt habe ich im Backend -> Einstellungen auf
die Qualität 100% gesetzt. Also ich kann mir das leider nicht erklären...

Hier der Link:
http://giaonline.de/berchtenbreiter/...straeusse.html

Viele Grüße & Dank im voraus,
Mirko

[Kahmoon]

Du skalierst per CSS nach oben. Die Eigenschaften des Bildes zeigen "179px × 119px (Skaliert zu 289px × 192px)". Das kann nur unscharf werden.

Edit:
Das ist der Übeltäter:

.image_container img{width:100%;}

[Kahmoon]

Siehe mein Edit!

[gia-online]

Hallo Kahmoon,

okay, kleine Ursache ...

Vielen Dank für Deine promte Hilfe, Du hast mir sehr geholfen!!!

Viele Grüße,
Mirko

[matuweb]

Ich habe das gleiche Problem...

Ich habe viele Fotos, welche immer auf die mögliche Breite von 100% gesetzt werden sollen.
Da meine Seite responsive ist, sollen sich die Bilder immer der Spalte anpassen....
Ich arbeite mit einem 60/40 % Spaltenset.
Wie kann ich denn dieses Problem umgehen?

[Spooky]

Was für ein Problem?

[Kahmoon]

Wenn Bilder unscharf werden, hat es zu 99% immer die selbe Ursache - Eine Skalierung nach oben. Klick doch mal Rechte Maus aufs Bild -> "Grafik Info anzeigen" auf der Webseite. Dort steht ob es skaliert wurde.

[matuweb]

Die Bilder sind immer Größer als die Thumbs...

Wenn ich eine feste Höhe mit proportionaler Skalierung angebe, sind die Foto scharf.
Wird keine Größenangabe beim Bild/Galerie eingetragen und das Foto soll sich der Breite der Spalte anpassen, wird es unscharf dargestellt.

Da die Fotos sich der Spaltenbreite anpassen sollen, kann ich dort ja keine feste Angabe machen.
Oder muss ich dies machen?

[Spooky]

Die Bilder sind immer Größer als die Thumbs...

Wenn ich eine feste Höhe mit proportionaler Skalierung angebe, sind die Foto scharf.
Wird keine Größenangabe beim Bild/Galerie eingetragen und das Foto soll sich der Breite der Spalte anpassen, wird es unscharf dargestellt.

Da die Fotos sich der Spaltenbreite anpassen sollen, kann ich dort ja keine feste Angabe machen.
Oder muss ich dies machen?

Ohne Größenangabe in der Galerie wird die Größe der Thumbnails der Galerie anhand der Galerie Einstellung Vorschaubilder pro Reihe und der Systemeinstellung Maximale Frontend-Breite errechnet. Wenn du bspw. eine Maximale Frontend-Breite von 1140px eingestellt hast und 4 Vorschaubilder pro Reihe werden die Vorschaubilder (sofern du keinen Margin angibst) 285px breit gemacht.


Um dir genauer sagen zu können, ob und welches Problem bei dir vorliegt, brauche ich einen Link zur Seite (wie immer ).

[matuweb]

Danke für die Info.

Ich habe keinen Wert in den Einstellunegn/Maximale Frontend-Breite eingetragen.
Sollte dort generell immer ein Wert stehen? Hatte diesen Punkt eigentlich noch nie aufm Schirm.. Ist er wichtig?

Es sollen max. 8 Fotos in der Galerie nebeneinander stehen.

Die Seite ist noch lokal in der Entwicklung...

[Spooky]

Die Seite ist noch lokal in der Entwicklung...

Dann können wir nicht wirklich sagen, was das Problem ist. Deinen Informationen nach zu Folge werden bei dir die Bilder der Galerie in deren Originalgröße ausgegeben und nicht Thumbnails. Diese Bilder werden dann, deinen Informationen nach, aufgrund deiner CSS Angaben verkleinert. Evt. wirkt es "unscharf" weil die Bilder riesengroß sind und vom Browser per Hardware um ein vielfaches verkleinert werden. Die Art und Qualität der Interpolation ist also vom Client abhängig.

Ich habe keinen Wert in den Einstellunegn/Maximale Frontend-Breite eingetragen.
Sollte dort generell immer ein Wert stehen? Hatte diesen Punkt eigentlich noch nie aufm Schirm.. Ist er wichtig?

Ob dort ein Wert stehen soll oder nicht kommt auf deine Anforderungen an. Der Wert kommt überall dort zum Einsatz, wo Contao automatisch ein Bild für das Frontend generiert. Sei es bspw. in einem Bildinhaltselement, bei News Teaser oder eben bei Galerien.

[matuweb]

Ich habe jetzt in der Galerie eine feste Höhe angegeben und dann wird es auch scharf angezeigt.

Danke für die Hilfe

[Shania]

Ich habe neuerdings auch das Problem. Allerdings haben wir seit dem Wechsel von Contao 4.4 auf Contao 4.9 nur noch Bilder in den MetaModels ergänzt, keine auf den Seiten. Daher ist das bisher gar nicht aufgefallen. Nun soll es mal wieder neue Seiten geben und die neuen Vorschaubilder werden unscharf. Die alten Vorschaubilder sind nach wie vor scharf.

Ich sehe da auch ein max-width: 100 % (weiß aber gar nicht wo das her kommt, denn in meinen CSS Dateien kann ich es nicht finden), aber das Vorschaubild wird nicht nochmal skaliert. Und wenn das in diesem Fall wäre, müssen ja auch alle anderen Vorschaubilder unscharf sein.

In den Einstellen habe ich was von maximaler GD Breite gelesen. Wir denn jetzt nur ich GD verwendet? Ich denke, ich habe immer ImageMagick genutzt. Kann das das Problem sein?

Einen Link zur Seite könnte per PN senden. Die Seite ist noch nicht offiziell veröffentlicht, also zumindest nicht über das Menue erreichbar.

[andre.saage]

Alte Vorschaubilder werden nicht neu generiert solang du in der Systemwartung nicht den image-cache leerst.
max-width: 100% könnte aus dem contao responsive.css kommen was evl. im Layout angekreuzt ist.
Die Beschränkung "maximale GD-Breite" kommt soweit ich weis auch bei der ImageMagick-Verarbeitung zur Anwendung
(größere Bilder werden nicht Verarbeitet sondern als Original wiedergegeben) Dort etwas einzutragen macht eigentlich nur Sinn, wenn du beim Hoster unter RAM-Mangel leidest.
Wenn deine Bildchen durch css verkleinert oder gar vergrößert werden kann es schon mal zu sichtbaren Qualitätsunterschieden führen. Ich würde für eine Beurteilung immer im Browser-kontext-menü "Bild in neuem Tab öffnen" verwenden.

[Shania]

Danke dir für deine Antwort .

Alte Vorschaubilder werden nicht neu generiert solang du in der Systemwartung nicht den image-cache leerst.

Ja, sowas hatte ich mir schon gedacht. Also, dass die vor dem letzten Upgrade generiert wurden. Ansonsten gab es noch neue Bilder in den Nachrichten, aber da kann ich das jetzt nicht so deutlich erkennen, weil die Qualität dieser Bilder generell etwas schlechter ist als bei den Bildern auf den Seiten.

max-width: 100% könnte aus dem contao responsive.css kommen was evl. im Layout angekreuzt ist.

Ja, das ist angehakt, aber das kann ich ja sicherlich nicht einfach raus nehmen oder? Die Bilder haben alle 550 px an der langen Seite und die Vorschaubilder, um die es geht, 300px. Ich hake beim Einfügen Proportional an und trage die 300 entsprechend ein.

Die Bilder dürften also gar nicht skaliert werden, wenn ich sie auf dem Desktop ansehe. Denn da werden sie nicht in der Ansicht verkleinert. 100 % Bildgröße haben da ja Platz. Mobil sollte bei der Breite auch nichts passieren, es sei denn das Smartphone ist älter und das Vorschaubild wird deshalb verkleinert. Damit würde ich leben können.

Die Bilder sind eigentlich zu klein für heutige Seiten, das ist mir bewusst, aber unser Projekt ist alt und sehr umfangreich, so dass wir das nicht einfach so schnell komplett ändern können. Das könnten wir angehen, wenn wir das Design mal komplett modernisieren würden.

Die Beschränkung "maximale GD-Breite" kommt soweit ich weis auch bei der ImageMagick-Verarbeitung zur Anwendung (größere Bilder werden nicht Verarbeitet sondern als Original wiedergegeben) Dort etwas einzutragen macht eigentlich nur Sinn, wenn du beim Hoster unter RAM-Mangel leidest.

Das sind Pflichtfelder und bei uns steht 3000 drin. Ich kann das also nicht entfernen, aber wenn Bilder nicht generell verkleinert werden, dürfte da bei unseren Bildgrößen gar nichts passieren.

Wenn deine Bildchen durch css verkleinert oder gar vergrößert werden kann es schon mal zu sichtbaren Qualitätsunterschieden führen. Ich würde für eine Beurteilung immer im Browser-kontext-menü "Bild in neuem Tab öffnen" verwenden.

Und was schaue ich mir dann an, wenn ich das sehe? Da sehe ich zumindest kein max-width.

[andre.saage]

Max-gd-breite 3000 ist ok solang du nichts hochlädst, was größer ist - ich hab das meistens auf 10000.
Mit der "Bild in neuem Tab öffnen" Methode schaust du, ob du mit dem serverseitigen resizing zufrieden bist und schließt clientseitige(css) - Effekte aus (kann manchmal auch ein padding, transform oder border am img sein).
Falls das matschig aussieht ist entweder das Ausgangsmaterial schon nicht so prall oder du musst in der config.yml die Qualität hochstellen.
80 sind Standard ich bevorzuge 93 (Ansprüche sind ja verschieden und mit Dateigröße abzuwägen).
Das verwendete Dateiformat spiel denke ich auch eine Rolle: wenn ich 4000x3000 jepg's als Ausgangsmateial habe, benötige aber nur z.B 1280px Breite dann sieht das als webp definitiv besser aus als jpg.
Bei einer Skalierung von 550 auf 300 würde ich prinzipiell keine Wunder erwarten.
Wenn du mit den quality-settings spielst musst du zwischendurch immer wieder den Production-cache neu aufbauen und ggf. (wenn du den image-cache nicht löschen möchtest) jedes mal ein neues Bild hochladen.

[Shania]

Max-gd-breite 3000 ist ok solang du nichts hochlädst, was größer ist - ich hab das meistens auf 10000.

Ok, das habe ich jetzt auch einfach mal so eingestellt.

Mit der "Bild in neuem Tab öffnen" Methode schaust du, ob du mit dem serverseitigen resizing zufrieden bist und schließt clientseitige(css) - Effekte aus (kann manchmal auch ein padding, transform oder border am img sein).

Ah, ok, also wenn es da gut aussieht, liegt es nicht an der eingestellten Qualität. Das wusste ich nicht, danke. Der Hinweis ist wichtig .

80 sind Standard ich bevorzuge 93 (Ansprüche sind ja verschieden und mit Dateigröße abzuwägen).

Die hatte ich gestern mal versuchsweise auf 100 gestellt, aber nicht das Bild neu hochgeladen. Ich dache es liegt am Vorschaubild und hatte da nur die Einstellungen erneuert. Aber so sieht es jetzt besser aus . Ich denke, das das irgendwie überschrieben wurde und da der Fehler liegt, denn auf 80 hatte ich es in Contao nie steht, sondern auch irgendwas mit über 90. Habs jetzt auch mal auf 93 gestellt und die Bilder neu hochgeladen und das sieht tatsächlich besser aus.

Das verwendete Dateiformat spiel denke ich auch eine Rolle: wenn ich 4000x3000 jepg's als Ausgangsmateial habe, benötige aber nur z.B 1280px Breite dann sieht das als webp definitiv besser aus als jpg.

Das kann ich mir denken. Mit webp muss ich mich unbedingt beschäftigen, aber dazu bin ich leider noch nicht gekommen .

Wenn du mit den quality-settings spielst musst du zwischendurch immer wieder den Production-cache neu aufbauen und ggf. (wenn du den image-cache nicht löschen möchtest) jedes mal ein neues Bild hochladen.

Du meinst im Contao-Manager oder? das wollte ich jetzt machen, habe die neue Version installieren wollen und prompt läuft das auf Fehler.

Error 200 Unerwarteter API-Status
Der Server hat eine Antwort mit Status-Code 200 gesendet.
1|J?1]J?1]K?1}K?1?K?0?K?1?K?1?K?1?K?1?L?/6 

Das neue herunterladen der contao-manager.phar hat diesmal nicht geholfen. Ich wollte die contao-manager.phar.php aus der Sicherung nehmen. Funktioniert aber auch nicht .

[andre.saage]

Du meinst im Contao-Manager oder? das wollte ich jetzt machen, habe die neue Version installieren wollen und prompt läuft das auf Fehler.

Error 200 Unerwarteter API-Status
Der Server hat eine Antwort mit Status-Code 200 gesendet.
1|J?1]J?1]K?1}K?1?K?0?K?1?K?1?K?1?K?1?L?/6 

Das neue herunterladen der contao-manager.phar hat diesmal nicht geholfen. Ich wollte die contao-manager.phar.php aus der Sicherung nehmen. Funktioniert aber auch nicht .[/QUOTE]

Ähm... 200 als Fehler: hab ich noch nie gesehen.
Wenn sich das nicht von allein behebt würde ich mal alles aus dem "contao-manager" Ordner löschen (außer die users.json)

[Shania]

edit: Sorry, falsches Thema