Bilder werden unscharf angezeigt! CSS Problem?

Bin gerade dabei eine Seite zu erstellen. http://www.mertensmedien.com

Das Logo oben hat eine Größe von 1500x400px. Dieses ist mit einem Div mit der ID=Logo umgeben, welches eine max-width=350px hat. Wollte das Bild responsive haben, dabei wird das Bild aber unscharf angezeigt, bzw. nicht ganz scharf. Auf dem PC auf meiner Arbeit, sieht sogar ein bisschen pixelig aus. Das Bild ist ein png mit transparenten Hintergrund.

Das Logo muss doch scharf angezeigt werden, oder ist das ein Fehler im Browser oder CSS?

1.500px × 438px (Skaliert zu 340px × 99px)

Genau hier haben wir das Problem. Dieses Bild wird per HTML skaliert = unscharf.

Es ist generell eher schlecht den User so eine große Datei laden zu lassen wenn sie eigentlich nur kleiner verwendet wird.

Zitat:

---

Zitat von fall2out

Das Logo oben hat eine Größe von 1500x400px.

---

Wenn Du es maximal 350px breit anzeigen willst, warum rechnest Du es nicht vorher klein und überlässt dem Browser die Skalierung?

Edit: zu spät:p

:P

Danke für die schnellen Antworten :-)

Zitat:

---

Zitat von kos

Wenn Du es maximal 350px breit anzeigen willst, warum rechnest Du es nicht vorher klein und überlässt dem Browser die Skalierung?

Edit: zu spät:p

---

Ja, klar kann ich es kleiner machen, aber es muss ja mindestens 750px breit sein, damit es auch Retina tauglich ist. und außerdem soll es ja eine flexible breite haben. Wie macht man das professionell bzw. am Besten?

Der sichtbare Bereich der Grafik ist doch ohnehin nur 350px. Das weiße außen rum ist ja nicht relevant.

Ja wenn ich es Retinatauglich machen möchte, benötige ich ohnehin 700px. Dann würde ja auch unscharf anzeigen! Das Ganze muss doch mit einer Grafik funktionieren, machen das nicht andere auch?

Versuchs doch mal mit einer korrekt skalierten Grafik auf einem iPad. Würde mich wundern wenn das Ergebnis nicht passt. Retina ist ja eigentlich imho nur für Apps relevant. Die Darstellung einer Webseite sollte sich daher nicht verändern - korrigiert mich wenn ich da falsch liege.

So habe es nun mit 350px dargestellt, wie erwartet, ist es natürlich bei einem normalen Rechner nun scharf, aber auf den Retina Displays (iPad3/4 und Macbook Retina) unscharf, weil nun Pixel fehlen!

Zitat:

---

Zitat von Kahmoon

Versuchs doch mal mit einer korrekt skalierten Grafik auf einem iPad. Würde mich wundern wenn das Ergebnis nicht passt. Retina ist ja eigentlich imho nur für Apps relevant. Die Darstellung einer Webseite sollte sich daher nicht verändern - korrigiert mich wenn ich da falsch liege.

---

das ist so nicht korrekt! :-) Ein Retina-fähiges Display hat eine "Auflösung" von mehr als 200 ppi statt normal weniger als 100 ppi ... und somit muss alles in einer doppelten Größe vorliegen, als "normal", da es sonst unscharf dargestellt wird.

fg
nicky

Zitat:

---

Zitat von fall2out

So habe es nun mit 350px dargestellt, wie erwartet, ist es natürlich bei einem normalen Rechner nun scharf, aber auf den Retina Displays (iPad3/4 und Macbook Retina) unscharf, weil nun Pixel fehlen!

---

genau das ist das Problem. Da hast du schon Recht, aber eine html-/css-seitige Verkleinerung ist ungünstig, wie du bereits gemerkt hast. Css-Bilder solltest du mit dem Media Query pixel-ratio verändern und Bilder im HTML solltest du mit einem Script oder einer Erweiterung ersetzen z.B. retina_images (glaub ich)

fg
nicky

Es sollten zwei Grafiken hinterlegt werden. Einmal für Retina, einmal für normale Displays.

Tipp: http://retinajs.com/

Danke für die Antwort! Gibt es eine Lösung ohne CSS oder vielleicht als einfache Erweiterung? Wie setzt ihr das in der Praxis ein, oder verzichtet ihr auf Retina Grafiken?

Im Moment verzichten wir bei responsive oder adaptive Websites auf Retina-Grafiken. Bisher hat es auch noch kein Kunde gewünscht bzw. bezahlen wollen. Ist ja auch ein entsprechender Mehraufwand, je nachdem wie stark ich das Layout, das ich gestalte auf Bilder ausrichte.

Ich würde ansonsten zu meiner vorgeschlagenen JS-Lösung raten. Das ist ein gängiger Weg. Wenn es um Logo-Grafiken geht, kann man auch über den Einsatz von svg-Grafiken nachdenken. Die sind problemlos skalierbar und auflösungsunabhängig.

Okay, SVG sagst du? Wie werden diese eingefügt? Hast du eine Syntax für mich?

Geht am einfachsten mit dem <img>-Tag ;)

http://webkompetenz.wikidot.com/html...afikreferenzen

http://www.mediaevent.de/2012/11/svg-in-html-seiten/