{"id":90773,"date":"2016-09-14T14:34:54","date_gmt":"2016-09-14T14:34:54","guid":{"rendered":"https:\/\/codewebbarcelona.com\/optimizacion-imagenes-en-diseno-web\/"},"modified":"2026-06-11T08:27:03","modified_gmt":"2026-06-11T08:27:03","slug":"bildoptimierung-im-webdesign","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/de\/bildoptimierung-im-webdesign\/","title":{"rendered":"Gr\u00f6\u00dfe z\u00e4hlt im Webdesign"},"content":{"rendered":"<p>Heute sprechen wir dar\u00fcber, wie wichtig optimierte Bilder f\u00fcr unser <strong>Webdesign<\/strong> sind.<\/p>\n<p>Das ist ein sehr wichtiger Punkt bei der Definition des <strong>Designs einer<\/strong> <strong>Website<\/strong>, denn davon h\u00e4ngen so entscheidende Faktoren ab wie die Ladezeit und m\u00f6gliche Abstrafungen, die wir direkt oder indirekt von unseren Kunden, den Nutzern und sogar von Google erhalten k\u00f6nnen.<\/p>\n<p>Wenn du also dar\u00fcber nachdenkst, uns mit der Erstellung deiner <strong>Website<\/strong> zu beauftragen, zeigen wir dir ein paar Tricks, mit denen du das Verh\u00e4ltnis zwischen Bild, Qualit\u00e4t und Dateigr\u00f6\u00dfe optimal ausbalancierst.<\/p>\n<h2>1. Bilder optimieren lernen, ohne Qualit\u00e4tsverlust im Webdesign<\/h2>\n<p>Das ist die Mindestanforderung, die wir beachten sollten. Selbst wenn wir sonst nichts aus dieser Liste umsetzen, ist dieser Punkt unverzichtbar: Es geht darum, eines dieser beiden Programme zu verwenden \u2013 ImageOptim f\u00fcr OS X oder FileOptimizer f\u00fcr Windows und Linux \u2013, um die Bildoptimierung zu automatisieren.<\/p>\n<p>Daf\u00fcr m\u00fcsst ihr nichts weiter tun, als eure Bilder per Drag-and-drop in die Anwendung zu ziehen, w\u00e4hrend ihr euch in Ruhe einen guten Cola Cao g\u00f6nnt.<\/p>\n<p>Der Prozess ist extrem schnell, erfordert keinerlei Aufwand, und das Ergebnis sind optimierte Bilder.<\/p>\n<h2>2. Die richtige Gr\u00f6\u00dfe<\/h2>\n<p>Bilder mit falschen Abmessungen zu verwenden, ist ein h\u00e4ufiger Fehler, das Ergebnis kann jedoch fatal sein.<\/p>\n<p>Oft glauben wir, dass alles stimmt, wenn das Bild auf dem Bildschirm in einer passenden Gr\u00f6\u00dfe angezeigt wird. Tats\u00e4chlich kann es aber sein, dass der Browser ein Bild mit deutlich gr\u00f6\u00dferen Abmessungen \u2013 und entsprechend h\u00f6herem Gewicht \u2013 l\u00e4dt, es aber kleiner darstellt.<\/p>\n<p>Die Abmessungen des Bildes sollten daher exakt der Gr\u00f6\u00dfe des Bereichs entsprechen, den es einnehmen soll \u2013 nicht mehr und nicht weniger.<\/p>\n<h2>3. F\u00fcr Web speichern<\/h2>\n<p>Diese Option kennen die Expertinnen und Experten f\u00fcr <strong>Webdesign<\/strong> bereits, und sie spart viel Zeit, wenn sie korrekt in unseren Workflow integriert wird.<\/p>\n<p>Im Grunde geht es einfach darum, die Bilder, die wir f\u00fcr unser Webdesign bearbeiten, im Webformat zu speichern \u2013 also optimiert.<\/p>\n<p>Hier seht ihr einen Vergleich: von rechts nach links jeweils \u201eF\u00fcr Web speichern\u201c mit 100, 70, 50 und 20 %. Je nach urspr\u00fcnglicher Bildgr\u00f6\u00dfe ist der Unterschied mehr oder weniger deutlich zu erkennen.<\/p>\n<p>Es gibt unz\u00e4hlige Theorien zum optimalen Qualit\u00e4tsprozentsatz, aber am besten ist es, auf eure Intuition zu vertrauen: testen, speichern, zoomen, vergleichen &#8230; was auch immer n\u00f6tig ist. Das ist eine gute Methode, um den Blick zu schulen und ein perfektes Ergebnis zu erzielen.<\/p>\n<p><a href=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/el-tamano-importa-en-el-diseno-web-featured.jpg\"><img decoding=\"async\" class=\"alignnone wp-image-477 size-large\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/diseno-web-barcelona-comparativa-imagenes-1024x683-2.jpg\" alt=\"tama\u00f1o imagenes dise\u00f1o web\" width=\"1024\" height=\"683\" \/><\/a><\/p>\n<h2>4. Brauche ich diese Bilder wirklich in meinem Webdesign?<\/h2>\n<p>Das ist eine gute Frage, die zusammen mit weiteren Punkten Teil der Analyse eines <strong>Webprojekts<\/strong> ist. Ein gutes <strong>Webdesign<\/strong> beginnt mit einer Bedarfsanalyse. Es geht also nicht darum, m\u00f6glichst viele Bilder zu verwenden, sondern darum, ihren tats\u00e4chlichen Nutzen zu bewerten.<\/p>\n<h2>5. Das passende Format verwenden<\/h2>\n<p>Es gibt verschiedene Bildformate, und jedes hat seine eigenen Besonderheiten, St\u00e4rken und Schw\u00e4chen.<\/p>\n<p>Es lohnt sich, sie zu kennen, um jedes Format richtig einzusetzen.<\/p>\n<p>Wenn du noch Fragen hast, ruf uns einfach in unserem Studio in <strong>Barcelona<\/strong> an. Wir helfen dir gern bei allem, was du brauchst.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Heute sprechen wir dar\u00fcber, wie wichtig optimierte Bilder f\u00fcr unser Webdesign sind. Das ist ein sehr wichtiger Punkt bei der Definition des Designs einer Website, denn davon h\u00e4ngen so entscheidende Faktoren ab wie die Ladezeit und m\u00f6gliche Abstrafungen, die wir direkt oder indirekt von unseren Kunden, den Nutzern und sogar von Google erhalten k\u00f6nnen. Wenn [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4461,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[648,658],"class_list":["post-90773","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-empfohlen","category-webdesign-webentwicklung"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Claves en el dise\u00f1o web a valorar en la fase de preparaci\u00f3n<\/title>\n<meta name=\"description\" content=\"Post dedicado a los amantes del dise\u00f1o web que quieran tener un conocimiento sobre la optimizaci\u00f3n de las imagenes para p\u00e1ginas web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codewebbarcelona.com\/de\/bildoptimierung-im-webdesign\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Claves en el dise\u00f1o web a valorar en la fase de preparaci\u00f3n\" \/>\n<meta property=\"og:description\" content=\"Post dedicado a los amantes del dise\u00f1o web que quieran tener un conocimiento sobre la optimizaci\u00f3n de las imagenes para p\u00e1ginas web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codewebbarcelona.com\/de\/bildoptimierung-im-webdesign\/\" \/>\n<meta property=\"og:site_name\" content=\"CODE\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-14T14:34:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-11T08:27:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/el-tamano-importa-en-el-diseno-web-featured.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"683\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"cd26Bc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"cd26Bc\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/bildoptimierung-im-webdesign\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/bildoptimierung-im-webdesign\\\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"Gr\u00f6\u00dfe z\u00e4hlt im Webdesign\",\"datePublished\":\"2016-09-14T14:34:54+00:00\",\"dateModified\":\"2026-06-11T08:27:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/bildoptimierung-im-webdesign\\\/\"},\"wordCount\":521,\"image\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/bildoptimierung-im-webdesign\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/el-tamano-importa-en-el-diseno-web-featured.jpg\",\"articleSection\":[\"Empfohlen\",\"Webdesign und -entwicklung\"],\"inLanguage\":\"de-DE\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/bildoptimierung-im-webdesign\\\/\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/bildoptimierung-im-webdesign\\\/\",\"name\":\"Claves en el dise\u00f1o web a valorar en la fase de preparaci\u00f3n\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/bildoptimierung-im-webdesign\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/bildoptimierung-im-webdesign\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/el-tamano-importa-en-el-diseno-web-featured.jpg\",\"datePublished\":\"2016-09-14T14:34:54+00:00\",\"dateModified\":\"2026-06-11T08:27:03+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\"},\"description\":\"Post dedicado a los amantes del dise\u00f1o web que quieran tener un conocimiento sobre la optimizaci\u00f3n de las imagenes para p\u00e1ginas web.\",\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/bildoptimierung-im-webdesign\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/bildoptimierung-im-webdesign\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/el-tamano-importa-en-el-diseno-web-featured.jpg\",\"contentUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/el-tamano-importa-en-el-diseno-web-featured.jpg\",\"width\":2074,\"height\":1383},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/\",\"name\":\"CODE\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\",\"name\":\"cd26Bc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"caption\":\"cd26Bc\"},\"sameAs\":[\"https:\\\/\\\/codewebbarcelona.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Claves en el dise\u00f1o web a valorar en la fase de preparaci\u00f3n","description":"Post dedicado a los amantes del dise\u00f1o web que quieran tener un conocimiento sobre la optimizaci\u00f3n de las imagenes para p\u00e1ginas web.","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:\/\/codewebbarcelona.com\/de\/bildoptimierung-im-webdesign\/","og_locale":"de_DE","og_type":"article","og_title":"Claves en el dise\u00f1o web a valorar en la fase de preparaci\u00f3n","og_description":"Post dedicado a los amantes del dise\u00f1o web que quieran tener un conocimiento sobre la optimizaci\u00f3n de las imagenes para p\u00e1ginas web.","og_url":"https:\/\/codewebbarcelona.com\/de\/bildoptimierung-im-webdesign\/","og_site_name":"CODE","article_published_time":"2016-09-14T14:34:54+00:00","article_modified_time":"2026-06-11T08:27:03+00:00","og_image":[{"url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/el-tamano-importa-en-el-diseno-web-featured.jpg","width":1024,"height":683,"type":"image\/jpeg"}],"author":"cd26Bc","twitter_card":"summary_large_image","twitter_misc":{"Written by":"cd26Bc","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codewebbarcelona.com\/de\/bildoptimierung-im-webdesign\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/de\/bildoptimierung-im-webdesign\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/de\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"Gr\u00f6\u00dfe z\u00e4hlt im Webdesign","datePublished":"2016-09-14T14:34:54+00:00","dateModified":"2026-06-11T08:27:03+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/de\/bildoptimierung-im-webdesign\/"},"wordCount":521,"image":{"@id":"https:\/\/codewebbarcelona.com\/de\/bildoptimierung-im-webdesign\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/el-tamano-importa-en-el-diseno-web-featured.jpg","articleSection":["Empfohlen","Webdesign und -entwicklung"],"inLanguage":"de-DE"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/de\/bildoptimierung-im-webdesign\/","url":"https:\/\/codewebbarcelona.com\/de\/bildoptimierung-im-webdesign\/","name":"Claves en el dise\u00f1o web a valorar en la fase de preparaci\u00f3n","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/de\/bildoptimierung-im-webdesign\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/de\/bildoptimierung-im-webdesign\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/el-tamano-importa-en-el-diseno-web-featured.jpg","datePublished":"2016-09-14T14:34:54+00:00","dateModified":"2026-06-11T08:27:03+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/de\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"description":"Post dedicado a los amantes del dise\u00f1o web que quieran tener un conocimiento sobre la optimizaci\u00f3n de las imagenes para p\u00e1ginas web.","inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/de\/bildoptimierung-im-webdesign\/"]}]},{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/codewebbarcelona.com\/de\/bildoptimierung-im-webdesign\/#primaryimage","url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/el-tamano-importa-en-el-diseno-web-featured.jpg","contentUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/el-tamano-importa-en-el-diseno-web-featured.jpg","width":2074,"height":1383},{"@type":"WebSite","@id":"https:\/\/codewebbarcelona.com\/de\/#website","url":"https:\/\/codewebbarcelona.com\/de\/","name":"CODE","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewebbarcelona.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de-DE"},{"@type":"Person","@id":"https:\/\/codewebbarcelona.com\/de\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567","name":"cd26Bc","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","caption":"cd26Bc"},"sameAs":["https:\/\/codewebbarcelona.com"]}]}},"_links":{"self":[{"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/posts\/90773","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/comments?post=90773"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/posts\/90773\/revisions"}],"predecessor-version":[{"id":90779,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/posts\/90773\/revisions\/90779"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/media\/4461"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/media?parent=90773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/categories?post=90773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}