Improving Imgur’s First Touch Experience on mobile web with a new GIFm. (A suggestion)

For a product like Imgur, first impressions are everything when it comes to converting a one-time visitor to a loyal, daily active user. For us this is especially true on mobile web, since many of our impressions come from users hitting images from other mobile apps.

We pride ourselves on our content and community; but on Imgur’s mobile website, we sometimes fall short of conveying those values on first load of the site. Below is a post with GIFm, a GIF that we incrementally compress until the file is under 2MB in order to improve load times and minimize mobile data usage (original GIF size of example: 28.9MB).

The reason we originally opted to do this instead of using GIF video was to avoid issues with autoplay inconsistencies, as well as avoid muting other apps’ audio when viewing (so a user could listen to her music while browsing). The quality, though, is simply bad.

Although, this was done with the best of intentions, this leads a user to have to hit the “HD” button in order to actually see the content which defeats the purpose of it. This also leads to a bad first impression because many users don’t think to look for a way to get a higher quality image…they expect it to be there.

I suggest we rethink this part of our mobile experience.

For my hack-a-thon, I researched another possible option for GIFm using our pre-existing tools of ffmpeg and ImageMagick.

The Goals of new GIFm:

1. Preserve the quality of content while keeping the file size close to that of the current GIFm.
2. Avoid interrupting audio from other apps.
3. Make autoplay consistent across devices and browsers.
4. Add a splash of joy and surprise to the GIF experience on Mobile.

The Hack

In my research, I came across a Github repo named Canvid, which aimed for the same goals. Their initial approach was to output one single image with all the frames included, then iterate through that image frame by frame in a canvas element like a video.

I started out using this approach with a recent image (added below) in our gallery titled: “Imgur’s Help Desk”. This content is actually really thoughtful and well done, but on mobile web the first impression is that of bad content.

When combined into a single image at 5 frames per second at the same 250px width the image came out to be 4.6MB.

In my opinion, this was an acceptable file size for the quality and the length of the GIF. The only problem was that iOS devices down sample large images in order to avoid large file manipulation on a web page…

Down sampled image compared to GIFm on iOS

Welp, that is less than ideal. “I guess improving GIFm is impossible; after all what else could I do to fix that issue, ” I vented to my friend, Carlos. I simmered for about 10 minutes and went to listen to poetry on Youtube. As I was listening, I noticed my open console continually working in the network tab with the streaming video. There was my answer, chunk the content into manageable pieces. This would also allow the ability to load in images as needed which will make first load of the GIFm much faster since the images will be smaller. (Below is 1 of 20 4x8 images that has a file size of 195kb at 10fps.)

With a quick edit to the Canvid script I was able to see if this would work on iOS. It did and I could make the images bigger with better quality (compression will lose some quality from original):

(From top to bottom) Canvas GIFm at 4.5MB, original GIFm at 1.7MB, original GIF at 51MB (not seen is video size at 28mb)

With this development, I felt this hack met the requirements of the first 3 goals. But another possibility now came to mind, we could offer a surprise to the user and allow them more control over the GIF, which no one else does (unless they only utilize native video controls).

So for my final goal I designed up a quick player that comes up when you tap and drag on these elements to allow for “seeking”:

This may seem insignificant, but it is an interaction that makes you feel as if you control the content and your experience; and gives you a splash of joy as you keep rewinding back to that moment that makes you giggle. This is an interaction that we can also implement on videos and can give us a signature GIF experience across all platforms.

The pieces left to polish this project would be to:

1. Add lazy loading of images.
2. Add buffering for slow connections.
3. Develop the GIF seek interaction

Update:

Since writing this article, Imgur has removed GIFm from the mobile site (I was lucky enough to help do that). Although, we still haven’t addressed other concerns such as audio takeover, I am proud of our teams iteration and progress.

I wanted to still publish this so that I can document my process on this personal project.