How to make a mask with a specific and irregular shape

[Fatima Osman]

Hi,

 

This is my first time, I think, using these or any forums in a while. How do I create a mask over an image in a banner that's an irregular shape? The banner link is below. I need to get it under 150k. The three images that slide in have slightly irregular shapes. The diagonal line isn't an issue but there are small parts of channing's head and other elements that prevent me from saving the files out as jpgs. I can't get the file size down to under 150k unless I can save the film images as jpgs. Could someone help please? Thank you so much if you help me.

 

banner animation

https://fatimawork.com/neopangea/300x600/v3/

 

banner zip file

https://fatimawork.com/neopangea/300x600/v3_fordev_compressed.zip

 

[PointC]

Hi @fatima.osman@gmail.com 

 

Welcome to the forum

 

I don't know anything about banners, but is .webp an option for you? Sometimes smaller file size than .jpg and supports transparency.

 

Some of our resident banner experts may jump in too, but that's my two cents.

 

Happy tweening.

 

[Fatima Osman]

Thanks for responding. Could you tell me a bit about .webp? What is it?

[PointC]

A fun new image format. This will explain it better than I can here.

https://developers.google.com/speed/webp

 

Excellent support.

https://caniuse.com/?search=webp

 

I personally use this site for my conversions.

https://cloudconvert.com/

 

Hopefully that helps. Happy tweening.

[Fatima Osman]

Thank you. I appreciate it. I'll start researching some of this. I don't think I'm going to be able to do it for banners served by doubleclick from what I just saw but I'll see. Thanks again.

[davi]

SVG via...

Using a black and white image. There was a tool called Zorro SVG a while back that created it for you, not sure if it's still around somewhere. Here's something similar. This can sometimes get file size lower but depends on how busy the B/W image is and how well it compresses >

See the Pen jOemzQ by shshaw (@shshaw) on CodePen

https://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/

Or use a vector mask, something drawn in illy (see SVG mask for HTML elements). This will typically generate a smaller file size than most options >

See the Pen GRodvp by yoksel (@yoksel) on CodePen

There's css mask too, depends on how much support you're comfortable with. The client is still using IE half the time though >
https://developer.mozilla.org/en-US/docs/Web/CSS/mask

Not sure about DCM WebP support, but perhaps try uploading a test zip sample into their ad validator to see if you get an error or not.

The fine folks over at Neo Pangea, always doing good stuff. 

I think we worked together like 20 years ago at AtmoBBDO

 

[Fatima Osman]

Thanks for your answer Davi. It's been a long while since I asked that question but I appreciate your thoughtful answer. AtmoBBDO feels like a lifetime ago. I'm pretty sure I'd remember you if I saw you.