I've created a custom map from Adobe Illustrator vector (which has been saved for web in *.png and then converted to GeoTIFF via GDAL; then I've uploaded it to MapBox Studio webapp and created style with resulted tileset).

One problem in the end - tiles colors. For example (resulted .jpg from MapBox - on the left, source .png - one the right):

MapBox colors artefacts

What do I need to do to get better quality of result tiles?

Is there any way to use vector tiles (the source is .ai file)?


This looks to me like the typical color management issue. If one or more of the used applications or (intermediate) data formats used is not aware of color management and ICC color profiles, you can easily end up with shifting colors.

The best thing to do to prevent this as much as possible, is to convert your data to sRGB right in the first step, where you export from Adobe Illustrator. I don't have experience with Illustrator, but in Photoshop this is easy. Don't just assign a sRGB profile, but really convert it to sRGB if the original data is in another color space (e.g. AdobeRGB) to avoid these issues. By converting it, even if something else in the toolchain is not aware of ICC color profiles, the colors will still be encoded close to what most software assumes by default.

sRGB is still the biggest common denominator for this kind of thing and the "average" monitor, and will give you the biggest chance of seeing, exactly or at least approximately depending on whether the monitor is calibrated and the web browser is color managed, the same colors in your final output, as most browsers only relatively recently became color managed and started using color profile information if included in images.

An article like this may be interesting as well for you: http://www.color-management-guide.com/web-browser-color-management.html

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