When we recently redesigned our website, we wanted the team’s profile photos to convey more than just their appearance. Everyone has a unique personality that static images struggle to capture. Short video clips seemed the obvious solution but the huge file sizes and long download times were completely unacceptable. We had to put on our thinking caps, and as a leading digital marketing agency in Dubai, it turns out we were up to the challenge!
With conventional video formats out of the question, it was time to reacquaint ourselves with the ageing yet ever versatile GIF (graphics interchange format). This brought file sizes into more reasonable territory, but the issue was essentially the same: Finding the optimal balance between file size and image quality.
We also had to bear in mind the limited memory available on mobile devices. Loading even a few large GIFs quickly overwhelms most mobile devices – we had to profile 30 or more team members!
We solved the memory issue first – by designing the GIFs to load on demand. Profiles would be accompanied by static thumbnails, and the heavier animated GIFs would load only if someone hovered over the image or tapped it. We also experimented with colour palettes as a way of reducing file sizes. Fortunately, classic B&W imagery was not only the most economical but also the most elegant.
With the basics in place it was time to capture the team’s faces and emotions. In hindsight, our first shoot was hugely optimistic. We shot with full motion, with the intention of creating seamless loops. Everyone was allowed to do whatever they wanted within the frame. The results looked great but the files were massive.
A second shoot was organised and we imposed some restrictions on the movements that people were allowed. This didn’t go according to plan either. Some of the movements became so subtle that they were easily missed. And while file sizes did reduce somewhat, the decrease was not in proportion to the emotion that we had sacrificed. It was back to the drawing board.
By now we were starting to wonder if perhaps we were chasing the unattainable. But, staying true to an inspired creative goal is all about perseverance and we just weren’t ready to give up. The breakthrough came when our research chanced upon promotional “cinemagraphs” for the TV show ‘House of Cards’. The technique involved isolating motion in an otherwise frozen frame. And it looked great!
Initial tests to replicate the technique were a hit. File sizes dropped dramatically and we had more room to optimise image quality. We also decided to soften our stance on looping. Movements that loop naturally would loop, and those that didn’t would stop at the end. This decision didn’t detract from the overall look that we were aiming for.
Isolating movements against the white background was easy, but isolating movements that overlapped the face or body was far trickier. As we found out, it’s impossible for the body to remain perfectly still. Even for the few seconds that our people were being filmed, there would always be subtle body or head movements.
We thus had to devise a few carefully positioned masks that helped us cover up small unintentional movements. Excessive movements would require the whole area to be included as part of the “active” frame and thus increase the file size. As a final touch, we chose to slow everything down to about half speed. This added just the right amount of drama and a hint of poetry!
The end result as it appears on our website speaks for itself. But it also says a lot about what a dedicated and talented team can achieve if they put their mind to it. And perhaps the parting shot is that old adage: If at first you don’t succeed…