At left is a .png file, with a file size of 61 kilobites.
Center is a Lossless .webp file, with a file size of 41 kilobites.
At right is a 90% Lossy .webp file, with a file size of 18 kilobites.
What is a .webp file? This website explains in detail but here is a snippet:
So what does this mean for Ren'Py projects? First let's explore the concepts of lossless compression and lossy compression.WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.
Lossless WebP supports transparency (also known as alpha channel) at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3× smaller file sizes compared to PNG.
SourceLossless and lossy compression are terms that describe whether or not, in the compression of a file, all original data can be recovered when the file is uncompressed. With lossless compression, every single bit of data that was originally in the file remains after the file is uncompressed.
On the other hand, lossy compression reduces a file by permanently eliminating certain information, especially redundant information. When the file is uncompressed, only a part of the original information is still there (although the user may not notice it).
When making a visual novel one usually wants to use the best quality for assets possible. However this can cause distributions to be very large, which can have an effect on the executable load time.
Generally Ren'Py developers will use the following formats for images:
.png - lossless, a must for transparency and quality
.jpg - lossy and better for storing smaller files
.ico for icons on Windows, .icsns for icons on Macintosh, .png for icons on Linux
!!!.gif and .bmp files are also supported (as long as they are not animated), but should not be used in modern games!!!
For backgrounds I always use .png, but I have seen other developers use .jpgs.
For sprites, .png is a must for the transparency.
However now, with the addition of .webp support, I highly recommend that Ren'Py developers use .webp files for the majority of their files.
When exporting in .webp there are different options. I will share with you what I have learned about those options as it pertains to Photoshop. If you do not have photoshop, there are plugins for Gimp as well. However if you are programless for some reason, there are converters here.
First I recommend getting this plugin for Photoshop: Windows | Mac
Unzip the folder, which should contain a plugin for both 64Bit and 32Bit program types. Make sure to put the plugin in the right location:
Code: Select all
C:\Program Files (x86)\Adobe\Adobe Photoshop CS6\Required\Plug-Ins\File Formats
C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Required\Plug-Ins\File Formats
If all goes well, you should see the following when you go to save an image in Photoshop:
As an example, I started with one of my sprites in .png format:
I then tested it at a few different settings options for .webp :
https://cdn.discordapp.com/attachments/ ... sized.webp
(I've attached the full size file to this for the comparison of quality that you can actually observe.)
To get the Lossless version I did this in photoshop:
For Lossy @ 90% I did this:
for this result:
https://cdn.discordapp.com/attachments/ ... rcent.webp
I really don't recommend anything below 50%.
As you can see, here is 25:
https://cdn.discordapp.com/attachments/ ... rcent.webp
And here is 0:
https://cdn.discordapp.com/attachments/ ... rcent.webp
Thank you for reading! I hope this helps.