Please optimize your images in your ruleset, tokens, battlemap and such!

[Blacky]

This is a public call to image optimization. When you release a ruleset, a token set, some battlemaps, whatever with images, please please please optimize them. It's fast, it's free, it's easy. It comes with naked women, pizzas and beer.

As you know, bandwidth management can be a huge issue with Fantasy Grounds. Optimizing images allows everyone to enjoy less memory consumption, and faster uploads&downloads of assets.

Even SmiteWorks.

Let's take two examples.

I did a quick optimization of SmiteWorks CoreRPG desktop.png frame. Took me 2 clics, and maybe 10 seconds while I was checking my emails. The result: 483KB instead of the released 560KB, 77KB gained, 16% weight reduction with lossless compression (meaning not one pixel was harmed in the process, the image is exactly the same).

I'm working on a token set, 106 200px tokens for a total of 9.05MB. After the same compression (took maybe 15mns, a coffee break) I got the same 106 files for 7.51MB. Gained 1.54MB (yup that's over one and a half megabyte gained), over 20% weight reduction with the same lossless compression.

Edit: to clarify, both Photoshop and Gimp don't optimize PNG and JPEG file size at all. ScriptPNG (and other tools like it) very much do. Look at next page example on some SmiteWorks tokens.

Tutorial

For the non-geek among us, a very simple tutorial. There are a lot of websites and software out there for image optimization, after some reading & testing I found that under Windows ScriptPNG (https://css-ig.net/scriptpng) is by far the simplest and the best one for PNG images (that's the ones with transparency, widely used in Fantasy Grounds).

It's free, it uses several optimization and compression softwares (packaged with) that are free and most are open-sourced and libre.

Just unzip the software somewhere (it doesn't need install or administrators rights or anything), then simply drag an image, several images, or a whole directory over the ScriptPNG.cmd file. Choose the highest lossless compression (that's [7] on the version I tested), and let it work. If you have a lot of images, go checks your email, get some tea or peruse some porn.

Note: be careful, the software overwrite your images with the optimized compressed version. If you which, make a backup before.


And, that's all. Drag&drop, take a coffee, done.

I would encourage everyone to do it, probably just before each release when every files are complete and finalized so that's you don't forget one. Just drag the whole directory, and forget it after that.

Advanced

There are more even more advanced way to do this. By no mean ScriptPNG (and its brother ScriptJPG (https://css-ig.net/scriptjpg) for jpeg, and others) is the ultimate tool. It's just the simplest more powerful current one I found (forget about online tools, this require some serious computer resources you won't get this on a free website serving hundreds of visitors). Tomorrow maybe something better will come along (although, I would refrain from trusting advertising and commercial slogans, at the very least test it yourself on a couple of your own images versus ScriptPNG).

It takes several of the best tools avalaibles (the biggest one being TruePNG and advdef), and run them all testing various combinations then automatically select the best result.

If you wish, you can read some more (https://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/) about PNG optimization (warning, serious geek inside), or try yourself various cutting edge tools and combination.

Or, try your hands are lossy compression. If done right, there is very very few to no difference to the human eye, and big gains. Since I don't want to spend a lot of time on each of my images, I prefer to stick to lossless optimization but that's just me.

[Nickademus]

Good stuff.

The first site was flagged by my anti-virus, but the second sight had some good info. I'll keep this in mind when presenting images in games/rulesets.

[Blacky]

The first site was flagged by my anti-virus
Uh? Weird.

[damned]

Advice good. Math bad.

over 20% weight reduction is only 17% saving :)

[Blacky]

Advice good. Math bad.
is only 17% saving :)
It's quite possible, it's 11AM here and I've been working since yesterday 1PM :hurt:

But, 9.05/1.21=7.48, hence slightly over 20% as far as I can see. Or the other way around, 7.51×1.17=8.79 (and not 9.05).

Or did my neuron died lonely?

[damned]

It's quite possible, it's 11AM here and I've been working since yesterday 1PM :hurt:

Just imagine you are doing an all nighter game session. You are probably starting to see things out the corner of your eyes too :)


But, 9.05/1.21=7.48, hence slightly over 20% as far as I can see. Or the other way around, 7.51×1.17=8.79 (and not 9.05).

7.51 is 17% less than 9.05 but 9.05 is 20% more than 7.51...
You are talking about a reduction from the larger number so the smaller percentage it is - thats just the way it works :)

