I like pretty things, but visual art is hard and I do more with text content than visual art. So I just skimmed the tutorial's images section. I recommend visiting the section on images for yourself, as I don't follow it very closely.
I'd like to highlight the alt attribute which is how you add descriptive alt text so everyone can tell what's going on.
Here's one plain and simple guide about alt text.
Write alt text for every image as you go!
It's important for whoever creates or adds the image to write the alt text when they add the image, because they'll be best able to provide the necessary information in context.
Apparently SVG tags need some differently marked alt text because there isn't full support for them yet.
When resizing images, to make them scale only include either width or height, and it will scale evenly. It's better to use CSS to set image dimensions, but I don't know how yet, so this is a placeholder paragraph for the moment. Dimension values are all specified in pixels, and so the unit must NOT be included.
Unless your images are photos, or use a lot of text, SVGs seem to be broadly recommended.
SVGs tell the browser how to draw the image, so it scales up perfectly without pixalation.
SVG files need role='img' because of a VoiceOver bug.
But since you're writing alt text as you add images, adding a single addtional attribute won't be a problem for you, right?
I also might check out how to draw moving, scalable graphics, from the same site as the web zine I first recommended.
Duzuk's amazing Mutant Standard Emoji are avaible in a number of formats, including SVGs.
The Mutant Standard are copyleft which AS I UNDERSTAND IT means you can use and modify them for noncommercial purposes, so long as they remain available to others under the same terms.
I'm trying out an SVG file with the lynx emoji: