PDA

Vollständige Version anzeigen : Web-Design Photoshop Resizing vs HTML Resizing


flash10101
18.01.15, 17:23
Hallo,

Ich habe ein Problem beim Resizing meines Logos. Wenn ich es in Originalgröße abspeicher und dann die Größe per HTML definiere, sieht das Logo relativ scharf aus:
https://www.photoshop-cafe.de/bildupload/pics/sonst/thumb/1421594102_a1.png (https://www.photoshop-cafe.de/bildupload/pics/sonst/1421594102_a1.png)
Live version: http://www.vegantastic.de/

Um ein Traffic zu sparen, würde ich das Logo allerdings gerne direkt in der korrekten Größe speichern. Ich mache das in Photoshop per "Save for Web". Das ganze sieht dann folgendermaßen aus und ist wesentlich unschärfer:

https://www.photoshop-cafe.de/bildupload/pics/sonst/1421594102_a2.png (https://www.photoshop-cafe.de/bildupload/pics/sonst/1421594102_a2.png)
Live version: http://3-dot-vegantastic0.appspot.com

Gibt es eine Möglichkeit das ganze irgendwie in besserer Qualität hin zubekommen? Irgendwelche Tips? :)

Viele Grüße
flash

uwe367
18.01.15, 17:41
Hallo flash10101 und willkommen im :psc1:

Nun.. das kommt ganz darauf an in welcher Qualität du das Bild aus PS speicherst. Da gibts einige Einstellungsmöglichkeiten, siehe Bild.

https://www.photoshop-cafe.de/bildupload/pics/sonst/thumb/1421595437_screen.jpg (https://www.photoshop-cafe.de/bildupload/pics/sonst/1421595437_screen.jpg)

Aber mal ganz ehrlich.. Bei den meisten Providern ist heutzutage der komplette Traffic im Hostingpaket inklusive und da spielts dann keine Rolle ob dein Logo nun 50kb oder 200kb hat außer daß die Qualität darunter leidet.

Es ist nunmal so daß ein Bild, je stärker es komprimiert ist, einen entsprechenden Qualitätsverlust erleidet. Man muß für sich dann eben dan besten Kompromiss finden.

flash10101
18.01.15, 17:48
Danke, dass ich hier willkommen bin :)

Bei PNGs kann man ja keine Qualität auswählen. Mir gehts auch eher um die Ladezeit der Seite und hatte gedacht es gibt vll noch irgend einen anderen, besseren Weg oder Trick :)

stefu
18.01.15, 19:24
Kann Dein Anliegen gut verstehen, da es ja auch auf den Seitenbau aufkommt, der zügig sein sollte.

Ich rate mal ins Blaue ohne die Datei zu haben:

Was hast Du bei "Qualität" unter dem Abschnitt "Bildgröße" für eine Renderoption stehen?
Eventuell liegt es daran. Oder ein Dither eingeschaltet?

Du könntest auf PNG24 mal gehen zum Vergleich.

Jenny
18.01.15, 21:00
Hallo!

Wenn du dir die Website mal in Original(!!!)-Größe anschaust, dann sind beide Logos scharf!

Wenn du die Website aber (wie bei deinen Screenshots) auf 300% zoomst, dann greift die Rendering-Engine des Browsers netterweise auf die originalen Bilddaten zurück:

Dein großes 570px-Logo wird dann auf 480px skaliert -> scharf (logisch)
Dein kleines 160px-Logo wird dann auf 480px skaliert -> unscharf (leider auch logisch)

stefu
19.01.15, 12:56
Kopfklatscht. Habe ich nicht dran gedacht mal auf die HP zu gehen.
Super Jenny. :ok: