Optimize Images - Crop unseen?

There’s already a thread on having more options for the automatic optimization of images. Something like integrated TinyPNG or ImageOptim. But one thing we haven’t talked about is if Hype could create cropped versions of images on export if certain parts are never seen.

Yes, we could manually create a custom version for each layout, but the big advantage of Hype is that we shouldn’t have to. Currently, we can build a layout using one master image, use it at various scales for each size ad, and the export spits out a version at the smallest pixel dimensions necessary for that layout. This is a HUGE reason why my agency went with Hype, and adding the ability to crop the images to the canvas would be equally amazing.

Basically, depending on the animation, detect the furthest bound that is visible at any point in the timeline and whatever falls outside the viewing area can be discarded. Then Hype would just offset position accordingly in the exported .js to account for the new asset size.

So could we get trimmed assets? Pretty please?

(In these examples the images slide in from the bottom or the side, so the portion of the image that overhangs will never appear in the ad)




2 Likes

Thanks for the request! Image cropping is actually bug #44, so we’ve wanted to do this for a while :sweat_smile:.

The notion of automatically cropping based on what’s shown in the animation is neat. It would definitely need to be disabled by default though as dragging, programmatic control, and flexible layout make it unknowable what would be shown.

Clearly, interactive elements that can be moved by the user wouldn’t be able to be automatically cropped on export. In that case, the item would have that option grayed out.

In my ideal dream world, we would have something like this:

3 Likes

Thanks for the mockup!