Skip to main content
Known Participant
May 31, 2018
Question

Why does this image look sharper in flash than HTML5?

  • May 31, 2018
  • 3 replies
  • 401 views

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?

This topic has been closed for replies.

3 replies

arashmazAuthor
Known Participant
June 1, 2018

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

Lilybiri
Legend
June 1, 2018

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.

arashmazAuthor
Known Participant
June 1, 2018

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

Lilybiri
Legend
May 31, 2018

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

arashmazAuthor
Known Participant
June 1, 2018

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?

Lilybiri
Legend
June 1, 2018

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.

arashmazAuthor
Known Participant
May 31, 2018

HTML5:

Flash: