Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×

Large JPG Map Image and Loss in Quality

Hi, I was wondering if anyone could offer some advice with the image quality and the jpg maps I have uploaded. I've was able to compress the image outside of Roll20, and reduce the jpg to 4.8-ish MB (4800px x 6400px), and all the text on the large map is still visible and legible. But whenever I upload the image to Roll20, the image quality is severely reduced to the point that the text is almost no longer legible. Does Roll20 compress images even further for their own servers, that would cause this drop in quality. I've gone through and tried to do my due diligence. I've tested this with one of my friends computers, and gone through steps 1-3, for solving technical issues. Using Mozilla, and no extensions, and have cleared my cache. Operating System Windows 10 (64-bit) Screen Resolution 2560 x 1440 Web Browser Firefox 71 Web Browser Size 2560 x 1293 Javascript Enabled Macromedia Flash Version 32.0.-1 Antivirus Software: None except for basic windows antivirus I would appreciate any help that could resolve this issue. Thank you! Best, Adam
1576491223
Ziechael
Forum Champion
Sheet Author
API Scripter
Large images can sometimes take a bit of time to load at full resolution, Roll20 uses a number of versions of an uploaded image to cover various usecases and zoom levels. On initial load you might be getting the thumb version which should &nbsp;then turn into the full resolution version. Make sure you are setting your image to the right size on the page and try altering the zoom level a bit to trigger a reload of the image accordingly. Beyond that, the devs will require a console log to diagnose further potential causes: In Google Chrome Use the keyboard shortcut: Command - Option - J (Mac) or Control -Shift -J (Windows/Linux). If that doesn't work, follow these instructions:&nbsp; <a href="https://developers.google.com/chrome-developer-tools/docs/console#opening_the_console" rel="nofollow">https://developers.google.com/chrome-developer-tools/docs/console#opening_the_console</a> In Mozilla Firefox Use the keyboard shortcut: Control-Shift-K (Command-Option-K on the Mac) If that doesn't work, follow these instructions:&nbsp; <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console" rel="nofollow">https://developer.mozilla.org/en-US/docs/Tools/Web_Console</a>
1576509993

Edited 1576510214
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Just to confirm what Zeichael says, I have some maps that can take a minute or two to completely resolve upon loading.
Okay, thank you for the help. So I might have not described it well enough. I have let it take more than an hour to see if a better resolution would occur but it doesn't update. When I first put the image on the map, it's completely blurry, like it's using a thumbnail image. But after a second or two, it updates with a much better resolution. But that still isn't as good as the image's original resolution. It's still being downgraded in quality, but you only notice it after you start to zoom in on the image in Roll20. Should I just post the console logs in this thread? I'm sorry, I'm a little bit new to how the forums work. Thank you, Ziechael and keithcurtis! I really appreciate your help.
Normal 0 false false false EN-US JA X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin-top:0in; mso-para-margin-right:0in; mso-para-margin-bottom:8.0pt; mso-para-margin-left:0in; line-height:107%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri",sans-serif; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} Okay, so I went through the console logs and will add them below, but I think they might point to a possible problem. It looks like when the image is first pulled onto the screen, a "thumbnail" version is used, but then that is switched out for a "max" version when the image is made larger. Then Roll20 attempts to swap out this image again for the "original" from the amazon aws servers, but fails to do so citing a possible problem with CORS(?). Here are the console logs below to see if my thoughts might be on to anything.
Normal 0 false false false EN-US JA X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin-top:0in; mso-para-margin-right:0in; mso-para-margin-bottom:8.0pt; mso-para-margin-left:0in; line-height:107%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri",sans-serif; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} Graphics: 1 app.js:547:5001 Paths: 0 app.js:547:5197 refershing page listings! app.js:555:26004 Reorder by ZORDER app.js:547:8717 Swapping <a href="https://s3.amazonaws.com/files.d20.io/images/99472405/JCIrhIDHMwblvUqYJbwe_g/thumb.jpg?15764855385" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/99472405/JCIrhIDHMwblvUqYJbwe_g/thumb.jpg?15764855385</a> to <a href="https://s3.amazonaws.com/files.d20.io/images/99472405/JCIrhIDHMwblvUqYJbwe_g/original.jpg?15764855385" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/99472405/JCIrhIDHMwblvUqYJbwe_g/original.jpg?15764855385</a> app.js:546:16665 Executing swap, new source: <a href="https://s3.amazonaws.com/files.d20.io/images/99472405/JCIrhIDHMwblvUqYJbwe_g/original.jpg?15764855385" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/99472405/JCIrhIDHMwblvUqYJbwe_g/original.jpg?15764855385</a> app.js:540:21858 Refresh jukebox List! app.js:563:26813 This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see <a href="https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects" rel="nofollow">https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects</a> for further details and to join the discussion on related tools and features! editor Reorder by ZORDER app.js:547:8717 Error loading graphic, probably due to CORS. Trying once without CORS for <a href="https://s3.amazonaws.com/files.d20.io/images/99472405/JCIrhIDHMwblvUqYJbwe_g/original.jpg?15764855385" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/99472405/JCIrhIDHMwblvUqYJbwe_g/original.jpg?15764855385</a> app.js:541:7670 Could not load image from <a href="https://s3.amazonaws.com/files.d20.io/images/99472405/JCIrhIDHMwblvUqYJbwe_g/original.jpg?15764855385" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/99472405/JCIrhIDHMwblvUqYJbwe_g/original.jpg?15764855385</a> app.js:541:7652
Hi Adam O., I'm sorry to hear that you're having issues with your map. Could you please carefully work through these steps of our guide to&nbsp; Solving Technical Issues ? Step 1: Make sure to use the right browser Please check if these issues persist when using both Chrome&nbsp; and&nbsp; Firefox. Step 2: Ensure that there are no extensions/addons interfering with Roll20 Please disable&nbsp; all&nbsp; add-ons/extensions. Step 3: Clear your cache If none of the above succeeds, please thoroughly work through&nbsp; Step 4 .&nbsp; (Don't forget the complete Console Log!) Thank you!
1576563032
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
I believe Adam went through steps 1-3 per the first post, and step 4 in the latest post. This can probably be escalated.
Hi Adam, Do you notice this problem anywhere else? For instance, if you create a new game and attempt to use the map there, does this still occur? Additionally, just to double check, does this still happen in chrome? Lastly, could you let me know the name of the game so I might take a closer look. Thanks!
1576609194

Edited 1576609227
Hi Drespar, Thank you for looking into this. In order, 1) I created a new game, and attempted to use the map there. The problem still occurs with the exact same console errors and image quality problems as mentioned above. 2)I was able to recreate this in Chrome as well. This error, which I guess was the equivalent to what happened in Firefox showed up in the Chrome console: original.jpg:1 Failed to load resource: the server responded with a status of 403 (Forbidden) 3)The name of the game is: After the End and Before the Beginning. The map used is the one already present on the current page (the jpg file)
Hi&nbsp;Adam O. - Would you mind confirming the name of the page in which this asset is on? Also, is there any way you can send me the asset directly to me so I can use it for testing, please? If so, would you mind either sending it to me in a direct message or via an email to <a href="mailto:Team@Roll20.net" rel="nofollow">Team@Roll20.net</a>? Thank you for your patience and understanding as we work through this.
I have sent a direct message to you with the details, and an email to the Roll20 team that you linked with the file. Thank you for your help!
Hi&nbsp;Adam O. - Since we are handling this now over email, I'm going to go ahead and close this post. Thanks! :)
Hey everyone -&nbsp; Post is being re-opened so Adam O. can share the solution and insight they discovered related to this issue. Thanks Adam! :)
I messed around with the compression, in an attempt to find a good compromise between legibility and filesize, since I thought that perhaps it had to do with further compression done by Roll20 to save space in when this happened I figured out what was happening. I believe the whole time I had been making a mistake when uploading the image. When I uploaded an image, I would never see an upload progress bar for the image, just a white empty bar, and after waiting a bit, I would get frustrated and refresh the page, and when I did the file would be there. I assumed earlier (incorrectly) that the file was already uploaded and that's why I could still use the file. But I think the whole file hadn't finished uploading and it wasn't made clear to me because of the lack of a upload progress bar, and the Roll20 system was using the other (thumbnail, medium, max, and original versions) various image versions that it had created, but never fully finished uploading the original version. So I tried again from the beginning, and found that if I waited the 3 minutes or so it took to upload the 4.8 MB file, and saw confirmation, it finally worked. I apologize because part of this was on my fault in assuming the file wouldn't be there if it didn't upload, and not having the patience to wait to see why it wasn't "finishing" uploading. I just thought it was bugging out when uploading larger files. So it seems like somehow, I was only uploading part of the file, and that's why it couldn't use the "original" version, since I had not let it "fully" upload before refreshing the page. I hope this might help anyone else in case they make the same user error, and thank you Nicholas for working with me to help figure this out.