Question: I'm in the process of creating a web app. I have many randomly-generated non-player characters in a database. I can pull a lot of information about them - their height, weight, down to eye color, hair color, and hair style.

For this, I am solely interested in generating a graphical representation of the face. Currently the information is displayed with text in the nicest way possible, but I believe it's worth generating these faces for a more... human experience.

Problem is, I don't know where to start. Were it 2007, I'd naturally think to myself that using Flash would be the best choice. I'd love to see "breathing" simulated. However, since Flash is on its way out, I'm not sure of a solid solution.

With a previous game, I simply used layered .PNGs to represent various aspects of the player's body: their armor, the face, the skin color. However, these solutions weren't very dynamic and felt very amateur. I can't go deep into this project feeling like that's an inferior way to present these faces, and I'm certain there's a better way.

Can anyone give some suggestion on how to pull this off well?

Answer: 
Have you ever seen old movies where they use an Identikit (little strips of transparent plastic beside each other) to reconstruct a perpetrator's face? Basically, that's what you want to do. Image files with transparency for pre-defined slices of a face, plus one or two for the actual head and face shape, another one for the hair style.

Since you're in 2D, you'd need a separate image for every facial feature for every angle it can be viewed from (e.g. front, left, right, back ...). Then you draw them on top of each other, and maybe cache the pre-rendered head (e.g. in another image file, or as a data: URL or whatever) so you don't have to draw it over and over again.

This works similarly for the body, just that you need separate sets of slices for arms, legs and the parts of the torso, so you can rotate arms (think of how South Park looks, or how an action figure is made for inspiration on how you do the individual parts - take apart a G.I. Joe figure for instance).

For the various body types, you might be able to get away with just stretching the image sideways. Or rather, what you really want to do is draw your character wider and then horizontally compress the image for the narrower body types, because stretching an image means the computer will double pixels (where it *should* add detail), whereas if you compress it, it will remove pixels (and thus some of the "wider body type" detail, giving the appearance of adding detail to the wider ones if you do it right). If that doesn't look right, you can probably at least draw fewer body types and then make intermediate steps by compressing horizontally.

Of course, you can add shading layers that you'll only draw at certain levels of compression, e.g. a "sagging cheeks" layer at 1.0...0.9, nothing at 0.91...0.5, and "sunken cheeks" shading layer at anything below 0.5 or so, to improve the illusion. Just make sure to apply all of this to the slice when seen straight, *before* you rotate it, or it'll end up stretched/compressed in the wrong direction.

If you have a simple drawing style, you could also just draw the faces as vectors and then multiply the coordinates (or transform the coordinate system with a horizontal scale, I forget if Canvas supports that). This would also make it easier for clothes, because those might have to stretch with the character's body, and you might need special versions that show off a character's muscles (could probably be approximated with optional shading layers again). If you draw these in vectors, you could just straighten out the curves you draw for muscles for skinnier characters, or fill the character shape with a different color/texture.
This is a very good question! Unfortunately I can't suggest anything more than what probably you already know:

1. Prepare 10 faces in Photoshop or Flash or other drawing tool with layers.
2. Put every face element like nose, eyes, eyebrows etc. on a separate layer.
3. Design the faces the way all elements are on same place.
4. Hide all elements except one (or set as a guide layer in Flash)
5. Save as .PNG file and repeat for other elements
6. Put these .PNG files in groups, and generate faces by overlapping random PNGs, one of every type on top of each other.