Controlling appearance or resized images?

Our client asked us to develop a relatively simple app. On an iPad, it looks like a eight-page magazine. Two white rectangles are iframes that pull in content from different servers. A third party supplies the text for one iframe, but we processed the png images for the other. These are state maps with different regions color coded. Actual height and width are larger than what is first displayed so users can "zoom in" by spreading fingertips. (Yes these are hi-res for Retina.) The original h/w when they first arrive at the page is controlled by CSS that sets it about 90 percent.

On some iPads, this image displays badly at the default for new arrivals. For example, lines that indicate boundaries between counties may have a slight "jagged" appearance. That goes away when the user zooms in, but the client is not happy. So, how do I make the image look good in both its zoomed-in state and the default smaller state?