Tips and Tricks
A step-by-step guide to optimizing textures for Snapchat’s Lens Studio
We’ve all been there: you’re just about to submit your masterpiece Lens for Snapchat when you realize the file size is larger than 4MB, the Lens Studio limit. One of the biggest contributors to file size is textures, especially when they’re animated. Fortunately, optimizing your textures is also one of the easiest hacks to shrink file size.
I’m Sava — I have over 6 years of experience in 3D modelling as a hobbyist. Designing Snapchat Lenses has been my latest hobby and these tricks have been extremely useful. Use the following tips inside and outside of Lens Studio to keep your Lenses under the 4MB limit!
1. Downsize and Compress
The first and easiest thing you can do is downsize and compress your textures. Many people overestimate the texture quality needed for their desired effect. Keep in mind your Lens will frequently be viewed on displays smaller than 6".
Here is a comparison to illustrate my point:
On the far left you’ll see a Lens with full-resolution textures, saved in PNG format. On the far right, you’ll see the smallest textures. Notice the difference? Perhaps a little, but will the end user care about this small difference in quality? Probably not.
2. Use Grayscale
Many textures are monochrome (a variation in lightness/darkness of the same color). For these textures, save them as a grayscale and add color in Lens Studio through the material properties. Since these images are only one channel instead of three, they’re almost three times as small.
The example above uses a grayscale tile texture with a slight blue tint added through the material properties. This method achieves the same look as the original colored tiled texture, but comes in at less than half the file size.
3. Create Multiple UV Maps for Different Texture Slots
Leverage multiple UV Maps to add more detail to certain textures. In the example above, the normal map texture for the brushed metal requires a high resolution, while the color map is practically one solid color. The UV tiles for the normal map are made much larger so the tiling is denser. This creates the illusion that the metal material is using high-res textures, when in reality it’s not.
4. Re-use Textures
Reusing existing textures instead of creating new ones can save a lot of file space. Here I have an example of how I used the same texture for diffuse and opacity.
5. Minimize Animated Texture Use
Only use animated textures on animated components. If 50% of the texture does not move in any of the frames, make that part a still image. Sometimes, it’s better to avoid animated textures altogether. The sun in this example uses a tween to make it spin, and these waves use UV scrolling to make them move.
Example — Combination of Several Techniques
In this example, I wanted the pattern to fade in and out following the curves. I could have animated a mask texture for the whole pattern, but I opted to create two sets of UVs, and animated a very small “bar” mask texture. The end result came out great and is only 12 KB.
To check out the Lenses featured in this tutorial, just scan a Snapcode! (Open the Snapchat app, focus the camera on a Snapcode, and press and hold to unlock.)
For even more sizing tips, visit Lens Studio’s 2D Optimization Guide.
Happy optimizing!
