[dev] Image Guidelines - wrye-bash/wrye-bash GitHub Wiki

When making or contributing images for the project, there are a few guidelines you should follow.

  1. If possible, use SVGs. Make sure the SVGs are square in Inkscape so that they scale properly.

  2. Naming scheme for image files.

  • GOOD: lowercase_with_underscores.png
  • BAD: don't-use-quotes-or-dashes-or-uppercase.PNG

  1. Use *.png(prefer) or *.svg lossless formats wherever possible. *.jpg is a lossy format and should be avoided. If you need animation use AnimationCtrl for *.gif or individual *pngs with a throbber, because wxPython doesn't support *.apng(Animated PNG) yet.

  2. In general the images you make should follow standard sizes:

Ex: 16, 24, 32, 64, 128, 256, 512, 1024, etc...

  1. Place the image size(w, h)or(squaresize) in the name of the image if used for the program. We programmers don't like to check everytime we see an image string in code.
  • GOOD: myimage16.png = (16px x 16px)
  • GOOD: myimage256x32.png = (256px wide x 32px height)
  • BAD: myimage.png = (*huh what size was that again?)
  1. Optimize the images. Very Important For Performance

A good quick program that takes the majority of the guesswork out of all the individual png optimizers commandlines is FileOptimizer. It can be found here: http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer Only Optimize PNGs with it; fair warning! This removes all the useless metadata that image manipulation programs such as Photoshop or GIMP add to the image when saving.

The reduction in file size of the images directly affects performance; Ex: Loading Time/Downloading Time/etc. Most image sets that are optimized range from around 15-35%, 20-25% being average size being saved! This is important for the program when loading these images also, because libpng doesn't consider sRGB valid in newer versions and will throw an very annoying warning everytime one is loaded. Optimizing the images strips the color profile and fixes this warning from popping up also. This would be the same as a new photoshop image set to Don't Color Manage This Document. NOTE: If your photoshop document is set to Working RGB: sRGB IEC61966-2.1(usually the default), this WILL CAUSE a warning with wxPython greater than 2.9.5ish because of libpng. Just don't use it ever for programming stuff. period. simple enough. If you PyEmbed an image with wxPython, it retains all this useless data also, so optimize the pngs before converting to PyEmbedded Images. Otherwise you will be scratching you head trying to figure out where the warnings are coming from.

Also NOTE: don't use FileOptimizer on completely blank(alpha)/null images if you have any; I wreaks them(turns them 1 bit black). Use something like this instead: Using Imagemagick: convert -strip -size 128x128 xc:"rgba(0,0,0,0)" PNG32:blank.png

For SVGs, Inkscape does fine with its builtin optimizer. Just make sure to choose 'Optimized SVG' when you go to export.

  • I'm probably forgetting something... (feel free to refresh my memory here)