Responsive or scalable HTML5 image blurriness

Report · Sep 22, 2016

I was hoping to use a responsive project for my upcoming project, but I'm finding that images and screenshots are fuzzy when published. In the image I've posted, you can see that the image I've inserted is clear when viewed in Captivate (left) and that it becomes fuzzy when the published version is viewed in an internet browser window (right). In my publish settings, under Size and Quality, I have JPEG set to 100%. I'm getting the same blurriness when using a scalable HTML5 project.

Has anyone found a solution?

If the fuzziness cannot be corrected, responsive projects and publishing scalable HTML5 files are useless features to me. In past projects where I've used responsive projects, learners complained that they felt like their eye glass prescription was wrong.

Report · Sep 22, 2016

You've discovered just one of a number of disadvantages to using Responsive output.

Images always appear at their best when NOT resized or rescaled in any way. However, responsive projects are intended to display the same content at drastically different resolutions by using breakpoints. If you just use the same image for all breakpoints, the result is what you show above. It will only look good when one of those breakpoints is displaying the image at exactly 100%.

In order to have any chance of keeping the sharpness in your images with Responsive projects you would need to have a differently sized version of each image in your project for each breakpoint. So if you are using Captivate 9, you would need 5 different versions of each image. Each image version would be resized in PhotoShop or some other similar editing tool so that it is as crisp and sharp as possible at the specific size required for a given breakpoint.

Report · Sep 22, 2016

To add to Rod's comment, moreover in between the breakpoint views the images will be resized if they are set up in %, which means always decrease in quality. The only other recommendation I could offer is to try to use SVG images whenever possible to replace bitmap images. Those characters in the Assets are bitmap images.

Report · Sep 23, 2016

The output I displayed in my screen shot was the desktop view, which should be at 100%. I was expecting the desktop view to be crisp and would have accepted fuzzy images on mobile (smaller device).

Report · Sep 23, 2016

I've found that it all has to do with the amount of compression that is already on the jpg. The more it was originally compressed the worse the png will be when Captivate converts the image.

I can crop images straight off my camera and they look great in Captivates output, if I compress that image they will output a poorer quality.

Scaling down is really not an issue, scaling up is.

Report · Sep 23, 2016

Thanks, but this is happening with screenshots saved as a JPEG at 100% quality from Photoshop as well as the Characters pulled from the Captivate/eLearning Bros Assets library. What's interesting is that if I copy these same images into a new non-responsive project and publish, the images are crystal clear. It is only in the responsive project that they are fuzzy.

Report · Sep 23, 2016

I would capture at as high a resolution as possible, we use a 4K monitor.

Captivate may be compressing responsive images than standard projects solely to keep the size down.