Kinja Image tricks - make transparent

/e_blur:400/l_ouvgqchgglpll2favxbv,c_scale,w_400,g_west,x_50,a_15/l_nuc01zxxhkcolonysy3s,c_scale,w_400,g_east,x_50,a_-15/r6jv5nyheusbhehsg7ms.jpg

Have you ever wanted to overlay an image on top of another, but the image on top is not a Transparent PNG and it doesn’t look nice (like the Joycons on the left of the header image)?

Kinja uses an Image Management service that is capable of doing URL-based transformations on the images it uses, so, we can use that feature to easily resize overlay two of them, add some transparency to one of them without having to manually download them, edit them, and upload them!

Advertisement

We already saw how to overlay a picture on top of another...

But in case you don’t want to click that... we first need the images to be uploaded to Kinja in order to get an ImageID. For this example, we’ll use this cool blurred image that will help us focus on the image we’ll place on the top

Advertisement

(The URL for this one is https://i.kinja-img.com/gawker-media/image/upload/ldd34kpoczxeyacifdxt.jpg )

...and the image we want to put on top is this one:

Advertisement

(https://i.kinja-img.com/gawker-media/image/upload/ouvgqchgglpll2favxbv.jpg)

If you open this image on a new tab, you will notice that it has a white background, that we would like to remove. So now, we take the URL of the top image, and add the following string between “upload” and the base ImageID...

Advertisement

https://i.kinja-img.com/gawker-media/image/upload/e_make_transparent:10/ouvgqchgglpll2favxbv.png

... BUT! Did you noticed that last part? We changed the .jpg of the original image to png. This will allow the image to actually have transparency.

Advertisement

Now we just copy the entire URL and paste it again so we can have a new transparent image.

(I already did that for you. The ImageID of this new image is nuc01zxxhkcolonysy3s)

Advertisement

And by now you should know the drill: we take the URL of the base image (ldd34kpoczxeyacifdxt) and overlay the transparent one (l_nuc01zxxhkcolonysy3s):  

Advertisement

(https://i.kinja-img.com/gawker-media/image/upload/l_nuc01zxxhkcolonysy3s,c_scale,w_300/ldd34kpoczxeyacifdxt.jpg)

(And if you tried this by yourself and look at that URL, you’ll notice I also reduced the size of the overlaid image to 300px wide, because it was too big)

Advertisement

I hope you find this useful! You can try it in the comments!


This post is part of the Sixtay Days of Writting Challenge. Post Count: 30+7

Share This Story