Zeplin automatically generates resources, including assets, tailored to the platform's needs. In addition to 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:
PNGs and optimized PNGs (1x, 2x, 3x)
SVGs and optimized SVGs
JPGs and optimized JPGs (1x, 2x, 3x)
WebPs (1x, 2x, 3x)
iOS projects:
PNGs and optimized PNGs (1x, 2x, 3x)
SVGs and optimized SVGs
JPGs and optimized JPGs (1x, 2x, 3x)
PDFs
Android projects:
PNGs and optimized PNGs (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi)
SVGs and optimized SVGs
JPGs and optimized JPGs (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi)
WebPs (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi)
☝️ To be able to download assets from Zeplin, designers need to set layers as exportable before publishing them to Zeplin.
Downloading optimized assets
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 bottom right of the screen. Then, you’ll see the download button next to the 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 in a similar way for optimized assets of a component—go to the component detail view first to see and download your component's assets. Check out this article to learn more about the component detail view: Inspecting a component in the detail view.
💁♀️ If you're using an older version of the Mac app before the Summer Breeze release, you'll need to click on a component under your styleguide. Then, you'll see the download button near the asset formats under the Assets section on the right panel of the styleguide. You can download the latest Zeplin app here.
You can disable the optimized versions from the Assets settings menu if you'd like to download the original assets rather than the optimized ones.
How Zeplin Optimizes 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.