Cloudinary Blog

Giant Pixel Uprising Spotted @ Cloudinary

Giant Pixel Uprising Spotted @ Cloudinary (April Fools)

TL;DR
Cloudinary played a fun April Fools prank on their customers, but there may be a prize behind the punchline. The prank could actually turn out to be a really cool new DAM customization feature – but only if you give it your thumbs up!

Cloudinary's customers woke up this April 1 to find that all the image and video thumbnails in their Digital Asset Management (DAM) Media Library had been totally pixelated, giving new meaning to the term megapixel...

Pixelated images and videos in the Media Library

It turns out that pixels across the globe felt they were underappreciated and that it was time to stand up and make the world take notice.

Webinar
Marketing Without Barriers Through Dynamic Asset Management

"Most people know that the photos and videos in their social media and favorite websites are made up of pixels, but they are so focused on the big picture that we individual pixels are almost never recognized for our role," says Dottie Kyube, the rebellion leader.

She added that she and her fellow rebels chose the Cloudinary DAM as their protest site because they’d heard that Cloudinary has thousands of customers who store millions of images and videos there. They knew this act in all Cloudinary Media Libraries this would make a significant impact world-wide.

Furthermore, Dottie and her gang knew they could rely on Cloudinary to understand their plight. In fact, we spotted Jon Sneyers, Senior Image Researcher at Cloudinary, crossing the pixel line to stand by Dottie:

"We've always known the value of a pixel", says Jon. While most people are fond of saying that pictures are worth a thousand words, Mr. Sneyers published a blog post declaring that one pixel is worth three thousand words!

The pixels were seen cheering Jon on as he pressed one of his magic _auto buttons (and he has many…) and caused them to happily march back where they belonged.

While most customers breathed a sigh of relief at seeing all their thumbnails go back to normal, one observer claimed to have seen a few members of the Cloudinary DAM development team sneaking off the scene, chuckling to themselves, "That was one DAM pixel-perfect prank!"

Getting Serious

Yes, we really pulled this prank on all our Cloudinary customers today. Of course, each user was able to turn off this April Fools side effect with the click of a button.

Yet, besides playing a cute joke, why'd we do it? Because we can. Because all it took for us to automatically pixelate every picture in every Media Library was to apply a simple e_pixelate transformation across the board.

Now while that particular transformation doesn't exactly facilitate your digital asset management work, what if Cloudinary were to let admins define their own custom card transformation for their account?

Today (well, every day other than April 1), Cloudinary generates all the asset 'cards' in its Media Library by applying a transformation that resizes every image or video poster image to a fixed maximum width and height. Where needed, Cloudinary also pads any remaining space within each card by automatically selecting the predominant color from that image.

For example, below you can see how a square image of a koala would be displayed as a padded thumbnail card in the Cloudinary Media Library:

sample square image thumbnail with predominant color padding

We accomplish this with the transformation: w_235,h_158,c_pad,b_auto:predominant

[Psst - Did ya catch that we use another of those _auto 'magic buttons' to do that? 😉]

We think this transformation looks quite nice, but that's just our opinion. You could potentially present your thumbnails in other ways if we were to allow you to customize that transformation.

A Few Ideas...

Wondering what you could do with such uncurbed freedom? Below are a few possibilities:

Consistent Background Color

Suppose you have an e-commerce site, and currently all products are shown in your online store with a grey background. You might also want all your product images in Cloudinary to be displayed the same way.

So, instead of our standard colorful presentation (w_235,h_158,c_pad,b_auto:predominant):

Default predominant color padding in the Media Library

You'd have this consistent view (w_235,h_158,c_pad,b_auto:grey):

Consistent grey padding in the Media Library

If you ever changed the background standards in your online store in the future, you could do the same in your Cloudinary DAM in seconds.

Auto-Gravity Fill Cropping

Both of the above transformations display images using the pad mode of cropping, which scales each asset down to show the entire thing. Perhaps you'd prefer that each thumbnail fill the entire area of the card and focus in on the main item there.

To do that, you'd use the fill mode of cropping, which also scales down (or up), but only until the larger of the two dimensions is completely filled, and then it crops off any excess on the shorter side. You could take advantage of Cloudinary's g_auto gravity to ensure that the most prominent element in the photo is kept when the other parts are cropped out.

Using a custom w_470,h_316,c_fill,g_auto thumbnail transformation, you'd get:

Fill cropping with g_auto in the Media Library

Conditional Overlays

