Alle (SVG) Images in einer CSS Datei.

Die Ausgangslage

Wärend des Besuchs einer Website werden in der Regel einige bis viele Bilddateien geladen. Bei einer Standard-Einbindung von Bildern werden diese einzeln und meist asynchron geladen.

Dies verursacht entsprechend viele Anfragen des Browser an den Server und Antworten des Servers zurück an den Browser, genannt HTTP Request/Response, die für die Gesamtzeit eines Ladevorgangs mitverantwortlich sind.
(Mit fortschreitender Einführung von HTTP/2 könnte sich dieser Umstand in Zukunft allerdings deutlich verbessern.)

Klassische Optimierungs-Möglichkeiten

um möglichst nur 1 einzelnen HTTP Request für alle statischen Bilder (wie Hintergründe, Icons, Logos, Hover-Zustände, etc.) zu benötigen:

• Image Sprite: alle Bilder in einem einzigen großen Image Datei.
  (Veraltet und lässt sich nicht auf SVG anwenden)
• Bilder in base64 encoden (und z.B. direkt im HTML Quellcode mitschicken)
• Webfont Icons

Base64 in CSS einbinden

In base64 konvertierte Bilder (auch und vor allem SVG Grafiken), lassen sich in CSS  wiedergeben und somit zusammenfassen. Eine CSS Datei – diverse Images:

/*sprite.css*/

