Image (.PNG) Sharpness

HelpXplain is the exciting new animated infographics and screencast tool that integrates with Help+Manual.

Moderators: Alexander Halser, Tim Green

Post Reply
alanmcd
Posts: 100
Joined: Thu Jan 06, 2005 3:02 pm

Image (.PNG) Sharpness

Unread post by alanmcd »

I have tried several different settings, all trying to match the image size when recorded to the image size when played.
But I get some. if not all, images int eh slide set appearing less than optimally sharp.
When I play the screencats in HelpXplain they appear sharp but not when compiled into either CHM or Webhelp
Sometimes adding the Play Button makes the first image sharp but subsequent images are blurry.

Here's are a few examples:
http://www.meta.com.au/apphelp/pcc/inde ... nversi.htm
http://www.meta.com.au/apphelp/pcc/inde ... -sales.htm
http://www.meta.com.au/apphelp/pcc/inde ... rkflow.htm

Can you assist with what I can try to make them all clearer?
Alan
alanmcd
Posts: 100
Joined: Thu Jan 06, 2005 3:02 pm

Re: Image (.PNG) Sharpness

Unread post by alanmcd »

Actually the CHM output is quite sharp (other than the one which is set to 100% which varies in clarity - to be expected).
So it's surprising that the CHM fixed size is sharp and the Webhelp output is blurry
Alan
User avatar
Alexander Halser
EC-Software Support
Posts: 4098
Joined: Mon Jun 24, 2002 7:24 pm
Location: Salzburg, Austria
Contact:

Re: Image (.PNG) Sharpness

Unread post by Alexander Halser »

Different browser perhaps?
Untitled.png
You do not have the required permissions to view the files attached to this post.
Alexander Halser
Senior Software Architect, EC Software GmbH
alanmcd
Posts: 100
Joined: Thu Jan 06, 2005 3:02 pm

Re: Image (.PNG) Sharpness

Unread post by alanmcd »

hmm, yes - you're right. Do we know why? I've never had the impression before that Chrome was poor in this regard but I can see that Edge is sharper. IE is sharper as well.
Alan
User avatar
Alexander Halser
EC-Software Support
Posts: 4098
Joined: Mon Jun 24, 2002 7:24 pm
Location: Salzburg, Austria
Contact:

Re: Image (.PNG) Sharpness

Unread post by Alexander Halser »

We are going to check if this can be improved for Chrome. But the effects will be very limited. The reason is that Chrome renders sub-pixels, whereas Firefox and Edge/IE round the pixels to integer numbers, then render it. Most Xplains will be displayed either in a lightbox or in a responsive iFrame. In those cases, you always end up with sub-pixel values, it's a floating point math.

If we made sure that all slides and objects are placed on integer positions, it would work in Chrome if...

1) The screencast is displayed inline
2) The screencast iFrame has a fixed size (not responsive)
3) No slide has been resized, scaled or rotated
4) The screencast width and height can be devided by 2 (no sub-pixel center)
5) The customer's system must run on 96 DPI (not scaled for high-res) and Chrome's zoom must be set to 100%

If any of the 5 points above is not true, Chrome will display sub-pixels and possibly render a somewhat blurry image.

Practically speaking, we've got to get used it, because high resolution is the norm already and responsive web pages are paramount.

I did a quick test with your Xplain and manually edited the slide positions to integer values. Looks pretty good on the first sight:
chrome-edge1.png
But this clarity is gone if the browser zooms in, which it does by default on system scaled higher than 96 DPI:
chrome-edge2.png
You do not have the required permissions to view the files attached to this post.
Alexander Halser
Senior Software Architect, EC Software GmbH
Post Reply