{"id":832,"date":"2012-11-06T22:06:13","date_gmt":"2012-11-06T21:06:13","guid":{"rendered":"https:\/\/www.kolja-engelmann.de\/blog\/?p=832"},"modified":"2012-11-06T22:10:08","modified_gmt":"2012-11-06T21:10:08","slug":"hohere-auflosung-starkere-komprimierung-bessere-bildqualitat-funktioniert-tatsachlich","status":"publish","type":"post","link":"https:\/\/www.kolja-engelmann.de\/blog\/2012\/11\/hohere-auflosung-starkere-komprimierung-bessere-bildqualitat-funktioniert-tatsachlich\/","title":{"rendered":"H\u00f6here Aufl\u00f6sung + st\u00e4rkere Komprimierung = Bessere Bildqualit\u00e4t? Funktioniert tats\u00e4chlich!"},"content":{"rendered":"

Ich las gestern einen Artikel \u00fcber die neuen hochaufl\u00f6senden Displays moderner Clients und deren Auswirkungen auf Webdesign und Ladezeit von Webseiten, als ich \u00fcber eine interessante Idee von Daan Jobsis in seinem Artikel Retina Revolution<\/a> stolperte. Dieser stellte fest, dass die wahrgenommene Qualit\u00e4t eines Bildes weniger von der St\u00e4rke der verwendeten JPEG Komprimierung abh\u00e4ngig sei, als von der Aufl\u00f6sung des Bildes. Deutlicher ausgedr\u00fcckt: Nimmt man zwei identische Bilder, die in der gleichen Gr\u00f6\u00dfe auf einer Webseite dargestellt werden, so empfinden wir jenes als sch\u00e4rfer und detailreicher, dass durch st\u00e4rkere Komprimierung zwar eine geringere Dateigr\u00f6\u00dfe aufweist, aber in seiner nativen Aufl\u00f6sung deutlich h\u00f6her aufgel\u00f6st vorliegt. Klingt unglaublich? Ich habe es ausprobiert und mir mal zwei Fotos von meinem Streifzug durch Luxemburg heute Nachmittag zum Vergleich herangezogen.<\/p>\n

Beide Bilder wurden in Photoshop auf die entsprechende Gr\u00f6\u00dfe reduziert und anschlie\u00dfend je einmal mit 90%<\/strong> Qualit\u00e4t und einmal mit 0%<\/strong> Qualit\u00e4t abgespeichert.<\/p>\n

\"\"<\/a>

400×300, Qualit\u00e4t 90%, 85kb<\/p><\/div>\n

\"\"<\/a>

1024×768, Qualit\u00e4t 0%, 43kb<\/p><\/div>\n

„More detail with less kilobytes“<\/h4>\n

Unglaublich, oder? Auf den ersten fl\u00fcchtigen Blick wirken beide Bilder gleichwertig. Aber vergr\u00f6\u00dfert sie ruhig einmal (Klick darauf), damit ihr seht, dass es tats\u00e4chlich einen Unterschied gibt und die Bilder so gro\u00df sind wie angegeben. Bei den n\u00e4chsten beiden Bildern wird es sogar noch deutlicher, wenn man die Webseite durch seinen Browser mal etwas vergr\u00f6\u00dfert (STRG-+<\/code>). Das eigentlich hochwertiger komprimierte Bild sieht im Vergleich zum deutlich st\u00e4rker komprimierten Pendant um L\u00e4ngen schlechter aus.<\/p>\n

\"\"<\/a>

400×300, Qualit\u00e4t 90%, 110kb<\/p><\/div>\n

\"\"<\/a>

1024×768, Qualit\u00e4t 0%, 55kb<\/p><\/div>\n

Woher das kommt? Eigentlich m\u00fcsste das Bild doch nur so vor Artefakten strotzen? Das tut es auch! Durch die starke Skalierung des h\u00f6her aufgel\u00f6sten Bildes werden diese jedoch f\u00fcr das Auge praktisch unsichtbar! Was bedeutet das jetzt aber f\u00fcr den Webdesigner? Nun, ich kann da jetzt keine These draus ableiten und m\u00f6chte auch nicht jedem empfehlen k\u00fcnftig alle Bilder auf Webseiten derart einzubinden, aber bevor im HTML Standard (endlich) Methoden auftauchen, um Bilder verschiedener Gr\u00f6\u00dfen zu definieren und dem Client zu \u00fcberlassen welche er letztendlich darstellen m\u00f6chte (so wie es das video<\/code> Tag ja jetzt macht), stellt dies doch eine gute M\u00f6glichkeit dar responsive Webdesign<\/a>\u00a0anzugehen. Man muss aber dazu sagen, dass das Ausgangsbild auch einen entsprechend hohen Detailgrad aufweisen muss, sonst ist die M\u00fche vergebens. Die vierfache Aufl\u00f6sung sollte es schon sein.<\/p>","protected":false},"excerpt":{"rendered":"

Ich las gestern einen Artikel \u00fcber die neuen hochaufl\u00f6senden Displays moderner Clients und deren Auswirkungen auf Webdesign und Ladezeit von Webseiten, als ich \u00fcber eine interessante Idee von Daan Jobsis in seinem Artikel Retina Revolution...<\/p>\n","protected":false},"author":1,"featured_media":558,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[84],"class_list":["post-832","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein","tag-html5"],"jetpack_featured_media_url":"https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2012\/08\/stock_html.jpg","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/posts\/832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/comments?post=832"}],"version-history":[{"count":0,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/posts\/832\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/media\/558"}],"wp:attachment":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/media?parent=832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/categories?post=832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/tags?post=832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}