The Digital Agency

Liebe LeserInnen,

Der nachfolgende Beitrag wurde in gekürzter (deutscher Fassung) in der LEAD digital Nr. 22 am 30. Oktober 2013 veröffentlicht. Viel Spaß beim lesen.

A digital agency is a tech company.

This article is an examination of one aspect of what a digital agency is or should be. It is about an aspect than has some misconceptions. One of these misconceptions, perceives that digital agencies are there for making pretty images (digitally). Another comes from “serious” software companies. They often have the attitude, that digital agencies are not making “real” software. To clear these up, I will ask you to change your assumptions and accept two claims.

Firstly, a digital agency is not an advertising agency on bytes.

Although digital agencies are involved with advertising and marketing, they are making things that have programmable code.

And secondly: anything that has programmable code is software.

A digital agency understands the medium it works with and continues to adapt and grow with changing technology. The medium is not just a surface for static content or moving images. It interacts — and soon there will be little left that does not interact.

If we are creating software as soon as we start writing code, then digital agencies are involved in software processes — no matter what they are making. Therefore they not only need to understand the technology but also they (and their clients) must learn software development processes.

Paradigm change

Software is not put together on a conveyor belt. It is a creative process involving many different skills — from start to launch and beyond. Successful, creative, innovative projects require a paradigm change.

“Agile” is a buzzword that even classical agencies are starting to use. But “agile” is not just about being flexible. It is about re-thinking processes and about involvement.

Embracing change was a new thing for software developers back when people were used to writing everything down ahead of time — getting it absolutely right — before a single line of code was written. Unfortunately it is almost impossible to get it “absolutely right” at the beginning, and so agile processes emerged.

But (classical) agencies have always been used to change. Painfully so. The attitude has been, to always say “yes” to the clients wishes, no matter how late or difficult the change is. The problem here is usually misleading or missing communication, which in turn is the fault of “factory thinking” and not because a client is “fickle”.

“Factory thinking” is what happens when a client’s “order” is put on a conveyor belt through an agency, progressing through different teams who know nothing of project until it has been placed on their desk. The client sees the project again at the end of the line. Most likely, it is not quite what the client was expecting, and last minute changes and corrections are the consequence.

However the solution is quite simple: Involve everyone in the entire process.

Involvement and Partnership with the client.

At MINISTRY we have been involving our clients in the entire project process for several years now. Although some clients are still hesitant, those who have embraced this kind of partnership, have enjoyed successful and creative processes that have lead to great products.

Involvement throughout the process does not mean more work. It is a shift away from concentrating on the beginning and end of a project. Cooperation is spread over the whole process. By doing so, the risks of not being on time and of dissatisfaction, even conflict, are practically eliminated. Most last minute changes are due to misunderstandings. The agency misunderstood what the client wanted. The client was not so sure what he wanted. The client misunderstood what the agency was planning.

Involvement is a cure for this. It allows us (the agency and the client) to adapt, adjust and prioritise. We can decide together what we can change immediately, what we can do later in order to stay on time, what cannot be changed and must be accepted. The consequences of every decision are carried together.

Scrum & Co.

Methodology is a great place to start, but internalising the principles is more important. At MINISTRY we began a few years ago with “Feature Based Programming”, a method shared with us by Stefan Richter of Currently we are trying out “Scrum” for larger projects. But in their basic principles all agile processes are very similar. Here is an example of how we use them:

A project typically begins with workshops involving the client, a project manager from the agency and people who have the skills of a developer, a quality manager and a designer. The purpose of the workshops is for all to find out what the project is about, what the desired result is and what we can do to get it done. The result of this phase is not a book about the project, but rather a feature list, which describes what we plan to do — in a style and language that all participants understand. Features can be split it up into blocks and can be made into a roadmap. The important thing here is that we try to get it right from the beginning, but it is possible that some change will come with time. It is important that we define what we are going to do, not how we are going to do it. That will be decided in the next phases.

There is an important difference between this process and trying to get it “absolutely right” before programming. We define what we want to do to the best of our knowledge, but we leave room for course correction along the way, and we never say “how” we are going to something, because we often cannot know that until we get there.

The process that follows is a series of iterations and checking back with the client. Milestones can be presentations of a “clickable” prototype (wireframe), a style guide or layout. Later software releases allow the client glimpses of the real working product, where a designated set of features is already programmed. The product takes shape and is being created at the same time and the client is involved in the entire process.

This is quite different than showing pretty designs at the beginning and coming back shortly before launch to make sure that all that was done in the meantime is OK for the client.

Since designers and developers are involved in the whole process, we can assume that we are saving time by not coming up with ideas that might not work or might take too much time. Since the client is involved throughout the process we can assume that we are staying on track with what the client wants and can adjust throughout to make sure.


Some agencies have entered partnerships with tech companies. That’s fine as long as the technology partner is involved in the entire project process.

The advantage of being a true digital agency (and therefore a tech company) is that you do not have to double up. Each skill is already based on an understanding of making software, whether the consultant, the project manager or the designer — and needless to say, we have developers and testers on each project the whole time.

And if you buy my assumption about what software is, then any agency without skills in the process of making software and knowledge about technologies involved should not use the word “digital”. A digital agency that does not do software is like an automotive designer, who does not know how to build cars. You might get a lot of fantastic looking vehicles out there that don’t work, or many very similar looking functional cars.

So what is a digital agency?

Digital agencies are tech companies that are experts in making software that is enjoyable to use, nice to look at and that attracts customers. They understand software processes and can create fantastic functional interactive products. Incidentally this also has something to do with advertising and marketing in a digital world.

5 Gesetze zum Thema Employer Branding #smwEmplBrand

Im Rahmen der Social Media Week 2014 durften wir in Person von CEO Marco Luschnat einen Vortrag/Workshop zum Thema Employer Branding halten. In den gut gefüllten Räumen der MHMK stellte Marco basierend auf den Erfahrungen von AntTrail/der Ministry Group 5 Gesetze auf, die jedem helfen sollen, sein Unternehmen für erfolgreiches Employer Branding und dem folgenden Social Recruiting aufzustellen.

Marco bei der SMWHH, Fotocredit @goodplace4you
Marco bei der SMWHH, Fotocredit:

5 Gesetze für erfolgreiches Employer Branding
#1 Keep calm and stop sucking
#2 Start with why
#3 There is life beyond Facebook
#4 Mind the magic vowels
#5 Appreciate what you have

Wir bedanken uns bei den Kollegen von T3N für die Berichterstattung, die Slides der Veranstaltung Employer Branding gibt es bei Slideshare.


Twitter Use-Case: #bucciovertimechallenge

BucciovertimechallengeNach unserer Reihe über Instagram Use Cases soll heute ein Twitter Use-Case im Vordergrund stehen, erstaunlicherweise geht es wieder um Eishockey. Es handelt sich um ein wiederholbares Gewinnspiel das wunderbar die Echtzeitnatur von Twitter mit sofortigem Erfolgserlebnis für die Gewinner verknüpft. Initiator ist ESPN Eishockeykommentator John Buccigross, der seit zwei Jahren die #bucciovertimechallenge ausruft.

Denkbar einfache Ausgangslage: Geht ein Stanley Cup PlayoffSpiel in die Sudden Death-Overtime tippen Fans und Buccigross auf Twitter, wer das spielentscheidende Tor schießen wird, je Team ein Name, zusammen mit dem Hashtag #bucciovertimechallenge, ungefähr so:

Unter allen richtigen Tippern werden T-Shirts verlost, die Gewinner werden durch Retweet veröffentlicht.

Für diese Saison hat Buccigross zusätzlich noch Sponsoren wie z. B. Bauer Hockey (Equipment) und Hockey Soda (Energydrink) hinzugewonnen: Wenn der Siegtorschütze einen Bauer-Schläger spielt wird zusätzlich zu den T-Shirts auch noch ein Bauer Schläger verlost.

Ähnlich wie vor Jahren die @Gapingvoid T-Shirts von Hugh McLeod gehen auch die #bucciovertimechallenge T-Shirts auf Reisen und werden fotografiert und getwittert.

Ganz schon viel Aufwand, aber wofür? Zunächst einmal ist die Aktion Werbung für den Eishockey-Sport, gleichzeitig bringt sie nebenbei die Fan-Community um den ESPN-Moderator näher zusammen (>150.000 Follower). Dies zahlt zwar unmittelbar mehr auf seine eigene Marke ein, allerdings ist er für die nächsten fünf Jahre unter Vertrag, so dass der Sender massiv davon profitiert.

Darüber hinaus ist es auch eine Charity-Aktion, die über Verknappung funktioniert. Bei bisher knapp 40 Überzahlspielen in den diesjährigen Playoffs wurden knapp 100 T-Shirts verlost, die Nachfrage ist allerdings viel größer. Also kann man die T-Shirts auch über Buccigross bestellen, sämtlicher Überschuss geht an wohltätige Zwecke.

Instagram Use Case: General Electric

In Teil 3 unserer Reihe über Instagram-Profile (Teil 1 war das Profil der NHL, Teil 2 Roadcase-Designer Christopher Shalhoub) blicken wir auf General Electric (GE). GE ist in Bezug auf Social Media bei allen Plattformen sehr früh und sehr intensiv dabei: Ob Twitter, Facebook, YouTube,  Pinterest oder eben Instagram, GE ist vertreten und pflegt diese Profile auch sehr aktiv.

General Electric Instagram

Im Gegensatz zu den beiden bisher vorgestellten Profilen ist GE nicht monothematisch sondern bietet Fotos aus vielen Geschäftsbereichen. Man bekommt Eindrücke unter anderem aus Forschungslaboren, Luftfahrt, Erneuerbaren Energien und dem GE Leben.

Bildschirmfoto 2013-05-21 um 13.48.16Die Vielfalt hat zur Folge, dass die Interaktionsraten nicht ganz so hoch sind sondern fast immer unterhalb 1% bleiben. Das folgende außergewöhnliche Foto bildet mit 1,8% die große Ausnahme.

Bildschirmfoto 2013-05-21 um 13.47.28Gut gemacht ist die Verknüpfung der verschiedenen Profile unter einander. So wird das Ende des aktuellen TV-Spots „Agent of Good“ auch auf Instagram weiter gespielt und die alles entscheidende Frage auch der Community dort gestellt.

Bildschirmfoto 2013-05-21 um 13.46.05

Instagram Use Case: Christopher Shalhoub

Teil 2 unserer Reihe über interessante Instagram-Profile (Teil 1 war das Profil der NHL). Christopher wer?Instagram Christopher Shalhoub

 Christopher Shalhoub ist ein Roadcase-Designer und -Manufakteur aus New Jersey, USA.  Die meisten seiner Kunden stammen aus der Musikindustrie, er baut aber auch Cases für alle möglichen Branchen wie z.B. Medizin- und Sportgerät. Er postet Fotos seiner Arbeit, nicht mehr und nicht weniger, quasi #Foodporn für Musiker.


Er hat fast 4.500 Follower und erreicht regelmäßig eine Interaktionsrate von 10%, das Foto oben sogar 17%. Dadurch wächst seine Fanbase organisch, er ist aber auch selbst aktiv und sucht nach verwandten Hashtags wie z. B. Markennamen von Verstärker- und Insrumentenherstellern und fügt Nutzer hinzu, die sich dann über die „Sie haben einen neuen Follower“-Benachrichtigung sein Profil anschauen und hängen bleiben. Durch seinen sehr monothematischen Feed weiß man sofort, was man zu erwarten hat und die „Ich folge Dir damit Du mir folgst“-Taktik (früher sehr beliebt auf Twitter) funktioniert somit besser als bei einem bunten Mix aus Bildern.

Guitartech Techbox

Warum pflegt er ein Instagram-Profil? Das ist sein Akquise-Tool (gemeinsam mit Twitter, wo er die Bilder auch postet). Fast neben jedem Bild gibt es begeisterte Anfragen von Instagram-Fans, die auch so ein Case haben wollen. Und jedes Mal bittet Christopher höflich darum, via Email Kontakt aufzunehmen.

Manchmal hilft er auch Kunden ihr Equipment zu verkaufen, natürlich inklusive der Cases, die er gebaut hat.

Roadcase Marshall Speaker

Klassische, durch visuelle Effekte ansprechende, Instagram-Fotos kann er auch.


 Unserem Autor gefällt außerdem besonders gut, dass er beim Schweißen eine Eishockeytorhütermaske trägt.

Christopher Shalhoub

Instagram Use Case: NHL

