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: www.goodplace.org

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.

Guitarboat

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.

Welding

 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.

Frenemies

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.

Hashtag

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 Winelibrary.tv-Macher 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.de)
AllFacebook Marketing Conference (Bild von allfacebook.de)

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)

shrinkImage

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)

			<?php
			$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');

			canvas.style.display = '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);
			</script>

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');
			</script>

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
			<?php
			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);
				}

				ob_start();

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

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

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

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

Tilman Werthschulte wechselt zu AntTrail

Tilman Werthschulte FotoTilman Werthschulte wird ab sofort das Hamburger AntTrail Team verstärken. Der studierte Kommunikations- und Multimediadesigner war zuvor vier Jahre als Projektmanager für das Aachener Unternehmen Powerflasher tätig, bevor sich dieses zur Interactive Pioneers GmbH umfirmierte. Der 29jährige übernahm dann für Interactive Pioneers in Hamburg den Posten des Team- und Projektleiters. Er verantwortete in dieser Funktion digitale Kampagnen, unter anderem für Kunden wie Heine, Nike, Converse und Yellostrom.

Tilman Werthschulte ist Experte für Social Media Tools, Social Apps, Mediaschaltung auf Facebook und Social Video Distribution. Er bringt eine große Expertise aus komplexen Projekten und vor allem technologisches Know-how mit. Für AntTrail wird er Social Media Kampagnen entwickeln, Kunden strategisch beraten und Partnerschaften mit Werbeagenturen aufbauen. Als Senior Account Manager berichtet er an den Geschäftsführer Marco Luschnat.

„Das AntTrail-Team freut sich sehr über den Zuwachs. Mit Tilman haben wir einen erfahrenen Social Media Experten gewonnen. Die Kombination aus technischem und kreativem Know-how ist unser USP. Tilman vereint beides und wir freuen uns auf erste tolle Kampagnen“ kommentiert Marco Luschnat, Geschäftsführer der AntTrail GmbH.

(diese Meldung auf anttrail.de)