Highlighted

Why does this image look sharper in flash than HTML5?

Participant ,
May 31, 2018

Copy link to clipboard

Copied

Hi I'm trying to help a colleague with a project.

It's been built in Captivate 2017 and have been previewing it in flash as well has HTML5, although it will be published to HTML5. They've noticed that some of the images in HTML5 preview look either fuzzy or less sharp then the same images in flash. I find this really weird as in the past I've usually found projects look sharper in HTML5 than when published in flash.

I thought it was something unique to cap 2017 as I've been using version 9 up until recently. But I tested it in version 9 and cap the same thing. I've attached both pictures so you can see the difference - you can see it on the detail of the people and also on the button on the left. It's jagged in the HTML5 version but sharp in flash.

It's not been set up in the ideal way. The image of the two people for example is actually  approx 2000 x 2000 px but has been scaled down in Captivate to 300 x 300. Usually I'd import any images at the same res they're going to be in the project, however it's a colleague who has set this up.

I did try exporting the image, resizing it and bring it back in at 300 x 300 but it then looked like the HTML5 image in both previews. I also tried publishing them to see if it was preview being weird but got the same results.

Is it down to the way HTML5 and Flash files handle images/are rendered? If so what's the difference that has ended up with it looking sharper in flash?

Views

176

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Why does this image look sharper in flash than HTML5?

Participant ,
May 31, 2018

Copy link to clipboard

Copied

Hi I'm trying to help a colleague with a project.

It's been built in Captivate 2017 and have been previewing it in flash as well has HTML5, although it will be published to HTML5. They've noticed that some of the images in HTML5 preview look either fuzzy or less sharp then the same images in flash. I find this really weird as in the past I've usually found projects look sharper in HTML5 than when published in flash.

I thought it was something unique to cap 2017 as I've been using version 9 up until recently. But I tested it in version 9 and cap the same thing. I've attached both pictures so you can see the difference - you can see it on the detail of the people and also on the button on the left. It's jagged in the HTML5 version but sharp in flash.

It's not been set up in the ideal way. The image of the two people for example is actually  approx 2000 x 2000 px but has been scaled down in Captivate to 300 x 300. Usually I'd import any images at the same res they're going to be in the project, however it's a colleague who has set this up.

I did try exporting the image, resizing it and bring it back in at 300 x 300 but it then looked like the HTML5 image in both previews. I also tried publishing them to see if it was preview being weird but got the same results.

Is it down to the way HTML5 and Flash files handle images/are rendered? If so what's the difference that has ended up with it looking sharper in flash?

Views

177

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Participant ,
May 31, 2018

Copy link to clipboard

Copied

HTML5:

Html5.png

Flash:

Flash.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Most Valuable Participant ,
May 31, 2018

Copy link to clipboard

Copied

Those image look to be perfect for a vector-based image, a SVG. Did you try those?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Participant ,
Jun 01, 2018

Copy link to clipboard

Copied

Yeah, they're aware of SVGs but both of these are PNGs. SVG would of course fix the issue, but it's more about the difference between flash and HTML5.

There's a clear difference between the two and I was trying to find out if anyone knew why?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Most Valuable Participant ,
Jun 01, 2018

Copy link to clipboard

Copied

It may even look different on different browsers! Bitmap images look only very crisp when you view them in the exact size they were created. Once you start changing the display or zoom percentage you lose crispness. Probably SWF was handling that much better, because it was really standardized, which is not (yet) the case for HTML5 supported in many different ways. There may be other causes, hope someone else can add to this reflection.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Participant ,
Jun 01, 2018

Copy link to clipboard

Copied

Ah ok, so flash renders it to a bitmap and I'm assuming HTML5 renders it as a PNG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Most Valuable Participant ,
Jun 01, 2018

Copy link to clipboard

Copied

No, I never told that!  Are you new to graphics? JPEG, GIF, PNG8, PNG24, PNG32 are all bitmap formats. Their difference is in the number of colors possible to show (8-bit =  256 colors) and the possibility to have transparent pixels (only in GIF and PNG24 or PNG32).

For HTML5 JSON is used to render images.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Participant ,
Jun 01, 2018

Copy link to clipboard

Copied

I thought you were referring to the specific BMP file format. Never mind. The bottom line is Flash just handles resizing of images better.

Thanks

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Lilybiri LATEST
Most Valuable Participant ,
Jun 01, 2018

Copy link to clipboard

Copied

Sure, that is a good conclusion.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Captivate User Guide
New Group