Miese Bildqualität nach Verkleinern

**ecce peniche** · 05.01.2015, 09:00

Hallo zusammen

Mir "zerschiesst" es irgendwie die Bildqualität, wenn ich ein Bild einfüge und im Editor die Bildbreite/Bildhöhe festlege

- Vielleicht weiss jemand Rat?

Hier: http://www.lifetroubleshoot.ch/neu-hier.html - Wenn man das Portrait anklickt und die Lightbox aufgeht, sieht man wie viel schöner in den Farben und schärfer dass das Bild eigentlich wäre.

Die JPEG-Vorschauqualität hab ich bereits auf 100% gesetzt. Ob das "Originalbild" die Grösse 666x1000 oder 350x525 (oder so ähnlich, hat kleiner) hat, macht gar keinen Unterschied.

Das Problem habe ich NICHT, wenn ich das Bild direkt in 200xwhatever einfüge und dann entsprechend nicht verkleinern lasse.

Gibt es da eine Lösung oder muss ich mich damit abfinden?

**Spooky** · 05.01.2015, 09:42

Dein Originalbild hat ein Farbprofil eingebettet ("Adobe RGB (1998)"), welches moderne Browser (oder zumindest Chrome und Firefox) auch anwenden. Wenn Contao nun aus dem Originalbild ein weiteres Bild macht (etwa für die Vorschau, oder eben wenn du dem Inhaltselement eine Größe gibst etc.), dann geht das Farbprofil verloren - und daher sieht das Ergebnis in diesem Fall auch ganz anders aus.

Du musst das Originalbild konvertieren - also so abspeichern, dass die abgespeicherten Pixeldaten dem Output deines zuvor verwendeten Farbprofils entsprechen. Wenn du Photoshop benutzt kannst du, in diesem Fall, den "Save for Web" Dialog (Ctrl + Alt + Shift + S) öffnen und dort die Option "Convert to sRGB" aktivieren (Vorsicht: in anderen Fällen könnte es sein, dass diese Option genau den umgekehrten Effekt hat, je nach Farbprofil-Situation).

**ecce peniche** · 05.01.2015, 10:19

Hmmm, es hat mit und ohne "Save for Web" gleich ausgeschaut, hab ich schon gestestet. Ich versuchs aber später nochmals, um ganz sicher zu gehen. Danke dir jedenfalls für die Antwort!

... würde das die mangelnde Schärfe im Übrigen auch erklären?

**Spooky** · 05.01.2015, 10:25

Zitat von ecce peniche

Hmmm, es hat mit und ohne "Save for Web" gleich ausgeschaut, hab ich schon gestestet.

Der Punkt ist nicht ob du "Save for Web" benutzt oder nicht, es ist die Art, wie du die Information abspeicherst. In diesem Fall, wenn du "Save for Web" benutzt, musst du "Convert to sRGB" aktivieren.

Alternativ kannst du auch "Edit - Convert to Profile..." machen und dort dann bei "Destination Space" das Profil "sRGB IEC61966-2.1" auswählen. Danach ist es egal wie du es abspeicherst (und auch im Falle von "Safe for Web" ist es danach egal, ob du "Convert to sRGB" aktivierst oder nicht).

Zitat von ecce peniche

... würde das die mangelnde Schärfe im Übrigen auch erklären?

Nein, das kommt von imagecopyresampled, welches nur eine bilineare Interpolation macht. Um da etwas besseres zu verwenden müsstest du dir einen eigenen getImage Hook schreiben (oder evt. gibt es eine Extension, die es besser macht, oder ImageMagick verwendet).

**ecce peniche** · 05.01.2015, 10:31

Och doof, ich kann kein php. Irgendwann kommt der Tag X, an dem mich diese fehlende Fähigkeit so sehr nervt, dass ich es doch noch lerne

Hab dennoch ganz lieben Dank, ich teste das mal durch, um wenigstens die Farben hinzukriegen.

**Spooky** · 05.01.2015, 12:04

Du kannst ja mal diese Erweiterung probieren: [MagickImages] (sollte auch unter höheren Contao Versionen laufen, denk ich).

**Kahmoon** · 05.01.2015, 12:15

Für Web würde ich generell eher mit sRGB arbeiten...also auch schon im Photoshop. Dieses Farbprofil decken die meisten Consumerbildschirme sicher ab. "Für Web speichern unter" nimmt grundsätzlich erst mal das Farbprofil der Bilddatei. Aber wie Spooky schon sagt, Häkchen bei konvertieren setzen und die Ausgabe ist sRGB. Grundsätzlich sollte diese Konvertierung aber nie Qualitätsverlust geben. Nicht darstellbare Farbwerte werden mit Alternativen besetzt, mehr nicht. Ich weiß allerdings nicht wie Contao das umwandelt.

VG

