Image decoding

Introduction

The player natively supports the following image formats:

• Raster graphics: JPEG, PNG, GIF (limited).
• Vector graphics: SVG.

Other types of images (BMP, BPG, ICO, PBM, TIF, WebP etc.) are not supported by the player and must be converted into the formats above. This is transparently done when importing those images into Elementi / HMD; a manual conversion is required when bypassing the import mechanism, otherwise, the image is not displayed on the screen (a blue x is displayed instead).

Formats

JPEG

JPEG is a commonly used method of lossy compression for digital images, particularly for those images produced by digital photography. The degree of compression can be adjusted, allowing a selectable trade-off between storage size and image quality. JPEG typically achieves 10:1 compression with little perceptible loss in image quality.

JPEG works best on photographs and paintings of realistic scenes with smooth variations of tone and color. JPEG/Exif is also the most common format saved by digital cameras. On the other hand, JPEG may not be as well suited for line drawings and other textual or iconic graphics, where the sharp contrasts between adjacent pixels can cause noticeable artifacts. Such images may be better saved in a lossless graphics format such as PNG.

The term "JPEG" is an acronym for the "Joint Photographic Experts Group", which created the standard. JPEG files usually have a filename extension of .jpg or .jpeg.

Notes

• The HMP supports JPEG images with one (gray-scaled) or three components (YCbCr or RGB).
• Recommended format is YcbCr 4:2:0.

PNG

Portable Network Graphics (PNG) is a raster graphics file format that supports lossless data compression and offers a variety of transparency options. PNG was created as an improved, non-patented (free, open-source) replacement for Graphics Interchange Format (though GIF is itself now patent-free) and can also replace many common uses of TIFF.

PNG is the most used lossless image compression format on the Internet. PNG was designed for transferring images on the Internet, not for professional-quality print graphics, and therefore does not support non-RGB color spaces such as CMYK. PNG is designed to work well in online viewing applications, like web browsers, and can be fully streamed with a progressive display option. PNG is robust, providing both full file integrity checking and simple detection of common transmission errors.

Compared to JPEG, PNG excels when the image has large, uniformly colored areas. Even for photographs – where JPEG is often the choice for final distribution since its compression technique typically yields smaller file sizes – PNG is still well-suited to storing images during the editing process because of its lossless compression. Compared to GIF, the PNG file format supports eight-bit palette-based images (with optional transparency for all palette colors) and 24-bit truecolor (16 million colors) or 48-bit truecolor with and without alpha channel - while GIF supports only 256 colors and a single transparent color.

PNG files nearly always use file extension PNG or png and are assigned MIME media type image/png.

Notes

Here are some notes about using PNG images on the player:

• Compression

  Compression level does not affect the rendering time, except when set to 0 (which disables the deflate algorithm).

  It is strongly discouraged to use 0 as this will produce huge files, that will take longer to render and complicate content publication, while having no benefit at all in terms of visual quality. It may also make the file so large that it exceeds the maximum file size supported by the player (~2MB).

  When importing a PNG file in Elementi and deflate was disabled, the file will be re-compressed automatically with deflate on to save space.

  Usually, setting the compression level to 9 will produce a file with a small size while still being lossless, at the expense of greater compression time (but not rendering time!). Nevertheless, this setting does not necessarily guarantee the best size and other values might be better; if maximum compression is your objective, then use a tool such as pngcrush which will select the best settings.

• Color depth

  The recommended formats (best performance) are:

  • Grayscale: 8 bits per channel -> 8bpp
  • Grayscale with alpha: 8 bits per channel -> 16bpp
  • Truecolor: 8 bits per channel -> 24 bpp
  • Truecolor with alpha: 8 bits per channel -> 32 bpp

  The rendering time difference for the above is negligible if compression has been applied. Choice of color format should be based on your requirements: if you need color, use 24 bpp, if you need only grayscale, use 8bpp.

  Indexed color format is supported as legacy, but not recommended as it is typically not visually lossless and another lossy format such as JPEG would yield better quality for the same size. If your images are black & white, then use the grayscale format, not indexed colors.

  PNG images having the color depth set to 16 bits per channel (not per pixel!) are down-sampled to 8-bit per channel when imported.

• Interlacing

  Interlaced / Adam7 PNG files are supported for legacy purposes. Use of interlacing is strongly discouraged as it decreases compression efficiency (larger file size) and increases rendering time but has no visual quality benefit.

