WEBP Image File Type Support and YOU

A place to discuss things that aren't specific to any one creator or game.
Forum rules
Ren'Py specific questions should be posted in the Ren'Py Questions and Annoucements forum, not here.
Post Reply
Message
Author
User avatar
Morhighan
Miko-Class Veteran
Posts: 975
Joined: Sun Jun 27, 2010 12:54 pm
Completed: AIdol, When Our Journey Ends, Forgotten Not Lost
Organization: MysteryCorgi
Tumblr: MysteryCorgi
Deviantart: MysteryCorgi
Soundcloud: MysteryCorgi
itch: MysteryCorgi
Location: USA
Contact:

WEBP Image File Type Support and YOU

#1 Post by Morhighan »

On September 9, 2016 Pytom announced that .webp support was added to Ren'Py, and added this picture as an explanation:

Image

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:
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.
So what does this mean for Ren'Py projects? First let's explore the concepts of lossless compression and lossy compression.
Lossless 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).
Source

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
(This may be different for your computer, I'm working with Windows and the default location.)

If all goes well, you should see the following when you go to save an image in Photoshop:

Image

As an example, I started with one of my sprites in .png format:
Image

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:
Image

For Lossy @ 90% I did this:
Image
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.
Attachments
EXAMPLE.png

User avatar
saguaro
Miko-Class Veteran
Posts: 560
Joined: Sun Feb 12, 2012 9:17 am
Completed: Locked-In, Sunrise, The Censor
Organization: Lucky Special Games
itch: saguarofoo
Location: USA
Contact:

Re: WEBP Image File Type Support and YOU

#2 Post by saguaro »

!!! I did not know about this. Thank you!

For my personal reference, since I use JPEG for assets without transparency, I exported a JPEG of the example image at 90% and it was 90 KB. My vision might not be great but I honestly cannot see a difference between the PNG and the WEBP Lossy50 example you posted. This is excellent.

User avatar
Morhighan
Miko-Class Veteran
Posts: 975
Joined: Sun Jun 27, 2010 12:54 pm
Completed: AIdol, When Our Journey Ends, Forgotten Not Lost
Organization: MysteryCorgi
Tumblr: MysteryCorgi
Deviantart: MysteryCorgi
Soundcloud: MysteryCorgi
itch: MysteryCorgi
Location: USA
Contact:

Re: WEBP Image File Type Support and YOU

#3 Post by Morhighan »

saguaro wrote:!!! I did not know about this. Thank you!

For my personal reference, since I use JPEG for assets without transparency, I exported a JPEG of the example image at 90% and it was 90 KB. My vision might not be great but I honestly cannot see a difference between the PNG and the WEBP Lossy50 example you posted. This is excellent.
I can only see a slight color difference for the Lossy50 I. But I feel like I could just be imagining it? XD Like, if I didn't know any better, it would not catch my attention at all.

User avatar
indoneko
Miko-Class Veteran
Posts: 528
Joined: Sat Sep 03, 2016 4:00 am
Contact:

Re: WEBP Image File Type Support and YOU

#4 Post by indoneko »

Thanks for the info~

For people who need good looking sprites with with small file size, lossy webp will be a good alternative to tinyPNG which has been around for some time.

I wonder if renpy will also support other up-to-date format (flif) in the future...
My avatar is courtesy of Mellanthe

Alte
The Great Organizer
Posts: 411
Joined: Fri Apr 18, 2014 5:26 pm
Github: nualte
itch: alte
Contact:

Re: WEBP Image File Type Support and YOU

#5 Post by Alte »

If the art is textured, it's slightly noticeable (from the example, PNG | WEBP L50) than colors aside from a minor discoloration. WEBP Lossless and WEBP L100 seems preserved. Either way, WEBP is a great alternative!

Here's a WEBP plugin link for GIMP and Paint.NET
For Mac users who like to preview WebP images, there's a plugin as well. Preview | WebP QuickLook Plugin

Appreciate the synopsis!
Ren'Py Cookbook Directory

I'm not affiliated with Ren'Py/ itch.io/ Steam/ etc.

User avatar
Divona
Miko-Class Veteran
Posts: 678
Joined: Sun Jun 05, 2016 8:29 pm
Completed: The Falconers: Moonlight
Organization: Bionic Penguin
itch: bionicpenguin
Contact:

Re: WEBP Image File Type Support and YOU

#6 Post by Divona »

Should note that at this moment .webp support is only available in Nightly build of Ren'Py (6.99.12.1758).

This smaller size image format should help with the performance quite a bit. Will have to test it out, cheers! :D

EDIT:
So I have tried out WebP and decided to attached the example image here as the image I use has lots of colour shading. Between PNG and WebP Lossless, it's pretty much identical to my eyes, with a slight file size different (that is better than none). However, the different between WebP Lossless and WebP Lossy 100 do show some problem with the shade on the hair. Look kinda hard rather than smooth shading in lossless. It does almost half the size of the file, though. If your character sprite does not using many shading and simple flat colours then perhaps WebP Lossy is a good option to go. With WebP Lossy 50, it's getting rather pixelated with a bit of colour bleeding.

On the project itself, WebP does managed to cut down almost 1 MB off the image sprite I'm using, so I shall stick with WebP Lossless. 8)
Attachments
webp_example.png
Completed:
Image

User avatar
PyTom
Ren'Py Creator
Posts: 16088
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

Re: WEBP Image File Type Support and YOU

#7 Post by PyTom »

indoneko wrote:I wonder if renpy will also support other up-to-date format (flif) in the future...
It's prematured to support flif. From their web page:
FLIF is a work in progress. The format is not finalized yet. Any small or large change in the algorithm will most likely mean that FLIF files encoded with an older version will no longer be correctly decoded by a newer version. Keep this in mind.
We'd need a guarantee of stability and serious levels of tool support to consider it.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
Software > Drama • https://www.patreon.com/renpytom

User avatar
кролик девушка
Newbie
Posts: 24
Joined: Wed Jul 13, 2016 8:27 am
Contact:

Re: WEBP Image File Type Support and YOU

#8 Post by кролик девушка »

sorry no support, "8-bit YUV 4:2:0 format only" is not ok. I like more than 256 colors, plus no one understands "Lossless compression":

Image

Image

https://en.wikipedia.org/wiki/Lossless_compression

one other thing:

"In the absence of seeking, straight-line decoding of WebP is more CPU-intensive than GIF. Lossy WebP takes 2.2x as much decode time as GIF, while lossless WebP takes 1.5x as much."

"Adding WebP support to browsers increases the code footprint and attack surface. In Blink this is approximately 1500 additional lines of code (including the WebP demux library and Blink-side WebP image decoder)."

"It should be remarked that, in a complete video playback system, the displayed frames may or may not be identical to the reconstructed frames."

https://developers.google.com/speed/webp/faq

and

"Be sure to do plenty of testing on your own before implementing WebP, because it might not be ideal for your needs."
https://www.smashingmagazine.com/2015/1 ... rformance/

no thank you, webp is not ok for me.

User avatar
PyTom
Ren'Py Creator
Posts: 16088
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

Re: WEBP Image File Type Support and YOU

#9 Post by PyTom »

So, there are a number of things wrong with кролик's analysis.

The first thing is that lossless WEBP supports the 8-bit RGBA colorspace, which is the same colorspace used by a PNG. This is different than the 8-bit palette used by the GIF format. PNG, WEBP, and JPEG all support 8-bits for each of the Red, Green, and Blue channels, which means there are 16.7 million possible colors, rather than the 256 total colors possible in a GIF.

The output of compressing a grid of pixels with PNG and Lossless WEBP should always yield the same results, with WEBP being smaller in most or all reasonable cases.

The lossy WEBP format does use a YUV color space (like JPEG), but unlike (most) JPEGS, it does a 4:2:0 downsampling. This is similar to how movies are compressed, but not current image file formats. The idea of 4:2:0 is to sample the brightness channel (Y) every pixel, and the color channels (Cr - approximately green vs red) and (Cb - approx green vs blue) every 2 pixels horizontally and vertically, which means each color channel has 1/4 the data of the brightness channel.

This seems to work well in practice. There are a bunch of cases that it gets right:

* A color pixel next to a white or dark pixel, like a border.
* Pixels with the same color, where the brightness has changed. (Like a shadow.)
* Linear gradients/blurs.

A case that it gets close.

* Non-linear gradients. It will approximate a curved gradient with a series of linear blur segments, which probably looks decent in practice.

And a case that it gets wrong.

* Two totally different colors next to each other, like art that uses no outlines, or a colored outline.

Lossy WEBP and JPEG then both proceed to discard more information to hit the desired quality level. With any luck, that information is the least important to the viewer.

Some of the other objections are less important. WEBP doesn't add attack surface to Ren'Py, as all game data is trusted. I'm not sure a comparison between GIF and WEBP is really material - Ren'Py preloads images, the smaller size of a WebP will likely mean less slow disk access, and in general, the 24-bit quality of a WEBP is acceptable for a game in 2016, while a paletted GIF is not.

That being said, WebP has some compromises, especially with the lossy format. It's up to the creator to decide if they want to accept those compromises for their own game. I think the results will be decent in most cases, but will be bad in some - this is why making a visual novel is an art form, after all.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
Software > Drama • https://www.patreon.com/renpytom

User avatar
uyjulian
Regular
Posts: 128
Joined: Sun Mar 08, 2015 1:40 pm
Github: uyjulian
Contact:

Re: WEBP Image File Type Support and YOU

#10 Post by uyjulian »

BPG should be supported in the next release (compresses even smaller!), but somebody should write an SDL wrapper for it.

Lightworker
Regular
Posts: 104
Joined: Sun Dec 13, 2015 2:06 pm
Projects: Detroit.exe
Discord: Happiness+#1168
Contact:

Re: WEBP Image File Type Support and YOU

#11 Post by Lightworker »

Here I am thinking that Ren'py has implemented webp and then....

Code: Select all

I'm sorry, but an uncaught exception occurred.

While loading <'Image' 'Rll3Jqo.webp'>:
  File "game/script.rpy", line 686, in script
    a "“{cps=5}Marcus... {w} tell me why?”"
Exception: Could not load image 'Rll3Jqo.webp': error('Unsupported image format',)

-- Full Traceback ------------------------------------------------------------

Full traceback:
  File "game/script.rpy", line 686, in script
    a "“{cps=5}Marcus... {w} tell me why?”"
  File "E:\renpy-6.99.11-sdk\renpy\ast.py", line 603, in execute
    renpy.exports.say(who, what, interact=self.interact)
  File "E:\renpy-6.99.11-sdk\renpy\exports.py", line 1135, in say
    who(what, interact=interact)
  File "E:\renpy-6.99.11-sdk\renpy\character.py", line 873, in __call__
    self.do_display(who, what, cb_args=self.cb_args, **display_args)
  File "E:\renpy-6.99.11-sdk\renpy\character.py", line 719, in do_display
    **display_args)
  File "E:\renpy-6.99.11-sdk\renpy\character.py", line 510, in display_say
    rv = renpy.ui.interact(mouse='say', type=type, roll_forward=roll_forward)
  File "E:\renpy-6.99.11-sdk\renpy\ui.py", line 278, in interact
    rv = renpy.game.interface.interact(roll_forward=roll_forward, **kwargs)
  File "E:\renpy-6.99.11-sdk\renpy\display\core.py", line 2496, in interact
    repeat, rv = self.interact_core(preloads=preloads, **kwargs)
  File "E:\renpy-6.99.11-sdk\renpy\display\core.py", line 2850, in interact_core
    self.draw_screen(root_widget, fullscreen_video, (not fullscreen_video) or video_frame_drawn)
  File "E:\renpy-6.99.11-sdk\renpy\display\core.py", line 1916, in draw_screen
    renpy.config.screen_height,
  File "renpy/display/render.pyx", line 416, in renpy.display.render.render_screen (gen\renpy.display.render.c:6685)
    rv = render(root, width, height, 0, 0)
  File "renpy/display/render.pyx", line 185, in renpy.display.render.render (gen\renpy.display.render.c:2857)
    rv = d.render(widtho, heighto, st, at)
  File "E:\renpy-6.99.11-sdk\renpy\display\layout.py", line 661, in render
    surf = render(child, width, height, cst, cat)
  File "renpy/display/render.pyx", line 103, in renpy.display.render.render (gen\renpy.display.render.c:3319)
    cpdef render(d, object widtho, object heighto, double st, double at):
  File "renpy/display/render.pyx", line 185, in renpy.display.render.render (gen\renpy.display.render.c:2857)
    rv = d.render(widtho, heighto, st, at)
  File "E:\renpy-6.99.11-sdk\renpy\display\layout.py", line 661, in render
    surf = render(child, width, height, cst, cat)
  File "renpy/display/render.pyx", line 103, in renpy.display.render.render (gen\renpy.display.render.c:3319)
    cpdef render(d, object widtho, object heighto, double st, double at):
  File "renpy/display/render.pyx", line 185, in renpy.display.render.render (gen\renpy.display.render.c:2857)
    rv = d.render(widtho, heighto, st, at)
  File "E:\renpy-6.99.11-sdk\renpy\display\layout.py", line 661, in render
    surf = render(child, width, height, cst, cat)
  File "renpy/display/render.pyx", line 103, in renpy.display.render.render (gen\renpy.display.render.c:3319)
    cpdef render(d, object widtho, object heighto, double st, double at):
  File "renpy/display/render.pyx", line 185, in renpy.display.render.render (gen\renpy.display.render.c:2857)
    rv = d.render(widtho, heighto, st, at)
  File "renpy/display/accelerator.pyx", line 108, in renpy.display.accelerator.transform_render (gen\renpy.display.accelerator.c:2027)
    cr = render(child, widtho, heighto, st - self.child_st_base, at)
  File "renpy/display/render.pyx", line 185, in renpy.display.render.render (gen\renpy.display.render.c:2857)
    rv = d.render(widtho, heighto, st, at)
  File "E:\renpy-6.99.11-sdk\renpy\display\image.py", line 255, in render
    return wrap_render(self.target, width, height, st, at)
  File "E:\renpy-6.99.11-sdk\renpy\display\image.py", line 124, in wrap_render
    rend = render(child, w, h, st, at)
  File "renpy/display/render.pyx", line 103, in renpy.display.render.render (gen\renpy.display.render.c:3319)
    cpdef render(d, object widtho, object heighto, double st, double at):
  File "renpy/display/render.pyx", line 185, in renpy.display.render.render (gen\renpy.display.render.c:2857)
    rv = d.render(widtho, heighto, st, at)
  File "E:\renpy-6.99.11-sdk\renpy\display\im.py", line 478, in render
    im = cache.get(self)
  File "E:\renpy-6.99.11-sdk\renpy\display\im.py", line 200, in get
    surf = image.load()
  File "E:\renpy-6.99.11-sdk\renpy\display\im.py", line 529, in load
    surf = renpy.display.pgrender.load_image(renpy.loader.load(self.filename), self.filename)
  File "E:\renpy-6.99.11-sdk\renpy\display\pgrender.py", line 155, in load_image
    raise Exception("Could not load image {!r}: {!r}".format(filename, e))
