Cloudinary Blog

How to Sharpen Or Blur Images Through Automation

How to Sharpen Or Blur Images Through Automation
Images. More likely than not, your web or mobile app is filled to the brim with images, which, from graphical appeal to size and access times, figure prominently in the browsing experience. Image appeal could motivate visitors to return and, in the case of e-commerce, become customers.
 
No matter how outstanding the page design is, many of the images that you as web developers must embed are not in your direct control. Not to mention that social websites contain user-uploaded profile photos; the product photos on e-commerce sites are too numerous to be edited one at a time; and media outlets invariably contain many photographs of different standards.
 
Cloudinary offers an automated tool that tweaks and retouches images by sharpening or blurring them. Obviously, you can also sharpen blurry images with that option.
 

page load speed

Sharpening Images

How can you make your website "pop"? It's easy if you have complete control of the content in your app: a great graphics design can do wonders. But what can you do to spiff up user-uploaded images? 
 
Take this image that was uploaded to Cloudinary, which looks good yet not perfectly sharp:
 
  
 
For more sharpness, set Cloudinary’s effect transformation parameter to `sharpen` (`e_sharpen` for URLs):
 
 
 
Here's the code in Rails:
Copy to clipboard
<%= cl_image_tag("front_face.jpg", :effect => "sharpen") %>
Furthermore, you can fine-tune the `sharpen` effect by specifying a numeric level, e.g., 300:
 
 

 
Here’s the code in PHP:
Copy to clipboard
<?php echo cl_image_tag("front_face.jpg", array("effect" => "sharpen:300")) ?>
Sharpening also renders text elements in thumbnails clearer. Take this screenshot that was uploaded to Cloudinary with blurry text snippets in gray:
 
 
 
 
To make the text more readable, add to the URL the parameter `unsharp_mask` which, though similar to `sharpen`, is triggered by a different algorithm:
 
 
 
 
Here’s the code in Django:
Copy to clipboard
img = cloudinary.CloudinaryImage("front_face.jpg")
img.image(effect="unsharp_mask")

Blurring Images

Other scenarios might require that you blur images. Quora, for example, dynamically blurs text snippets if you browse while being logged out. 
 
To blur images with Cloudinary, add the `blur` parameter (`e_blur` for URLs). An example: 
 
 
 
 
To intensify the blurring, pass a numeric level, e.g., 400:
 
 
 
The following example shows an intensely blurred image with reduced opacity along with a text overlay that prompts the audience to sign up on your site to view the full content:
 
 
 
Here’s the code in Rails:
Copy to clipboard
<%= cl_image_tag("front_face.jpg", 
                 :overlay => "text:bold_dark:Sign up to see more",
                 :gravity => :center,  
                 :transformation => {:effect => "blur:500", :opacity => 50}) %>
To blur only a region of an image, add the `blur_region` parameter and specify the values for the region’s coordinates (x, y, width and height), as in this example:
 
 
 
Here’s the code in Node.js:
Copy to clipboard
cloudinary.image("front_face.jpg", { effect: "blur_region", x: 0, y: 0.5, w: 1.0 });
To blur all the faces detected in an image by Cloudinary, add the `blur_faces`parameter to the URL, like this:
 
 
 
Here’s the code in .NET:
Copy to clipboard
string url = cloudinary.Api.UrlImgUp.Transform(
  new CloudinaryDotNet.Transformation().Effect("blur_faces")).BuildUrl("front_face.jpg");


Summarizing It All

Sharpening or blurring images applies an impressive effect to online content. Do take advantage of Cloudinary’s automated tool—replete with calibration options for your development framework—to efficiently and effectively apply those effects in bulk. Subsequently, Cloudinary regenerates all the images in real time and serves them to your audience, optimized through a fast content delivery network (CDN).
 
To try out the features described in this post, start with creating a free account on Cloudinary. Do let us know what you think.
 

Recent Blog Posts

A New, Simple Tool for Creating Text Overlays for Images

Many Cloudinary users desire a UI for tasks like creating text overlays for images, which they then embed on webpages or download for marketing campaigns. Generating such overlays with the Cloudinary Media Library UI involves a bit of a learning curve, especially if they require multiple fonts or text lines, which even experienced users might find challenging to implement.

Read more
Transitioning JPEG-Based to JPEG XL-Based Images for Web Platforms

When the JPEG codec was being developed in the late 1980s, no standardized, lossy image-compression formats existed. JPEG became ready at exactly the right time in 1992, when the World Wide Web and digital cameras were about to become a thing. The introduction of HTML’s <img> tag in 1995 ensured the recognition of JPEG as the web format—at least for photographs. During the 1990s, digital cameras replaced analog ones and, given the limited memory capacities of that era, JPEG became the standard format for photography, especially for consumer-grade cameras.

Read more

Amplify Your Jamstack With Video

By Alex Patterson
Amplify Your Jamstack With Cloudinary Video

As defined by Amazon Web Services (AWS), Amplify is a set of products and tools with which mobile and front-end web developers can build and deploy AWS-powered, secure, and scalable full-stack apps. Also, you can efficiently configure their back ends, connect them to your app with just a few lines of code, and deploy static web apps in only three steps. Historically, because of their performance issues, managing images and videos is a daunting challenge for developers. Even though you can easily load media to an S3 bucket with AWS Amplify, transforming, compressing, and responsively delivering them is labor intensive and time consuming.

Read more
Cloudinary Helps Move James Hardie’s Experience Online

While COVID has affected most businesses, it has been particularly hard on those that sell products for the physical ‘brick and mortar’ world. One company that literally fits that bill is our Australian customer James Hardie, the largest global manufacturer of fibre cement products used in both domestic and commercial construction. These are materials that its buyers ideally want to see up close, in detail. When customers have questions, they expect personal service.

Read more