TL:DR
- Optimize your in-game PNGs! Here’s some tools but there’s more out there:
-
PNGquant - Lossy (you won’t notice), ~60% size reduction
- Don’t forget to manually update the pngquanti.exe if you picked PNGoo
-
PNGquant - Lossy (you won’t notice), ~60% size reduction
-
OptiPNG - Lossless (Doesn’t work, roblox messes it up), 10~30% size reduction
- TinyPNG - Lossy (you won’t notice), ~70-80% size reduction; it’s a web service though
- ECT - Lossless or lossy on demand, size reduction varies accordingly
- File → Save for Web, File → Export
- Don’t optimize images with colored fully transparent pixels
- You should upload your ads as jpegs to avoid recompression
It’s the future!
But your players might suffer from awful internet. They shouldn’t have to wait for your images to slowly pop in one at a time. You can make the player sit and wait for PreloadAsync to finish, but that doesn’t actually solve the problem; it still takes a while. I mean it took like five seconds for the bloxcards logo to show up on public wifi. Also when I played the dancing section of the minion obby by shovelware studios the DDR arrows took a while to load so I couldn’t see anything.
Sure But Does Asset Size Matter
Yes, small files take shorter to download than large files. You need your thumbnails, skins, logos, buttons, etc. to load as fast as possible, ergo they must be as small as possible. For reference, you probably already know how to optimize your meshes and sounds. Nobody uploads uncompressed wavs in this future, but uncompressed 250kb 1024×1024px PNGs aren’t great either. Your players do deserve the highest fidelity graphics though, so downscaling is probably not the way to go.
What Can I Do
You can optimize/compress the PNGs, getting a lower filesize in exchange for either metadata/guff (“lossless”) or color depth (“lossy”). With lossy compression, the resulting dithering and color banding (if any) will be filtered out by either your eyeballs or anti-aliasing, but harsh gradients’ dither might be visible to the naked eye on unscaled gui elements under certain conditions or amidst certain colors. Also, fully transparent pixels almost always lose their color.
Basically: don’t worry about the loss of color depth. You’ll never notice any of this on 3D models and you can just check if you’d notice on (un)scaled gui elements. Most of your assets are probably flat, sleek and/or modern; they won’t show any artifacts at all.
What Can I use
PNGquant (My Personal Favorite)
Installation:
- Download the one with the nicest sounding description.
- Optional: Replace its outdated copy of PNGquant with the latest binary release. PNGoo in particular has a 5 year old build of pngquant. Replace the old exe with the new one and it’ll work fine.
Usage: Like you would any other program. You can drag&drop your PNGs into either the window or the .exe because it’s the future.
OptiPNG (doesn’t actually work, see Anaminus’ post)
Usage: Either via the command line or just drag the PNGs into the exe and it’ll replace (!!!) them with an optimized version.
TinyPNG
Usage: Follow the instructions on the site. You can optimize only 20 PNGs at a time though, and it’s a web service.
ECT
Installation: Just like build it from source.
Usage: Via the command line.
Save for Web
Your professional image editing software probably offers a Save for Web option in the File menu. Alternatively there’s probably an Export option. This is specific to your software of choice, I don’t know. It’s probably really good! But do check if there’s a plugin of any of the above availible, it’ll do a better job.