Instagram ist auch nach dem Verkauf an Facebook ein kleines Enigma. Offensichtlich trifft es einen Nerv, hat viele Nutzer, macht vieles richtig. Im Gegensatz zu Facebook, wo Marken/Unternehmen die Möglichkeit haben, durch Werbung in den Feed der Nutzer zu kommen, ist der Feed bei Instagram tatsächlich sehr individuell und interessenabhängig was zur Folge hat, dass man schöne Use Cases oft nicht kennt. Aus diesem Grund wollen wir hier im Blog einige vorstellen, beginnend mit der NHL.
NHL Instagram Kanal

Zur Zeit sind in der NHL Playoffs, das heißt es wird gerade ausgespielt, wer „Meister“ wird und den Stanley Cup gewinnt.


Die Verantwortlichen machen das ganz clever und spielen zum Beispiel die Rivalitäten aus, inklusive dem Hashtag #frenemies, und posten vor jedem Spiel Fotos von Freunden/Verwandten, die nicht für das gleiche Team sind.

Gleichzeitig wissen die Fans auch mit Social Media umzugehen bzw. damit zu spielen.


Die Interaktionsraten bei diesen Fotos darf man mit  5.000+ likes und durchschnittlich 200 Kommentaren als sehr hoch betiteln. Das obige Hashtag-Bild hat 400 Kommentare, das Bild unten hat Stand heute 12.000+ Likes.

PatchesDie NHL nutzt Instagram also gerade jetzt zur Playoff-Zeit ganz vorbildlich, eingeleutetwurde diese für Fans besonders feierliche Zeit mit einem Bild des heiligen Grals, dem Stanley Cup. Ergebnis: knapp 19.000 Likes, das entspricht bei 160.000 Followern einer Interaktionsrate von über 10 Prozent. Noch mal zur Erinnerung: Ohne Werbung im Feed!

Stanley Cup Wir wissen natürlich, dass die NHL von Vaynermedia betreut wird, der Firma von und Social Media Vorreiter Gary Vaynerchuk. Vaynerchuk ist dafür bekannt, seine Sicht der Dinge unverblümt und laut zu schildern, war einer der ersten, der als Experte für Social Media durch amerikanische Fernsehsendungen tingelte und wir finden es hervorragend, dass seine Firma seinen Worten Taten folgen lässt. Man darf sich bei dem NHL Instagram-Feed gern das ein oder andere abgucken…

AllFacebook Marketing Conference: Ein Tag Facebook, ein Tag voller Antworten

Insgesamt 13 Vorträge mit dem Kerninhalt Facebook sorgten mehrheitlich für gute Unterhaltung, zeigten viele Stolpersteine auf und gaben teils wertvolle Tipps für Unternehmer, aber auch Social Media Experten. Auch schön ist, dass ihr fast alle Präsentationen hier findet. Daher verzichte ich auf weitere Verlinkungen im Beitrag.

