Be nice. Or else.
Community Staff Founder at Bjango Joined almost 5 years ago via an invitation from Christophe T. Marc has invited Matt Kelsh, Rene Ritchie, Dan V Peterson, Troy Mcilvena, Graham Clarke and 12 others, Jeremy Olson, Ramy M., Andrew Hart, Ricky Synnot, Aen Tan, Justin Velgos, Nik Fletcher, Rok Benedik, Nghia Nguyen, Jared Sinclair, Matt McDaniel, Elliot Jackson
Feelings aside, simple shapes are rendered identical when comparing PDF and PNG.
Yep. Well, identical if you’re comparing Core Graphics shapes with Core Graphics shapes (things exported in Ps, Ai, AD will look different, Sketch will be the same, probably). My main concern is that there is no benefit in using PDFs, except designers being lazy. We may as well call it out for what it is — anyone willing to risk the quality of their work because they don’t want to turn on some exporting options is being lazy. The downside is shipping assets that look bad, and you won’t know unless you carefully test all densities in the simulator or on device.
Why break such a robust process with PNGs, but introducing issues that often can’t be predicted ahead of time? Most designers don’t know the limitations of the PDF spec, and they probably won’t know which features are rendered to bitmaps by their design tool when exporting PDFs. The simple and better solution is to never use PDFs. You don’t gain anything in terms of app bundle size and launch time, and you certainly don’t gain quality.
Asset Catalogs have pretty straightforward structure with a few quirks, nothing that can’t be implemented in design tools
But I’m absolutely against the decision to force proprietary formats in Asset Catalogs.
I honestly do like vector drawables though. They are exactly what’s needed, and nothing more, in a good format.
They are in fact recommended by Apple
Since when is that a definitive reason for anything. :P
Beware that Photoshop PDF export tends to rasterize many features, e.g. layer fills (but not the corresponding vector masks).
All the tools I’ve tested rasterise lots of features designers might use. The issue is more about the PDF format than Photoshop itself.
With App Thinning introduced in 2015, Xcode and App Store effectively decide what formats and sizes will be send to a device. Standalone assets are currently missing all these benefits, and rarely used by top apps.
Yep, I get all that. Asset Catalogs have so many other maintenance issues though. They’re definitely not a clear win. Even if you do use Asset Catalogs, I’d recommend using PNGs with them, and not PDFs. PDFs are terrible.
The issue is that it may be fine for some assets, but not others, and you may not notice. There’s no disadvantage in using PNG workflow vs PDFs, but there are disadvantages in using PDFs.
Please don’t use PDFs for iOS assets. There’s so many issues with them.
Yes, you should export all required sizes, and most of the time your assets should be bitmap images.
For iOS, that means 1×, 2×, and 3× PNGs. For Android, that means 1×, 1.5×, 2×, 3×, and 4× PNGs or WebP images.
Yes, it can mean your images take up a bit of space overall. Where possible, avoid images with really big dimensions — they’re huge files at higher screen densities. It’s not just download times that are impacted, but also app launch time, the amount of memory used, and the amount of disk space required.
Android’s vector drawable format is good, when you can use it. Please note that it’s only suitable for some types of artwork, and you need to be a little careful on Android versions targeted, and drawing performance.
If you can, WebP is a more optimal format than PNG, so that should be used.
If you want, you can probably skip over the 1.5× assets, as not many devices use them. It could be worth checking with your target devices though.
You should definitely create a Android adaptive app icon, too. That means you’ll need a normal and adaptive app icon.
Don’t use PDFs. If you need or want to draw vector icons in realtime, PaintCode is a better option, because it means you’re actually drawing the artwork realtime (PDFs just render a bunch of PNGs when building the app, and offer pretty much no advantage).
You can optimise your PNG images, if you’d like. But, Xcode will recompress all your images, unless you tell it not to. That means your compression efforts will be lost unless you change your Xcode settings for the project. If you’re building Mac apps, and your 1× images end up in a different PNG format due to compression (greyscale 8bpc PNG vs RGBA 8bpc PNG etc), then macOS can use the wrong PNG to render. That means you can get a scaled down 2× image on a 1× display. It looks bad.
You need to be super careful of using image optimisation. ImageOptim and others can be really good, but there are some important things to keep in mind:
PDFs don’t natively support layer styling features, so things like inner shadows, shadows and most gradients get rendered as a 1× bitmap in the PDF. The end result is 1×, 2×, 3× assets generated from 1× bitmap images.
Don’t use PDFs if you care about the quality of your work.
technically you don't save a big mount of app size
Using PDFs for iOS assets can make them bigger, and you can cause some significant quality losses. My advice would be to never use PDFs for iOS assets (I’ve written more about PDF assets and why they’re bad.
Android supports SVG for vector icons.
Android Vector Drawables are really good, but not without their caveats. You need to be extremely cautious about how you create the artwork, which Android versions you target, and the code used to render them. I gave a talk recently on the topic with a smart developer: Build Better Android Apps with Vector Assets
It’s a complex topic. I’m not here to pimp my stuff, but we did tons of research for the talk, and it surprised me how complex the topic is.
From the artwork side, there’s some important things to remember.
Gradients are supported in Vector Drawables, but that’s very much a new feature. Vector Drawables are a small subset of SVG, and they do not have all of the SVG features (thankfully!). You also need to be very cautious in terms of performance — icons need to be fairly simple paths and small render sizes, in places where render time is critical.
Oh, that helps a lot. Thanks!
Be nice. Or else.
Designer News is a large, global community of people working or interested in design and technology.