{"id":3050,"date":"2014-08-07T21:23:46","date_gmt":"2014-08-07T19:23:46","guid":{"rendered":"https:\/\/wolkenhart.com\/webdesignblog\/?p=3050"},"modified":"2014-08-07T21:23:46","modified_gmt":"2014-08-07T19:23:46","slug":"responsive-images","status":"publish","type":"post","link":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-images","title":{"rendered":"Responsive Images: Fallstudie liefert wichtige Hinweise zum Thema Performance"},"content":{"rendered":"

Responsive Images <\/strong>– Ein spannendes Thema wurde im Bereich Webdesign in den letzten Jahren immer wichtiger: Responsive Design<\/strong>. <\/p>\n

Darunter versteht man Internetseiten, die sich dynamisch an das Ausgabeger\u00e4t des Anwenders anpassen. Der Grund f\u00fcr diese Funktion ist leicht erkl\u00e4rbar. Verbraucher verwenden nicht mehr nur ihren eigenen PC zu Hause um im Internet zu surfen. Viele benutzen inzwischen Smartphones, Tablets und viele weitere Ger\u00e4ten in allen m\u00f6glichen Gr\u00f6\u00dfen und Formen. Webdesigner m\u00fcssen sich darauf immer mehr einstellen, doch es ist eine schwierige Herausforderung. Wie kann eine Internetseite erstellt werden, die auf einem 30-Zoll Display gut aussieht, auf einem kleinen Smartphone jedoch immer noch ansprechend wirkt? Die schwedischen Entwickler Anders Andersen<\/strong> und Tobias J\u00e4rlund<\/strong> standen vor diesem Problem. Sie wurden beauftragt, die Webseite der gr\u00f6\u00dften schwedischen Tageszeitung Aftonbladet<\/a> f\u00fcr mobile Ausgabeger\u00e4te anzupassen. Ihre Ergebnisses stellten sie in einer Fallstudie zum Thema Responsive Images<\/a> vor.<\/p>\n

\"Responsive<\/p>\n

Responsive Images<\/h2>\n

Die Entwickler wollten ihre Aufgabe m\u00f6glichst einfach umsetzten. Ihr Plan war eine einzige HTML-Datei, die alle erforderlichen Informationen enth\u00e4lt, um je nach Ausgabeger\u00e4t das richtige Bild zu einem Text darzustellen. Dabei hatten drei wichtige Aspekte eine entscheidende Bedeutung: Ladetechnik, Seitenfluss und die Auswahl des passenden Bilds.<\/p>\n

F\u00fcr die richtige Ladetechnik der Bilder musste ein passendes JavaScript erstellt werden. Dieses checkt die Gr\u00f6\u00dfe des Endger\u00e4ts, identifiziert die Bilder und den Punkt, an dem sie eingef\u00fcgt werden und f\u00fchrt die Operation schlie\u00dflich aus.<\/p>\n

Beim Seitenfluss sollte ein einheitliches Erscheinungsbild der Seite erzeugt werden. Auch die Verz\u00f6gerung, wenn JavaScript das Bild in den Speicher l\u00e4dt, sollte verhindert werden. Aus diesem Grund entschieden sich die beiden schwedischen Entwickler gegen das oft verwendete Attribut img { max-width: 100% }. Stattdessen verwendeten sie einen sogenannten „Padding-bottom Hack“. Hiermit kann das entsprechende Seitenverh\u00e4ltnis angegeben werden. Die H\u00f6he eines Bildes l\u00e4sst sich dann relativ zu dessen Breite festlegen.<\/p>\n

Vielzahl von Faktoren<\/h2>\n

Der letzte Teil der Studie behandelt die schwierige Auswahl des passenden Bilds. Die Auswahl ist von einer Vielzahl von Faktoren abh\u00e4ngig. Die Entwickler l\u00f6sten das Problem, indem sie das Nutzerverhalten der Tageszeitung Aftonbladet analysierten. Bei dieser Analyse kam heraus, dass die Mehrzahl der Anwender ihre Endger\u00e4te im sogenannten Portr\u00e4tmodus verwenden. Au\u00dferdem werden in den meisten F\u00e4llen HD-Displays benutzt.<\/p>\n

Wie es scheint, ist die Bildauswahl immer ein Kompromiss zwischen Zweckm\u00e4\u00dfigkeit und Qualit\u00e4t. Gro\u00dfe Bilder verbrauchen viel Speicherplatz, deswegen sollte genau \u00fcberpr\u00fcft werden, wann man sie wirklich ben\u00f6tigt. Im Zweifelsfall gilt: keine Kompression bei Bildgalerien die im Mittelpunkt der Aufmerksamkeit stehen und anderen wichtigen Bildern.<\/p>\n

Die ver\u00f6ffentlichte und ausf\u00fchrliche Fallstudie mit dem Titel \u201eAdressing The Responsive Images Performance Problem\u201c<\/a> bietet detaillierte Einblicke in das Thema und zeigt viele interessante Ideen.<\/p>\n","protected":false},"excerpt":{"rendered":"

Responsive Images – Ein spannendes Thema wurde im Bereich Webdesign in den letzten Jahren immer wichtiger: Responsive Design. Darunter versteht man Internetseiten, die sich dynamisch an das Ausgabeger\u00e4t des Anwenders anpassen. Der Grund f\u00fcr diese Funktion ist leicht erkl\u00e4rbar. Verbraucher verwenden nicht mehr nur ihren eigenen PC zu Hause um im Internet zu surfen. Viele benutzen inzwischen Smartphones, Tablets und viele weitere Ger\u00e4ten in allen m\u00f6glichen Gr\u00f6\u00dfen und Formen. Webdesigner m\u00fcssen sich darauf immer mehr einstellen, doch es ist eine schwierige Herausforderung. Wie kann eine Internetseite erstellt werden, die auf einem 30-Zoll Display gut aussieht, auf einem kleinen Smartphone jedoch immer noch ansprechend wirkt? Die schwedischen Entwickler Anders Andersen und Tobias J\u00e4rlund standen vor diesem Problem. Sie wurden beauftragt, die Webseite der gr\u00f6\u00dften schwedischen Tageszeitung Aftonbladet f\u00fcr mobile Ausgabeger\u00e4te anzupassen. Ihre Ergebnisses stellten sie in einer Fallstudie zum Thema Responsive Images vor. Responsive Images Die Entwickler wollten ihre Aufgabe m\u00f6glichst einfach umsetzten. Ihr Plan war eine einzige HTML-Datei, die alle erforderlichen Informationen enth\u00e4lt, um je nach Ausgabeger\u00e4t das richtige Bild zu einem Text darzustellen. Dabei hatten drei wichtige Aspekte eine entscheidende Bedeutung: Ladetechnik, Seitenfluss und die Auswahl des passenden Bilds. F\u00fcr die richtige Ladetechnik der Bilder musste ein passendes JavaScript erstellt werden. Dieses checkt die Gr\u00f6\u00dfe des Endger\u00e4ts, identifiziert die Bilder und den Punkt, an dem sie eingef\u00fcgt werden und f\u00fchrt die Operation schlie\u00dflich aus. Beim Seitenfluss sollte ein einheitliches Erscheinungsbild der Seite erzeugt werden. Auch die Verz\u00f6gerung, wenn JavaScript das Bild in den Speicher l\u00e4dt, sollte verhindert werden. Aus […]<\/p>\n","protected":false},"author":1,"featured_media":3059,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[232],"class_list":["post-3050","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-responsive-webdesign","tag-responsive-images"],"yoast_head":"\nResponsive Images Fallstudie<\/title>\n<meta name=\"description\" content=\"Die Responsive Images Fallstudie liefert wichtige Hinweise zum Thema Performance. Die ausf\u00fchrliche Case Study bietet detaillierte Einblicke.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wolkenhart.com\/webdesignblog\/responsive-images\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Images Fallstudie\" \/>\n<meta property=\"og:description\" content=\"Die Responsive Images Fallstudie liefert wichtige Hinweise zum Thema Performance. Die ausf\u00fchrliche Case Study bietet detaillierte Einblicke.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wolkenhart.com\/webdesignblog\/responsive-images\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wolkenhart\" \/>\n<meta property=\"article:published_time\" content=\"2014-08-07T19:23:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/08\/Responsive-Images-Fallstudie.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"334\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mika Gustavson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wolkenhart\" \/>\n<meta name=\"twitter:site\" content=\"@wolkenhart\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/responsive-images#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/responsive-images\"},\"author\":{\"name\":\"Mika Gustavson\",\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/#\\\/schema\\\/person\\\/4b869b4e36908e2e60076662203e0b0c\"},\"headline\":\"Responsive Images: Fallstudie liefert wichtige Hinweise zum Thema Performance\",\"datePublished\":\"2014-08-07T19:23:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/responsive-images\"},\"wordCount\":469,\"commentCount\":10,\"image\":{\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/responsive-images#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/wp-content\\\/uploads\\\/2014\\\/08\\\/Responsive-Images-Fallstudie.jpg\",\"keywords\":[\"Responsive Images\"],\"articleSection\":[\"Responsive Webdesign\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/responsive-images#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/responsive-images\",\"url\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/responsive-images\",\"name\":\"Responsive Images Fallstudie\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/responsive-images#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/responsive-images#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/wp-content\\\/uploads\\\/2014\\\/08\\\/Responsive-Images-Fallstudie.jpg\",\"datePublished\":\"2014-08-07T19:23:46+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/#\\\/schema\\\/person\\\/4b869b4e36908e2e60076662203e0b0c\"},\"description\":\"Die Responsive Images Fallstudie liefert wichtige Hinweise zum Thema Performance. Die ausf\u00fchrliche Case Study bietet detaillierte Einblicke.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/responsive-images#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/responsive-images\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/responsive-images#primaryimage\",\"url\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/wp-content\\\/uploads\\\/2014\\\/08\\\/Responsive-Images-Fallstudie.jpg\",\"contentUrl\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/wp-content\\\/uploads\\\/2014\\\/08\\\/Responsive-Images-Fallstudie.jpg\",\"width\":500,\"height\":334,\"caption\":\"Responsive Images\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/responsive-images#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Start\",\"item\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive Images: Fallstudie liefert wichtige Hinweise zum Thema Performance\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/#website\",\"url\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/#\\\/schema\\\/person\\\/4b869b4e36908e2e60076662203e0b0c\",\"name\":\"Mika Gustavson\",\"description\":\"Hi, ich bin Mika - WordPress-Enthusiast und Webworker aus Leidenschaft. Ich bin Inhaber der Webdesign Agentur \\\/ WordPress Agentur Wolkenhart\u00ae und freier Dozent an der Dualen Hochschule Baden-W\u00fcrttemberg.\",\"url\":\"https:\\\/\\\/wolkenhart.com\\\/webdesignblog\\\/author\\\/webtalk\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive Images Fallstudie","description":"Die Responsive Images Fallstudie liefert wichtige Hinweise zum Thema Performance. Die ausf\u00fchrliche Case Study bietet detaillierte Einblicke.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-images","og_locale":"de_DE","og_type":"article","og_title":"Responsive Images Fallstudie","og_description":"Die Responsive Images Fallstudie liefert wichtige Hinweise zum Thema Performance. Die ausf\u00fchrliche Case Study bietet detaillierte Einblicke.","og_url":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-images","article_publisher":"https:\/\/www.facebook.com\/wolkenhart","article_published_time":"2014-08-07T19:23:46+00:00","og_image":[{"width":500,"height":334,"url":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/08\/Responsive-Images-Fallstudie.jpg","type":"image\/jpeg"}],"author":"Mika Gustavson","twitter_card":"summary_large_image","twitter_creator":"@wolkenhart","twitter_site":"@wolkenhart","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-images#article","isPartOf":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-images"},"author":{"name":"Mika Gustavson","@id":"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/4b869b4e36908e2e60076662203e0b0c"},"headline":"Responsive Images: Fallstudie liefert wichtige Hinweise zum Thema Performance","datePublished":"2014-08-07T19:23:46+00:00","mainEntityOfPage":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-images"},"wordCount":469,"commentCount":10,"image":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-images#primaryimage"},"thumbnailUrl":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/08\/Responsive-Images-Fallstudie.jpg","keywords":["Responsive Images"],"articleSection":["Responsive Webdesign"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wolkenhart.com\/webdesignblog\/responsive-images#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-images","url":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-images","name":"Responsive Images Fallstudie","isPartOf":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-images#primaryimage"},"image":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-images#primaryimage"},"thumbnailUrl":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/08\/Responsive-Images-Fallstudie.jpg","datePublished":"2014-08-07T19:23:46+00:00","author":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/4b869b4e36908e2e60076662203e0b0c"},"description":"Die Responsive Images Fallstudie liefert wichtige Hinweise zum Thema Performance. Die ausf\u00fchrliche Case Study bietet detaillierte Einblicke.","breadcrumb":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-images#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wolkenhart.com\/webdesignblog\/responsive-images"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-images#primaryimage","url":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/08\/Responsive-Images-Fallstudie.jpg","contentUrl":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/08\/Responsive-Images-Fallstudie.jpg","width":500,"height":334,"caption":"Responsive Images"},{"@type":"BreadcrumbList","@id":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-images#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Start","item":"https:\/\/wolkenhart.com\/webdesignblog\/"},{"@type":"ListItem","position":2,"name":"Responsive Images: Fallstudie liefert wichtige Hinweise zum Thema Performance"}]},{"@type":"WebSite","@id":"https:\/\/wolkenhart.com\/webdesignblog\/#website","url":"https:\/\/wolkenhart.com\/webdesignblog\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wolkenhart.com\/webdesignblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/4b869b4e36908e2e60076662203e0b0c","name":"Mika Gustavson","description":"Hi, ich bin Mika - WordPress-Enthusiast und Webworker aus Leidenschaft. Ich bin Inhaber der Webdesign Agentur \/ WordPress Agentur Wolkenhart\u00ae und freier Dozent an der Dualen Hochschule Baden-W\u00fcrttemberg.","url":"https:\/\/wolkenhart.com\/webdesignblog\/author\/webtalk"}]}},"_links":{"self":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/posts\/3050","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/comments?post=3050"}],"version-history":[{"count":0,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/posts\/3050\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/media\/3059"}],"wp:attachment":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/media?parent=3050"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/categories?post=3050"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/tags?post=3050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}