Mitt arbetsflöde med base64 bilder

Idag svarade jag på en tweet från @viktorbijlenga vilket satte av en del diskussion på twitter.

För att slippa begränsningen på 140 tecken tänkte jag slänga ihop en snabb bloggpost om hur mitt nuvarande arbetsflöde ser ut med optimering och base64 bilder.

Under hela utvecklingsfasen använder jag bilder som vanligt i min CSS, men så snart jag är nöjd med utseendet går jag igenom CSS filen och gör om alla bilder som visas på alla, eller åtminstone de flesta sidor, och gör om dem till base64 inline i min CSS-fil. Stödet för detta är oväntat bra och det är i princip bara IE7 och bakåt som inte har stöd för det. Det är dock enkelt att fixa en fallback för webbläsare som inte har stödet.

När jag är klar med projektet så börjar jag med att optimera alla bilder, för det har jag ett script som ser ut såhär:

#!/bin/bash

for x in `find . -name "*png"`;do 
        optipng -o7 "$x"
        pngcrush -rem alla -reduce "$x" "$x.tmp"
        mv "$x.tmp" "$x"
done

Detta plockar i princip bort all onödig metadata och försöker optimera hur PNG bilderna är sparade för att göra dem mindre. Efter det så använder jag ytterligare ett litet script för att göra om dem till base64 kodade strängar:

#!/usr/bin/php
<?php
$b64  = base64_encode( file_get_contents( $argv[1] ) );
echo 'background-image: url(data:image/png;base64,'. $b64 .');' . "\n";

Kör jag det på en bildfil blir resultatet en färdig CSS-regel som jag kan klistra in i min CSS:

$ base64img search.png 
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAZCAAAAAAKtWG8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZ5JREFUGBkFwVlrFFEUhdFvn3uqOt0OUTAQFAXxwQl/gv//UR8VwYGEOKDEKTFdde/ZrqW+X3uVGyojMMJoO5Pd27H12roTgWQIxqWd62jV+7C9qNUy2yA53GOJ5sV55WzuNZURLrexRIWwdM3/FmNXGdlIPV2LY+ybgvSQbCOX5IywwjG26lWlBoNmVyNpLnvj/beTc91/FK2phmxIj5HViffvDu7tTz6+3ElSVNlZzlLy4+2DZ8n5qzcvYkkKuYUA8Hk+2Ox9+PDTMAfVDQ6wbb7nYZ/Tu+yjDaYhFADgo4s/k6v9znVua5GgsAF0nQ9/ufx6en0zr5qXRE4DwPHTd2fH8/n3Oz9vtZpiwdaXnQzq/nP6OW779OaLo2pF6EJftzEEsp1DenU2Pb/PktZFUCBkKUriyeP19cfaNGsEyEYAyGzvHms/xmWLSCMkKMCqOjr4tWtc64MMFKKHhEHrT27kGL3RcnJhjDGybu4d3uiKmqKN1SYRArgaUy6Xay0VMTczuo0tyy2G51aTNOWmD60jC5BlZ42smnba/AdZIR29b+jQRQAAAABJRU5ErkJggg==);

Det enda som behöver göras sedan är att lägga in den raden efter deklarationen av background, på så vis har man en fallback för äldre webbläsare:

background: transparent url(img/search.png) no-repeat center center;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAZCAAAAAAKtWG8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZ5JREFUGBkFwVlrFFEUhdFvn3uqOt0OUTAQFAXxwQl/gv//UR8VwYGEOKDEKTFdde/ZrqW+X3uVGyojMMJoO5Pd27H12roTgWQIxqWd62jV+7C9qNUy2yA53GOJ5sV55WzuNZURLrexRIWwdM3/FmNXGdlIPV2LY+ybgvSQbCOX5IywwjG26lWlBoNmVyNpLnvj/beTc91/FK2phmxIj5HViffvDu7tTz6+3ElSVNlZzlLy4+2DZ8n5qzcvYkkKuYUA8Hk+2Ox9+PDTMAfVDQ6wbb7nYZ/Tu+yjDaYhFADgo4s/k6v9znVua5GgsAF0nQ9/ufx6en0zr5qXRE4DwPHTd2fH8/n3Oz9vtZpiwdaXnQzq/nP6OW779OaLo2pF6EJftzEEsp1DenU2Pb/PktZFUCBkKUriyeP19cfaNGsEyEYAyGzvHms/xmWLSCMkKMCqOjr4tWtc64MMFKKHhEHrT27kGL3RcnJhjDGybu4d3uiKmqKN1SYRArgaUy6Xay0VMTczuo0tyy2G51aTNOWmD60jC5BlZ42smnba/AdZIR29b+jQRQAAAABJRU5ErkJggg==);
  • Med hjälp av Symfony2’s Assetic får du allt det där gratis. Det har dessutom stöd för Compass, som gör spriting barnsligt enkelt och snabbt. 🙂