Difference between revisions of "Image Encoding"

From The Official Visionaire Studio: Adventure Game Engine Wiki
 
(13 intermediate revisions by 2 users not shown)
Line 1: Line 1:
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.
+
Visionaire requires images in '''PNG''' or '''WebP''' file format. For the best optimization, we recommend using WebP due to the better compression and overall smaller file-sizes, which range from about 10-75% reduction depending on the export settings used.
  
The only downside to .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.
+
Please note that some image editing applications still lack support for the WebP format, so you might have to use a converter tool and keep your original image files handy. You may always preview WebP images by opening them in your web browser.
 +
 
 +
<span class="red">'''QUICK NOTE:''' Depending on the export settings used for your PNG files, your images might not display correctly in Visionaire Studio. For instance in Adobe Photoshop, the recommended settings are: "Color mode: RGB color > 8 bit" and "Background contents: transparent".</span>
 +
 
 +
 
 +
== File format comparison ==
  
 
{| class="ts"
 
{| class="ts"
 
|-
 
|-
! PNG !! WEBP
+
! PNG !! WebP
 
|-
 
|-
 
|
 
|
* <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 almost every image editing application
 
|
 
|
* <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/lossless options (10-75% difference)
* <span class="green">Great for reducing required hard-drive space requirements for game/project.</span>
+
* Great for reducing 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>
+
* Not supported by all image editing applications
 
|}
 
|}
 +
 +
 +
== Converting images to WebP ==
 +
 +
=== JPG-PNG2WEBP ===
 +
 +
This free batch tool by [https://www.dionous.com/ Dionous Games] was developed specifically for use with Visionaire Studio. It is able to convert your project’s JPG or PNG art to lossless WebP and also edits your .ved file, replacing the old file extensions with ".webp" (note that the replacement does not work with compressed .veb project files). The batch file makes use of the WebP library provided by Google.
 +
 +
* [https://www.dionous.com/visionaire-guide/#optimizations Download JPG-PNG2WEBP] <small>(from Dionous Games)</small>
 +
* [https://developers.google.com/speed/webp/download Download cwebp.exe] <small>(from Google)</small>
 +
 +
 +
=== XnConvert ===
 +
 +
The [http://www.xnview.com/en/xnconvert/ XnConvert] application by XnView is a batch image processor/converter, that comes with loads of macro actions and 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.
 +
 +
# Open up XnConvert.
 +
# Drag in a folder, multiple files or a single file into the '''input''' tab.
 +
# Change to the '''output''' tab.
 +
# Set '''output''' to '''source folder'''.
 +
# Set '''filename''' as '''{Filename}''' and '''case''' to '''no change'''.
 +
# Set '''format''' to '''WEBP - WebP''' then click '''settings''' button...
 +
# Click on '''lossless''' radio button.
 +
# Set '''Compression method''' to '''6'''.
 +
# Leave rest of settings as they are and click '''ok'''.
 +
# Now press the '''convert''' button, sit back and relax for a second.
 +
# Rinse and repeat with any other files you need to convert.
 +
 +
 +
XnConvert remembers your last used settings each time you open it up, so you only need to do steps 3 to 9 the first time you use the program.
 +
 +
<span class="red">'''IMPORTANT:''' XnConvert is free for private and educational use only. The purchase of a license is required for commercial use.</span>
 +
 +
 +
{| class="ts"
 +
|-
 +
| [[File:image_conversion_0.png|140px]] [[File:image_conversion_4.png|140px]] [[File:image_conversion_1.png|140px]] [[File:image_conversion_2.png|140px]] [[File:image_conversion_3.png|140px]] [[File:image_conversion_5.png|140px]]
 +
|}{{toc}}

Latest revision as of 15:49, 27 January 2024

Visionaire requires images in PNG or WebP file format. For the best optimization, we recommend using WebP due to the better compression and overall smaller file-sizes, which range from about 10-75% reduction depending on the export settings used.

Please note that some image editing applications still lack support for the WebP format, so you might have to use a converter tool and keep your original image files handy. You may always preview WebP images by opening them in your web browser.

QUICK NOTE: Depending on the export settings used for your PNG files, your images might not display correctly in Visionaire Studio. For instance in Adobe Photoshop, the recommended settings are: "Color mode: RGB color > 8 bit" and "Background contents: transparent".


File format comparison

PNG WebP
  • Supports transparency using alpha channels/masks
  • Lossless image format
  • Decent compression
  • Can be edited in almost every image editing application
  • Supports transparency using alpha channels/masks
  • Multiple image export formats options (lossy/lossless)
  • Great compression (compared to PNG) for lossy/lossless options (10-75% difference)
  • Great for reducing hard-drive space requirements for game/project
  • Great for optimizing loading time of images/animations
  • Not supported by all image editing applications


Converting images to WebP

JPG-PNG2WEBP

This free batch tool by Dionous Games was developed specifically for use with Visionaire Studio. It is able to convert your project’s JPG or PNG art to lossless WebP and also edits your .ved file, replacing the old file extensions with ".webp" (note that the replacement does not work with compressed .veb project files). The batch file makes use of the WebP library provided by Google.


XnConvert

The XnConvert application by XnView is a batch image processor/converter, that comes with loads of macro actions and 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.

  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} and case to no change.
  6. Set format to WEBP - WebP then click settings button...
  7. Click on lossless radio button.
  8. Set Compression method to 6.
  9. Leave rest of settings as they are and click ok.
  10. Now press the convert button, sit back and relax for a second.
  11. Rinse and repeat with any other files you need to convert.


XnConvert remembers your last used settings each time you open it up, so you only need to do steps 3 to 9 the first time you use the program.

IMPORTANT: XnConvert is free for private and educational use only. The purchase of a license is required for commercial use.


Image conversion 0.png Image conversion 4.png Image conversion 1.png Image conversion 2.png Image conversion 3.png Image conversion 5.png