Horrible quality when uploading images

I don't understand why the quality of images I upload is so bad in Rise. They look fine in browser, but when I upload (and Rise compresses/crunches them) they get fuzzy, pixly and unprofessional. 

I upload i png, have also tried jpg - with much worse results. Any ideas? Attached an image showing what I see in Rise v. local browser. 

108 Replies
Alyssa Carpenter

Hi, I'm experiencing the same issue again... Has there been any updates to image compression in the last 2 months? I wasn't having this issue before my maternity leave and now that I've been back this week, it seems like it's hit or miss whether my images get compressed again. I haven't been able to pinpoint why exactly. I use _NOPROCESS_ on all my files and the Image Center block exclusively in all my courses and generally favor jpegs.

Alyssa Carpenter

Also, my image files really aren't that big. Maybe 150KB is the biggest, so I don't understand why something so small needs to be compressed anyways. If there could be a way to turn off compression for images of a certain size or smaller, I think that would help a lot of people.

Marion Brozek

HI. I'm having this same issue with screen captures appearing blurry. I use SnagIt to grab screen images. I've saved them as .gif but it still appears blurry. I then prefaced the file name with: _NOPROCESS and still blurry. I then added _NOPROCESS to the end of the file name with no luck. Also, the file sizes are very small.

Any other suggestions?  My course is comprised of many screen images I need to get the best quality I can.

Thanks much, Marion

 

SnickersDruid
Marion Brozek

HI. I'm having this same issue with screen captures appearing blurry. I use SnagIt to grab screen images. I've saved them as .gif but it still appears blurry. I then prefaced the file name with: _NOPROCESS and still blurry. I then added _NOPROCESS to the end of the file name with no luck. Also, the file sizes are very small.

Any other suggestions?  My course is comprised of many screen images I need to get the best quality I can.

Thanks much, Marion

 

In your case (screen images) I would say PNG is the best format, regarding the image quality. If you can, please try out saving your images in PNG format.

Nikki Urquhart

So, I've tried adding "_NOPROCESS_" to the file name but it appears the photo is still compressing when uploaded. I've manipulated image quality in Adobe Photoshop, saved in 6 different formats, everything. Is there something else I can do or should be doing (considering this feed is so old)? Appreciate more insight or being point in the right direction.

Michelle Rakar

Hi, I'm experiencing this issue as well. I've tried the "_NOPROCESS_" trick and haven't seen improvement on my image either. I've tried both .png and .jpg files, but both seem to have the same issue. I'm working in Google Chrome. I've tried viewing it in Firefox and it looks better, but I still am concerned about anyone viewing my lesson in Chrome that will have this image quality drop.

In Rise, the text is so compressed that you're unable to read any of it. I've noticed if you click the image though, the zoomed version will be completely readable and retains the original quality. Is there a way to make the default view in the lesson readable like that?

I've attached both what it looks like in Rise and what the original file that's being uploaded is.

Justin Grenier

Thanks so much for sharing your images, Michelle.  That really helps with the troubleshooting process!

Your original screenshot is 1365 x 819 (1.1 Megapixels).  Since you've labeled your image with _NOPROCESS_, Rise won't try to optimize the weight of the published output by compressing your image, but it will shrink its dimensions to fit the block you've chosen.  In the example of a centered image, that's a maximum of about 960 x 612 in a desktop browser, and much smaller in a mobile browser.

Best Practice: Don't shrink or stretch media in your course.

We'd recommend starting with high-quality images that are already properly sized for your course.  Scaling media up or down in your course can cause blurriness, especially if your images have text.

If images and videos are bigger than your block, they'll automatically be scaled down to fit, which can result in a loss of quality.

Please let us know if you have any other questions!

Michelle Rakar

Thanks for taking a look at that, Justin!

When I tried it without the "_NOPROCESS_" it had the same result, so I'm not sure if that contributed much in this specific situation. But I do appreciate the details here, this was very helpful.

I went ahead and took a screenshot of the full screen and manually cropped it in Rise and the quality did improve. I'll be sure to upload full screen screenshots instead rather than cropping them before uploading them to Rise in the future, since that seems to help.

The text is still a little blurry, but it's at least readable in comparison to how it looked originally, so this will be what I do moving forward. Thanks!

Yannick Schillinger

Hi Articulate team!

I have encountered the same problem and discovered this thread and the workaround (with _NOPROCESS_ in the file name), which works great, so many thanks for this!

However, I still think that this is a problem that should be fixed after all these years, rather than just providing a workaround (which most people will never see – I've been noticing the bad image quality for a while now before finally stumbling upon this thread).

The solution seems straightforward: don't change the compression/format of uploaded PNG images to JPEG (which is for photos and will always perform badly on illustrations, screenshots, etc. which is what PNG is normally used for). So, just keeping the format of the original file would solve the issue, while still allowing Rise to optimise the file size.

Hope to see this fixed soon and wish you all a nice day!

Ashlyn Roberto

Hi Alyssa, I tried this and there was no change in my picture quality. You can see it in the background its squished and blurry. I tried to change it from Image Centered to Image Full Width but it cuts off the top and bottom /: I have tried this both with my PC's built in program Snipping Tool, and an outside screenshot from Screencast-O-Matic. I opened a case as well.