If you really want to get fancy, a feature offering custom thumbnail transformations would enable you to define different transformations for different conditions. You could set completely different behaviors for portrait vs landscape images. Or you could define different transformations conditioned on the existence or absence of a particular tag on the assets.

For example, you could set your thumbnails to add a Sale icon for any product that is currently tagged in your DAM system as 'on-sale'. The following transformation does just that:

w_470,h_316,c_pad,b_grey/if_!on-sale!_in_tags,l_sale2,g_north_east,w_120,a_-30

It will apply the grey pad cropping for all images, but if the 'on-sale' tag is included in an asset's tags, it will also overlay the 'sale2' icon on it. It will be placed in the north-east corner, resized to a width of 120px, and rotated counterclockwise 30 degrees. If the 'on-sale' tag isn't there, the icon won't be added.

Here's what those same 4 assets would look like if 2 of the 4 were tagged with 'on-sale'.

Conditional transformation thumbnails Media Library

Like What You're Seeing?

We've got a lot on our DAM plate for the coming year. So we have to pick and choose which features we offer. And we want to make sure we're picking and choosing just right.

This Media Library card customization idea demonstrated above is just one of many we're considering adding to our roadmap. Do you want it? Vote for it here! Oh, and when you vote, please add in the comments of your vote which cool transformations you would apply as your Media Library thumbnail card customization if you could.

It's Not Only Pixels Who Can Speak Up for What They Want

What was that we just said above? You can vote for Cloudinary features? Yep! We've made our Roadmap public, and you get to influence where the roads go!

In the Roadmap, you can take a look at which features have just been launched, what's planned for the near future, which options are under consideration for future quarters, and even suggest your own ideas.

Conditional transformation thumbnails Media Library

You can also vote on the planned or considered Roadmap items, indicating what's nice-to-have, what's important, and what you see as critical. Once you vote using one of these options, you will also be invited to share your own use-cases or other suggestions or thoughts related to the feature.

Conditional transformation thumbnails Media Library

No More Fooling Around

Times are stressful these days, and we hope our colorful little practical pixel prank put a smile on your face. We also hope the potential for this new DAM customization feature along with your chance to vote for it and other stuff in our roadmap makes those smiles even bigger.

So that concludes April Fools, but Easter is coming soon and we've already hidden an egg for you! This time it's a different "John" who can help solve it… If you do find it, let us know, and have fun!

Recent Blog Posts

New Learning Pathways From the Cloudinary Academy

In December 2019, Cloudinary launched its customer education platform, the Cloudinary Academy, replete with courses taught by the company’s experts on developer-oriented products and digital asset management (DAM) solution. The courses comprise interactive lessons and hands-on assignments, a proven way of familiarizing the audience with the course material and illustrating it with live examples.

Read more
Maya Shavin: How I Built My Website

Besides working as a senior front-end developer at Cloudinary, I'm also a content creator, a blogger, and an open-source developer. Follow me at @mayashavin and on mayashavin.com.

In the beginning, my website, mayashavin.com, was mainly for showcasing the status of my development projects and keeping me organized with my speaking schedule. Initially, I built it with Vue.js, later on switching to Nuxt.js (aka Nuxt) for a higher SEO score, and deployed it with Netlify. After some time, I added a blog section with Netlify CMS as the content management system (CMS). Everything was fine until I added more content and features, which led to a significant decline in the site’s performance. Also, the site design needed a modern look. So, I gave the site a makeover.

Read more
Automation Frees Up PetRescue’s Staff to Help Pets Find Their Forever Homes

As we spend more time at home, many of us are adopting pets for the joy, companionship and a surprising range of health benefits. In Australia, where our nonprofit customer PetRescue is located, there’s a shortage of pets to adopt. Last August, the Guardian reported that dog shelters in Australia emptied and adoption fees for puppies were running as high as $AUS1800.

Read more
Cloudinary and Contentful Make Modern Content Management Easier

I am pleased to share that Cloudinary and Contentful have joined forces to further streamline the creation, processing, and delivery of online content through Cloudinary’s digital asset management (DAM) solution and advanced transformation and delivery capabilities for images and video. What’s more, the partnership delivers a headless approach to DAM. By leveraging APIs for media management tasks, marketers and developers alike benefit from an integrated stack of optimized assets for optimization and automation. As a result, page loads are fast and beautiful, and at scale—with less overhead and effort.

Read more
Introducing Cloudinary's Nuxt Module

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

Read more