How to Add GIFs to Your Dev.to Articles with Cloudinary

When it comes to writing technical articles, we all understand the power of visual elements, and among them, GIFs stand out as tools for illustrating ideas. They breathe life into code snippets, simplify complex processes, and captivate readers in a way that plain text sometimes falls short.

The Challenge on Dev.to

While Dev.to is a great platform, it often places certain restrictions on direct GIF uploads. This limitation can be a source of frustration for those looking to enhance their articles with dynamic visuals. Whether it's the file size restrictions or compatibility issues, attempting to upload a GIF might leave you scratching your head.

Navigating the Hurdles

As a fellow technical writer, I've grappled with these limitations firsthand. While publishing an article on Dev.to that required GIFs for clear communication, I ran into a situation – I needed those GIF images in my article. This necessity led me to search for a method to include my GIFs, which I had converted from my videos, in the article.

It turned out that adding GIFs directly to Dev.to was more complex than I thought. The challenge sparked my quest to figure out a way to incorporate these dynamic visuals into my content. So, I set out to find a solution that simplifies the process for everyone looking to incorporate GIF images into their articles.

In the next section, we'll delve into my solution for seamlessly incorporating GIFs into Dev.to articles. I'll guide you through the step-by-step process, from converting videos to choosing Cloudinary as a reliable hosting platform, and finally embedding them effortlessly into your articles. Let's get started!

The Solution: Incorporating GIFs with Cloudinary

Here's the trick I discovered: Instead of wrestling with direct GIF uploads, I found a workaround. What I did was convert my videos into GIFs and use Cloudinary to host them.

Step-by-Step Guide

Convert Video to GIF

Turning videos into GIFs is easier than you might think. Here are a couple of tools you can try:

Online GIF Converters:
Websites like EZGIF or Giphy offer simple interfaces. Upload your video, tweak a few settings, and voila, you've got a GIF.

Video Editing Software:
If you're into a bit more control, video editing software like Adobe Premiere or free options like Shotcut allow you to export specific sections as GIFs.

Gifski (For Mac Users):
If you're rocking a Mac, you can download Gifski, a free app designed for an easy video-to-GIF conversion.

When converting, keep an eye on file size. Smaller files load faster, making for a smoother user experience. Adjust the resolution and frame rate if needed, balancing quality and speed.

Upload GIF to Cloudinary

Uploading to Cloudinary is simple. Here's how you do it:

i. Create a Cloudinary Account: If you don't have one, sign up. It's free and quick.

ii. Access the Cloudinary Dashboard: Once logged in, find and click the Upload button.

iii. Select Your GIF: Click the Browse button to pick the GIF you want to upload or simply drag and drop it. Here is mine:

Obtaining the Public URL

You’ll use the public link to embed your GIF. Here's how to obtain it:

i. Open the Uploaded GIF: After the upload, click the Done button then, on the Assets tab to view your uploads as shown below:

ii. Find and Copy the Public URL: Double-click on your uploaded GIF to open it in full screen. Click on the Share button and on Copy URL to copy the public URL.

Embedding GIF in Dev.to Article

Now, let's put that GIF in your Dev.to article:

i. Edit Your Dev.to Article: Open the article you're working on and embed your GIF using Markdown as shown below:

![Your Alt Text](YOUR_GIF_LINK_FROM_CLOUDINARY)

Here's a quick breakdown:

Alt Text: Replace "Your Alt Text" with a brief description of your GIF. This text is displayed if the GIF can't be loaded.
GIF Link: Replace "YOUR_GIF_LINK_FROM_CLOUDINARY" with the actual link you copied from Cloudinary.

ii. Preview Your GIF: Click on the Preview button in your Dev.to editor to preview your GIF image.

That's it! You have successfully added a GIF to your article. Feel free to experiment further with Markdown and GIFs to enhance your articles on Dev.to. If you have any questions or want to share your experience, drop a comment below.

Comments

[Augusts Bautra]

A guide without a gif in it to show off how it works? Pfft...