What are retina/high-DPI image considerations?

You send a nicely designed email, open it on your Retina MacBook to check, and everything looks crisp. Then a colleague opens it on their iPhone and the images look soft. That fuzziness comes from a pixel-density mismatch: Retina and high-DPI screens pack two (or more) physical pixels into every CSS pixel. If you serve a 600px-wide image into a 600px space on one of those screens, the device has to stretch 600 physical pixels across 1200 available ones, and that stretch shows.

So The fix is to export your images at twice the display size. If your template has a hero image that sits in a 600px column, export the file at 1200px wide and set the HTML width attribute to 600. The client renders it at 600px display width, but it's drawing from a 1200px source, so it stays sharp. You don't need separate 1x and 2x image variants; every screen, retina or not, will use what it needs and downscale the rest. Downscaling always looks fine.

The tradeoff is file size. A 1200px image can be two to four times heavier than its 600px equivalent, which matters because large message sizes can affect deliverability and slow down load times on mobile data. The answer isn't to skip 2x; it's to compress aggressively. Exporting JPEGs at 60-70% quality and running PNGs through a lossless tool typically gives you a 2x image that's only 20-30% heavier than the original 1x version. For logos and icons, SVG is worth considering because it's resolution-independent and usually tiny.

One web technique that doesn't carry over to email is srcset, which lets browsers pick the right image resolution per device. Email clients don't support it reliably, so the standard approach is to always serve 2x and let the screen decide. If you're using a third-party image host, check that it isn't resizing uploads on ingest, which would undo your 2x export before anyone sees it. You'll also want to set both width and height attributes in your HTML so the layout holds its shape while images load, covered in more detail in the image dimensions guide.

Set a consistent standard for your templates: all images exported at 2x, compressed before upload, width and height HTML attributes set to the 1x display size. If you're not sure whether your current images meet that bar, open your most recent email on a Retina screen and zoom in on any hero or product shot. If it looks soft, start with those files first and work backward.