Automatically Transforming And Optimizing Images And Videos On Your WordPress Website

Automatically Transforming And Optimizing Images And Videos On Your WordPress Website

So, you want to give personality to your site by making it stand out from all other websites out there. To do that, you develop a personalized design style, including a certain combination of colors, typography, spacing, animations, and others, and apply the style consistently throughout your site.

An example in case is this same website, Smashing Magazine. One of the objectives of its big redesign was to infuse the site with a uniquely distinctive personality. That’s why all avatars, the arrow button, and many other elements are all tilted, at the same angle as the Smashing logo is:

Tilted elements in Smashing Magazine
Tilted elements in Smashing Magazine (Large preview)

What about images? They can also take part in the unique design so that visitors browsing your site will immediately recognize it simply by looking at the content. For instance, I remember The Verge’s old bold design, which placed striking colors over its images:

Old homepage for The Verge
Old homepage for The Verge (Large preview)

Applying style to the images can be achieved with CSS. However, then the style will not be present when referencing the image directly (such as the image shared in social media via the <meta property="og:image" content="{image-url}"> tag), making the image devoid of personality.

The images embedded in social media when sharing our content are of particular interest. These images should carry the personality of the site, for which the style must be embedded in the image itself, instead of being applied via CSS. For instance, in SmashingMag’s Twitter account, the article’s featured image has a customized and consistent style, giving it a unique personality:

Smashing Magazines article shared on Twitter
Smashing Magazine’s article shared on Twitter (Large preview)

Adding the style to the images on our site can be done manually (with Photoshop or some other image editing tool), but editing images is effort-intensive. The images need to be manipulated and re-uploaded to the site, for all the possible sizes (such as the featured image and each of the thumbnails) and all defined sets of styles (for instance, a page for the Black Friday sales could have its own style).

It makes more sense to automate this task. Automation is doable when the design is based on a series of transformations, to be applied one after the other, such as:

  • Adding a watermark;
  • Making the image round;
  • Rotating the image to a certain angle;
  • Adding a border, with a specific thickness and color;
  • Adding a shadow;
  • Cropping the image to a certain aspect ratio or fixed dimensions;
  • Cropping the image around the face of the person;
  • Converting the image to grayscale, or adding hue;
  • Sharpening the image.

By defining a list of transformations, the task to apply the desired style to our images can be automated. As a result, the effort to produce a consistent style throughout the website, and change it at any time down the road, is greatly reduced.

Applying styles throughout the website now becomes:

  • We preselect the styles to be applied to the images, for the whole site or a custom section, via configuration on the website’s back-end;
  • We upload the original images.

Then, the images will be automatically applied transformations to produce the desired styles, and readily available to be inserted into the page via the website’s media manager.

We can do exactly this via Cloudinary, a service that helps produce and deliver optimal digital experiences. Being based on the cloud, Cloudinary can be integrated with any site, based on any stack or technology. For this article, I’ll be using its integration with WordPress to demonstrate its transformation capabilities.

Specifically, I’ll be using Cloudinary’s plugin for WordPress v3.0, which is set to release this week. Let’s start!

Adding Transformations To The Images

Cloudinary offers an extensive list of transformations, including all the ones I mentioned earlier on and many more, to manipulate not only images but also videos. Adding the desired transformations to an image’s URL, the image can be modified in myriad ways. I’ll demonstrate this by creating a thumbnail for an image.

About the Author

Leave a Reply