Saving Kellogg’s Bites

Let me set the scene, It’s Tuesday night 23:10 and I’m having a Facebook messenger conversation with our Senior Developer, MH, about a brand I’m working on. I’m bouncing some ideas off him and and he asks if I have seen the new Kellog’s branding.

I have seen the Kellog’s branding although hadn’t visited their site. Off I Snap, Crackle and Popped to Kelloggs.co.uk and was hit with a lovely view:

The font use, the logo, the subdued colours on the ubiquitously used hero slider, all very very nice. Plenty of white space etc. But then it hit me, and I replied to MH:

I can’t take their site seriously, their contact us button is pixelated.

JC, 23:25 – 22 October 2019

I downloaded the button to find it was a PNG file. I jokingly said to MH; ‘we could save them serious bites’ ( instead of bytes lololol) and that was the birth of this blog post.

I was equally impressed and disappointed to find that the png file I have downloaded was 1kb. A tough one to beat, I thought. I quickly made my svg, optimised it and saved it – 3kb ( actually 2.5kb). I put that in an online svg optimiser to shave me some bytes and the file was reduced -1% to 2.6kb!

A bit of playing with how I created the text and made the path and eventually I got the file down to 554 bytes, almost half their png button and more importantly – crystal clear.

I had no clue where to send it, I tried to submit it and our story using their online form but .svg files are not accepted in their file upload. Therefore I have sent it to their press office. Let’s be honest, I’m super confident that this is the end of the story but it was a fun exercise, a few minutes and a file cut in half.

If we could cut every file on the internet in half, then the internet would be half as big.

JC, 23:49 – 22 October 2019