{"id":1504,"date":"2011-03-04T16:26:50","date_gmt":"2011-03-04T15:26:50","guid":{"rendered":"https:\/\/www.omsag.de\/blog\/?p=857"},"modified":"2019-01-16T11:47:44","modified_gmt":"2019-01-16T10:47:44","slug":"google-page-speed-css-sprites-vs-image-maps-teil-2","status":"publish","type":"post","link":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/","title":{"rendered":"Google Page Speed \u2013 CSS Sprites vs. Image-Maps (Teil 2)"},"content":{"rendered":"<p><em>Teil 2 unserer Serie \u2013 Page Speed Optimierung:<\/em><br \/>\nIm ersten Teil unserer Page-Speed Optimierungsreihe sind wir auf den Umgang von CSS &#8211; Dateien in einer Website und die dadurch hervorgerufene Minimierung von HTTP &#8211; Requests (s. Round-trip time ) eingegangen, um die Ladezeit einer Website zu verringern. CSS selbst l\u00e4sst sich aber auch wunderbar zur Minimierung dieser HTTP &#8211; Requests nutzen.<!--more--> Hintergrund hierbei ist, wie auch bereits im vorherigen Teil beschrieben, dass der Browser die meisten Dateien einer Website nicht parallel, sondern nur nacheinander herunterladen kann und f\u00fcr jede neue Datei eine separate Anfrage an den Server stellen muss. Um diese Begebenheit zu umgehen, sollte man gerade bei Websites bzw. Shopsystemen mit einer gro\u00dfen Anzahl an Bildern auf CSS Sprites oder Image Maps zur\u00fcckgreifen.<\/p>\n<p>Google selbst empfiehlt \u00fcber sein Firebug-Addon die Verwendung von CSS Sprites, um eine Verbesserung der Ladezeit zu erwirken.<\/p>\n<p><span style=\"color: #5ea835; font-size: 1.4em; font-family: Verdana;\">\u201eCSS Sprites\u201c<\/span><\/p>\n<p>Bereits vor einigen Jahren wurden CSS Sprites in Computerspielen verwendet und sind somit nicht zur Verwendung im Web entwickelt worden. Schon damals hatte man erkannt, dass man die Geschwindigkeit der Grafikdarstellung erh\u00f6hen kann, indem man unterschiedliche Bilder zusammenf\u00fcgt und anschlie\u00dfend die einzelnen Bildbereiche anzeigt.<br \/>\nDurch die Entwicklung und die st\u00e4ndige Erweiterung von CSS kann man diese Technik mittlerweile auch ideal zur Verbesserung der Ladezeit von Websites nutzen. Ebenso wie bei den Computerspielen werden hierbei Bilder zu einem Bild zusammengefasst und \u00fcber die Angabe von Gr\u00f6\u00dfe und Position wird der gew\u00fcnschte Bildbereich definiert.<\/p>\n<p>Zum Einsatz kommen solche CSS Sprites oftmals in Websites, in denen viele Bilder mit unterschiedlichen Linkverweisen verwendet werden. (Social-Bookmarks, Landkarten, Weihnachtskalender etc..)<\/p>\n<p><span style=\"color: #5ea835; font-size: 1.2em; font-family: Verdana;\"><strong>Aufbau von einem CSS Sprite:<\/strong><\/span><\/p>\n<p><span style=\"color: #5ea835; font-size: 1.1em; font-family: Verdana;\">CSS Sprite \u2013 HTML:<\/span><\/p>\n[html]\n&lt;a href=&#8220;Linkziel&#8220; class=&#8220;bookmark&#8220; id=&#8220;sprite-blogger&#8220; &gt;&lt;\/a&gt;<br \/>\n&lt;a href=&#8220;Linkziel&#8220; class=&#8220;bookmark&#8220; id=&#8220;sprite-delicious&#8220; &gt;&lt;\/a&gt;<br \/>\n&lt;a href=&#8220;Linkziel&#8220; class=&#8220;bookmark&#8220; id=&#8220;sprite-facebook&#8220; &gt;&lt;\/a&gt;<br \/>\n[\/html]\n<p>Im Hyperlink ist eine CSS-Klasse definiert, die f\u00fcr jeden Link die gleiche Bezeichnung haben muss bzw. eine CSS-ID (Klasse ebenfalls m\u00f6glich), die jeweils eine andere Bezeichnung f\u00fchren muss.<\/p>\n<p><span style=\"color: #5ea835; font-size: 1.1em; font-family: Verdana;\">CSS Sprite \u2013 CSS:<\/span><\/p>\n[html]\n.bookmark {<br \/>\nbackground: url(bookmark.png) no-repeat;<br \/>\npadding: 0 0 0 24px;<br \/>\n}<br \/>\n[\/html]\n<p>\u00dcber die CSS-Klasse wird nun das betreffende Bild f\u00fcr den jeweiligen Link eingef\u00fcgt und der Abstand definiert.<\/p>\n[html]\n#sprite-blogger{<br \/>\nbackground-position: 0 0;<br \/>\n}<br \/>\n#sprite-delicious{<br \/>\nbackground-position: -24px 0;<br \/>\n}<br \/>\n#sprite-facebook{<br \/>\nbackground-position: -48px 0;<br \/>\n}<br \/>\n[\/html]\n<p>\u00dcber die CSS-ID wird \u00fcber die Angabe der Hintergrundposition der entsprechende Teilbereich gew\u00e4hlt.<\/p>\n<p><span style=\"color: #5ea835; font-size: 1.4em; font-family: Verdana;\">\u201eImage Maps\u201c<\/span><\/p>\n<p>\u00dcber einen Image Map oder auch verweissensitive Grafik genannt, k\u00f6nnen ebenfalls Bereiche einer Grafik separiert und mit Hyperlinks versehen werden. Anders als bei den oben beschriebenen CSS Sprites k\u00f6nnen hierbei nicht nur rechteckige, sondern auch runde bzw. frei w\u00e4hlbare Verweisbereiche in einer einzigen Bilddatei definiert werden. Somit kann man bestimmte Bereiche in einer Grafik besser abgrenzen und flexibler auf im Bild enthaltene Begebenheiten reagieren.<\/p>\n<p><span style=\"color: #5ea835; font-size: 1.1em; font-family: Verdana;\">Beispiel einer Imag Map:<\/span><\/p>\n[html]\n&lt;img src=&#8220;bookmark.png&#8220; width=&#8220;285&#8243; height=&#8220;24&#8243; usemap=&#8220;#bookmark&#8220;&gt;<\/p>\n<p>&lt;map name=&#8220;bookmark&#8220;&gt;<br \/>\n&lt;area shape=&#8220;rect&#8220; coords=&#8220;10,10,20,20&#8243; href=&#8220;#&#8220;&gt;<br \/>\n&lt;area shape=&#8220;rect&#8220; coords=&#8220;11,10,59,29&#8243; href=&#8220;#&#8220;&gt;<br \/>\n&lt;\/map&gt;<br \/>\n[\/html]\n<p>Image Maps werden \u00fcber ein Image-Tag direkt im HTML definiert. Das Einbinden einer solchen Image Map geschieht \u00fcber das Attribut usemap im oben erw\u00e4hnten Image-Tag, welches dar\u00fcber hinaus auf die Image Map verweist.<\/p>\n[html]\n&lt;img src=&#8220;bookmark.png&#8220; usemap=&#8220;#bookmark&#8220; &#8230; &gt;<br \/>\n[\/html]\n<p>Die Image Map besteht wiederum aus einem Map-Tag und einzelnen Area-Tags, womit die einzelnen Verweisbereiche definiert werden.<\/p>\n[html]\n&lt;map name=&#8220;bookmark&#8220;&gt;<br \/>\n&lt;area shape=&#8220;rect&#8220; coords=&#8220;x1,y1,x2,y2&#8243; href=&#8220;Linkverweis&#8220;&gt;<br \/>\n&lt;\/map&gt;<br \/>\n[\/html]\n<p>Die Gr\u00f6\u00dfe und die Form der verschiedenen Verweisbereiche werden schlussendlich \u00fcber die Zus\u00e4tze shape und coords im jeweiligen Map-Tag definiert. Zur Auswahl stehen hier die folgenden M\u00f6glichkeiten:<\/p>\n<p><span style=\"color: #5ea835; font-size: 1.1em; font-family: Verdana;\">Definition von einem Viereck (shape=&#8220;rect&#8220;):<\/span><\/p>\n[html]\n&lt;area shape=&#8220;rect&#8220; coords=&#8220;x1,y1,x2,y2&#8243; href=&#8220;Linkverweis &#8222;&gt;<br \/>\n[\/html]\n<p>Mit <strong>shape=&#8220;rect&#8220;<\/strong> kann eine viereckige Fl\u00e4che \u00fcber die Angabe der Eckpunktkoordinaten erzeugt werden. <strong>x<\/strong> ist hierbei der Abstand in Pixel von der linken Bildseite nach rechts gerichtet. <strong>y<\/strong> beschreibt den Abstand in Pixel zwischen der oberen Bildseite nach unten gerichtet.<\/p>\n<p><span style=\"color: #5ea835; font-size: 1.1em; font-family: Verdana;\">Definition von einem Kreis (shape=&#8220;circle&#8220;):<\/span><\/p>\n[html]\n&lt;area shape=&#8220;circle&#8220; coords=&#8220;x,y,r&#8220; href=&#8220;Linkverweis&#8220;&gt;<br \/>\n[\/html]\n<p>Mit <strong>shape=&#8220;circle&#8220;<\/strong> kann ein Kreis erzeugt werden. <strong>x<\/strong> ist hierbei der Abstand in Pixel von der linken Bildseite nach rechts gerichtet. <strong>y<\/strong> beschreibt den Abstand in Pixel zwischen der oberen Bildseite nach unten gerichtet. Diese beiden Koordinaten bilden den Mittelpunkt des Kreises und unter Angabe von <strong>r<\/strong> wird der Radius vom Kreis festgelegt.<\/p>\n<p><span style=\"color: #5ea835; font-size: 1.1em; font-family: Verdana;\">Definition von einem Polygon (shape=&#8220;poly&#8220;):<\/span><\/p>\n[html]\n&lt;area shape=&#8220;poly&#8220; coords=\u201dx1,y1,x2,y2 &#8230; xn,yn&#8220; href=&#8220;Linkverweis&#8220;&gt;<br \/>\n[\/html]\n<p>Mit <strong>shape=&#8220;circle&#8220;<\/strong> kann ein Polygon \u00fcber die Angabe der verschiedenen Eckpunktkoordinaten erzeugt werden. <strong>x<\/strong> ist hierbei der Abstand in Pixel von der linken Bildseite nach rechts gerichtet. <strong>y<\/strong> beschreibt den Abstand in Pixel zwischen der oberen Bildseite nach unten gerichtet.<\/p>\n<p>Verfasst von Christian Grzeschik, Key Account SEO Consultant<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Teil 2 unserer Serie \u2013 Page Speed Optimierung: Im ersten Teil unserer Page-Speed Optimierungsreihe sind wir auf den Umgang von CSS &#8211; Dateien in einer Website und die dadurch hervorgerufene Minimierung von HTTP &#8211; Requests (s. Round-trip time ) eingegangen, um die Ladezeit einer Website zu verringern. CSS selbst l\u00e4sst sich aber auch wunderbar zur [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[1],"tags":[88,89,90],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Teil 2 unserer Serie \u2013 Page Speed Optimierung - OMSAG<\/title>\n<meta name=\"description\" content=\"Dies ist der zweite Teil unserer Page Speed Optimierung. Dabei gehen wir speziell auf die CSS Sprites ein, die einen wesentlichen Vorteil mit sich bringen.\" \/>\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.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Teil 2 unserer Serie \u2013 Page Speed Optimierung - OMSAG\" \/>\n<meta property=\"og:description\" content=\"Dies ist der zweite Teil unserer Page Speed Optimierung. Dabei gehen wir speziell auf die CSS Sprites ein, die einen wesentlichen Vorteil mit sich bringen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Online Marketing &amp; Suchmaschinenmarketing Agentur OMSAG\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Online.Marketing.Solutions.AG\" \/>\n<meta property=\"article:published_time\" content=\"2011-03-04T15:26:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-01-16T10:47:44+00:00\" \/>\n<meta name=\"author\" content=\"Christian\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christian\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/\"},\"author\":{\"name\":\"Christian\",\"@id\":\"https:\/\/www.omsag.de\/proxy\/#\/schema\/person\/ff93c2545b7811c523d595f9a808f732\"},\"headline\":\"Google Page Speed \u2013 CSS Sprites vs. Image-Maps (Teil 2)\",\"datePublished\":\"2011-03-04T15:26:50+00:00\",\"dateModified\":\"2019-01-16T10:47:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/\"},\"wordCount\":835,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.omsag.de\/proxy\/#organization\"},\"keywords\":[\"css sprites\",\"google page speed\",\"image-map\"],\"articleSection\":[\"SEO\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/\",\"url\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/\",\"name\":\"Teil 2 unserer Serie \u2013 Page Speed Optimierung - OMSAG\",\"isPartOf\":{\"@id\":\"https:\/\/www.omsag.de\/proxy\/#website\"},\"datePublished\":\"2011-03-04T15:26:50+00:00\",\"dateModified\":\"2019-01-16T10:47:44+00:00\",\"description\":\"Dies ist der zweite Teil unserer Page Speed Optimierung. Dabei gehen wir speziell auf die CSS Sprites ein, die einen wesentlichen Vorteil mit sich bringen.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\/\/www.omsag.de\/proxy\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SEO\",\"item\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Google Page Speed \u2013 CSS Sprites vs. Image-Maps (Teil 2)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.omsag.de\/proxy\/#website\",\"url\":\"https:\/\/www.omsag.de\/proxy\/\",\"name\":\"Online Marketing & Suchmaschinenmarketing Agentur OMSAG\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.omsag.de\/proxy\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.omsag.de\/proxy\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.omsag.de\/proxy\/#organization\",\"name\":\"OMSAG\",\"url\":\"https:\/\/www.omsag.de\/proxy\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.omsag.de\/proxy\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.omsag.de\/proxy\/wp-content\/uploads\/2020\/08\/oms-logo-1.jpg\",\"contentUrl\":\"https:\/\/www.omsag.de\/proxy\/wp-content\/uploads\/2020\/08\/oms-logo-1.jpg\",\"width\":500,\"height\":148,\"caption\":\"OMSAG\"},\"image\":{\"@id\":\"https:\/\/www.omsag.de\/proxy\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Online.Marketing.Solutions.AG\",\"https:\/\/www.instagram.com\/omsag\/\",\"https:\/\/de.linkedin.com\/company\/online-marketing-solutions-ag\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.omsag.de\/proxy\/#\/schema\/person\/ff93c2545b7811c523d595f9a808f732\",\"name\":\"Christian\",\"description\":\"Christian ist Senior Consultant SEO\/SEA bei der Online Marketing Solutions AG und ist zust\u00e4ndig f\u00fcr die ganzheitliche Projekt- sowie Strategieplanung bis hin zur technischen Umsetzung (On- sowie Offsite). Er betreut Key Account-Kunden der OMSAG aus unterschiedlichsten Branchen bzw. Marktsegmenten und kann dabei auf die Erfahrung von \u00fcber 50 erfolgreichen Projekten zur\u00fcckgreifen. Au\u00dferdem ist er Google AdWords Professional und verf\u00fcgt \u00fcber das Google Analytics Individual Zertifikat\",\"url\":\"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/author\/c-grzeschik\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Teil 2 unserer Serie \u2013 Page Speed Optimierung - OMSAG","description":"Dies ist der zweite Teil unserer Page Speed Optimierung. Dabei gehen wir speziell auf die CSS Sprites ein, die einen wesentlichen Vorteil mit sich bringen.","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.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/","og_locale":"de_DE","og_type":"article","og_title":"Teil 2 unserer Serie \u2013 Page Speed Optimierung - OMSAG","og_description":"Dies ist der zweite Teil unserer Page Speed Optimierung. Dabei gehen wir speziell auf die CSS Sprites ein, die einen wesentlichen Vorteil mit sich bringen.","og_url":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/","og_site_name":"Online Marketing &amp; Suchmaschinenmarketing Agentur OMSAG","article_publisher":"https:\/\/www.facebook.com\/Online.Marketing.Solutions.AG","article_published_time":"2011-03-04T15:26:50+00:00","article_modified_time":"2019-01-16T10:47:44+00:00","author":"Christian","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"Christian","Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/#article","isPartOf":{"@id":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/"},"author":{"name":"Christian","@id":"https:\/\/www.omsag.de\/proxy\/#\/schema\/person\/ff93c2545b7811c523d595f9a808f732"},"headline":"Google Page Speed \u2013 CSS Sprites vs. Image-Maps (Teil 2)","datePublished":"2011-03-04T15:26:50+00:00","dateModified":"2019-01-16T10:47:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/"},"wordCount":835,"commentCount":1,"publisher":{"@id":"https:\/\/www.omsag.de\/proxy\/#organization"},"keywords":["css sprites","google page speed","image-map"],"articleSection":["SEO"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/","url":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/","name":"Teil 2 unserer Serie \u2013 Page Speed Optimierung - OMSAG","isPartOf":{"@id":"https:\/\/www.omsag.de\/proxy\/#website"},"datePublished":"2011-03-04T15:26:50+00:00","dateModified":"2019-01-16T10:47:44+00:00","description":"Dies ist der zweite Teil unserer Page Speed Optimierung. Dabei gehen wir speziell auf die CSS Sprites ein, die einen wesentlichen Vorteil mit sich bringen.","breadcrumb":{"@id":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-css-sprites-vs-image-maps-teil-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/www.omsag.de\/proxy\/"},{"@type":"ListItem","position":2,"name":"SEO","item":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/"},{"@type":"ListItem","position":3,"name":"Google Page Speed \u2013 CSS Sprites vs. Image-Maps (Teil 2)"}]},{"@type":"WebSite","@id":"https:\/\/www.omsag.de\/proxy\/#website","url":"https:\/\/www.omsag.de\/proxy\/","name":"Online Marketing & Suchmaschinenmarketing Agentur OMSAG","description":"","publisher":{"@id":"https:\/\/www.omsag.de\/proxy\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.omsag.de\/proxy\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.omsag.de\/proxy\/#organization","name":"OMSAG","url":"https:\/\/www.omsag.de\/proxy\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.omsag.de\/proxy\/#\/schema\/logo\/image\/","url":"https:\/\/www.omsag.de\/proxy\/wp-content\/uploads\/2020\/08\/oms-logo-1.jpg","contentUrl":"https:\/\/www.omsag.de\/proxy\/wp-content\/uploads\/2020\/08\/oms-logo-1.jpg","width":500,"height":148,"caption":"OMSAG"},"image":{"@id":"https:\/\/www.omsag.de\/proxy\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Online.Marketing.Solutions.AG","https:\/\/www.instagram.com\/omsag\/","https:\/\/de.linkedin.com\/company\/online-marketing-solutions-ag"]},{"@type":"Person","@id":"https:\/\/www.omsag.de\/proxy\/#\/schema\/person\/ff93c2545b7811c523d595f9a808f732","name":"Christian","description":"Christian ist Senior Consultant SEO\/SEA bei der Online Marketing Solutions AG und ist zust\u00e4ndig f\u00fcr die ganzheitliche Projekt- sowie Strategieplanung bis hin zur technischen Umsetzung (On- sowie Offsite). Er betreut Key Account-Kunden der OMSAG aus unterschiedlichsten Branchen bzw. Marktsegmenten und kann dabei auf die Erfahrung von \u00fcber 50 erfolgreichen Projekten zur\u00fcckgreifen. Au\u00dferdem ist er Google AdWords Professional und verf\u00fcgt \u00fcber das Google Analytics Individual Zertifikat","url":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/author\/c-grzeschik\/"}]}},"_links":{"self":[{"href":"https:\/\/www.omsag.de\/proxy\/wp-json\/wp\/v2\/posts\/1504"}],"collection":[{"href":"https:\/\/www.omsag.de\/proxy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.omsag.de\/proxy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.omsag.de\/proxy\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.omsag.de\/proxy\/wp-json\/wp\/v2\/comments?post=1504"}],"version-history":[{"count":0,"href":"https:\/\/www.omsag.de\/proxy\/wp-json\/wp\/v2\/posts\/1504\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.omsag.de\/proxy\/wp-json\/wp\/v2\/media?parent=1504"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.omsag.de\/proxy\/wp-json\/wp\/v2\/categories?post=1504"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.omsag.de\/proxy\/wp-json\/wp\/v2\/tags?post=1504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}