Best Practices for Embedding Images?

[williare2]

I am the art teacher designing a template for all teachers at my school to use- about 40- 50 teachers will use the template I create.  I have some coding background from a previous career, but would say basically I am a new-to-canvas power user.  As an artist, I worry about creating content that is visually appealing but heavy to load on some of our student devices that will vary considerably.  I have created:

• 2 GIFs   
• 4 images with a grunge- style filter 
• 6 black and white buttons
• approx 10 external link buttons with logos from say Brainpop, etc.
• 1 fancy button with school mascot cartoon and a gradiated fill background.

I started being concerned with three things- alignment, size and load-time.

I am just worried about load time/I can visually see the other problems.  Researching to try to deal with all concerns- I found an article that said to avoid server-side resizing of images.  That made some sense- so I should create the image the size it should appear and then just insert it in Canvas, basically not specifying anything for size in image options and if it defaults to anything I would delete any reference to width or height in the html for that image.  I feel like I am running into some bugs possibly- here is one:

• I specified filesize for my buttons (that I was having trouble aligning vertically and maintaining a consistent size- I use a 2x3 table in one place to space them out) - I set to 385 square and made sure the visual image filled the file consistently.
• I exported my images as standard PNGs with white background from ipad app Assembly.
• I inserted uploaded images to Canvas into a table structure, making sure settings for table row and cells was consistent (to center a block of 3 buttons across one row) .
• If I remove the html code for sizing the image, I think I hit a bug:
  • going back to normal view of RCE- image is huge visually, but even without editing, if you save, it is not- the visual in RCE doesnt match what would show.
  • also selecting Image Options to investigate- the default for size is custom: 4096px for both values. max, maybe? but that seems to just be the defaulted value, not a saved value.  Because when I exit out of the Image Options box - either with the X or the done button- the image still appears huge in the RCE edit screen, but not in the saved page.

NOTE:  I am designing the template for my school and I created a 7-min video logging several issues I was seeing that seemed to hamper me to some extent.  Understandably, I dont see a way to send that as a file to the dev team...guess that would be tough for them to handle.  Let me try to ask the questions here (after searching for like concerns).