I used to reduce my jpg maps to 65/70% but after reading someone here say they use 40% - I tried it and am happy with results - so I do agree with you - reduce those image where ever you can.

[Blacky]

About JPEG, you're talking about lossy compression. That's something else entirely.

I was talking about lossless compression (or optimization, or re-compression). Meaning the size of the file is reduced, but not one pixel is changed.

Lossy compression is something else. JPEG is less used for Fantasy Grounds, with the exception of maps and illustrations. Here, it all depends on what's the image for, what's in the image, and the level of attention people pay to it. I usually find jpeg lossy compression over 50% (up to 50% quality) very bad. At the 50% mark there's a hatchet of algorithm activated (color subsampling, dividing the color resolution by two) which just hack things left and right (with the Photoshop save for web tool, the precise % or quality level mileage may vary depending on the software used).

I usually go around 70% jpeg quality for basic image, and descend up to 51% quality for very big images where every size reduction count (like multiples megabytes battlemaps).

PNG lossy compression can reduce image size drastically too (here we don't remove pixels, but colors mainly) but it's more of a case by case basis. Meaning, it demands more work. Also, I guess that most Fantasy Grounds PNG aren't very good at lossy compression (meaning, paletted indexed colors in reduced number) because frames and such tends to be quite complex.

But that's a personal choice, to each his own.

Lossless compression/optimization is more important, because nothing is lost, it's very easy and can be done for whole rulesets (or tokens set, or modules images, etc.) in just 2 or 3 clicks. There's no reason not to do it. For example even the basic CoreRPG rulesethas over 10MB of images, even a simple 15% reduction means one and a half megabyte less of useless data with no downside. Especially important for this one, since its loaded by every layering (cascading) ruleset with the new 3.0 layering capability.

Image lossless optimization or re-compression does not only reduce network up/downloading time, but also disk loading time.

[Trenloe]

It is definitely worth keeping the size of images down.

If you're reading JPG: I'm curious, from a Fantasy Grounds data transfer perspective - once an image is opened in Fantasy Grounds by the GM and they then share said image with the players, does the exact image as stored on the file system (JPG with compression, etc.) get transferred and then opened on the client; or does Fantasy Grounds transfer the raw image data to each player? This is something I've wondered about recently.

Or, if this has been posted by developers sometime in the past and someone knows of the thread could they point me to it please?

[Moon Wizard]

The actual file is transferred.
JPG

[Trenloe]

The actual file is transferred.
JPG
Cool - nice to hear! That means all of the above thread and other image optimisation is relevant. :)

[ddavison]

I just did this with a module I received back for QA before posting to the store. I try to do that whenever I see large images or tokens in an adventure, although I haven't been working with the rulesets. For those, I actually do reduce image size as well for images of handouts since I don't believe people really want to see the 2048 x 2048 pixel image within FG. I was able to reduce an adventure down from 38MB to 5.6MB in size with reductions and optimizations to the image inside of Photoshop. Thanks for the tips, though. Moon Wizard and I can take a look at some of the ruleset images as well.

[Blacky]

Reducing pixels size and color can of course dramatically reduce the weight of a file. But some things are lost in it (sometime it doesn't matter, some times it does).

Lossless optimization can be run after Photoshop (or The Gimp or whatever), to reduce even more the images weight without losing anything in it.

For example I just did a pass of ScriptPNG over Raymond Gaustadne's monsters module shipped with FG. The script strip off 759KB of the images, losslessly (without changing anything but the files weight). The zipped module doesn't change much size, but I believe if not shared as a whole each token would being transmitted by FG as its source file? That would mean here those tokens are transmitted 25% faster (if my math isn't wrong here again ^^).

And again, the image content is exactly the same with this. Example:

https://www.fantasygrounds.com/forums/attachment.php?attachmentid=5915&d=1390265889https://www.fantasygrounds.com/forums/attachment.php?attachmentid=5916&d=1390265910
One of these is almost 10KB lighter :)

[ddavison]

Interesting. I normally run things through PhotoShop's Save for Web and Devices and assumed it would be fully optimized as a result. Thanks for the example on Raymond's token. While it's possible I somehow forgot to touch that specific image, it looks like we can further shed some weight.

[Blacky]

I usually did the same for years and years, sometimes with a little OptiPNG for the web. And since I discovered that's nearly not enough, and that Photoshop doesn't optimize both PNG and JPEG at all I wanted to spread the word :)