AllFacebook Marketing Conference (Bild von
AllFacebook Marketing Conference (Bild von

Zu Beginn der Veranstaltung gab es einen erfrischenden Beitrag von Gerald Hensel (S&F), der auf den Tag mit und um Facebook einstimmte. In 10 Punkten zeigt er die typischen Fehler von Unternehmen mit dem Medium Facebook auf. Und er machte Lust auf mehr.

Leider konnte das Niveau nicht gehalten werden und der Kollege von Facebook, Moritz Schäufele, spielte sich mit einer schwachen Vorstellung über das PMD selbst ins Abseits. Anschließende kritische Fragen wurden vornehmlich mit „Das ist nicht mein Kerngebiet, da fragt lieber jemand anderes“ beantwortet.

Die Vorträge über Facebook Ads waren für einige Unternehmer sicherlich wertvoll, wenn sie noch nie Ads geschaltet haben. Ansonsten wurden nicht mehr als die Basics erklärt und erwähnt, dass iCrossing bzw. AdPalor tolle Ad-Tools haben. Gehört meiner Meinung nach nicht zwingend auf eine Konferenz.

Über den Tag verteilt durften Lufthansa Cargo, Telefonica – O2 mit Interone sowie eBay mit Sellaround ihre Praxisbeispiele präsentieren.

Auch wenn bei Lufthansa Cargo ein „B2B“ im Titel des Vortrags zu finden war, ging es doch generell um Fans der Luftfahrt und weniger um mögliche Kunden, was schade war. Trotzdem zeigten sie auf, dass Social Media vom ganzen Unternehmen getragen werden muss und die besten Inhalte doch oft bei den eigenen Mitarbeitern zu finden sind.

O2 hingegen nutzt die unterschätzten Tabs und verwandelt Facebook zum „Browser“. Durchaus interessanter Ansatz, doch als gerade meine Neugier geweckt war, wurde das Prinzip von Thorsten Habermann und Christian Clawien (übrigens auch schon auf der Next13 mit dem Thema Big Data zu finden gewesen) sehr kritisch reflektiert. Manchmal dann doch bitte zu seinen eigenen Ideen und Konzepte stehen.

Und letztlich gab es noch den Beitrag von eBay und Sellaround, der mich leider nicht erreicht hat. Der Vortrag begann wenig spannend, so dass ich die Chance zum Netzwerken außerhalb des Raumes nutzte.

Eines der Hauptthemen war die steigende mobile Nutzung von Facebook, bereits 35% der Nutzer sollen vornehmlich mobil „liken“ und „sharen“. Aber kaum eine Facebook App ist optimiert für die mobile Nutzung. Und das ist sehr erschreckend. Sicherlich ist es immer eine Frage des Budgets, doch zumindest eine Fallbackseite sollte drin sein, und das dauert keine 4 Stunden. Hervorragend aufgearbeitet haben es vor allem Jasper Krog und Christian Lee Rottmann von Edelman Digital, der wohl größten Social Media Agentur.

Unter Berücksichtigung der mobilen Nutzung stirbt laut Michael Kamleitner (Die Socialisten) der klassische Gewinnspiel Tab aus. In seiner sehr guten Präsentation zeigt Kamleitner, dass Gewinnspiele in Kombination mit Open Graph unglaublich viel Potential entwickeln können, wird jedoch 1/3 des Potentials auf Grund falscher Konzeption und Programmierung verschenkt. Da Gewinnspiele immer noch ein gutes Zugpferd zur Fangewinnung sind, war der Beitrag sehr wertvoll für uns.

Nach der Fangewinnung ist vor dem ROI. Oder: Welcher meiner Fans wird zum Kunden? Und wie hoch liegt der CPR?

Martin Szugat von SnipClip hat hier reichlich Erfahrung gesammelt und diese mit uns geteilt. In seinem Vortrag zeigte er die Problematiken des klassischen Funnels auf, welche Metriken funktionieren und wie die Ergebnisse dank kleiner Anpassungen optimiert werden können. Auch wenn Szugat kein Allheilmittel aufzeigen konnte, so zeigt er den Unternehmern den richtigen Weg, ihren eigenen ROI zu finden.

CPR von Martin Szugat/SnipClip
CPR von Martin Szugat/SnipClip

Die letzten beiden Vorträge gehörten Johannes Lenz und Curt Simon Harlinghausen von AKOM360. Lenz nahm in seinem Vortrag den Newsfeed genauer unter die Lupe und erklärte diesen auch sehr gut. Seine 3 1/2 Thesen, die schon im Titel des Vortrags angekündigt waren, sind leider sehr nett ausgefallen, ein „stupid!“ am Satzende konnte ihnen auch nicht mehr Provokation einhauchen und somit zu einer regen Diskussion anregen.

Den Abschluss machte Harlinghausen und ging auf die Facebook Graph Search ein. Zuerst erklärte er die Funktionsweise von Suchmaschinen, warum Menschen suchen und was sie finden wollen. Das Schlagwort hier: Relevanz. Und wen wundert es, dass hinter der Graph Search ehemalige google Entwickler sitzen? Interessant zu wissen ist, dass die semantische Suche bei Facebook nicht auf Links basiert (wie bei google), sondern auf Basis der Nutzer und ihrer Handlungen.

Gut gemacht ist der Übergang von Information hin zu möglichen Business Cases und Tipps für Unternehmen. Wir freuen uns bereits auf die Einführung der Graph Search und den damit verbundenen Geschäftsmodellen.

Die Allfacebook Marketing Conference war inhaltlich breit aufgestellt mit dem Fokus auf aktuelle Trends und Entwicklungen und konnte damit überzeugen. Schade war, dass nach den Vorträgen das Netzwerken auf ca. eine Stunde beschränkt war. Unter anderem lag es eben nicht an den Teilnehmern, sondern an dem sehr beschränkten Ausschank und den Sponsoren, die Ihre Stände förmlich abrissen, während vielerorts noch spannende Gespräche geführt wurden. Hier wünschen wir uns eine bessere Lösung und gerne kommen wir im November wieder.

‚Here be Dragons‘ und die Ritter der Schwafelrunde

Warum heißt die Konferenz Next und hat den Untertitel Here be Dragons? Weil Sie dem Publikum Ausblick auf die Zukunft gibt, es zu Innovationen anregt und vor allem die Angst vor Drachen* nimmt. Die Angst also vor Big Data, Context, neue Interfaces, dem Markt? Ich bin mir nicht sicher. Meine Ängste heißen eher Urheberrechtsschutz, Datenschutz, Datendrosselung, Kurzlebigkeit.

Die Next 13 hat dieses Jahr nicht halten können, was sie (oder ich mir?) versprach.**
Die Next 13 hat dieses Jahr nicht halten können, was sie (oder ich mir?) versprach.**

Da sitze ich nun in einem Workshop und bekomme erklärt, wie toll doch AR, QR-Codes, RFID und NFC sind und dass ich meine Kunden damit bedienen solle, um diese langfristig für mich zu gewinnen. Oder ich höre mir im nächsten Vortrag zum wiederholten male an, dass Daten das Öl des 21. Jahrhundert sind. Nicht zu vergessen, dass im Internet of Things Gegenstände miteinander kommunizieren. Das ist Innovation! Aus den letzten Jahren, wohl gemerkt.

Trotzdem kann es spannend sein, wenn ich die Themen weiterdenke. Überlege, was ich mit den Daten oder Things machen kann, wie ich kombiniere, neue und nützliche Produkte entwickle. Aber das haben leider nur wenige vermitteln können. Alleine einige provokative Thesen oder Anregungen hätten den Großteil der Vorträge und Workshops sehenswert gemacht. Aber statt ein wenig Pioniergeist an den Tag zu legen, haben die meisten nur von ihren bisherigen Erfahrungen berichtet. Erfahrungen, die unser einer auch schon machen durfte. Auch ein Peer Steinbrück konnte mit seiner wohl kaum selbstgeschriebenen Rede nicht überzeugen. Und bevor ich nun auf die zehn oder zwölf Vorträge eingehe, die meiner Meinung nach Zeitverschwendung waren, folgend die Gewinner der Next 2013.

Hervorzuheben gilt es in diesem Fall Dan Hill mit seinem wirklich inspirierenden Vortrag „City of Sounds“. Für mich das absolute Highlight auf der Next13. Dan Hill zeigt die digitalen Missstände von Städten auf und zeigt innovative Maßnahmen von so genannten smart citizens.

„We must look somewhere else for inspiration, to the most important aspect of smart cities. That would be smart citizens.“

Empfehlenswert dann entsprechend sein Essay, der Basis für sein Vortrag war.

Weitere sehenswerte Vorträge gab es von Harper Reed (hier geht’s zum Video), welcher schlicht weg gut war, und den Kollegen vom „Design Research Team“ um Gesche Joost der Universität der Künste Berlin mit wirklich starken Ideen. Auch haben Sie aufgezeigt, wie wichtig Prototyping sein kann.

Mit Hilfe des Handschuhs können Taubstumme z.B. SMS schreiben.
Mit Hilfe des Handschuhs können Taubstumme z.B. SMS schreiben.

„Prototyping is a way of thinking and go back and forth.“


* Siehe Seite 28/29 

** Hier sei erwähnt, dass ich nicht alle Sessions gesehen habe und entsprechend nicht alles beurteilen kann.



Making of: Wie The Marmelade bewegtes Essen richtig appetitlich macht

Nachdem in diesem Jahr mehr und mehr Marketer das Credo ‚Content is King‘ für sich entdecken, wird neben der Idee und der Storyline die hochwertige Umsetzung entscheiden, ob die Message beim Kunden ankommt. Da sich die MINISTRY Gruppe in Form von 6ftRabbit ja selbst mit Bewegtbildlösungen beschäftigt halten wir auch immer die Augen auf, wenn es um innovative Firmen oder Kampagnen geht.

Die Damen und Herren von The Marmelade aus Hamburg haben ‚bewegtes Essen‘ als ihr Spezialgebiet definiert und erzielen beeindruckende Aufnahmen. Hier ein Blick hinter die Kulissen:

(via Gerald Hensel)


This article is part of a series which is continued here.

This article presents a proof of concept to greatly reduce/compress the filesize of alpha transparent PNG images via PHP without loosing the alpha information and reassembling the separated channels with the help of jQuery and HTML5 canvas.

Current evolution of HTML5, CSS3, widespread availability of broadband internet connections and (finally!) Internet Explorer 6 becoming more and more obsolete we see ourselves, at times, faced by new kinds of challenges.

As we frequently develop promotional microsites/raffles for our clients (and these kind of sites do actually have very special requirements in terms of product/brand identity and representation) we, as developers, are often forced to use huge amounts of PNG-images with full alpha-channel. Their sheer amount plus the fact that PNG is an almost uncrompessed format can become such an aforementioned challenge as you will see in the following article.

The Problem: huge filesize of PNG-images

In one of my latest projects I ended up having a page with 4.5MB of data in total which was mainly caused by one image-slider making extensive use of PNG files with alpha-channel information. The images of this slider, in fact, summed up to a total of 3.8MB alone which would lead to a loading time of approx. 20-30 seconds for a 2MBit connection! Otherwise the code was quite clean and making extensive use of CSS3 and sprites to reduce loading time and the number of requests. To put it in a nutshell: an unacceptable condition in terms of a developer’s honor.

I discussed my concerns with Christoph when he finally joked about trying to use canvas to somehow circumvent the problem of huge filesizes when being forced to use PNGs. We both had an extended laugh, at first.

The idea: separate color- and alpha-channel and reassemble them in a canvas element

I then thought about it for a moment and had an idea: Canvas could indeed be part of a possible solution if I would somehow manage to separate the image’s color-information from its alpha-channel and then save them as separate files. Due to the fact that the most problematic PNGs are those that would normally best be saved as JPG (if they did not need an alpha-channel) I was almost sure that it should be possible to save the separated color-information as JPG thus greatly reducing total filesize.

At first I did some research (always remember: Google is your friend) and found some interesting articles. None of them covered all aspects of what I wanted to achieve but they were a great source of inspiration and knowledge:

The abstract: four challenges on the way to PNG size reduction

So I ended up facing four questions needed for a simple proof of concept:

  1. Would it be easily possible to separate color- and alpha-information via PHP?
  2. Is it possible to re-combine these two channels via Javascript and the canvas-element?
  3. Is there any chance to write the combined channels back into an image?
  4. Will there be a way to circumvent the doubled amount of requests due to the separation?

1. Separating color- and alpha-information via PHP

I actually started with some far more simple code for the proof of concept but this is what I came up with in the end. In this example, I am leaving out some parts, including mainly the saving of the final images to keep it short and easy to understand. (See the end of this articles for the helper functions used in the PHP-part)

			$sourceFile = 'Path to your source-image';

			// temporary storage for alpha-colors
			$colorCache = array(127 => rgb2color(0, 0, 0, 0));

			// read width and height from source-image
			$size   = @getimagesize($sourceFile);
			$width  = $size[0];
			$height = $size[1];

			// create image from source-image
			$imageSource = @imagecreatefrompng($sourceFile);

			// create image for color-information
			$imageJpg    = @imagecreatetruecolor($width, $height);

			// create image for alpha-information
			$imagePng    = @imagecreatetruecolor($width, $height);

			// enable alpha-handling for source- and alpha image
			@imagealphablending($imageSource, false);
			@imagesavealpha($imageSource, true);
			@imagealphablending($imagePng, false);
			@imagesavealpha($imagePng, true);

			// fill color- and alpha-image
			@imagefill($imageJpg, 0, 0, rgb2color(127, 127, 127));
			@imagefill($imagePng, 0, 0, $colorCache[127]);

			// iterate over source-image
			for($x = 0; $x < $width; $x++) {
				for($y = 0; $y < $height; $y++) {
					// convert GDLib-color to RGBa-values
					$color = color2rgb(imagecolorat($imageSource, $x, $y));

					// check if color alpha is less than 127 (which means transparent)
					if($color['a'] < 127) {
						// write color-information to color-image
						imagesetpixel($imageJpg, $x, $y, rgb2color($color['r'], $color['g'], $color['b']));

						// check if alpha-color is in temporary storage
						if(!isset($colorCache[$color['a']])) {
							// put alpha-color in temporary storage
							$colorCache[$color['a']] = rgb2color(0, 0, 0, 127 - $color['a']);

						// write alpha-information to alpha-image
						imagesetpixel($imagePng, $x, $y, $colorCache[$color['a']]);

			// convert GDLib-resources to color- (as JPEG) and alpha-image (as PNG)
			$imageJpg = getImage($imageJpg, 'jpeg', true, 80);
			$imagePng = getImage($imagePng, 'png', false, 9, PNG_ALL_FILTERS);

Just to give you a quick & dirty example the following source-image (leftmost: approx. 129 KB) is split into separate color- and alpha-images (approx. 32 KB in total using 80% compression for the JPEG)zwei

Note: The background pattern assigned is not part of the images but only used to visualize transparency. All images are resized via CSS to fit the layout.

2. Re-combine color- and alpha-image via Javascript and canvas

This is the main part of the javascript I ended up with. It combines the two separate channels from their img-elements via a canvas element. Remember to process this on window load. Otherwise the result will be an empty canvas.

			<script type="text/javascript">
			var context,
				width   = 256, // width of your source-image
				height  = 256, // height of your source-image
				jpg     = '', // img-element holding color-image
				png     = '', // img-element holding alpha-image
				canvas  = document.createElement('canvas'); = 'none';
			canvas.width         = width;
			canvas.height        = height;

			context = canvas.getContext('2d');
			context.clearRect(0, 0, width, height);
			context.drawImage(jpg, 0, 0, width, height);

			context.globalCompositeOperation = 'xor';
			context.drawImage(png, 0, 0, width, height);

3. Write combined channels back into image

This is by far the simplest part as the HTML5 canvas element provides a native method to directly fetch a valid dataURL. As an example I use jQuery to create an image, assign the dataURL and append it to the document body.

			<script type="text/javascript">
			var dataURL = canvas.toDataURL('image/png');

			jQuery('<img />', { src: dataURL, alt: '' }).appendTo('body');

Look at the final outcome on the right and carefully compare it to the source PNG on the left (remember, this is 32 KB instead of 129 KB, so only 25% of the original filesize):fünf

Note: The background pattern assigned is not part of the images but only used to visualize transparency.

Savings in filesize will vary roughly between 60% to 80% reduction of the original filesize (using 80% compression for the JPEG).


4. Circumvent doubled amount of HTTP-requests due to image separation

Well, up to now everything was quite simple due to the scripts being more or less a proof of concept. As stated before I left out some parts which, to be honest, mainly dealt with exactly this problem. The solution is in fact not that complicated but would simply be too much for this part of the article. Just to give you a hint: .htaccess and modRewrite come to the rescue in the second part of this article which can now be found here.

PHP helper functions
			function rgb2color($r, $g, $b, $a = 0) {
				return ($r << 16) + ($g << 8) + $b + ($a << 24); 			} 			function color2rgb($color) { 				$return = null; 				if(preg_match('/^\d+$/', $color)) { 					$return = array( 						'r' => ($color >> 16) & 0xFF,
						'g' => ($color >> 8) & 0xFF,
						'b' => $color & 0xFF,
						'a' => ($color & 0x7F000000) >> 24,

				return $return;

			function getImage($resource, $type = 'png', $interlace = false, $quality = NULL, $filter = 248) {
				if($interlace === true) {
					@imageinterlace($resource, 1);


				switch($type) {
					case 'png':
						$quality = ($quality === NULL) ? 9 : max(0, min(9, (int) $quality));

						@imagepng($resource, NULL, $quality, $filter);
					case 'jpeg':
						$quality = ($quality === NULL) ? 100 : max(0, min(100, (int) $quality));

						@imagejpeg($resource, NULL, $quality);

				return trim(ob_get_clean());
This article is part of a series which is continued here.