Tips to reduce Android image asset sizes
As a product designer, I’m always looking for ways to cut down app sizes without sacrificing quality.
Recently, I worked on slimming down an Android app by switching to SVG and WebP, and the results were impressive. Here’s what I learned.
Whoop-whoop! (Slack message from our Android developer)
1. Use SVG (but watch out for the limits)
SVG is a great vector format—scalable and sharp, making it a natural fit for app icons and illustrations.
However, Android Studio doesn’t fully support SVG. It converts them into VectorDrawable, which has a few limitations.
This is because Android’s system prioritises performance and compatibility across a wide range of devices, so it strips back some of SVG’s more complex features to keep things lightweight and consistent.
Key Limitations:
❌ No blend modes, clipping paths, masks, or filters.
❌ Dotted strokes might not display correctly.
❌ Complex SVGs might not import or display correctly.
❌ Text elements need to be converted to paths.
Left: SVG with ‘Multiply’ blend mode in Figma.
Right: How it renders in Android Studio with missing effects.
Left: SVG with dotted stroke in Figma.
Right: How it renders in Android Studio with missing effects.
How to make it work?
Keep your SVGs simple and avoid unsupported features:
✅ Remove blend modes like Multiply, Darken, or Lighten.
✅ Avoid masks.
✅ Convert strokes to outlines.
✅ Turn text into outlines
Ask developer to share a screenshot, ensuring the image looks right in the app.
Side note: In Figma, blend mode is sometimes hidden inside the gradient panel—go to the layer, open the gradient panel, and look for any applied effects.
Checking for blend modes in Figma’s gradient panel—here, a Multiply effect is applied.
Be sure to remove it to make it work for Android Studio.
2. Opt for WebP for Raster Images
For images that aren’t vectors—like photos, textures, or detailed graphics—WebP is a fantastic alternative to PNG and JPEG. It offers better compression, supports transparency, and keeps file sizes small without losing quality.
Why WebP Stands Out:
✅ Smaller than PNG (lossless WebP is roughly 25% lighter).
✅ Better quality than JPEG at the same size.
✅ Supports transparency like PNG, but with less bulk.
PNG (523KB), JPEG (318KB), and WebP (63KB) compared—WebP’s
compression efficiency is the best.
How to Export WebP in Figma
Figma doesn’t natively support WebP, but plugins can help. I recommend ‘WebP Exporter’—it’s straightforward and lets you convert directly from Figma. Choose ‘Export for Android’ to make life easier for your developers.
Using the WebP Export plugin in Figma with ‘Export for Android’ selected.
Final Thoughts
By using SVG for vectors and WebP for raster images, I managed to reduce the app size significantly while keeping the visuals crisp. If you’re working on an Android app and want to optimise it, these formats are well worth considering.
Have you tried SVG or WebP for Android apps? I’d love to hear about your experience!