I don't know your internal process, but I would suggest simply adding a step: just before packaging (zipping) the whole thing (whatever ruleset, module, tokens, etc.) just put those images into ScriptPNG (or some other script if you're using an unix, although I believe there's currently not much better than the primarily windows tools included in ScriptPNG, namely truepng, zopfli, pngout, advdef). No need to weight the pros and cons, there's no cons ;)

[damned]

...since I don't believe people really want to see the 2048 x 2048 pixel image within FG. I was able to reduce an adventure down from 38MB to 5.6MB in size...

whilst I and many others would never use an image of 2048x2048 size - and especially not 38MB worth - there are others here who do prefer their maps in all their awesome full size. there was a recent request for some maps posted here to be reposted in higher resolution. cant please everyone all the time :)

I usually aim for my maps to be closer to 256kb than 512kb and other images are just fluff so for me they do not need to be large either :)

[Blacky]

I myself commonly use ~60KB image for basic illustration (portrait of a NPC, creature, etc.) Up to maybe 200~300K for landscapes and such. Sometimes, a much larger image is needed, because zoom is needed: I currently have a 1300×2200 pixels handwritten note in my campaign folder, the handwriting is so bad I needed the players to be able to zoom in. Too often as a player I got a badly scan handout presented to me, even with my nose on my screen I couldn't read it. But for this example, yes I could have split this image into several smaller ones.

Maps are something altogether different. I tried once a siege with only 2 maps (ground level and battlements) and it was quite horrible to switch back and forth. Unless absolutely needed, I find that one image for one map is quite necessary. Then, there's the size of it. I mean, to everything is close encounters, just for a battlemap, a medieval English longbow had an effective range around 300m. Imagine this in a somewhat open terrain, where a PC or NPC can pick up targets all around him up to that range. Even using the somewhat regular resolution of 50 pixels for a 2 meter square (and most of you use a 5 feet square, even smaller), in this example a >15000×15000 pixels map is needed. Too big to be handled realistically, but with examples like this (or even the dreaded cavalry encounter, with fast tactical movement around the map) I often struggle with the pixel size of my map (thank god for urban environment, all those nice walls which cut of line of sight and shooting).

Still, even with my current very low resolution of 32px (~30px tokens, and usually 16px for a meter) in my current campaign, I usually deal with 1~2MB battlemap. But I have a rigorous schedule of preloading every image.

But all of this has little to do with lossless optimization :)

[JohnD]

I'm going to try this with maps that haven't been used in my game yet. Assume doing this to a file already in use would see the masking information lost (?).

If works my players will thank you. I may be the king of huge maps.

[damned]

Hey JohnD - if its an existing campaign the maps/images are already shared so it makes no difference to change it now.
If you did change it and you kept the image dimensions and the name the same I think the masking would also stick...

[Trenloe]

If you did change it and you kept the image dimensions and the name the same I think the masking would also stick...
Yeah, it would.

Unsharing and resharing the image would put the new image in the players cache, but that is defeating the object really...

[JohnD]

I must be doing something wrong. I drag a 230 kb JPG on to the ScriptPNG icon and after a while I get a PNG file that weighs in at 4.34 mb.

I then drag that new file to the ScriptPNG icon, choose 7, wait and wait some more and wait some more and get a PNG file weighing in at "only" 988 kb.

[damned]

JPG is best used for any sort of image that has gradients.
PNG (and its predecessor GIF) work best for block colours.
Converting a JPG to a PNG will rarely make the file smaller....
Need to use the right format for your image...

[seycyrus]

I must be doing something wrong. I drag a 230 kb JPG on to the ScriptPNG icon and after a while I get a PNG file that weighs in at 4.34 mb.


I don't think the "converter" part works. I had some problems as well. Use gimp to convert, the script programs to optimize.

[Blacky]

You're dragging a jpeg unto the png optimizer :)

