As we guys all know, Doodly allows us to use our own images for our videos. In this blog, we will take a closer look at the two most common image formats that we can use in Doodly and that is png and jpeg.

If you plan on importing your own graphics into Doodly, it’s smart to know a little bit about these two image formats including their differences. We will also discuss image transparency and its importance but first, let’s define these two file types.

What is a PNG?

PNG stands for Portable Network Graphic. It was created in the mid-1990s to act as a replacement for the Graphics Interchange Format (GIF). Limitations of the GIF prompted the creation and prevalence of the PNG. PNG is an uncompressed 24-bit RGB raster image format. It has the so-called “lossless” compression. That means that the image quality was the same before and after the compression.

What is a JPEG?

JPEG on the other hand stands for Joint Photographic Experts Group which is the name of the group that developed it in 1992. It is a standardized lossy compression mechanism for digital images. JPEG is a compressed file format so some unnecessary image details may be lost when creating or converting a file into JPEG resulting in the image’s low quality.

The Difference between PNG and JPG

We have made a side-by-side comparison of png and jpeg file format. Take a look at the table below:

For Doodly purposes, we have to keep in mind that JPEG does not support transparency whereas PNG format does.

How does image transparency impact our Doodly video? Let’s check out the images below.

Adding JPEG and PNG files in your scenes

So we created several scenes to see how JPEG and PNG images look when used in our Doodly projects.

The 1st scene uses a white background with a house which is a png image and we used a jpeg image of a girl with her pet dog.

Scene 1:

You will see that transparency won’t really matter for images such as scene 1 above if your jpeg image doesn’t overlap with other images in your scene and if your background is white. It looks pretty great but let’s reposition our image and see how the jpeg file looks if we place it closer to the house.

Scene 2:

With Scene 2 above, despite having a white background, the white rectangular box where the jpeg file is in is visible and it looks like it is covering portions of the house at the back.

You can see those vertical and horizontal lines surrounding our jpeg image and it doesn’t really look good at all.  

Now, let’s try to use the same scene, this time we’ll add a png file.

Scene 3:

With scene 3, you can see the same girl and the pet standing at the same exact location but we don’t have the visible border surrounding them. The picture looks more natural, they blend well with the background, and they look presentable. It looks way better.

JPEG and PNG file on a Colored Board

We added the same image to a different scene. We still have a house but this time we made it a colored one. We also changed the color of our background to light blue so we can really see the difference between jpeg and png files.

Scene 4:

As we can see above, the jpeg image covers portions of the house behind it. You can visibly see the rectangular box where the girl and dog are in. It feels like they don’t belong in the scene at all. It’s like they are being singled out or highlighted and because of that, it’s giving a different vibe to your scene. It makes you want to question the intention why they are placed there.

Scene 5:

In scene 5, we have the image of the girl and dog saved as a png file. We don’t see the white box, and they totally blend in the scene. They look great and professional.

PNG Resources

It’s great to play around with png files and get creative with our Doodly videos but where can we get these royalty-free png images? The answer is, of course, the internet.  Just be extra careful when downloading from an unknown 3rd party website as some might have click-baits.

One website you can check out is pixabay.com.

You can search for graphic images and use them in your video. Doodly requires your image files to be 1920 by 1080 or less so make sure you check the file size first prior to downloading an image.

With the below image, any of the files can be used for your Doodly video because they are all within the size requirement.

How To Upload In Doodly

After you have downloaded the png file to your laptop, go back to Doodly and click the Props tab then hit the “+” sign at the bottom.

Locate the file on your computer. Downloads are usually saved in the Downloads folder but if you designated a different downloads folder, you will find your png file in there.

And here now is our imported png file:

Remember:

A png image format is preferred for your Doodly videos. They support transparent images which make our presentation look more professional, clean, and presentable.

We have tons of websites to choose from on the internet that offers royalty-free png images, just be careful with those sneaky click-baits that can either be an ad or malicious software.

Lastly, have fun exploring great png images for your animation projects, and don’t forget to share those crafty, artistic animated videos of yours on our Facebook page. Until next time! 🙂