Posts by Ifeoma Imoh

Images are an important part of the web, so delivering the right image for the right device at the right time while maintaining optimized quality is very important. In this article, we’ll go over a few techniques using Cloudinary-React SDK v2 and JavaScript SDK v2 to apply transformations to our…

With serverless functions, we can write backend or server-side code without the burden of managing servers. One of the core features of Next.js is the API routes which provide an easy solution to create an API endpoint by allowing us to write server-side logic within our Next.js application,…

The HTML5 specification introduced the <video> element, which can be used to embed video content into web pages, and it is well supported across modern browsers. In this post, we’ll learn how to embed an HTML5 video player on an HTML document and define custom controls for it that is…

Sliders and carousels are popular ways to display web content such as testimonials, portfolio media, e-commerce sales, and so on for a variety of reasons, including their ability to moderate space usage on your website and interactively display these types of content, provide a great way to tell a story,…

From conveying deep messages to preserving memories and everything in between, images have become integral to the human experience. In this article, we’ll look at how to save uploaded images into a PDF file, making it easier to share multiple images without spamming the recipient while taking up less memory.

Cloudinary provides developers with SDKs in different languages both for the client and server-side to allow for easy integration and seamless management of all media manipulation concerns when building applications. These SDKs ship with well-written and optimized helper functions, URL builders, API wrappers, etc., ready to be used.

They say a picture speaks a thousand words. What if you needed the picture to speak more words than that? More words are certainly required to convince consumers to part with their hard-earned money, right? Adding interactivity to the images provides a more profound experience for the customer, making the…

Unwanted portions of videos are often cropped out of social media posts to ensure that the content gets the attention it deserves. Most social media applications have built-in features that make this process a breeze. In this post, we will build a simple app for trimming videos using ffmpeg.wasm…

Cloudinary provides an Advanced Facial Attribute Detection add-on, an integrated face detection solution that utilizes Microsoft Cognitive Services to automatically extract meaningful advanced data about the face(s) in an image. It also extracts other face-related attributes and the exact location of notable facial features. This add-on is fully integrated…

Cloudinary provides a Media Editor, which is an interactive user interface that provides users on your website with common editing actions, reducing dependency on designers for simple recurring tasks. In this post, we will build a demo application that shows how to use the Cloudinary Media Editor widget to perform…

Animated GIFs consist of multiple images or frames played back in sequence. They were initially designed for graphics but have evolved. They are now commonly used for different use cases on the web, such as video previews, product demonstrations or service instructions, humor, and so on. Animated GIFs are a…

In this article, we’ll build a simple file-sharing application that allows users to upload files and generate custom download links that can then be shared. We will also see how to use the Multer middleware to parse files from the client-side to an API route in a Next.js application.

Manually extracting and transforming text contents from images can be a time-consuming and tedious task. Some examples include attempting to auto-tag or categorize an image based on its text content, blurring or adding an overlay to the text on an image, etc. Cloudinary provides an OCR (Optical character recognition)…

Image tagging is the process of labeling images based on figures within that image – the labels are known as tags. This has the obvious benefit of providing some level of organization to an image library, as it is easier to find images with tags. Additionally, image tag metadata can…

Do you know there is a super-smart algorithm that can analyze your favorite artwork and recreate any other picture in the same style? Yes, it is possible. Cloudinary, in addition to its extensive capabilities, introduced an add-on that helps integrate this algorithm into mobile and web applications with…

The use of multimedia on the web has gone mainstream primarily because of obvious benefits such as increased user engagement, dwell time, improved SEO, etc. Getting it right with media assets on the web entails dealing with optimization, delivery, transformation, and other management tasks. Fortunately, technologies like Cloudinary offer scalable,…

When building sites, the file upload functionality tends to be more complex than anticipated. It’s no longer enough to have an input form that sends documents to some server. These days one has to consider asynchronous file uploads, progress bars, etc. Additionally, it must be abstracted and covered with a…

An ever-increasing amount of visual data is created and stored due to the rapid evolution of digital technology. Therefore, there is an urgent need for an effective and efficient tool or mechanism for categorizing and finding visual information on demand. Image tagging is adding text tags to an image…

This post will describe how to use Multer — a Node.js middleware used to handle multipart/form-data, and it makes the process of uploading files easy. We will be using it in a Next.js application where we will be leveraging one of its core features called API routes which…

Google Analytics is a free tracking tool provided by Google that shows how visitors interact with your website. This post will discuss how to track user engagements and events on a specific section or a component in our website using a Cloudinary video player. We will also learn more about…

Cloudinary is a complete media management solution, and one of its benefits is that it provides a lot of versatility when integrating with other packages. This post describes how to upload images using the react-dropzone package. React-dropzone is a tool for creating an HTML5-compliant drag and drop zone…

With websites being accessed from many devices worldwide, the attention paid to image delivery could be the difference between high customer retention and a high website bounce rate. Special attention has to be paid to the nature of the devices available and tailoring the delivered image to each device to…

To add to their rich media management capabilities, the Cloudinary platform has taken a step further and partnered with other tech giants, leveraging advanced technology such as AI to develop and provide more specialized tools called add-ons. This further enhances media management concerns such as transformation, security, media…

Images are an increasingly important part of the web. The ability to retain visual information is one of the many reasons we find images appealing, and this makes images more effective at conveying ideas across cultures. Imagine a website without images? Boring! However, if images aren’t properly optimized, they can…

