Slice and Dice - Slicing large images for mobile friendly design
I've got a dilemma. I've been given several infographics to place into an email. Unfortunately, said images are originally 800px wide and the text in the image must be 12-16px. So when I resize it to fit my 600px body, it's going to get pretty small. Mobile wise, it's going to be illegible. My initial idea would be to slice up the infographic into smaller components, then rearrange the components into a single column for mobile only and use the whole image in desktop view.
In web design I would normally create my two classes - .mobile and .desktop - and hide the one while showing the other, then swap with a media query at the min-width: 320px or whatever. However, this isn't going to work for Gmail since it won't read the media queries. So if I "default" to the show .desktop, it's still going to be illegible for Gmail mobile users.
Has anyone done image slices for different viewpoints in an email before? How have you managed it? Even if you don't do slices, does anyone use two different size photos for headers and swap them out with media queries, or is everyone leaving the images responsive with the width: 100% attribute?
p.s. I REALLY don't want to have to build the infographic components using table cells and CSS. Let's just say the design doesn't lend itself to that very well, and the "client" wants it to look exactly as they created it.