More clarification on how images are handled seemingly needed for both developers & creatives

[lozandier]

About this Issue

In the readme.md, it seems somewhat vague these aspects of images & Web I'd imagine developers, stakeholders, &

Suggestions to close this issue if you find it valid

I think some of these questions/concerns can be addressed by a more expansive section on images?

• [ ] More categorization of what to do with various types of images not yet address (illustrative, animated, gif)
• [ ] What tools (i.e. svgomg) /(i.e. gulp/grunt/whatever) tasks/ services (imgix) I should be using to lessen the performance hit of the images I need to be implemented on a Web app; does this differ in everyday, development life vs. production (ready to be shown in the real-world potentially by millions of users )
• [ ] Is there a performance budget to be mindful of when considering the implementation of a new image on a particular page; where can they find it?
• [ ] Any special rules of handling images in HTML vs (S)CSS vs JavaScript?
• [ ] What a11y annotations might be considered with the use of images with certain markup / representation requirements?

[dmleong]

SVGO is a good resource for optimizing SVGs, particularly if they are generated via Illustrator files.

Is there a particular reason for using JPGs for images? SVGs and vector images do scale better, particularly on mobile. I also second the guidelines needed for performance. How large of an image are you aiming for? If you have many images per page (or a large background image), will you be doing some sort of lazy loading to boost performance? Background colors to load first prior to the image loading in the event of slow bandwidth?

What are your opinions for background animated gifs? (please no)