Exception: Could not load image 'Rll3Jqo.webp': error('Unsupported image format',)

Windows-7-6.1.7601-SP1
Ren'Py 6.99.11.1749
The Legend 0.0

User avatar
Divona
Miko-Class Veteran
Posts: 678
Joined: Sun Jun 05, 2016 8:29 pm
Completed: The Falconers: Moonlight
Organization: Bionic Penguin
itch: bionicpenguin
Contact:

Re: WEBP Image File Type Support and YOU

#12 Post by Divona »

Lightworker wrote:Here I am thinking that Ren'py has implemented webp and then....
Only in Nightly build (6.99.12) for now, yup. :roll:
Completed:
Image

Alte
The Great Organizer
Posts: 411
Joined: Fri Apr 18, 2014 5:26 pm
Github: nualte
itch: alte
Contact:

Re: WEBP Image File Type Support and YOU

#13 Post by Alte »

uyjulian wrote:BPG should be supported in the next release (compresses even smaller!), but somebody should write an SDL wrapper for it.
Might not be possible for BPG to be supported. There could be patent/ licensing issues since BPG is based on HEVC. MPEG-LA doesn't seem like a lenient licensing group.

For anyone who's curious about the image quality of BPG, there's a visual comparison.

When WEBP support is added to Ren'Py, would that mean it'll be out on the next public build?
Ren'Py Cookbook Directory

I'm not affiliated with Ren'Py/ itch.io/ Steam/ etc.

User avatar
кролик девушка
Newbie
Posts: 24
Joined: Wed Jul 13, 2016 8:27 am
Contact:

Re: WEBP Image File Type Support and YOU

#14 Post by кролик девушка »

Alte wrote:
uyjulian wrote:BPG should be supported in the next release (compresses even smaller!), but somebody should write an SDL wrapper for it.
Might not be possible for BPG to be supported. There could be patent/ licensing issues since BPG is based on HEVC. MPEG-LA doesn't seem like a lenient licensing group.

For anyone who's curious about the image quality of BPG, there's a visual comparison.

When WEBP support is added to Ren'Py, would that mean it'll be out on the next public build?
webp looks bad for blur image however bpg almost fixes image to original.

User avatar
Donmai
Eileen-Class Veteran
Posts: 1958
Joined: Sun Jun 10, 2012 1:45 am
Completed: Toire No Hanako, Li'l Red [NaNoRenO 2013], The One in LOVE [NaNoRenO 2014], Running Blade [NaNoRenO 2016], The Other Question, To The Girl With Sunflowers
Projects: Slumberland
Location: Brazil
Contact:

Re: WEBP Image File Type Support and YOU

#15 Post by Donmai »

Alte wrote:For anyone who's curious about the image quality of BPG, there's a visual comparison.
Tried it with the "Ballet Exercise" image. Wow! Not only the image quality is better, the file size is incredible.
Image
No, sorry! You must be mistaking me for someone else.
TOIRE NO HANAKO (A Story About Fear)

Post Reply

Who is online

Users browsing this forum: No registered users