Mmmmm the ancient 'don't use images' rule is from the archaic days of dial-up. Chances are even people's smartphones could handle images that measure up to be (excuse the potential pun) byte-size. While I definitely want to encourage us all here to push towards mobile-ready websites, it is possible to set images to only load on screen widths higher than a certain amount with only a bit of css (
check out this article on media queries). That said? We're building sites centered around adoptables. Images. Sometimes large, colorful, animated, or transparent images. Heaven forbid all at once, but... you get the idea. We're, by our very nature, an image-heavy existence.
If you're already going to have icecream, what's some chocolate drizzled on top really going to do? In fact, if you walk into a restaurant and ordered icecream for dessert, you might even expect that kind of service, whip cream and a cherry, too. Your visitors are already at your door - dazzle them! But with class and finesse, of course. Less is still sometimes more, but as they say about food... people will always attempt to eat a dish that looks well prepared, even if one that isn't beautifully plated actually tastes better. Just make sure your layout/template asset images are
nice and compressed, and the use of images sparingly won't hurt.
As another unique tip on top of queries for the size of the device, you could also use a sprite sheet, sliced up nicely with pure css, so only one image has to load. If you're worried about the ping time that multiple small images could take, just make one big sheet and
read up on the technique, or use a helpful tool (
like this one). Seriously, it's worth looking into! Then all you're doing is positioning a div (or other page element, like a span, or
some have suggested to even use italic tags with nothing inside - they think they're being cute, now the i tag sort of stands for icon *laugh*), and equipping it with a class name that will pull the exact image from the exact x and y coordinates located on the sheet with, at the exact height and width it's meant to be in.
If you really want to go for the flatter, fast food frozen yogurt in a simple cone look, because there's nothing wrong with giving people just what they need, just make sure it carries over well to every element of your site. Use few colors, simple and precise wording, and try to create the best environment that showcases an atmosphere your adoptables take the focus in. Flat is good. Flat is in. But any plot line or environments to wander in may start to feel more like bulky flavor text, rather than something equally important, so I worry about over-simplifying things while attempting to carry a flatter design over the entire site in a broad, matching sweep.
The best site is probably a hybrid. Neither too flat nor too glamorous, even and well spread. The taste of luxury casino food, the affordability of fast food, but the welcoming friendliness of the local corner diner. Design and food, definitely great comparisons.
Inevitably, I really do trust your judgement! What you have so far is great! <3