Difference between revisions of "Image Encoding"
| 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: | ||
|- | |- | ||
| | | | ||
| − | * | + | * 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. |
* <span class="red">Not supported by majority of image editing applications.</span> | * <span class="red">Not supported by majority of image editing applications.</span> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
|} | |} | ||
| 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 |
|---|---|
|
|
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 |