Embedding URL screenshots into a web application the traditional way be stressful and time-consuming. This is because you have to visit the URL, install a screenshot capture solution that takes the screenshot, and maybe edit it using a graphic editor before embedding it into the application. Among the wide range…

As the world becomes increasingly interconnected, file sharing and exchange (mainly images) are becoming more prevalent. As a result, particular care must be taken in making the process as easy as possible. This is the first part of a two-part series. In this post, we’ll look at how to add…

It’s one thing to create a beautiful drag and drop feature that allows you to select multiple images at once and quite another to upload multiple files to Cloudinary. Well, who says you can’t do both? This is the second of a two-part series. In this article, I will show…

YouTube is a video-sharing platform owned by Google. The YouTube team offers an API that can be used to integrate the YouTube video playback experience into web applications. In this post, we will go through the process of embedding a YouTube player in a React application. We’ll build…

PDF (portable document format) incorporates several technologies, including encryption, data compression, font management, computer graphics, and so on. All of this is designed to describe the contents of read-only documents and make them reliable for sharing among communicating parties while preserving layout and formatting to ensure consistency regardless of the…

QR (quick response) codes are a popular type of two-dimensional or matrix barcode that allows you to easily encode information in the form of machine-readable images. These images can be used anywhere, from websites and mobile apps to banners, brochures, flyers, and business cards. Its popularity and effectiveness can be…

With more and more success stories emerging daily, content creation has more than proven itself as a viable means of revenue generation. This is mainly due to YouTube’s vast viewership of 300 million daily active users (Q3 2021). A key factor in taking advantage of this audience is a captivating…

Have you shared a link to a post on any social platform and been unhappy with the image displayed because it didn’t fit the article title or your brand? In this article, we will build an application that dynamically generates social images based on a template. You can use…

When rendering images on the web, aspect ratios are important and can be pretty confusing because there’s no one-size-fits-all. Aspect ratio here refers to the width of an image or screen in relation to its height. Making media display consistently on your site can be a pain because different cameras…

In this article, we’ll learn how to build an application that allows us to take pictures using a webcam. In other words, we will build a selfie application using React.js and then use the rich image transformation features provided by Cloudinary to apply unique special effects to our captured images.

When it comes to creating and delivering your digital assets with the least amount of effort, Cloudinary has you covered with an end-to-end management solution. This article will go through the steps involved in uploading images to Cloudinary using serverless functions. With serverless functions, we can write backend or…

Azure functions provide an elegant serverless solution that allows users to build applications by writing pieces of event-driven functions relevant to their business logic without focusing on scaling and managing infrastructures. Cloudinary, on the other hand, is a PaaS that provides an excellent solution for storing and managing media assets(images,…

Several techniques have been adapted over time to optimize images, one of which is image compression. In this article, we will build an app that uses an image compression module to compress images and display the resulting size. As bonus steps, we will add the options to communicate with a…

I’m sure you’ve experienced one of those moments where you visit a page on a website, maybe by clicking on a blog post. While you were still on the page, some additional page content (images, ads e.t.c) got loaded, and suddenly, you couldn’t find your position again. Layout shifts occur…

Build a Personal Image Slideshow In this article, we will take advantage of a new feature provided by Cloudinary, which is video slideshow generation. We will build an application that uses a webcam to capture images and generate a slideshow video with them. Here is a link to…

I recall registering for one of the previous editions of the Next.js conference and seeing animation on the landing page with participants’ avatars joyously floating around. In this article, we will recreate that animation using anime.js and React. A registration form will be displayed when the website loads. This…

Whether it’s for sharing your knowledge or giving the world a chance to live vicariously through your experiences, vlogs have provided a more immersive and engaging medium for sharing content and unleashing the creativity of content providers. In this article, I will show you how to build a simple vlog…

AWS Amplify enables developers of all skill levels to create, deploy, and maintain full-stack applications more effectively. Speaking of services, we will be using the Amplify CLI to create an S3 bucket and upload images from a React app. Next, we’ll use Cloudinary’s rich media transformation tools to retrieve…

Videos are powerful tools driving the age-old industry of content marketing. Getting it right with videos and maximizing their marketing potential comes with the time-consuming effort of optimizing, managing, administering, and delivering them to your target audience. With managed media solutions like Cloudinary, we have less to worry about since…

Media content makes up the majority of the internet and is the prominent source of performance issues. These issues are often overlooked even though they are the most approachable category of performance bottlenecks to fix. Auditing image performance is often overlooked because we build products on high-end devices that deliver…

Cloudinary provides various tools for creating, managing, and optimizing visual experiences, including a javascript-based HTML5 video player. In this article, we’ll build a responsive and optimized video playlist application using Next.js and Cloudinary. We’ll go through getting our video assets from Cloudinary using the Node.js SDK and embedding the Cloudinary…

Do you need to add a video player to your website? Cloudinary offers various solutions that make it easy to build and personalize video galleries or video playlists with as many videos as you like. In this post, we will go through how to add two types of video players…

Today we have different devices with different sizes and orientations, and sending images that have been designed to look good on larger screens to users with considerably smaller low-resolution screens isn’t suitable for performance. It can also create a poor user experience. In this jam, we’ll learn how to use…