For jpeg, try ScriptJPG, either its lossless function (won't gain much, but every bit counts) or its lossy re-compression (which can be very very good on battlemap).

For example, look at this battlemap (https://www.fantasygrounds.com/forums/attachment.php?attachmentid=6076&stc=1&d=1392829534), exported in jpeg with Photoshop at what's visually decent. It's 334KB. Then look at that ScriptJPG optimized same battlemap (https://www.fantasygrounds.com/forums/attachment.php?attachmentid=6075&stc=1&d=1392829522): it's 155KB, and visually the same.

Photoshop could probably produce a 155KB jpeg image, but nowhere near the same visual quality.

This is my process noawadays: every PNG file goes through ScriptPNG (option 7, apart from the <1% that don't like it) before going into my FG directory; and every JPEG is saved at high quality than goes through ScriptJPG (mostly at what it called Quality 60, apart from a few written handout and such where I use a better quality) before going into my FG directory.

[seycyrus]

You're dragging a jpeg unto the png optimizer :)...

The misunderstanding arises because the primary window of scriptPNG has jpg,gif and a few others listed after "FORMATS"

[Nickademus]

Maybe this is why my antivirus flagged the site. It lies!!

[damned]

it can and does convert other image formats - it just might not save you any size depending on what is in your image...

[JohnD]

You're dragging a jpeg unto the png optimizer :)

Carp.

PEBKAC.

[Zeus]

Good news Blacky.

I just optimised the graphics in CoreRPG, 3.5E, 4E, 5E and Numenera. Significant savings in the bulkier rulesets like CoreRPG, 4E and 5E (over 1Mb saving in file size), slight reduction in the other lightweight rulesets however there should still be an improvement in load times.

I've uploaded them for inclusion in the next maintenance/test release. JPG is busy working on documentation at present (as well as a nice surprise ;) ), but I'm sure he'll get to them as quickly as he can.

Going to look at tackling the bundled token modules next. :)

[Blacky]

Nice :)

However your Mac optimizer seems to be taking life a little on the slow side. I just did a pass on Core,3.5,4&PFRPG with ScriptPNG and I got a 3.5MB saved (lossless re-compression, we could gain more with some PNG indexed colors fine tuning but that's a lot more work). Not counting 5E & Numenera.

I didn't check the results visually nor did a second pass, but if you wish I can FTP the optimized image for you to include in the next release. But I'll need the cartoons from 5E, and remember where I can find Numenera :) I can easily do the default modules too (the default tokens are a big candidates to optimization), I don't have SW store non default modules.

[Blacky]

Did a pass on the Animals, Characters, Monsters (& Pogs) default token modules. 2.4MB saved.

[Zeus]

I only did a single pass. Here's the file sizes I got them reduced to:

CoreRPG.pak 9.2MB
3.5E.pak 511KB
4E.pak 4.8MB
5E.pak 5.5MB
Numenera.pak 1.7MB

Animals.mod 316KB
AnimalPogs.mod 828KB
Characters.mod 1.2MB
CharacterPogs.mod 2.1MB
Monsters.mod 3.2MB
MonsterPogs.mod 3.9MB

If you can improve the file size even further without comprising quality, I say go for it. For access to the upload site and the modules/rulesets, PM Doug/moon_wizard as I can't forward on content like the Numenera ruleset without getting into trouble.

[Blacky]

Watch out when comparing zipped files, it might reduce differences but do nothing when unzipped files are transmitted to players.

I did an overall pass, put it on a ftp, I'll send you the link :)

[Trenloe]

I can't forward on content like the Numenera ruleset without getting into trouble.
Numenera.pak is available through the update "test" slot.

[Zeus]

Numenera.pak is available through the update "test" slot.

I thought Numenera was setup at the moment like 5E i.e. its available via Test but by invite only. Didn't think it was available for public testing, yet.

[Trenloe]

I thought Numenera was setup at the moment like 5E i.e. its available via Test but by invite only. Didn't think it was available for public testing, yet.
I think it is just in the test slot for all to mess around with - I see Numenara in test when I do an update. Unless I've been given specific access to it without asking. :)

[Blacky]

No I had it too, but it's not there in the production channel.

[Blacky]

Did a pass on Numenera, 298KB saved. Graphics are uploaded for Zeus.

[Zeus]

Thanks Blacky, I've uploaded them to Smiteworks for JPG to take a look at.

[ddavison]

Thanks Blacky, Zeus, and Trenloe.

I staged the rulesets for now but haven't flipped them live yet. The token images should all be updated to use the smaller file sizes. Good work.

-Doug

[Moon Wizard]

Numenera is available for all, but only in the Test slot.

Blacky, I added 5E to your ID. Just enter your login in the updater, and it should download. If you get me the optimized graphics, I will put them. Thanks for the legwork.

Also, the token files were updated already.

Regards,
JPG

[Zeus]

I did a single pass optimisation on 5E along with all the CoreRPG compatible rulesets, they are on the FTP server. Blacky maybe able to get better results with a 2 pass run.

[Moon Wizard]

Zeus, I already got the ones off your FTP folder, and put them in my workflow. Planning to push with some other v3.0.3 updates soon.

Thanks,
JPG

[Blacky]

I just had an hardware meltdown, needed to change some disk and had to reinstall everything. I should be able to give JPG the 5E optimized graphics soon, tonight or tomorrow.

[Zeus]

Cool. I'll upload as soon as you pass it over.

JPG bundled the other optimised .paks into the latest v3.0.3 test slot. The 5E.pak included is the single pass version I did (5.5Mb).

[Moon Wizard]

Yeah, they are in the Test channel now. The only issue I found was the white button graphics with transparent backgrounds got turned all white. (i.e. white plus and white minus for expand/collapse buttons).

Cheers,
JPG

[Blacky]

Did my thing, the previous optimization was pretty good, couldn't shave a lot off it.

It's uploading now, I'll send the link to JPG when it's done.

Note: messing with the alpha channel (transparency) shouldn't happen. Bugs or Murphy can always happen, but that's pretty rare.

[Blacky]

On another topic, lossless re-compression & optimization is great. But it's also possible to go really further with lossy optimization.

Take these images. One is the ScriptPNG lossless optimized version, the other was ScriptPNG compressed using the lossy 8bits+Alpha. One is 624KB, the other is 190KB!

Some anal people like me might detect the difference, but honestly even for those rare people, is it worth the huge ×3.28 in weight?

https://www.fantasygrounds.com/forums/attachment.php?attachmentid=6296&stc=1&d=1395486279
https://www.fantasygrounds.com/forums/attachment.php?attachmentid=6295&stc=1&d=1395486261

PS: do note that ScriptPNG seems very good. Just doing a Photoshop 8bits conversion by a layman might not be as good as this.

[Nickademus]

The second looks like a photo that was left out in the sun for a while to fade. But I used to be a painter so my eyes may be more sensitive to colors.

[damned]

absolutely - side by side the difference is quite obvious. having only one image to look at - neither image would draw complaints.

lets be completely fair about this - if you are using lossy compression why arent you using jpg? only one possible reason and that is the transparency.

jpg 80% 105kb
6301

jpg 60% 71kb
6302

jpg 40% 54kb
6303

https://www.fantasygrounds.com/forums/attachment.php?attachmentid=6301&d=1395533059
https://www.fantasygrounds.com/forums/attachment.php?attachmentid=6302&d=1395533090
https://www.fantasygrounds.com/forums/attachment.php?attachmentid=6303&d=1395533114

[ddavison]

Here is a link to even more image compression tools for both Windows PC and Mac.

https://www.creativebloq.com/netmag/best-image-compression-tools-1135828

[RobboNJ69]

After having some issues with some of the suggested software in earlier messages, I found https://tinypng.com/ TinyPNG.com is amazing!

I'm seeing an average of 64% reduction in size, with transparencies on tokens. The site does JPG's and PNG's. Batch Process, Drag n Drop up to 20 at a time.

[Blacky]

There's FileOptimizer (https://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer), it does the work much more easily than the original software I talked about, and optimize a lot of filetype.

[dberkompas]

I like GraphicsMagick for conversion, resizing, etc.

[Blacky]

I'm note sure GraphicsMagick does lossless image optimization.

[jajen2003]

Just a note: When using Photoshop, you can optimize for JPEGs or PNGs if you use the Export feature.

It will open a new dialogue window and allow you to optimize your file for export. :D

File>Export>Export As

[Blacky]

Sorry but that's not optimization. Do that, especially with a transparent PNG, check the file size, then put that image through FileOptimizer (set to max optimization) and check again. You'll see a seriously shrunk file size.

[mostcallmetim]

There's FileOptimizer (https://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer), it does the work much more easily than the original software I talked about, and optimize a lot of filetype.

Thanks so much, this is amazing. I couldn't get ScriptPNG to work because the original link takes you to a program called Pongo.exe. The FileOptimizer you mentioned works great!