Image centered: when zoomed, size does nto change but image becomes extremely blurred

We use Image Centered component. An uploaded image looks crisp. When user clicks on it - zooms in - it does not change its size (maybe because the zoomed and the original are of the same size, but moves up a bit, when the course content disappears)  but becomes extremely blurred.

I attach here a fragment of normal image and zoomed -- cannot include the complete image due to privacy. But a fragment gives a good understanding.

We had a lot of quality problems with Image Centered component before, especially when image contains text -- what is the Image settings, that produce the least artifacts when uploading PNG and GIF?

We are about to release a course to a massive audience, so we would very much appreciate fast and robust solution.
Thank you!

5 Replies
Alyssa Gomez

Hi Irina, sorry to hear you're running into some blurriness with your images! 

We don't have specific recommendations for image size in Rise, other than using the highest quality images possible and letting Rise optimize them for web delivery. 

Do you know what the dimensions of the original image are? You can check by right-clicking the image file in Windows and selecting Properties. 

You mentioned that you can't share the image file publicly, but would you mind sending it to us privately here? We'll give it a test in a new Rise course and let you know what we find!

Irina Poloubessov

Dear Alyssa,

Many thanks,
I can't unfortunately send the image to you as it is, due to problems with NDA - our company uses its own NDA, but as I learned the policy of Articulate allows only Articulate's NDA.

Image is index .gif, size 458x771 px.

When I upload it inside the Image Centered component, it is resized to 413x695px.
When I click on Zoom image - I took a screenshot and measured what is the size of the zoomed image - its basically the same! So no zoom occures, 412x695px.

Original image, though uses tiny font, is more crisp.

Please see the boundingboxes (content blurred) for both images - how the image looks inside the Image Center block, and when zoomed.
Thank you very much!

Alyssa Gomez

Thanks, Irina! Based on what you've shared, I'm seeing two reasons for the bluriness:

  1. The original image size is small (458x771) and will be scaled up when imported into Rise. Because the image was scaled up, you won't see much change in size when zooming-in on the image. 
  2. The image file type you're using is .GIF. The color range for .GIF files is narrow, and you'll have a higher quality image if it is saved as a .PNG or .JPG.

Here's what you can do: Did this image originate as a PDF document? If so, use a tool like to convert it to a .JPG or .PNG. Use the largest image dimensions that you can. Then, re-import the image into Rise.