1

A site has about 85 detailed illustrations of a neighborhood (two sets in total - one illustration has a white stroke so user can tell its highlighted on hover).

We are trying to determine the best way to serve these illustrations so that we don't lose much quality, keep an engaging experience, yet also be mindful of site performance and speed (only concerned about desktop and tablet).

A few questions:

  1. Should we export the vector file as a PNG or a JPG?
  2. For 85 illustrations (actually, 170 in total) what would be a good target kilobyte size for each illustration to maintain site performance?
  3. Are there any recommended steps we can take in the codebase to increase performance?

I've attached a sample of what the full size illustrations look like. Let me know if you have any advice.enter image description here

2

While this question is a bit on the implementation side, there are obvious usability concerns, so here's the simple answer to all your questions, which solve all the issues at once: use svg images.

This way, you keep vector quality at very low size. You'll need only 85 images, not 170 (since you can use even the simplest CSS on them, including the white border you mention), and they will adapt to any screen size, from mobile to a giant billboard on Times Square should you need it.

There are other advantages, but I really don't want to go deep into the implementation side to keep this just into the usability realm. Besides, I assume the designers and coders that did your site will know about this, it's a really common approach.

0

Should we export the vector file as a PNG or a JPG? -Neither PNG nor JPG you'll have to use SVG images. If the illustrations are done in Adobe Illustrator, it'll be easier for you to extract the SVG. You can also use SVG sprites.

For 85 illustrations (actually, 170 in total) what would be a good target kilobyte size for each illustration to maintain site performance? - I would recommend that you use something like a lazy loading technique. That'll help you improve the performance. You can use this. As far as size of an individual file is concerned, that actually depends on the amount of detailing you have for your illustrations.

Are there any recommended steps we can take in the codebase to increase performance? - Along with using Lazyload technique, you can also explore Optimizing SVGs for Web.

Hope that helps.

Not the answer you're looking for? Browse other questions tagged or ask your own question.