Hello. I have a couple of webpages that include pictures (max of 5 on a page). I’ve been noticing that these pages take a bit longer to load, and I am wondering if I am including the images in a less favorable way, or if there were any tips that can help with the load times. The images for the app are 400x400, and these were dragged into the project and are painted in a canvas as
g.DrawPicture(PANEL_Exams, 0, 0, g.Width - 10, g.Height - 10)
Any thoughts on how I can improve this?
Well if you’re drawing pictures in a WebCanvas and doing nothing else with it, there are improvements you can do. You could upload your images and serve them with a web server instead of Xojo. Offloading images like this frees up your web app to focus on all of the other things it needs to do.
This can be done easily in Lifeboat by setting up “Static Files” to serve your images. Lifeboat will configure nginx to serve the files, which can even be used to serve normal websites as well.
To use images that are served elsewhere you would use the WebImageViewer control, and not a WebCanvas.
If you are doing other drawing in the WebCanvas you’re kind of stuck.
Thanks Tim. I am trying out the WebImageViewer as this seems to be working better. But I noticed when putting the image in the image viewer, the picture does not look as crisp. See below. The image on the left is the canvas, and the one on the right is the image viewer
Because my images are not the same size as the image viewer, I found from the docs that these need to be converted to a picture and then back again to a web pic. Any way to sharpen this up?
This is the code I got from the docs
Var p As Picture = New Picture(ImageViewer1.Width, ImageViewer1.Height)
p.Graphics.DrawPicture(PANEL_Exams, 0 ,0, me.Width, me.Height, 0, 0, PANEL_Exams.Width, PANEL_Exams.Height)
ImageViewer1.Picture = p // Automatically converts Picture to WebPicture
I think @AlbertoD knows of a CSS / ExecuteJavaScript hack to get WebImageViewer to scale images to fit. You should avoid DrawPicture in the Web framework.
Yes, I think I saw that mentioned in the docs too
You want something like this (same Image on 3 different sized WebImageViewers)?
I used this code in the WebImageViewer Opening event:
Me.Style.Value("background-size") = "cover"
posted by @Ricardo_Cruz here:
Oh this looks great! I will test it out tomorrow. Thanks for sharing!
There is a related Feature Request for making it easier, directly from the Inspector: