{"id":245,"date":"2022-06-24T16:35:46","date_gmt":"2022-06-24T14:35:46","guid":{"rendered":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/?p=245"},"modified":"2022-07-11T13:18:30","modified_gmt":"2022-07-11T11:18:30","slug":"bilder-fuer-die-webseite-vorbereiten","status":"publish","type":"post","link":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/bilder-fuer-die-webseite-vorbereiten\/","title":{"rendered":"Bilder f\u00fcr Webseiten vorbereiten"},"content":{"rendered":"\n<p>Bilder sind ein wichtiger Bestandteil jeden Webdesigns. Sie geben dem Aussenauftritt Emotionalit\u00e4t und Charakter. Ein wichtiger Punkt f\u00fcr eine nachhaltig ansprechende Anmutung einer Website ist dabei, die Bilder optisch passend und in einer guten Qualit\u00e4t in die Webseite zu integrieren.<\/p>\n\n\n\n<p>Handelt es sich bei den verwendeten Bildern nicht um Vektorgrafiken (siehe hierzu auch unseren Artikel <a href=\"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/bildformate\/\" target=\"_blank\" rel=\"noreferrer noopener\">JPG, PNG, GIF oder SVG? Wann welches Bildformat verwendet werden sollte.<\/a>), sollten vor der Einbettung in die Website einige Punkte ber\u00fccksichtigt werden.<\/p>\n\n\n\n<p><strong>1. Ma\u00dfe<\/strong><\/p>\n\n\n\n<p>Der erste und wohl wichtigste Schritt ist, die Bilder in die passende Gr\u00f6\u00dfe zu skalieren. Im Normalfall braucht man kein 4K-Bild mit 3.840 Pixeln Gr\u00f6\u00dfe. \u00dcbergro\u00dfe Bilder verlangsamen die Website vielmehr und bringen bei umfangreicheren Onlinepr\u00e4senzen die Speicherkapazit\u00e4ten des Webservers auch mal an seine Grenzen. Achten Sie bei den Abmessungen des Bildes aber auch darauf, dass sich die Ma\u00dfe je nach Endger\u00e4t (Desktop, Tablet oder Handy) ver\u00e4ndern k\u00f6nnen. Es kann also durchaus vorkommen, dass ein Bild auf dem Desktop-Rechner kleiner abgebildet wird, als z.B. auf einem Tablet. Fragen Sie hier im Zweifelsfall bei Ihrer Webagentur nach, welche Abmessungen das zu verwendende Bild haben soll.<\/p>\n\n\n\n<p><strong>2. Aufl\u00f6sung<\/strong><\/p>\n\n\n\n<p>Neben den Abmessungen ist auch die Aufl\u00f6sung des Bildes von Bedeutung. Gemessen wird diese in ppi (Pixel per Inch) bzw. dpi (Dots per Inch). Um es an dieser Stelle nicht unn\u00f6tig kompliziert zu machen, l\u00e4sst sich sagen: F\u00fcr Webanwendungen gen\u00fcgt es im Allgemeinen Bilder in einer Aufl\u00f6sung von 72ppi (bzw. dpi) abzuspeichern. <\/p>\n\n\n\n<p><strong>3.<\/strong> <strong>Dateigr\u00f6\u00dfe<\/strong><\/p>\n\n\n\n<p>Die Dateigr\u00f6\u00dfe eines Bildes, welches in die Webseite integriert werden soll, sollte m\u00f6glichst gering sein. Um das zu ereichen, lassen sich neben der Bildgr\u00f6\u00dfe und der Bildaufl\u00f6sung die zu verwendenden Bilder auch noch komprimieren, indem man die Bildinformationen reduziert. HIerf\u00fcr gibt es zahlreiche kostenfreie Tools im Internet, die JPG- oder auch PNG-Dateien nahezu verlustfrei komprimieren. Die wohl bekannteste Seite daf\u00fcr ist <a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">TinyPNG.com<\/a>.<\/p>\n\n\n\n<p><strong>4. SEO<\/strong><\/p>\n\n\n\n<p>Bevor das Bild eingebunden wird, sollte man sich auch Gedanken \u00fcber die Benamung machen. Wenn man suchmaschinenoptimiert (SEO) arbeiten m\u00f6chte, ist der Bild-\/Dateiname wichtig. Der Dateiname sollte dabei die potentiellen Suchbegriffe der dazugeh\u00f6rigen Seite enthalten und idealerweise dar\u00fcber hinaus auch das Bild beschreiben.<\/p>\n\n\n\n<p>Sollten Sie noch weitergehende Fragen zu diesem oder anderen Themen haben, helfen wir Ihnen gerne weiter. <a href=\"https:\/\/www.butterfisch-werbeagentur.de\/#kontakt\" target=\"_blank\" rel=\"noreferrer noopener\">Melden Sie sich einfach bei uns!<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bilder sind ein wichtiger Bestandteil jeden Webdesigns. Sie geben dem Aussenauftritt Emotionalit\u00e4t und Charakter. Ein wichtiger Punkt f\u00fcr eine nachhaltig ansprechende Anmutung einer Website ist dabei, die Bilder optisch passend und in einer guten Qualit\u00e4t in die Webseite zu integrieren. Handelt es sich bei den verwendeten Bildern nicht um Vektorgrafiken (siehe hierzu auch unseren Artikel [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-245","post","type-post","status-publish","format-standard","hentry","category-grafik"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bilder f\u00fcr Webseiten vorbereiten - Butterfisch-Werbeagentur Blog<\/title>\n<meta name=\"description\" content=\"Bilder f\u00fcr die Webseite vorbereiten - Wichtig ist dabei, wie die Bilder in die Webseite integriert werden. Ma\u00dfe und Gr\u00f6\u00dfe sind entscheidend.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/bilder-fuer-die-webseite-vorbereiten\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bilder f\u00fcr Webseiten vorbereiten - Butterfisch-Werbeagentur Blog\" \/>\n<meta property=\"og:description\" content=\"Bilder f\u00fcr die Webseite vorbereiten - Wichtig ist dabei, wie die Bilder in die Webseite integriert werden. Ma\u00dfe und Gr\u00f6\u00dfe sind entscheidend.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/bilder-fuer-die-webseite-vorbereiten\/\" \/>\n<meta property=\"og:site_name\" content=\"Butterfisch-Werbeagentur Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-24T14:35:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-11T11:18:30+00:00\" \/>\n<meta name=\"author\" content=\"Samuel Wellach\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Samuel Wellach\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"3\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/bilder-fuer-die-webseite-vorbereiten\/\",\"url\":\"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/bilder-fuer-die-webseite-vorbereiten\/\",\"name\":\"Bilder f\u00fcr Webseiten vorbereiten - Butterfisch-Werbeagentur Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/#website\"},\"datePublished\":\"2022-06-24T14:35:46+00:00\",\"dateModified\":\"2022-07-11T11:18:30+00:00\",\"author\":{\"@id\":\"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/#\/schema\/person\/12cd0fb11b560344e23a3be315e39699\"},\"description\":\"Bilder f\u00fcr die Webseite vorbereiten - Wichtig ist dabei, wie die Bilder in die Webseite integriert werden. Ma\u00dfe und Gr\u00f6\u00dfe sind entscheidend.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/bilder-fuer-die-webseite-vorbereiten\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/bilder-fuer-die-webseite-vorbereiten\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/bilder-fuer-die-webseite-vorbereiten\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bilder f\u00fcr Webseiten vorbereiten\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/#website\",\"url\":\"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/\",\"name\":\"Butterfisch-Werbeagentur Blog\",\"description\":\"Eine weitere WordPress-Website\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/#\/schema\/person\/12cd0fb11b560344e23a3be315e39699\",\"name\":\"Samuel Wellach\",\"url\":\"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/author\/samuel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bilder f\u00fcr Webseiten vorbereiten - Butterfisch-Werbeagentur Blog","description":"Bilder f\u00fcr die Webseite vorbereiten - Wichtig ist dabei, wie die Bilder in die Webseite integriert werden. Ma\u00dfe und Gr\u00f6\u00dfe sind entscheidend.","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:\/\/www.butterfisch-werbeagentur.de\/Blog\/bilder-fuer-die-webseite-vorbereiten\/","og_locale":"de_DE","og_type":"article","og_title":"Bilder f\u00fcr Webseiten vorbereiten - Butterfisch-Werbeagentur Blog","og_description":"Bilder f\u00fcr die Webseite vorbereiten - Wichtig ist dabei, wie die Bilder in die Webseite integriert werden. Ma\u00dfe und Gr\u00f6\u00dfe sind entscheidend.","og_url":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/bilder-fuer-die-webseite-vorbereiten\/","og_site_name":"Butterfisch-Werbeagentur Blog","article_published_time":"2022-06-24T14:35:46+00:00","article_modified_time":"2022-07-11T11:18:30+00:00","author":"Samuel Wellach","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"Samuel Wellach","Gesch\u00e4tzte Lesezeit":"3\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/bilder-fuer-die-webseite-vorbereiten\/","url":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/bilder-fuer-die-webseite-vorbereiten\/","name":"Bilder f\u00fcr Webseiten vorbereiten - Butterfisch-Werbeagentur Blog","isPartOf":{"@id":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/#website"},"datePublished":"2022-06-24T14:35:46+00:00","dateModified":"2022-07-11T11:18:30+00:00","author":{"@id":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/#\/schema\/person\/12cd0fb11b560344e23a3be315e39699"},"description":"Bilder f\u00fcr die Webseite vorbereiten - Wichtig ist dabei, wie die Bilder in die Webseite integriert werden. Ma\u00dfe und Gr\u00f6\u00dfe sind entscheidend.","breadcrumb":{"@id":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/bilder-fuer-die-webseite-vorbereiten\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.butterfisch-werbeagentur.de\/Blog\/bilder-fuer-die-webseite-vorbereiten\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/bilder-fuer-die-webseite-vorbereiten\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/"},{"@type":"ListItem","position":2,"name":"Bilder f\u00fcr Webseiten vorbereiten"}]},{"@type":"WebSite","@id":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/#website","url":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/","name":"Butterfisch-Werbeagentur Blog","description":"Eine weitere WordPress-Website","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/#\/schema\/person\/12cd0fb11b560344e23a3be315e39699","name":"Samuel Wellach","url":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/author\/samuel\/"}]}},"_links":{"self":[{"href":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/wp-json\/wp\/v2\/posts\/245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/wp-json\/wp\/v2\/comments?post=245"}],"version-history":[{"count":23,"href":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/wp-json\/wp\/v2\/posts\/245\/revisions"}],"predecessor-version":[{"id":708,"href":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/wp-json\/wp\/v2\/posts\/245\/revisions\/708"}],"wp:attachment":[{"href":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/wp-json\/wp\/v2\/media?parent=245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/wp-json\/wp\/v2\/categories?post=245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.butterfisch-werbeagentur.de\/Blog\/wp-json\/wp\/v2\/tags?post=245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}