.icon-phone-mob {
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yLDIwYzAsOS45NDEsOC4wNTksMTgsMTgsMThzMTgtOC4wNTksMTgtMThjMC05Ljk0MS04LjA1OS0xOC0xOC0xOFMyLDEwLjA1OSwyLDIwTDIsMjB6IE0wLDIwQzAsOC45NTQsOC45NTQsMCwyMCwwczIwLDguOTU0LDIwLDIwcy04Ljk1NCwyMC0yMCwyMFMwLDMxLjA0NiwwLDIwTDAsMjB6IE0yMi42MjksMTEuODg2bDAuNTcyLTEuODI5YzIuMjg1LDAuNjg2LDQuMzQyLDIuMjg2LDUuNTQzLDQuNTcxYzEuMjU2LDIuMjg2LDEuNDI4LDQuODU3LDAuNzQyLDcuMTQzbC0xLjc3Mi0wLjUxNGMwLjUxNS0xLjg4NywwLjM5OS0zLjk0NC0wLjU3MS01Ljc3MkMyNi4xMTQsMTMuNjU3LDI0LjUxNCwxMi40LDIyLjYyOSwxMS44ODZMMjIuNjI5LDExLjg4NnogTTIxLjcxNSwxNC45MTRsMC41MTQtMS43MTRjMS41NDMsMC40NTgsMi44NTcsMS40ODYsMy42NTgsMi45NzJjMC44NTYsMS40ODYsMC45NzEsMy4xNDMsMC41MTQsNC42ODZsLTEuNzcxLTAuNTE2YzAuMzQ0LTEuMDg1LDAuMjI5LTIuMjg1LTAuMzQyLTMuMzEzQzIzLjcxNSwxNS45NDMsMjIuODAxLDE1LjI1NywyMS43MTUsMTQuOTE0TDIxLjcxNSwxNC45MTR6IE0yMC41MTUsMTkuMDg2bDAuODU2LTIuODU4YzAuNjg2LDAuMjI5LDEuMzcxLDAuNzQzLDEuNzE2LDEuNDI5YzAuMzk5LDAuNzQzLDAuNDU2LDEuNTQyLDAuMjI4LDIuMjg2TDIwLjUxNSwxOS4wODZMMjAuNTE1LDE5LjA4NnogTTIzLjU0MywzMS4xOTljLTEuNDg2LDAuNjg3LTQuOTcxLDIuNjg2LTEwLjUxNC04LjRjLTUuNTQzLTExLjAyNy0xLjg4Ni0xMi43NDItMC41MTUtMTMuNDg0bDItMS4wMjlsMy4zMTUsNi42MjhsLTEuOTQzLDAuOTcyYy0yLjExNCwxLjE0MywyLjIyOSw5Ljc3MSw0LjM0Myw4LjY4NWMwLjExNSwwLDEuOTQzLTAuOTcxLDEuOTQzLTAuOTcxbDMuMzcxLDYuNTcyTDIzLjU0MywzMS4xOTlMMjMuNTQzLDMxLjE5OXoiLz48L3N2Zz4=);
}
.icon-mail-mob {
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yLDIwYzAsOS45NDEsOC4wNTksMTgsMTgsMThjOS45NDEsMCwxOC04LjA1OSwxOC0xOGMwLTkuOTQxLTguMDU5LTE4LTE4LTE4QzEwLjA1OSwyLDIsMTAuMDU5LDIsMjBMMiwyMHogTTAsMjBDMCw4Ljk1NCw4Ljk1NCwwLDIwLDBzMjAsOC45NTQsMjAsMjBzLTguOTU0LDIwLTIwLDIwUzAsMzEuMDQ2LDAsMjBMMCwyMHogTTkuNzE0LDE1Ljc3MkwyMCw3Ljk0M2wxMC4yODUsNy44Mjl2MTIuNzQ0SDkuNzE0VjE1Ljc3Mkw5LjcxNCwxNS43NzJ6IE0yMCwxOS40ODZsLTcuMjU3LDcuMjU3aDE0LjQ1NkwyMCwxOS40ODZMMjAsMTkuNDg2eiBNMTUuNzE0LDIxLjI1OEwxMS40MjgsMTh2Ny41NDNMMTUuNzE0LDIxLjI1OEwxNS43MTQsMjEuMjU4eiBNMjcuOTQzLDE2LjI4NkwyMCwxMC4xNzJsLTgsNi4wNTdsNC45NzIsMy44MjlMMjAsMTcuMDI5bDMuMDI4LDMuMDI5TDI3Ljk0MywxNi4yODZMMjcuOTQzLDE2LjI4NnogTTI0LjIyOSwyMS4zMTVsNC4yODUsNC4yODVWMThMMjQuMjI5LDIxLjMxNUwyNC4yMjksMjEuMzE1eiIvPjwvc3ZnPg==);
}
.icon-xing-mob {
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDIwQzAsOC45NTQsOC45NTMsMCwyMCwwczIwLDguOTU0LDIwLDIwcy04Ljk1MywyMC0yMCwyMFMwLDMxLjA0NiwwLDIwTDAsMjB6IE0yLDIwYzAsOS45NDEsOC4wNTksMTgsMTgsMThzMTgtOC4wNTksMTgtMThjMC05Ljk0MS04LjA1OS0xOC0xOC0xOFMyLDEwLjA1OSwyLDIwTDIsMjB6IE0xNS43ODcsMTVsMi41MzksMy45NEwxNC42NDMsMjVoLTQuMDk2bDMuNjg2LTYuMDQ2TDExLjY3LDE1SDE1Ljc4N0wxNS43ODcsMTV6IE0yMi40OCwzMGwtNC40MzgtOC4wNTVMMjQuNzcsMTBoNC4xMTFsLTYuNzI3LDExLjk0NUwyNi41NDcsMzBIMjIuNDhMMjIuNDgsMzB6Ii8+PC9zdmc+);
}
.icon-linkedin-mob {
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yLDIwYzAsOS45NDEsOC4wNTksMTgsMTgsMThzMTgtOC4wNTksMTgtMThjMC05Ljk0MS04LjA1OS0xOC0xOC0xOFMyLDEwLjA1OSwyLDIwTDIsMjB6IE0wLDIwQzAsOC45NTQsOC45NTUsMCwyMCwwczIwLDguOTU0LDIwLDIwcy04Ljk1NSwyMC0yMCwyMFMwLDMxLjA0NiwwLDIwTDAsMjB6IE0xNS40OCwxMi4wNzVjMCwxLjA4NS0wLjg2OSwxLjk2NC0xLjk0NywxLjk2NHMtMS45NDktMC44NzctMS45NDktMS45NjRjMC0xLjA4NiwwLjg3MS0xLjk2NCwxLjk0OS0xLjk2NFMxNS40OCwxMC45OTEsMTUuNDgsMTIuMDc1TDE1LjQ4LDEyLjA3NXogTTIxLjMyOCwxNS45NzN2Mi4xM2MxLjY5OS0zLjE0OSw3Ljc5Ny0zLjM4Myw3Ljc5NywzLjAxN3Y2LjU0OEgyNS4yM1YyMi4wOWMwLTMuNjY2LTMuOTAyLTMuMzU1LTMuOTAyLDB2NS41NzdIMTcuNDNWMTUuOTczSDIxLjMyOEwyMS4zMjgsMTUuOTczeiBNMTUuNDgsMTUuOTczdjExLjY5NGgtMy44OTZWMTUuOTczSDE1LjQ4TDE1LjQ4LDE1Ljk3M3oiLz48L3N2Zz4=);
}

« Zurück