Difference between revisions of "Image Encoding"

From The Official Visionaire Studio: Adventure Game Engine Wiki
Line 2: Line 2:
  
 
The only downside to the .webP format is that you will have to keep your original image files handy as they are not supported by the large majority of image editing applications. Also the only way to preview them outside of Visionaire Studio is by opening them in web browsers such as Chrome or in special applications.
 
The only downside to the .webP format is that you will have to keep your original image files handy as they are not supported by the large majority of image editing applications. Also the only way to preview them outside of Visionaire Studio is by opening them in web browsers such as Chrome or in special applications.
 +
 +
{| class="ts"
 +
|-
 +
| ''Quick note: depending on the settings used for your .png  file in your image/3d application, they might not display correctly in Visionaire Studio. For instance in Adobe Photoshop, the recommended settings are: '''color mode: rgb color > 8 bit''' & '''background contents: transparent'''.''
 +
|}
  
 
{| class="ts"
 
{| class="ts"
Line 8: Line 13:
 
|-
 
|-
 
|
 
|
* <span class="green">Supports transparency using alpha channels/masks.</span>
+
* Supports transparency using alpha channels/masks.
* <span class="green">Lossless image format.</span>
+
* Lossless image format.
* <span class="green">Decent compression.</span>
+
* Decent compression.
* <span class="green">Can be edited in most image editing applications such as photoshop.</span>
+
* Can be edited in most image editing applications such as photoshop.
 
|
 
|
* <span class="green">Supports transparency using alpha channels/masks.</span>
+
* Supports transparency using alpha channels/masks.
* <span class="green">Multiple image export formats options. (lossy/lossless)</span>
+
* Multiple image export formats options. (lossy/lossless)
* <span class="green">Great compression (compared to png) for lossy/hq options. (from 10-80% difference)</span>
+
* Great compression (compared to png) for lossy/hq options. (from 10-80% difference)
* <span class="green">Great for reducing required hard-drive space requirements for game/project.</span>
+
* Great for reducing required hard-drive space requirements for game/project.
* <span class="green">Great for optimizing loading time of images/animations.</span>
+
* Great for optimizing loading time of images/animations.
 
* <span class="red">Not supported by majority of image editing applications.</span>
 
* <span class="red">Not supported by majority of image editing applications.</span>
|}
 
 
{| class="ts"
 
|-
 
| ''Quick note: depending on the settings used for your .png  file in your image/3d application, they might not display correctly in Visionaire Studio. For instance in Adobe Photoshop, the recommended settings are: '''color mode: rgb color > 8 bit''' & '''background contents: transparent'''.''
 
 
|}
 
|}
  
Line 30: Line 30:
  
 
== Converting Images to webP ==
 
== Converting Images to webP ==
 +
1. Open up XnConvert. <br/>
 +
2. Drag in a folder, multiple files or a single file into the '''input''' tab. <br/>
 +
3. Change to the '''output''' tab. <br/>
 +
4. Set '''output''' to '''source folder'''. <br/>
 +
5. Set '''filename''' as '''{Filename}''' & '''case''' to '''no change'''. <br/>
 +
6. Set '''format''' to '''WEBP - WebP''' then click '''settings''' button... <br/>
 +
7. Click '''quality''' & set to '''100''' (best). <br/>
 +
8. Leave rest of settings as they are & click '''ok'''. <br/>
 +
9. Now press the '''convert''' button, sit back & relax for a second. <br/>
 +
10. Rinse & repeat with any other files you need to convert.
 +
 +
{| class="ts"
 +
|-
 +
| [[File:image_encoding_0.png|200px]] [[File:image_encoding_1.png|200px]] [[File:image_encoding_2.png|200px]]
 +
|}
 +
{{toc}}

Revision as of 17:48, 21 December 2014

We recommend using .png image format with Visionaire Studio. We also recommend the .webP image format because it can be lossless/hq at a fraction of the original size (.png), without being able to tell the difference in quality between the 2 file formats.

The only downside to the .webP format is that you will have to keep your original image files handy as they are not supported by the large majority of image editing applications. Also the only way to preview them outside of Visionaire Studio is by opening them in web browsers such as Chrome or in special applications.

Quick note: depending on the settings used for your .png file in your image/3d application, they might not display correctly in Visionaire Studio. For instance in Adobe Photoshop, the recommended settings are: color mode: rgb color > 8 bit & background contents: transparent.
PNG WEBP
  • Supports transparency using alpha channels/masks.
  • Lossless image format.
  • Decent compression.
  • Can be edited in most image editing applications such as photoshop.
  • Supports transparency using alpha channels/masks.
  • Multiple image export formats options. (lossy/lossless)
  • Great compression (compared to png) for lossy/hq options. (from 10-80% difference)
  • Great for reducing required hard-drive space requirements for game/project.
  • Great for optimizing loading time of images/animations.
  • Not supported by majority of image editing applications.

Tools

We recommend using XnConvert by XnView, which is a really awesome freeware batch image processor/converter, that comes with loads of macro actions & support for lots of different image formats including webP. Export/Conversion is fairly quick, whether you drag in an entire folder, multiple files or a single file.

Converting Images to webP

1. Open up XnConvert.
2. Drag in a folder, multiple files or a single file into the input tab.
3. Change to the output tab.
4. Set output to source folder.
5. Set filename as {Filename} & case to no change.
6. Set format to WEBP - WebP then click settings button...
7. Click quality & set to 100 (best).
8. Leave rest of settings as they are & click ok.
9. Now press the convert button, sit back & relax for a second.
10. Rinse & repeat with any other files you need to convert.

200px 200px 200px