**ecce peniche** · 11.01.2015, 03:30

Ganz herzlichen Dank euch! Ich habe die Bilder jetzt erst mal klein eingefügt und werde nach und nach durch eure Inputs durcharbeiten.

**Michael** · 24.02.2016, 18:47

Ich habe ebenfalls ein Problem mit der Bildqualität:
Wenn ich einen Screenshot(1200x800) via Elementtyp Text>Bild mit der Bildbreite 500px in meinen Webseite einfüge ist die Qualität wie gewoht gut.
Wenn ich aber dasselbe Bild mit dem Elementtyp Bild einfüge, ebenfalls auf 500px verkleinert, ist die Qualiät schlecht, spricht verpixelt.
Habe bemerkt, dass mit dem Elementtyp Text das Originalbild aufgerufen wird und mit dem Elementtyp Bild unter assets eine Bild gespeichert wird, welches eine schlechte Qualität hervorruft.
Wie kann ich dies beheben?

**Spooky** · 24.02.2016, 18:51

Im Fall eins wird das Originalbild einfach vom Browser auf deine gewünschte größe runterskaliert - je nach Browser führt das dann natürlich zu einer besseren Qualität, dafür müssen auch viel mehr Daten übertragen werden.

Für den Fall zwei kommt es darauf an was du mit "schlechter Qualität" meinst.

**Michael** · 24.02.2016, 18:57

Selber Screenshot, einmal als Elementtyp Bild und einmal als Text->Bild:
Oberes Bild: Bild
Unteres Bild: Text
Bildschirmfoto 2016-02-24 um 19.56.00.png
Oder bin ich nun zu heikel weil ich einen RetinaDisplay habe?

**tab** · 24.02.2016, 19:10

Nee, aber so übel wie hier sind von Contao / GDLib verkleinerte Bilder normalerweise nicht. Mit Qualität 80 habe ich normalerweise visuell kein Problem. Höchstens mit der erzeugten Bildgröße in Bytes. Unscharf wird es erst dann, wenn Bilder zwischendurch erst mal zu stark verkleinert werden um dann wieder in einem größeren Bereich dargestellt zu werden, so dass der Browser anfangen muss, das kleine Bild auf die benötigte Größe aufzublasen. Das müsste man aber mit den Entwicklertools und der Grafik-Info rausfinden können.

Edit: Wobei, wenn ich mir das Bild im Bildbearbeitungsprogramm mal mit Breite 500 anzeigen lasse, dann ist der Unterschied zwischen den beiden Versionen marginal. Da könnte dann eventuell ein Retina-Display schon den Unterschied vergrößern. Da musst du dann eben die neuen "Bildgrößen" nutzen.

**Spooky** · 24.02.2016, 19:15

Zitat von Michael

Oder bin ich nun zu heikel weil ich einen RetinaDisplay habe?

Wenn du die Bilder auch auf einem Retina Display scharf haben willst, musst du Responsive Image Einstellungen beim Bildgrößenmodus verwenden (oder, falls du das nicht für jedes Bild machen willst, meine [default_densities] Extension nehmen, damit werden dann auch für andere Bildgrößen automatisch srcsets mit 1x, 2x, … erzeugt).

Zitat von tab

Nee, aber so übel wie hier sind von Contao / GDLib verkleinerte Bilder normalerweise nicht. Mit Qualität 80 habe ich normalerweise visuell kein Problem. Höchstens mit der erzeugten Bildgröße in Bytes. Unscharf wird es erst dann, wenn Bilder zwischendurch erst mal zu stark verkleinert werden um dann wieder in einem größeren Bereich dargestellt zu werden, so dass der Browser anfangen muss, das kleine Bild auf die benötigte Größe aufzublasen. Das müsste man aber mit den Entwicklertools und der Grafik-Info rausfinden können.

Er sieht sich das Bild auf einem Ausgabegerät mit einem DPPX Wert der größer als 1 ist an, daher sehen Bilder, die nicht mit speziellen Responsive Image Einstellungen von Contao ausgegeben werden, auch eben so aus.

**tab** · 24.02.2016, 19:18

Ja, habs eben auch gemerkt, bei 500px Breite ist das erste Bild nur geringfügig schlechter, bei 1000 sticht es ins Auge.

**Michael** · 25.02.2016, 06:02

Besten Dank für die Infos! Werde es baldmöglichst testen und eine Rückmeldung geben.

**Michael** · 25.02.2016, 19:12

Da ich die Screenshots immer in der selben Grösse brauche, habe ich ihnen eine CSS-Klasse verpasst und die Grösse mit max-width: 500px, width: 100% und height: auto gesetzt. Somit passt sich die Bildgrösse bei einem kleiner Fenster noch an und die Bildqualität ist top.
Ist wahrscheinlich die beste Variante, aber für mich im Moment die einfachste.