I’m pretty sure both turn into something which resembles bitmap (with an alpha channel) when it comes time to render. So, a 1024x1024 image will be 32 4 Mbs in memory.
Not sure if roblox does any mipmapping, though. That might save you some memory.
This only matters in web development. One would use JPEG rather than PNG sine JPEG is more modern and much less in size, it’s very quick in to upload and download. It’s also lossy - which means unnecessary content in the image is removed from it permanently- which also reduces quality.
JPEG is used for just pictures, whereas PNG is for logos or images with text - like logos.
Doesn’t matter. I always use PNG because it supports transparency in the images, whereas JPEG doesn’t.
This post about compressed images might prove there is difference
Jpegs are more optimized than pngs so it might help with loading times (since roblox takes care of performance by compressing images depending on your graphic settings)
Thank you, this was really useful!
It’s worth noting
@Mimi_Dev, Bit-Depth of 8 is currently broken for PNGs, don’t use TinyPNG for example
Yeah compressing your png’s used to work but now they don’t.
If you have an image that doesnt have transparency upload it as jpeg. If it needs to have transparency upload it as a png
I’m going to go out and disagree with all of you. Please never use JPEG for anything outside of a few very limited use cases.
Does this look clean and sharp to you?
Due to the way that JPEG (lossily) compresses textures, you will lose tons of high frequency data, colour accuracy is not preserved, your textures will become fuzzy and blurry in many cases. It saves memory by degrading the quality of your textures, and outside of limited use cases it just isn’t all that great.
Remember that PNG is still a highly portable image format. It supports transparency and still does a great job of keeping your images small without losing details. There are so many times where you should use PNG over JPEG that I recommend just not using JPEG unless you’re absolutely certain you can take the hit from the degraded quality.
Pretty sure Roblox recently added auto compression for low end devices, which probably already goes part way to solving your problems.
Here’s some tips on how you can optimise your image memory usage without murdering your image quality:
Just don’t use as many images. Prefer part materials to textures, and see if you can simplify any image intensive UI.
Failing that, why not use smaller image sizes for smaller things? Size your images according to how large you expect them to be displayed. Showing a small icon in the player list? Don’t make it 512x512, why not 32x32? Just an example.
Done both of those? Try some compression tools. I’ve never had to do this since I carefully select how I use images in my work, so I can’t guarantee if they even work, but it’s worth a shot.
Exhausted all that, and your image:
then maybe think about using JPEG.
tl;dr just cut your losses, use PNG (edit: except for small things people won’t notice), and be smart about how you’re using images.
When it comes to UI, absolutely use PNG, but when it comes to random small assets on the map, then its just easier to use a JPEG
it is true though that JPEG does change the color of your texture slightly so that it something else to consider. For me, the change is so minute that it doesn’t matter
Yes, since they’re small assets they won’t be displayed large on screen, and colour accuracy won’t be that important. In those cases it’s fine to use JPEG because the artifacts will likely not be visible enough to worry about.
Ya I dislike JPEGs for that very reason, however I’m finding for many mesh textures they look fine (especially hair where I can hardly tell any difference). I don’t plan on using JPEGs for UI.
@ everyone else
Since opening this thread and hearing all the tips I’ve reduced image size by 70% on mesh textures without too much quality loss visible to the player and started using JPEGs for most of them. I’m also looking into using Roblox generated thumbnails where possible to further reduce image size when an asset needs to be reused at different sizes. Everything is helping reduce memory usage, so thanks for all the advice!
32 megabytes?! What the… You sure it’s not Kilobytes?
I don’t think there is a difference, correct me if I am wrong. I am not sure how that stuff works.
Yeah, I think I messed up somewhere. You have 1024x1024 pixels, and each pixel uses 4 bytes (for red, green, blue, and alpha), so that’s 2^22, or 4 Mb.
The lesson to be learned is that 1024x1024 textures are bulky.
Is it less for jpeg since it doesn’t include alpha? Would it be like 1mb in that case>?
I’d like to revive this topic because I was under the impression that when I upload a jpeg (sacrificing quality to save space/bandwidth) the uploaded file will be stored and used in that format.
However, for example I uploaded a texture as jpeg, at 61kb. When I download the decal with chrome, I get a 251kb png file. It seems Robox is converting my file to png anyway and my space saving attempt is circumvented. No?
Am I missing something?
Example:
boost.jpg is the file I uploaded
glider-boost.png is the file I downloaded from Roblox after creating the decal
Here’s a small tip!
Use PNG for invisible backgrounds, this doesn’t make it all blank white.
Use JPEG for invisible backgrounds to be turned into the colour white therefore this type of picture does not allow invisible backgrounds of any type.
Okay, but my question is, are they all converted to png by Roblox on the back end anyway?
If that is the case, then the ONLY way to save bandwidth would be to reduce the size and/or complexity of the image.
the image on the site is the preview image only and not the same one being used in-game, they are different from each other
Is there a way to retrieve the one being used in game to compare the file size and compression?