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.
💁♀️ You can learn more about switching platforms to access specific assets and specs here.
Here's a list of all available asset formats for each platform:
Web:
PNGs and optimized PNGs (1x, 2x, 3x)
SVGs and optimized SVGs
JPGs and optimized JPGs (1x, 2x, 3x)
WebPs (1x, 2x, 3x)
iOS:
PNGs and optimized PNGs (1x, 2x, 3x)
SVGs and optimized SVGs
JPGs and optimized JPGs (1x, 2x, 3x)
PDFs
Android:
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, optimized versions of assets are enabled in your Assets settings. To view them, click on an asset in a screen or go to the Assets section in the bottom right corner. You'll see a download button next to each available format.
☝️ 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 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.