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 .
×
Create a free account

Sheet is slow/laggy

1494530460

Edited 1494530470
Havoc
Sheet Author
API Scripter
I have a strange problem. That is my sheet is slow and I don't know why. I'm not a html/css expert. I tried to find some help online and it was something along the lines "don't have big images for scaling" or something. Still my players tell me that it's hard to navigate their sheets when scrolling takes some time or is kinda laggy. Html:&nbsp; <a href="https://pastebin.com/uPqWKkSh" rel="nofollow">https://pastebin.com/uPqWKkSh</a> css: <a href="https://pastebin.com/hahzAK3d" rel="nofollow">https://pastebin.com/hahzAK3d</a>
1494533463
Lithl
Pro
Sheet Author
API Scripter
Havoc said: I tried to find some help online and it was something along the lines "don't have big images for scaling" or something. You've got 3 humongous images: the background used for .sheet-line-behind and .sheet-line-behind3 (1200x34px, 2.1kb), the background for .sheet-image-div (1720x280px, 723.9kb), and the border for .sheet-border-div (1180x1558px, 322.8kb). That's more than a megabyte for people to download when viewing your sheet, just on those three images.
1494584532
Havoc
Sheet Author
API Scripter
Thanks. Removed the border, it was slowing down and lagging the whole sheet. Maybe it was being redrawn every time you scrolled? Too bad, the border was a nice touch to show it as similliar as possible to the paper character sheet.
You could try using a graphics program like Gimp to reduce the quality and size of the pic. You just have to find a happy middle ground.
1495043152
Lithl
Pro
Sheet Author
API Scripter
Yeah, try scaling down the image you're using to around 800-900px wide. Default width of the character sheet dialog gives 832px width to the .charsheet div, plus 10px padding on each side. I just threw the 1720x280 image into GIMP and scaled it down to 800x130, and it shrank from 723.9kb to 189.8kb -- that's nearly a quarter &nbsp;of its previous file size. Dropping the border image to 800x1056 cut the file size in half, and dropping the separator image to 800x23 cut the file size by 30%. They're still large files, but as you can see, you can get huge gains by getting the image sizes closer to what they'll eventually be when displayed to the user. The three original files were 1048.8kb together. The three files I just scaled down are 357.8kb together -- a total reduction to nearly 1/3rd of the original file size.