Popup images loosing quality

[wrleinwe]

Hi all,

I've set up my stylesheet so that the images in my HTML output are displayed as thumbnails (users click on them to view them at full size). All of the images in my project are .png files.

All of the images in my project are loosing a small, but noticeable amount of quality (both when viewing builds, and published versions of the site).

When images aren't displayed as thumbnails, there is no loss in quality. Enlarged thumbnail on the left, full-size image on the right.

flare forums images.png

I suspected that these two settings would affect this behavior, but they don't seem to make a difference.

flare forums images2.PNG

Has anyone run into this before/does anyone know how I can fix this?

Thanks,

Bill

[SteveS]

I'm not sure what you are asking, Bill.

Thumbnails are a reduced resolution image, usually displayed as a smaller image, that is designed to reduce bandwidth and load times for a web page. They should look inferior to a normal image when they are made the same size.

[wrleinwe]

I'm not sure what you are asking, Bill.

Thumbnails are a reduced resolution image, usually displayed as a smaller image, that is designed to reduce bandwidth and load times for a web page. They should look inferior to a normal image when they are made the same size.

Reading this over, I realize how unclear I was. When I compare an enlarged popup image with a full-sized image, there is a notable difference in quality.

If you look at the Showing Images as Thumbnails guide on the madcap site here: https://help.madcapsoftware.com/flare20 ... Output.htm, there's no obvious loss in quality in the example images; when images are enlarged, there isn't any obvious blur.

In my example image of Excel, there is an obvious loss of quality when the same image is set up as a popup. Perhaps I'm lacking some technical knowledge of how popups work, but this behavior doesn't seem right.

[SteveS]

No, I think you are seeing the correct behaviour. When, however, you click the thumbnail it should open the better resolution image.

At least that's my take on thumbnails...

[Psider]

It does seem like the clicked thumbnail is a couple of pixels smaller than your original image (I doubt your users will notice and/or care, but I understand the desire for perfection ).

There is a note that says there is a problem with Mark of the Web enabled, so check if that setting is enable on your target.

The other thing might be to check all the references to img in your stylesheet and make sure there isn't a width or max-width setting (except for the thumbnail size) on any of them - probably easiest to open in a text editor and search for img to find any complex selectors, etc. After that, I'd try removing as much styling as possible to see if that changes the sharpness - I can imagine that having a border might impinge on the full size, but it is a bit of a shot in the dark.

[wrleinwe]

Thanks for all the suggestions, everyone.

Found out that this happens because I am using CSS to add a 1px solid black border to all of the images in the project.

Thanks,

Bill

[smajors]

I've found this also happens if you manually resize the image by clicking and dragging it rather than setting the size in css or within the properties.