Zeplin automatically generates resources, including assets, tailored to the platform needs. Besides the regular PNG, JPG, PDF, and SVG asset formats, Zeplin also provides the assets in optimized PNG, optimized JPG, optimized SVG, and WebP formats.

Here's a list of all available asset formats for each platform:

Web projects:

iOS Projects:

Android Projects:

☝️ To be able to download assets from Zeplin, designers need to set layers as "exportable” before publishing them to Zeplin.

By default, the optimized versions of assets will be enabled in your Assets settings. To view optimized assets, click on the Assets section at the right bottom of the screen. Then, you’ll see the download button near asset formats.

☝️ If you don’t see the optimized PNG, optimized JPG, and WebP formats even if they’re enabled, you need to publish your designs again using the latest version of Zeplin desktop apps. Then, Zeplin will generate the optimized versions of the assets.
​
This also works the similar way for optimized assets of a component—go to the styleguide that you've exported your components to and click on a component. Then, you can view and download the available optimized assets of your component on the right panel.

☝️ If you'd like to download the original assets rather than optimized ones, you can disable the optimized versions from the settings menu of Assets.

Zeplin currently uses a lossy optimization technique to optimize PNG and JPG resources. Lossy compression reduces the file size at the expense of possibly reducing the image quality. To do that, Zeplin uses a package called "imagemin" which Google also recommends for the optimization practices. More specifically, Zeplin uses the plugins "imageminPngquant" and "imageminMozjpeg" to optimize PNG and JPG resources.

The quality level of JPG compression is set to "85" while the level of PNG compression is set to "min: 65 max: 80". However, these numbers are subject to change.

To optimize SVG assets, Zeplin uses the SVGO as a tool.

Related Articles