Image color distortion

I am noticing a color change when uploading an image as the first block. I have attached a comparison between the image and what Rise is showing. Image is saved as a JPEG 1920x1080. When I upload other content in that first block then the image, it displays as normal.

14 Replies
Alyssa Gomez

Hi Rory,

Thanks for reaching out, and sorry you're running into this! Did you add a Blocks lesson to your Rise course, and then add an “Image Centered” block as the first block on the page?

Can you tell me what browser you were using when this happened? And if you can share the original .JPEG image with us, that would be helpful, too. 

Bill McKee

Not sure if this comment should go with this discussion of Rory's or the discussion on image quality. I am having a similar issue to Rory where the color green is not coming through when I upload an image to Rise. I have attached the screen shot from both the original and Rise. You will see that the text color is green in the original .png and dark gray or black when it gets to Rise. 

Ashley Terwilliger

Hi Bill,

What lesson or block are you inserting this image into? I added it to a Image Full width (obviously scaled it and showed a pixellated version based on size) but the green stayed. I also added it to a Flashcard and saw the Green remained.

Can you also let me know what browser you're authoring in? I was using Chrome. 

Leslie McKerchie

Hey Bill,

Thanks for sharing what you are seeing as well as the original image that you are working with.

I have a couple of questions:

  • What browser are you working in?
  • What type of block are you adding this image to?

My initial testing does not show the issue you are reporting, but I'd like to take another look using a set-up similar to yours. 

Bill McKee

Ashley/Leslie - I see where the anomaly is now as the image I sent you was only a portion of the entire screen. You are correct that when only this portion of the screen is captured the lettering remains green. Here is what I did in Chrome:

Loaded entire screen shot (file attached): Block type = IMAGE centered  - Green text seen in attached PNG does not appear green when uploaded to block type.

I then took a SnagIt of just that portion of the screen, saved as PNG and uploaded to a similar IMAGE centered block type and the color remains.

Take a look at my example here using the attached two files; one which you already have.

Ashley Terwilliger

Hi Bill,

Thanks for sharing the original image too. I tested it out as well in a few different image blocks and I saw the same thing.

You mentioned using Snagit, is that how you also captured the original image? I'm not seeing the same issue with other image files I've inserted into Rise, including screen shots. 

I'm going to share it with my team to have a few more eyes on testing, so I'll be in touch as soon as I can! 

Bill McKee

Ashley - Yes, I captured both images with SnagIt. The text color appears to be related to the amount of the screen that is captured as you can see from my updated example. I took screen shots capturing a larger portion of the screen each time. The more screen you see the harder it is to make out the text color. 

Ashley Terwilliger

Thanks, Bill. 

I did try zooming in on your images, and the larger ones look more grey than green, so I do think it's changing the color somehow. I shared this with my team as a possible bug, so I'll keep you posted here. 

I'd be interested to know if it happens with any other screen capture tools too. Do you have any others to test with? I use Droplr a lot, or on my Mac keyboard CMD + Shift +4 brings up some crosshairs to capture an area. 

Bill McKee

Ashley,

I used a windows tool called Snipping Tool and had the same results. I then tried a variety of options; creating text on a PPT slide, filing it as a PNG and uploading it to a Rise image block; capturing that same slide with SnagIt filing the SnagIt file as a PNG and uploading that to a Rise image block; I even creating an HTML page with the same font type and color and capturing it as a PNG and uploading it to a Rise image block. They came out fine. My results are here.

Ashley Terwilliger

Hi Bill,

Thanks for those additional examples. 

It seems that SnagIt works whereas Snipping Tool did not? Could you look at using the SnagIt tool, while I let my team know about the difference in behavior? The only ones I noted where the color didn't appear correctly was the Screen recording versions. 

Bill McKee

Ashley - I really don't use the Window's "Snipping Tool" often, if at all, so I will stick with SnagIt. But the results were the same with both tools and from what I can tell the issue appears to be more of how much of the screen is captured vs. the tool. In my example of the web page in question, if I capture a smaller portion of the screen say 900 pixels X 600 pixels the color seems to be fine but as I captured more of the screen, say 1400 x 800 the color seems to degrade. The fact that it is hard to duplicate makes me wonder if it is a combination of the size, color and type of font used when captured at a particular browser size. Not a show stopper, so I am "pressing on" - Thanks again for looking into this.

Ashley Terwilliger

Thanks, Bill. I didn't see any sizes indicated on your SnagIt images linked in that Rise course, but it did seem the majority of them captured the color, so I apologize if I overlooked the others. 

I'll keep you posted here if my team determines any other info that would be helpful, but I'm happy you have a way to press on till then.