• Gamma correction information

  Gama correction information is ignored by the player, so it is best to leave it out.

• Filter types

  All filter types (e.g., None, Sub, Up, Average, Path, Adaptive) are supported. There is no difference in terms of decoding time due to the prediction in itself; however better prediction produces smaller files and smaller files decode faster. It is recommended to use adaptive filtering to let the compressor choose the best setting.

GIF

GIF (Graphics Interchange Format) is most suitable for storing graphics with few colors (up to 256 colors), such as simple diagrams, shapes, logos, and cartoon style images, as it uses LZW lossless compression, which is more effective when large areas have a single color, and less effective for photographic or dithered images. Due to its animation capabilities, it is still widely used to provide image animation effects, despite its low compression ratio compared to modern video formats.

Notes

Even though the player is capable of decoding GIF images, this format is not recommended due to its limited usage.

• Elementi automatically converts non-animated GIF images to PNG format upon file import, but allows animated GIF images.
• The player's Content creation tool rejects all GIF images.
• Fusion allows all GIF images, but the support is only partial.

SVG

Scalable Vector Graphics (SVG) is an open standard created and developed by the World Wide Web Consortium to address the need for a versatile, scriptable and all-purpose vector format for the web and otherwise. It is an XML-based vector image format for two-dimensional graphics, with support for interactivity and animation.

SVG images and their behaviors are defined in XML text files; this means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, but are more often created with drawing software, such as Inkscape, Adobe Illustrator, CorelDRAW etc.

Notes

• SVG images can only be used within projects created with Elementi / HMD .
• The player's Content creation tool rejects any stand-alone SVG image.

Special cases

Large images

It's very common nowadays to find (very) large images - most photo cameras / smart phones are well capable of generating images larger than 1920 x 1080 pixels - but is it good to use these large images as they are?

The short answer is NO, because the player maximum resolution is 1080p, therefore anything above that will just be a waste of the player's resources. Solutions?

• It's always better to have them downsized using a specialized tool (like GIMP, Photoshop etc.) which will output the best quality results.
• If that's not possible, know that these kind of images are automatically downsized upon import into Elementi, or upload on the player's Content creation tool, to fit the screen area entirely.
• Note that in case of multiscreen content, Elementi 2015 or later will not downsize the image, but create a multiscreen image that is used to display the imported image at its full resolution on multiple screens.

If such a large image gets on the player, then the player will try to downsize it on-the-fly upon rendering, but that should be avoided (see why below).

Multiple images

Another case to consider is when many images are displayed in the same time on the screen. As described above, large images are downsized, but only to fit the screen area entirely - which is good if the image is used as background or within a playlist, but what happens when multiple images are displayed in a row within the same scene? Well, the player will have to downsize those images on-the-fly upon rendering, which is not recommended (see why below).

The good way is to reduce the size of those images before using them, in order to reduce the memory consumption.

• For instance, if you want to display 10 images in a row on a player set to 1080p (1920x1080), then the images should be resized so that the width is not larger than 192 pixels.

Image downsizing

If the player needs to render a certain image at a lower size than the original, then it will downsize that image on-the-fly. However, this is not recommended because of quality and performance reasons:

• The quality of the resulted image isn't as good as when a specialized tool is used for resizing - the HMP will simply divide by two the image's dimensions, while applications like GIMP, Photoshop etc. are using optimized algorithms for this operation, thus with better quality as result.
• The performance of the HMP is affected because the HMP has to allocate memory for the entire image to decode it and then it will downscale it. For instance, the player will use 4.8 MB of memory for an 1920x1280 image without transparency (and double otherwise), while on the screen the image might actually be displayed as 192x128 pixels (reduced 10 times!) thus wasting the player's resources.
• If the image is less than 11184810 pixels for JPEG and 4194304 pixels for PNG & GIF, the player should discard the image and show a blue x instead, but not reboot. If the image is larger, the player will probably reboot and end up in Safe mode,

Troubleshooting

• A blue x is displayed instead of the image.

  This happens when the image is outside the player specifications - usually because the image is coming from an external source (as it might be the case with data-driven widgets) and thus it didn't go through Elementi's import mechanism.

• JPEG image is not display and this warning message: Cannot decode JPEG resource (only 1 or 3 components supported) can be found in the player.log.

  This happens when a JPEG image using a 4-component color space (like YCCK) is used - in such cases, the image is not displayed on the screen. Elementi normally converts such images into the correct format, but otherwise, a manual conversion is required.